feat: toasts (#23298)

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
@@ -12,7 +8,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, toastManager } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';
@@ -46,11 +42,7 @@
       preAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
       await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
       onAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
-
-      notificationController.show({
-        message: $t('moved_to_trash'),
-        type: NotificationType.Info,
-      });
+      toastManager.success($t('moved_to_trash'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_trash_asset'));
     }
@@ -61,11 +53,7 @@
       preAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });
       await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
       onAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });
-
-      notificationController.show({
-        message: $t('permanently_deleted_asset'),
-        type: NotificationType.Info,
-      });
+      toastManager.success($t('permanently_deleted_asset'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_asset'));
     } finally {

web/src/lib/components/asset-viewer/actions/favorite-action.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
+  import { IconButton, toastManager } from '@immich/ui';
   import { mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     asset: AssetResponseDto;
@@ -36,10 +32,7 @@
         asset: toTimelineAsset(asset),
       });
 
-      notificationController.show({
-        type: NotificationType.Info,
-        message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
-      });
+      toastManager.success(asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
     }

web/src/lib/components/asset-viewer/actions/restore-action.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
   import { mdiHistory } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';
@@ -23,13 +20,8 @@
     try {
       await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
       asset.isTrashed = false;
-
       onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
-
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('restored_asset'),
-      });
+      toastManager.success($t('restored_asset'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));
     }

web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
   import { mdiImageOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -24,11 +21,7 @@
           albumThumbnailAssetId: asset.id,
         },
       });
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('album_cover_updated'),
-        timeout: 1500,
-      });
+      toastManager.success($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));
     }

web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
   import { mdiFaceManProfile } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';
@@ -34,7 +31,7 @@
         person,
       });
 
-      notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
+      toastManager.success($t('feature_photo_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -12,11 +12,10 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, toastManager } from '@immich/ui';
   import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@@ -75,10 +74,7 @@
         [ReactionType.Comment]: $t('comment_deleted'),
         [ReactionType.Like]: $t('like_deleted'),
       };
-      notificationController.show({
-        message: deleteMessages[reaction.type],
-        type: NotificationType.Info,
-      });
+      toastManager.success(deleteMessages[reaction.type]);
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_reaction'));
     }

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -31,11 +31,11 @@
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import ActivityStatus from './activity-status.svelte';
   import ActivityViewer from './activity-viewer.svelte';
   import DetailPanel from './detail-panel.svelte';
@@ -275,7 +275,7 @@
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
-      notificationController.show({ type: NotificationType.Info, message: $getAssetJobMessage(name) });
+      toastManager.success($getAssetJobMessage(name));
     } catch (error) {
       handleError(error, $t('errors.unable_to_submit_job'));
     }

web/src/lib/components/asset-viewer/detail-panel-description.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
+  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
-  import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
+  import { toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -23,10 +20,7 @@
 
       asset.exifInfo = { ...asset.exifInfo, description: newDescription };
 
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('asset_description_updated'),
-      });
+      toastManager.success($t('asset_description_updated'));
     } catch (error) {
       handleError(error, $t('cannot_update_the_description'));
     }

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import { notificationController } from '$lib/components/shared-components/notification/notification';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button, Input, modalManager } from '@immich/ui';
+  import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -278,9 +277,7 @@
     try {
       const data = getFaceCroppedCoordinates();
       if (!data) {
-        notificationController.show({
-          message: $t('error_tag_face_bounding_box'),
-        });
+        toastManager.warning($t('error_tag_face_bounding_box'));
         return;
       }
 

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -20,12 +20,11 @@
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
-  import { LoadingSpinner } from '@immich/ui';
+  import { LoadingSpinner, toastManager } from '@immich/ui';
   import { onDestroy, onMount } from 'svelte';
   import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
   interface Props {
     asset: AssetResponseDto;
@@ -98,7 +97,7 @@
 
     try {
       await copyImageToClipboard($photoViewerImgElement);
-      notificationController.show({ type: NotificationType.Info, message: $t('copied_image_to_clipboard') });
+      toastManager.info($t('copied_image_to_clipboard'));
     } catch (error) {
       handleError(error, $t('copy_error'));
     }