From ec9176216959271d19f7a350198da8b4477c8348 Mon Sep 17 00:00:00 2001
From: Stewart Rand <stewartrand@gmail.com>
Date: Thu, 11 Sep 2025 21:15:59 -0300
Subject: [PATCH] Only show albums dropdown if there are albums created

---
 .../side-bar/user-sidebar.svelte              | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte b/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
index 84ba56459e..f799ca75cc 100644
--- a/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/user-sidebar.svelte
@@ -6,6 +6,7 @@
   import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences } from '$lib/stores/user.store';
+  import { getAllAlbums } from '@immich/sdk';
   import {
     mdiAccount,
     mdiAccountMultiple,
@@ -31,6 +32,7 @@
     mdiTrashCan,
     mdiTrashCanOutline,
   } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
   import SideBarLink from './side-bar-link.svelte';
@@ -44,6 +46,22 @@
   let isTrashSelected: boolean = $state(false);
   let isUtilitiesSelected: boolean = $state(false);
   let isLockedFolderSelected: boolean = $state(false);
+  let hasAlbums = $state(false);
+  let albumsBaseProps = $derived({
+    title: $t('albums'),
+    href: resolve('/(user)/albums'),
+    icon: mdiImageAlbum,
+    flippedLogo: true,
+  });
+
+  onMount(async () => {
+    try {
+      const albums = await getAllAlbums({});
+      hasAlbums = albums.length > 0;
+    } catch {
+      hasAlbums = false;
+    }
+  });
 </script>
 
 <Sidebar ariaLabel={$t('primary')}>
@@ -96,19 +114,17 @@
     bind:isSelected={isFavoritesSelected}
   ></SideBarLink>
 
-  <SideBarLink
-    title={$t('albums')}
-    href={resolve('/(user)/albums')}
-    icon={mdiImageAlbum}
-    flippedLogo
-    bind:dropdownOpen={$recentAlbumsDropdown}
-  >
-    {#snippet dropDownContent()}
-      <span in:fly={{ y: -20 }} class="hidden md:block">
-        <RecentAlbums />
-      </span>
-    {/snippet}
-  </SideBarLink>
+  {#if hasAlbums}
+    <SideBarLink {...albumsBaseProps} bind:dropdownOpen={$recentAlbumsDropdown}>
+      {#snippet dropDownContent()}
+        <span in:fly={{ y: -20 }} class="hidden md:block">
+          <RecentAlbums />
+        </span>
+      {/snippet}
+    </SideBarLink>
+  {:else}
+    <SideBarLink {...albumsBaseProps} />
+  {/if}
 
   {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
     <SideBarLink title={$t('tags')} href={resolve('/(user)/tags')} icon={mdiTagMultipleOutline} flippedLogo />