fix: empty action context menu (#25043)

This commit is contained in:
Jason Rasmussen 2026-01-05 11:26:23 -05:00 committed by GitHub
parent 9a78547bf0
commit 1874557b95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 29 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import AdminSidebar from '$lib/components/AdminSidebar.svelte';
import PageContent from '$lib/components/layouts/PageContent.svelte'; import PageContent from '$lib/components/layouts/PageContent.svelte';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.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 { sidebarStore } from '$lib/stores/sidebar.svelte';
import type { HeaderButtonActionItem } from '$lib/types'; import type { HeaderButtonActionItem } from '$lib/types';
import { import {
@ -28,6 +28,12 @@
}; };
let { breadcrumbs, actions = [], children }: Props = $props(); let { breadcrumbs, actions = [], children }: Props = $props();
const enabledActions = $derived(
actions
.filter((action): action is HeaderButtonActionItem => !isMenuItemType(action))
.filter((action) => action.$if?.() ?? true),
);
</script> </script>
<AppShell> <AppShell>
@ -42,11 +48,10 @@
<div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2"> <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} /> <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
{#if actions.length > 0} {#if enabledActions.length > 0}
<div class="hidden md:block"> <div class="hidden md:block">
<HStack gap={0}> <HStack gap={0}>
{#each actions as action, i (i)} {#each enabledActions as action, i (i)}
{#if !isMenuItemType(action) && (action.$if?.() ?? true)}
<Button <Button
variant="ghost" variant="ghost"
size="small" size="small"
@ -57,7 +62,6 @@
> >
{action.title} {action.title}
</Button> </Button>
{/if}
{/each} {/each}
</HStack> </HStack>
</div> </div>

View file

@ -40,6 +40,12 @@
children, children,
}: Props = $props(); }: 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 scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full'); let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
</script> </script>
@ -82,11 +88,10 @@
{@render buttons?.()} {@render buttons?.()}
{#if actions.length > 0} {#if enabledActions.length > 0}
<div class="hidden md:block"> <div class="hidden md:block">
<HStack gap={0}> <HStack gap={0}>
{#each actions as action, i (i)} {#each enabledActions as action, i (i)}
{#if !isMenuItemType(action) && (action.$if?.() ?? true)}
<Button <Button
variant="ghost" variant="ghost"
size="small" size="small"
@ -97,7 +102,6 @@
> >
{action.title} {action.title}
</Button> </Button>
{/if}
{/each} {/each}
</HStack> </HStack>
</div> </div>