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/utils/asset-utils.ts

@@ -1,15 +1,18 @@
-import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
+import { goto } from '$app/navigation';
+import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
+import { AppRoute } from '$lib/constants';
 import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
 import { BucketPosition, isSelectingAllAssets, type AssetStore } from '$lib/stores/assets.store';
 import { downloadManager } from '$lib/stores/download';
 import { downloadRequest, getKey } from '$lib/utils';
+import { encodeHTMLSpecialChars } from '$lib/utils/string-utils';
 import {
   addAssetsToAlbum as addAssets,
+  createAlbum,
   defaults,
   getDownloadInfo,
   type AssetResponseDto,
   type AssetTypeEnum,
-  type BulkIdResponseDto,
   type DownloadInfoDto,
   type DownloadResponseDto,
   type UserResponseDto,
@@ -18,20 +21,60 @@ import { DateTime } from 'luxon';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';
 
-export const addAssetsToAlbum = async (albumId: string, assetIds: Array<string>): Promise<BulkIdResponseDto[]> =>
-  addAssets({
+export const addAssetsToAlbum = async (albumId: string, assetIds: string[]) => {
+  const result = await addAssets({
     id: albumId,
-    bulkIdsDto: { ids: assetIds },
+    bulkIdsDto: {
+      ids: assetIds,
+    },
     key: getKey(),
-  }).then((results) => {
-    const count = results.filter(({ success }) => success).length;
+  });
+  const count = result.filter(({ success }) => success).length;
+  notificationController.show({
+    type: NotificationType.Info,
+    timeout: 5000,
+    message:
+      count > 0
+        ? `Added ${count} asset${count === 1 ? '' : 's'} to the album`
+        : `Asset${assetIds.length === 1 ? ' was' : 's were'} already part of the album`,
+    button: {
+      text: 'View Album',
+      onClick() {
+        return goto(`${AppRoute.ALBUMS}/${albumId}`);
+      },
+    },
+  });
+};
+
+export const addAssetsToNewAlbum = async (albumName: string, assetIds: string[]) => {
+  try {
+    const album = await createAlbum({
+      createAlbumDto: {
+        albumName,
+        assetIds,
+      },
+    });
+    const displayName = albumName ? `<b>${encodeHTMLSpecialChars(albumName)}</b>` : 'new album';
     notificationController.show({
       type: NotificationType.Info,
-      message: `Added ${count} asset${count === 1 ? '' : 's'}`,
+      timeout: 5000,
+      message: `Added ${assetIds.length} asset${assetIds.length === 1 ? '' : 's'} to ${displayName}`,
+      html: true,
+      button: {
+        text: 'View Album',
+        onClick() {
+          return goto(`${AppRoute.ALBUMS}/${album.id}`);
+        },
+      },
     });
-
-    return results;
-  });
+    return album;
+  } catch {
+    notificationController.show({
+      type: NotificationType.Error,
+      message: 'Failed to create album',
+    });
+  }
+};
 
 export const downloadBlob = (data: Blob, filename: string) => {
   const url = URL.createObjectURL(data);