sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: empty action context menu (#25043)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

34
web/src/lib/components/layouts/AdminPageLayout.svelte
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,22 +48,20 @@
<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" color={action.color ?? 'secondary'}
color={action.color ?? 'secondary'} leadingIcon={action.icon}
leadingIcon={action.icon} onclick={() => action.onAction(action)}
onclick={() => action.onAction(action)} title={action.data?.title}
title={action.data?.title} >
> {action.title}
{action.title} </Button>
</Button>
{/if}
{/each} {/each}
</HStack> </HStack>
</div> </div>

32
web/src/lib/components/layouts/user-page-layout.svelte
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,22 +88,20 @@
{@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" color={action.color ?? 'secondary'}
color={action.color ?? 'secondary'} leadingIcon={action.icon}
leadingIcon={action.icon} onclick={() => action.onAction(action)}
onclick={() => action.onAction(action)} title={action.data?.title}
title={action.data?.title} >
> {action.title}
{action.title} </Button>
</Button>
{/if}
{/each} {/each}
</HStack> </HStack>
</div> </div>