refactor: admin sidebar (#18276)

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import PageContent from '$lib/components/layouts/PageContent.svelte';
+  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { sidebarStore } from '$lib/stores/sidebar.svelte';
+  import { AppShell, AppShellHeader, AppShellSidebar, NavbarItem, type Size } from '@immich/ui';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    title: string;
+    size?: Size | 'full';
+    buttons?: Snippet;
+    children?: Snippet;
+  }
+
+  let { title, size, buttons, children }: Props = $props();
+</script>
+
+<AppShell>
+  <AppShellHeader>
+    <NavigationBar showUploadButton={false} noBorder />
+  </AppShellHeader>
+  <AppShellSidebar bind:open={sidebarStore.isOpen}>
+    <div class="h-full flex flex-col justify-between gap-2">
+      <div class="flex flex-col pt-8 pe-4 gap-1">
+        <NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
+        <NavbarItem title={$t('jobs')} href={AppRoute.ADMIN_JOBS} icon={mdiSync} />
+        <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
+        <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
+        <NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />
+      </div>
+
+      <div class="mb-2 me-4">
+        <BottomInfo />
+      </div>
+    </div>
+  </AppShellSidebar>
+
+  <PageContent {title} {size} {buttons} {children} />
+</AppShell>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Container, Scrollable, type Size } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    title?: string;
+    size?: Size | 'full';
+    buttons?: Snippet;
+    children?: Snippet;
+  }
+
+  let { title, size, buttons, children, id }: 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="font-medium outline-none" tabindex="-1" {id}>{title}</div>
+    {@render buttons?.()}
+  </div>
+  <Scrollable class="grow">
+    <Container {size} class="flex flex-col p-4">
+      {@render children?.()}
+    </Container>
+  </Scrollable>
+</div>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -5,7 +5,6 @@
 <script lang="ts">
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import AdminSideBar from '$lib/components/shared-components/side-bar/admin-side-bar.svelte';
   import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { Snippet } from 'svelte';
@@ -16,7 +15,6 @@
     title?: string | undefined;
     description?: string | undefined;
     scrollbar?: boolean;
-    admin?: boolean;
     use?: ActionArray;
     header?: Snippet;
     sidebar?: Snippet;
@@ -30,7 +28,6 @@
     title = undefined,
     description = undefined,
     scrollbar = true,
-    admin = false,
     use = [],
     header,
     sidebar,
@@ -58,8 +55,6 @@
 >
   {#if sidebar}
     {@render sidebar()}
-  {:else if admin}
-    <AdminSideBar />
   {:else}
     <SideBar />
   {/if}