feat: toasts (#23298)

web/src/lib/utils/actions.ts

@@ -1,8 +1,9 @@
-import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
+import ToastAction from '$lib/components/ToastAction.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { StackResponse } from '$lib/utils/asset-utils';
 import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets } from '@immich/sdk';
+import { toastManager } from '@immich/ui';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { handleError } from './handle-error';
@@ -31,17 +32,27 @@ export const deleteAssets = async (
     await deleteBulk({ assetBulkDeleteDto: { ids, force } });
     onAssetDelete(ids);
 
-    notificationController.show({
-      message: force
-        ? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
-        : $t('assets_trashed_count', { values: { count: ids.length } }),
-      type: NotificationType.Info,
-      ...(onUndoDelete &&
-        !force && {
-          button: { text: $t('undo'), onClick: () => undoDeleteAssets(onUndoDelete, assets) },
-          timeout: 5000,
-        }),
-    });
+    toastManager.custom(
+      {
+        component: ToastAction,
+        props: {
+          title: $t('success'),
+          description: force
+            ? $t('assets_permanently_deleted_count')
+            : $t('assets_trashed_count', { values: { count: ids.length } }),
+          color: 'success',
+          button:
+            onUndoDelete && !force
+              ? {
+                  color: 'secondary',
+                  text: $t('undo'),
+                  onClick: () => undoDeleteAssets(onUndoDelete, assets),
+                }
+              : undefined,
+        },
+      },
+      { timeout: 5000 },
+    );
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_assets'));
   }