fix(web): refresh recent albums sidebar after album changes (#26757)

web/src/lib/components/album-page/album-description.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { Textarea } from '@immich/ui';
@@ -16,12 +17,13 @@
 
   const handleFocusOut = async () => {
     try {
-      await updateAlbumInfo({
+      const response = await updateAlbumInfo({
         id,
         updateAlbumDto: {
           description,
         },
       });
+      eventManager.emit('AlbumUpdate', response);
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_album'));
     }

web/src/lib/components/album-page/album-title.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { t } from 'svelte-i18n';
@@ -21,12 +22,14 @@
     }
 
     try {
-      ({ albumName } = await updateAlbumInfo({
+      const response = await updateAlbumInfo({
         id,
         updateAlbumDto: {
           albumName: newAlbumName,
         },
-      }));
+      });
+      ({ albumName } = response);
+      eventManager.emit('AlbumUpdate', response);
       onUpdate(albumName);
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_album'));

web/src/lib/components/album-page/albums-list.svelte

@@ -17,7 +17,6 @@
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
-  import { userInteraction } from '$lib/stores/user.svelte';
   import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import { normalizeSearchString } from '$lib/utils/string-utils';
@@ -233,16 +232,11 @@
     return albums;
   };
 
-  const onUpdate = (album: AlbumResponseDto) => {
+  const onAlbumUpdate = (album: AlbumResponseDto) => {
     ownedAlbums = findAndUpdate(ownedAlbums, album);
     sharedAlbums = findAndUpdate(sharedAlbums, album);
   };
 
-  const onAlbumUpdate = (album: AlbumResponseDto) => {
-    onUpdate(album);
-    userInteraction.recentAlbums = findAndUpdate(userInteraction.recentAlbums || [], album);
-  };
-
   const onAlbumDelete = (album: AlbumResponseDto) => {
     ownedAlbums = ownedAlbums.filter(({ id }) => id !== album.id);
     sharedAlbums = sharedAlbums.filter(({ id }) => id !== album.id);
@@ -250,7 +244,7 @@
 
   const onSharedLinkCreate = (sharedLink: SharedLinkResponseDto) => {
     if (sharedLink.album) {
-      onUpdate(sharedLink.album);
+      onAlbumUpdate(sharedLink.album);
     }
   };
 </script>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
@@ -15,12 +16,13 @@
 
   const handleUpdateThumbnail = async () => {
     try {
-      await updateAlbumInfo({
+      const response = await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumThumbnailAssetId: asset.id,
         },
       });
+      eventManager.emit('AlbumUpdate', response);
       toastManager.success($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));

web/src/lib/components/shared-components/side-bar/recent-albums.svelte

@@ -3,17 +3,12 @@
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
-  import { onMount } from 'svelte';
+  import { getAllAlbums } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
-  let albums: AlbumResponseDto[] = $state([]);
+  let albums = $state(userInteraction.recentAlbums);
 
-  onMount(async () => {
-    if (userInteraction.recentAlbums) {
-      albums = userInteraction.recentAlbums;
-      return;
-    }
+  const refreshAlbums = async () => {
     try {
       const allAlbums = await getAllAlbums({});
       albums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
@@ -21,6 +16,12 @@
     } catch (error) {
       handleError(error, $t('failed_to_load_assets'));
     }
+  };
+
+  $effect(() => {
+    if (!userInteraction.recentAlbums) {
+      void refreshAlbums();
+    }
   });
 </script>