feat: toasts (#23298)

web/src/lib/components/timeline/actions/AssetJobActions.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetJobName, runAssetJobs } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -25,7 +22,7 @@
     try {
       const ids = [...getOwnedAssets()].map(({ id }) => id);
       await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
-      notificationController.show({ message: $getAssetJobMessage(name), type: NotificationType.Info });
+      toastManager.success($getAssetJobMessage(name));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_submit_job'));

web/src/lib/components/timeline/actions/FavoriteAction.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import type { OnFavorite } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
+  import { IconButton, toastManager } from '@immich/ui';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -46,12 +42,11 @@
 
       onFavorite?.(ids, isFavorite);
 
-      notificationController.show({
-        message: isFavorite
+      toastManager.success(
+        isFavorite
           ? $t('added_to_favorites_count', { values: { count: ids.length } })
           : $t('removed_from_favorites_count', { values: { count: ids.length } }),
-        type: NotificationType.Info,
-      });
+      );
 
       clearSelect();
     } catch (error) {

web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import { handleError } from '$lib/utils/handle-error';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
-  import { IconButton, modalManager } from '@immich/ui';
+  import { IconButton, modalManager, toastManager } from '@immich/ui';
   import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@@ -41,18 +38,11 @@
       onRemove?.(ids);
 
       const count = results.filter(({ success }) => success).length;
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('assets_removed_count', { values: { count } }),
-      });
+      toastManager.success($t('assets_removed_count', { values: { count } }));
 
       clearSelect();
     } catch (error) {
-      console.error('Error [album-viewer] [removeAssetFromAlbum]', error);
-      notificationController.show({
-        type: NotificationType.Error,
-        message: $t('errors.error_removing_assets_from_album'),
-      });
+      handleError(error, $t('errors.error_removing_assets_from_album'));
     }
   };
 </script>

web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte

@@ -3,10 +3,9 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
-  import { IconButton, modalManager } from '@immich/ui';
+  import { IconButton, modalManager, toastManager } from '@immich/ui';
   import { mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { NotificationType, notificationController } from '../../shared-components/notification/notification';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -45,12 +44,7 @@
       }
 
       const count = results.filter((item) => item.success).length;
-
-      notificationController.show({
-        type: NotificationType.Info,
-        message: $t('assets_removed_count', { values: { count } }),
-      });
-
+      toastManager.success($t('assets_removed_count', { values: { count } }));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_assets_from_shared_link'));

web/src/lib/components/timeline/actions/RestoreAction.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
-  import {
-    NotificationType,
-    notificationController,
-  } from '$lib/components/shared-components/notification/notification';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import type { OnRestore } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreAssets } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, toastManager } from '@immich/ui';
   import { mdiHistory } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -28,12 +24,7 @@
       const ids = [...getAssets()].map((a) => a.id);
       await restoreAssets({ bulkIdsDto: { ids } });
       onRestore?.(ids);
-
-      notificationController.show({
-        message: $t('assets_restored_count', { values: { count: ids.length } }),
-        type: NotificationType.Info,
-      });
-
+      toastManager.success($t('assets_restored_count', { values: { count: ids.length } }));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));