From a47b23223536a816942e8a98c4d7f04c8d367552 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 9 Mar 2026 17:11:32 +0100
Subject: [PATCH] fix(web): refresh recent albums sidebar after album changes
 (#26757)

---
 .../album-page/album-description.svelte         |  4 +++-
 .../components/album-page/album-title.svelte    |  7 +++++--
 .../components/album-page/albums-list.svelte    | 10 ++--------
 .../actions/set-album-cover-action.svelte       |  4 +++-
 .../side-bar/recent-albums.svelte               | 17 +++++++++--------
 web/src/lib/managers/event-manager.svelte.ts    |  1 +
 web/src/lib/modals/AlbumPickerModal.svelte      |  2 ++
 web/src/lib/stores/user.svelte.ts               |  7 +++++++
 web/src/lib/utils/album-utils.ts                |  2 ++
 .../[[assetId=id]]/+page.svelte                 |  4 +++-
 10 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/web/src/lib/components/album-page/album-description.svelte b/web/src/lib/components/album-page/album-description.svelte
index 00744832a7..481e110fb0 100644
--- a/web/src/lib/components/album-page/album-description.svelte
+++ b/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'));
     }
diff --git a/web/src/lib/components/album-page/album-title.svelte b/web/src/lib/components/album-page/album-title.svelte
index 84463dc6d5..e467d04a12 100644
--- a/web/src/lib/components/album-page/album-title.svelte
+++ b/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'));
diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/albums-list.svelte
index 7c3e2facb4..4317166720 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/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>
diff --git a/web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte b/web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
index 22ca22b0d9..98d01ff9d3 100644
--- a/web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
+++ b/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'));
diff --git a/web/src/lib/components/shared-components/side-bar/recent-albums.svelte b/web/src/lib/components/shared-components/side-bar/recent-albums.svelte
index 1ca64f6c06..825e5b1fa9 100644
--- a/web/src/lib/components/shared-components/side-bar/recent-albums.svelte
+++ b/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>
 
diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts
index 2095a001bd..25e1b3c45b 100644
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -39,6 +39,7 @@ export type Events = {
   AssetsTag: [string[]];
 
   AlbumAddAssets: [{ assetIds: string[]; albumIds: string[] }];
+  AlbumCreate: [AlbumResponseDto];
   AlbumUpdate: [AlbumResponseDto];
   AlbumDelete: [AlbumResponseDto];
   AlbumShare: [];
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index b2420215bc..081c7f49d7 100644
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@@ -5,6 +5,7 @@
     AlbumModalRowType,
     isSelectableRowType,
   } from '$lib/components/shared-components/album-selection/album-selection-utils';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { albumViewSettings } from '$lib/stores/preferences.store';
   import { createAlbum, getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
   import { Button, Icon, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
@@ -43,6 +44,7 @@
 
   const onNewAlbum = async (name: string) => {
     const album = await createAlbum({ createAlbumDto: { albumName: name } });
+    eventManager.emit('AlbumCreate', album);
     onClose([album]);
   };
 
diff --git a/web/src/lib/stores/user.svelte.ts b/web/src/lib/stores/user.svelte.ts
index 508fd156b8..2605feebba 100644
--- a/web/src/lib/stores/user.svelte.ts
+++ b/web/src/lib/stores/user.svelte.ts
@@ -22,10 +22,17 @@ const defaultUserInteraction: UserInteractions = {
 
 export const userInteraction = $state<UserInteractions>(defaultUserInteraction);
 
+const resetRecentAlbums = () => {
+  userInteraction.recentAlbums = undefined;
+};
+
 const reset = () => {
   Object.assign(userInteraction, defaultUserInteraction);
 };
 
 eventManager.on({
+  AlbumCreate: () => resetRecentAlbums(),
+  AlbumUpdate: () => resetRecentAlbums(),
+  AlbumDelete: () => resetRecentAlbums(),
   AuthLogout: () => reset(),
 });
diff --git a/web/src/lib/utils/album-utils.ts b/web/src/lib/utils/album-utils.ts
index 1689d43585..497642847d 100644
--- a/web/src/lib/utils/album-utils.ts
+++ b/web/src/lib/utils/album-utils.ts
@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { Route } from '$lib/route';
 import {
   AlbumFilter,
@@ -29,6 +30,7 @@ export const createAlbum = async (name?: string, assetIds?: string[]) => {
         assetIds,
       },
     });
+    eventManager.emit('AlbumCreate', newAlbum);
     return newAlbum;
   } catch (error) {
     const $t = get(t);
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 44a0c5e678..e354d2c1fc 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -30,6 +30,7 @@
   import { AlbumPageViewMode } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -192,12 +193,13 @@
 
   const updateThumbnail = async (assetId: string) => {
     try {
-      await updateAlbumInfo({
+      const response = await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumThumbnailAssetId: assetId,
         },
       });
+      eventManager.emit('AlbumUpdate', response);
       toastManager.success($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));