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

fix: user admin pages

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?.()}