From 1e634e98a3a06d9664574f4e5ac0c346cd1856a0 Mon Sep 17 00:00:00 2001
From: Stewart Rand <stewartrand@gmail.com>
Date: Fri, 12 Sep 2025 11:56:11 -0300
Subject: [PATCH] Make sidenav album list update properly when adding and
 deleting albums

---
 .../album-page/album-description.svelte       |  3 +++
 .../components/album-page/album-title.svelte  |  3 +++
 .../components/album-page/albums-list.svelte  |  2 ++
 .../actions/set-album-cover-action.svelte     |  3 +++
 .../side-bar/recent-albums.svelte             | 24 ++++++++++++-------
 web/src/lib/modals/AlbumPickerModal.svelte    |  3 +++
 web/src/lib/utils/album-utils.ts              |  3 +++
 .../[[assetId=id]]/+page.svelte               |  5 ++++
 8 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/album-page/album-description.svelte b/web/src/lib/components/album-page/album-description.svelte
index 46b424f93a..85f40d23cf 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 { updateAlbumInfo } from '@immich/sdk';
+  import { userInteraction } from '$lib/stores/user.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
   import { t } from 'svelte-i18n';
@@ -20,6 +21,8 @@
           description: newDescription,
         },
       });
+      // Clear cached recent albums to refresh sidebar when album is updated
+      userInteraction.recentAlbums = undefined;
     } 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 f2559c86e5..9751cf3633 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 { userInteraction } from '$lib/stores/user.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { t } from 'svelte-i18n';
@@ -27,6 +28,8 @@
           albumName: newAlbumName,
         },
       }));
+      // Clear cached recent albums to refresh sidebar when album name is updated
+      userInteraction.recentAlbums = undefined;
       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 a2ac1231ed..526bc7f59b 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/web/src/lib/components/album-page/albums-list.svelte
@@ -246,6 +246,8 @@
       }
     }
 
+    // Clear cached recent albums to refresh sidebar when album is deleted
+    userInteraction.recentAlbums = undefined;
     ownedAlbums = ownedAlbums.filter(({ id }) => id !== albumToDelete.id);
     sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
   };
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 c015c224ff..1e3e41bb2b 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
@@ -4,6 +4,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { userInteraction } from '$lib/stores/user.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { mdiImageOutline } from '@mdi/js';
@@ -24,6 +25,8 @@
           albumThumbnailAssetId: asset.id,
         },
       });
+      // Clear cached recent albums to refresh sidebar when album cover is updated
+      userInteraction.recentAlbums = undefined;
       notificationController.show({
         type: NotificationType.Info,
         message: $t('album_cover_updated'),
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 c24a495d33..c283040a25 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,23 +3,31 @@
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
-  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   let albums: AlbumResponseDto[] = $state([]);
 
-  onMount(async () => {
-    if (userInteraction.recentAlbums) {
-      albums = userInteraction.recentAlbums;
-      return;
-    }
+  const loadRecentAlbums = async () => {
     try {
       const allAlbums = await getAllAlbums({});
-      albums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
-      userInteraction.recentAlbums = albums;
+      // Filter out albums with empty names (newly created albums that haven't been named yet)
+      const namedAlbums = allAlbums.filter(album => album.albumName.trim() !== '');
+      const recentAlbums = namedAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
+      albums = recentAlbums;
+      userInteraction.recentAlbums = recentAlbums;
     } catch (error) {
       handleError(error, $t('failed_to_load_assets'));
     }
+  };
+
+  $effect(() => {
+    if (userInteraction.recentAlbums) {
+      // Apply the same filtering to cached albums to ensure consistency
+      const filteredCachedAlbums = userInteraction.recentAlbums.filter(album => album.albumName.trim() !== '');
+      albums = filteredCachedAlbums;
+    } else {
+      void loadRecentAlbums();
+    }
   });
 </script>
 
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index 529ef4b137..831007c31e 100644
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@@ -6,6 +6,7 @@
     isSelectableRowType,
   } from '$lib/components/shared-components/album-selection/album-selection-utils';
   import { albumViewSettings } from '$lib/stores/preferences.store';
+  import { userInteraction } from '$lib/stores/user.svelte';
   import { createAlbum, getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
   import { Button, Icon, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
   import { mdiKeyboardReturn } from '@mdi/js';
@@ -44,6 +45,8 @@
 
   const onNewAlbum = async (name: string) => {
     const album = await createAlbum({ createAlbumDto: { albumName: name } });
+    // Clear cached recent albums to force refresh in sidebar
+    userInteraction.recentAlbums = undefined;
     onClose([album]);
   };
 
diff --git a/web/src/lib/utils/album-utils.ts b/web/src/lib/utils/album-utils.ts
index 0cb8b7fc04..dfbed1cdfe 100644
--- a/web/src/lib/utils/album-utils.ts
+++ b/web/src/lib/utils/album-utils.ts
@@ -9,6 +9,7 @@ import {
   locale,
   type AlbumViewSettings,
 } from '$lib/stores/preferences.store';
+import { userInteraction } from '$lib/stores/user.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import type { AlbumResponseDto } from '@immich/sdk';
 import * as sdk from '@immich/sdk';
@@ -30,6 +31,8 @@ export const createAlbum = async (name?: string, assetIds?: string[]) => {
         assetIds,
       },
     });
+    // Clear cached recent albums to force refresh in sidebar
+    userInteraction.recentAlbums = undefined;
     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 eba030e2d9..56e507ebcb 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
@@ -46,6 +46,7 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { preferences, user } from '$lib/stores/user.store';
+  import { userInteraction } from '$lib/stores/user.svelte';
   import { handlePromiseError, makeSharedLinkUrl } from '$lib/utils';
   import { confirmAlbumDelete } from '$lib/utils/album-utils';
   import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
@@ -254,6 +255,8 @@
 
     try {
       await deleteAlbum({ id: album.id });
+      // Clear cached recent albums to refresh sidebar when album is deleted
+      userInteraction.recentAlbums = undefined;
       await goto(backUrl);
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_album'));
@@ -316,6 +319,8 @@
   onNavigate(async ({ to }) => {
     if (!isAlbumsRoute(to?.route.id) && album.assetCount === 0 && !album.albumName) {
       await deleteAlbum(album);
+      // Clear cached recent albums to refresh sidebar when album is auto-deleted
+      userInteraction.recentAlbums = undefined;
     }
   });