refactor: layout components (#18290)

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

@@ -1,22 +1,19 @@
 <script lang="ts">
   import PageContent from '$lib/components/layouts/PageContent.svelte';
+  import TitleLayout from '$lib/components/layouts/TitleLayout.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 AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
-  import { AppRoute } from '$lib/constants';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, NavbarItem, type Size } from '@immich/ui';
+  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
   import type { Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     title: string;
-    size?: Size | 'full';
     buttons?: Snippet;
     children?: Snippet;
-  }
+  };
 
-  let { title, size, buttons, children }: Props = $props();
+  let { title, buttons, children }: Props = $props();
 </script>
 
 <AppShell>
@@ -24,20 +21,14 @@
     <NavigationBar showUploadButton={false} noBorder />
   </AppShellHeader>
   <AppShellSidebar bind:open={sidebarStore.isOpen}>
-    <div class="h-full flex flex-col justify-between gap-2">
+    <AdminSidebar />
-      <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} />
+  <TitleLayout {title} {buttons}>
+    <Scrollable class="grow">
+      <PageContent>
+        {@render children?.()}
+      </PageContent>
+    </Scrollable>
+  </TitleLayout>
 </AppShell>

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

@@ -1,26 +1,12 @@
 <script lang="ts">
-  import { Container, Scrollable, type Size } from '@immich/ui';
+  import { Container } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  type Props = {
-    id?: string;
-    title?: string;
-    size?: Size | 'full';
-    buttons?: Snippet;
     children?: Snippet;
-  }
+  };
 
-  let { title, size, buttons, children, id }: Props = $props();
+  const { children }: Props = $props();
 </script>
 
-<div class="h-full flex flex-col">
+<Container class="p-2 pb-16" {children} />
-  <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/TitleLayout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Text } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    title?: string;
+    description?: string;
+    buttons?: Snippet;
+    children?: Snippet;
+  }
+
+  let { id, title, description, 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>
+    {@render buttons?.()}
+  </div>
+  {@render children?.()}
+</div>

web/src/lib/sidebars/AdminSidebar.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { NavbarItem } from '@immich/ui';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+</script>
+
+<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>