From 1874557b9534244cd3023cfe3618f2f99a78bea0 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Mon, 5 Jan 2026 11:26:23 -0500
Subject: [PATCH] fix: empty action context menu (#25043)

---
 .../components/layouts/AdminPageLayout.svelte | 34 +++++++++++--------
 .../layouts/user-page-layout.svelte           | 32 +++++++++--------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index 6a0d6508dc..6ec982d132 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import AdminSidebar from '$lib/components/AdminSidebar.svelte';
   import PageContent from '$lib/components/layouts/PageContent.svelte';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import AdminSidebar from '$lib/components/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
   import {
@@ -28,6 +28,12 @@
   };
 
   let { breadcrumbs, actions = [], children }: Props = $props();
+
+  const enabledActions = $derived(
+    actions
+      .filter((action): action is HeaderButtonActionItem => !isMenuItemType(action))
+      .filter((action) => action.$if?.() ?? true),
+  );
 </script>
 
 <AppShell>
@@ -42,22 +48,20 @@
     <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
       <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
 
-      {#if actions.length > 0}
+      {#if enabledActions.length > 0}
         <div class="hidden md:block">
           <HStack gap={0}>
-            {#each actions as action, i (i)}
-              {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
-                <Button
-                  variant="ghost"
-                  size="small"
-                  color={action.color ?? 'secondary'}
-                  leadingIcon={action.icon}
-                  onclick={() => action.onAction(action)}
-                  title={action.data?.title}
-                >
-                  {action.title}
-                </Button>
-              {/if}
+            {#each enabledActions as action, i (i)}
+              <Button
+                variant="ghost"
+                size="small"
+                color={action.color ?? 'secondary'}
+                leadingIcon={action.icon}
+                onclick={() => action.onAction(action)}
+                title={action.data?.title}
+              >
+                {action.title}
+              </Button>
             {/each}
           </HStack>
         </div>
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 34c1aef4fc..af85f5f37f 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -40,6 +40,12 @@
     children,
   }: Props = $props();
 
+  const enabledActions = $derived(
+    actions
+      .filter((action): action is HeaderButtonActionItem => !isMenuItemType(action))
+      .filter((action) => action.$if?.() ?? true),
+  );
+
   let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
   let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
 </script>
@@ -82,22 +88,20 @@
 
         {@render buttons?.()}
 
-        {#if actions.length > 0}
+        {#if enabledActions.length > 0}
           <div class="hidden md:block">
             <HStack gap={0}>
-              {#each actions as action, i (i)}
-                {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
-                  <Button
-                    variant="ghost"
-                    size="small"
-                    color={action.color ?? 'secondary'}
-                    leadingIcon={action.icon}
-                    onclick={() => action.onAction(action)}
-                    title={action.data?.title}
-                  >
-                    {action.title}
-                  </Button>
-                {/if}
+              {#each enabledActions as action, i (i)}
+                <Button
+                  variant="ghost"
+                  size="small"
+                  color={action.color ?? 'secondary'}
+                  leadingIcon={action.icon}
+                  onclick={() => action.onAction(action)}
+                  title={action.data?.title}
+                >
+                  {action.title}
+                </Button>
               {/each}
             </HStack>
           </div>