fix(web): user admin pages (#24185)

fix: user admin pages

web/src/lib/components/ActionButton.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { IconButton, type IconButtonProps } from '@immich/ui';
+  import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
   };
 
   const { action }: Props = $props();
-  const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <IconButton variant="ghost" {color} shape="round" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
+  <IconButton variant="ghost" shape="round" {color} {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/HeaderButton.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { Button, type ButtonProps, Text } from '@immich/ui';
+  import { type ActionItem, Button, Text } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
+    title?: string;
   };
 
-  const { action }: Props = $props();
-  const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { action, title: titleAttr }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <Button variant="ghost" size="small" {color} {...other as ButtonProps} leadingIcon={icon} {onclick}>
+  <Button variant="ghost" size="small" {color} leadingIcon={icon} onclick={() => onAction(action)} title={titleAttr}>
     <Text class="hidden md:block">{title}</Text>
   </Button>
 {/if}

web/src/lib/components/TableButton.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { ActionItem } from '$lib/types';
-  import { IconButton, type IconButtonProps } from '@immich/ui';
+  import { IconButton, type ActionItem } from '@immich/ui';
 
   type Props = {
     action: ActionItem;
   };
 
   const { action }: Props = $props();
-  const { title, icon, props: other = {}, onSelect } = $derived(action);
-  const onclick = (event: Event) => onSelect?.({ event, item: action });
+  const { title, icon, onAction } = $derived(action);
 </script>
 
 {#if action.$if?.() ?? true}
-  <IconButton shape="round" color="primary" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
+  <IconButton shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
 {/if}

web/src/lib/components/album-page/album-shared-link.svelte

@@ -32,7 +32,7 @@
       .filter(Boolean)
       .join(' • ');
 
-  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
+  const { ViewQrCode, Copy } = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <div class="flex justify-between items-center">
@@ -41,7 +41,7 @@
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
   </div>
   <div class="flex">
-    <ActionButton action={SharedLinkActions.ViewQrCode} />
-    <ActionButton action={SharedLinkActions.Copy} />
+    <ActionButton action={ViewQrCode} />
+    <ActionButton action={Copy} />
   </div>
 </div>

web/src/lib/components/layouts/AdminPageLayout.svelte

@@ -4,16 +4,16 @@
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable } from '@immich/ui';
+  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
   type Props = {
-    title: string;
+    breadcrumbs: BreadcrumbItem[];
     buttons?: Snippet;
     children?: Snippet;
   };
 
-  let { title, buttons, children }: Props = $props();
+  let { breadcrumbs, buttons, children }: Props = $props();
 </script>
 
 <AppShell>
@@ -24,7 +24,7 @@
     <AdminSidebar />
   </AppShellSidebar>
 
-  <TitleLayout {title} {buttons}>
+  <TitleLayout {breadcrumbs} {buttons}>
     <Scrollable class="grow">
       <PageContent>
         {@render children?.()}

web/src/lib/components/layouts/TitleLayout.svelte

@@ -1,26 +1,20 @@
 <script lang="ts">
-  import { Text } from '@immich/ui';
+  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
   import type { Snippet } from 'svelte';
 
-  interface Props {
-    id?: string;
-    title?: string;
-    description?: string;
+  type Props = {
+    breadcrumbs: BreadcrumbItem[];
     buttons?: Snippet;
     children?: Snippet;
-  }
+  };
 
-  let { id, title, description, buttons, children }: Props = $props();
+  let { breadcrumbs, buttons, children }: Props = $props();
 </script>
 
 <div class="h-full flex flex-col">
   <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
-    <div class="flex gap-1">
-      <div class="font-medium outline-none" tabindex="-1" {id}>{title}</div>
-      {#if description}
-        <Text color="muted">{description}</Text>
-      {/if}
-    </div>
+    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
     {@render buttons?.()}
   </div>
   {@render children?.()}

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -6,6 +6,7 @@
   import { getSharedLinkActions } from '$lib/services/shared-link.service';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { ContextMenuButton, MenuItemType } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
 
@@ -31,7 +32,7 @@
     }
   };
 
-  const SharedLinkActions = $derived(getSharedLinkActions($t, sharedLink));
+  const { Edit, Copy, Delete } = $derived(getSharedLinkActions($t, sharedLink));
 </script>
 
 <div
@@ -95,13 +96,17 @@
   </svelte:element>
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
     <div class="sm:flex hidden">
-      <ActionButton action={SharedLinkActions.Edit} />
-      <ActionButton action={SharedLinkActions.Copy} />
-      <ActionButton action={SharedLinkActions.Delete} />
+      <ActionButton action={Edit} />
+      <ActionButton action={Copy} />
+      <ActionButton action={Delete} />
     </div>
 
     <div class="sm:hidden">
-      <ActionButton action={SharedLinkActions.ContextMenu} />
+      <ContextMenuButton
+        aria-label={$t('shared_link_options')}
+        position="top-right"
+        items={[Edit, Copy, MenuItemType.Divider, Delete]}
+      />
     </div>
   </div>
 </div>