feat(web): better UX when creating a new album (#8270)

* feat(web): ask user before going to newly created album

* feat(web): add button option to notification cards

* feat(web): allow html messages in notification cards

* show album -> view album

* remove 'link' action from notifications

* remove unused type

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -5,6 +5,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import AlbumListItem from '../asset-viewer/album-list-item.svelte';
   import BaseModal from './base-modal.svelte';
+  import { normalizeSearchString } from '$lib/utils/string-utils';
 
   let albums: AlbumResponseDto[] = [];
   let recentAlbums: AlbumResponseDto[] = [];
@@ -30,7 +31,7 @@
     filteredAlbums =
       search.length > 0 && albums.length > 0
         ? albums.filter((album) => {
-            return album.albumName.toLowerCase().includes(search.toLowerCase());
+            return normalizeSearchString(album.albumName).includes(normalizeSearchString(search));
           })
         : albums;
   }
@@ -84,7 +85,7 @@
             <Icon path={mdiPlus} size="30" />
           </div>
           <p class="">
-            New {shared ? 'Shared ' : ''}Album {#if search.length > 0}<b>{search}</b>{/if}
+            New Album {#if search.length > 0}<b>{search}</b>{/if}
           </p>
         </button>
         {#if filteredAlbums.length > 0}

web/src/lib/components/shared-components/notification/notification-card.svelte

@@ -12,6 +12,7 @@
   export let notification: Notification;
 
   $: icon = notification.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline;
+  $: hoverStyle = notification.action.type === 'discard' ? 'hover:cursor-pointer' : '';
 
   const backgroundColor: Record<NotificationType, string> = {
     [NotificationType.Info]: '#E0E2F0',
@@ -31,6 +32,12 @@
     [NotificationType.Warning]: '#D08613',
   };
 
+  const buttonStyle: Record<NotificationType, string> = {
+    [NotificationType.Info]: 'text-white bg-immich-primary hover:bg-immich-primary/75',
+    [NotificationType.Error]: 'text-white bg-immich-error hover:bg-immich-error/75',
+    [NotificationType.Warning]: 'text-white bg-immich-warning hover:bg-immich-warning/75',
+  };
+
   onMount(() => {
     const timeoutId = setTimeout(discard, notification.timeout);
     return () => clearTimeout(timeoutId);
@@ -41,11 +48,16 @@
   };
 
   const handleClick = () => {
-    const action = notification.action;
-    if (action.type === 'discard') {
+    if (notification.action.type === 'discard') {
       discard();
-    } else if (action.type == 'link') {
-      window.open(action.target);
+    }
+  };
+
+  const handleButtonClick = () => {
+    const button = notification.button;
+    if (button) {
+      discard();
+      return notification.button?.onClick();
     }
   };
 </script>
@@ -55,7 +67,7 @@
   transition:fade={{ duration: 250 }}
   style:background-color={backgroundColor[notification.type]}
   style:border-color={borderColor[notification.type]}
-  class="border z-[999999] mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md hover:cursor-pointer"
+  class="border z-[999999] mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md {hoverStyle}"
   on:click={handleClick}
   on:keydown={handleClick}
 >
@@ -72,6 +84,22 @@
   </div>
 
   <p class="whitespace-pre-wrap pl-[28px] pr-[16px] text-sm" data-testid="message">
-    {notification.message}
+    {#if notification.html}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html notification.message}
+    {:else}
+      {notification.message}
+    {/if}
   </p>
+
+  {#if notification.button}
+    <p class="pl-[28px] mt-2.5 text-sm">
+      <button
+        class="{buttonStyle[notification.type]} rounded px-3 pt-1.5 pb-1 transition-all duration-200"
+        on:click={handleButtonClick}
+      >
+        {notification.button.text}
+      </button>
+    </p>
+  {/if}
 </div>

web/src/lib/components/shared-components/notification/notification.ts

@@ -6,20 +6,31 @@ export enum NotificationType {
   Warning = 'Warning',
 }
 
+export type NotificationButton = {
+  text: string;
+  onClick: () => unknown;
+};
+
 export type Notification = {
   id: number;
   type: NotificationType;
   message: string;
+  /**
+   * Allow HTML to be inserted within the message. Make sure to verify/encode
+   * variables that may be interpoalted into 'message'
+   */
+  html?: boolean;
   /** The action to take when the notification is clicked */
   action: NotificationAction;
+  button?: NotificationButton;
   /** Timeout in miliseconds */
   timeout: number;
 };
 
 type DiscardAction = { type: 'discard' };
 type NoopAction = { type: 'noop' };
-type LinkAction = { type: 'link'; target: string };
-export type NotificationAction = DiscardAction | NoopAction | LinkAction;
+
+export type NotificationAction = DiscardAction | NoopAction;
 
 export type NotificationOptions = Partial<Exclude<Notification, 'id'>> & { message: string };
 
@@ -32,7 +43,9 @@ function createNotificationList() {
       currentList.push({
         id: count++,
         type: NotificationType.Info,
-        action: { type: 'discard' },
+        action: {
+          type: options.button ? 'noop' : 'discard',
+        },
         timeout: 3000,
         ...options,
       });