refactor: clean up

apps/buy.immich.app/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import '$lib/app.css';
   import FullPageLayout from '$lib/components/FullPageLayout.svelte';
   import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
   import { Button, Heading, Icon, Logo, Stack, SupporterBadge, Text } from '@immich/ui';

apps/buy.immich.app/routes/claim/[[id]]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import DefaultPageLayout from '$lib/components/DefaultPageLayout.svelte';
   import LicenseKey from '$lib/components/LicenseKey.svelte';
+  import DefaultPageLayout from '$lib/layouts/DefaultPageLayout.svelte';
   import { getAuthorizeUrl } from '$lib/utils/oauth';
   import { Alert, Button, Heading, Icon, Link, Stack, Text } from '@immich/ui';
   import { mdiGithub } from '@mdi/js';

apps/buy.immich.app/routes/success/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import LicenseKey from '$lib/components/LicenseKey.svelte';
+  import DefaultPageLayout from '$lib/layouts/DefaultPageLayout.svelte';
   import { getPaymentStatus, getRedirectUrl, PurchaseStatus, type PaymentStatusResponseDto } from '$lib/utils/license';
-  import { Alert, Button, LoadingSpinner, Card, CardBody, Heading, Stack, Text } from '@immich/ui';
+  import { Alert, Button, Card, CardBody, Heading, LoadingSpinner, Stack, Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
-  import DefaultPageLayout from '$lib/components/DefaultPageLayout.svelte';
 
   interface Props {
     data: PageData;

apps/get.immich.app/routes/docker-compose/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CodePreview from '$lib/components/CodePreview.svelte';
-  import DefaultPageLayout from '$lib/components/DefaultPageLayout.svelte';
+  import DefaultPageLayout from '$lib/layouts/DefaultPageLayout.svelte';
   import {
     Button,
     Card,

apps/my.immich.app/routes/[...rest]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { StorageKey } from '$lib';
-  import '$lib/app.css';
   import FullPageLayout from '$lib/components/FullPageLayout.svelte';
   import {
     Button,

src/lib/components/Header.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import type { HeaderItem } from '$lib/types';
+  import { Button, HStack, IconButton, Logo, syncToDom, theme, Theme } from '@immich/ui';
+  import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+
+  type Props = {
+    items: HeaderItem[];
+  };
+
+  const isActive = (path: string, options?: { prefix?: boolean }) =>
+    path === page.url.pathname || (options?.prefix && page.url.pathname.startsWith(path));
+
+  let { items }: Props = $props();
+
+  const handleToggleTheme = () => {
+    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
+  };
+
+  const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
+
+  $effect(() => {
+    syncToDom();
+  });
+</script>
+
+<nav class="flex items-center justify-between gap-2 p-2">
+  <a href="/" class="flex gap-2 text-4xl">
+    <Logo variant="inline" />
+  </a>
+  <HStack gap={0}>
+    {#each items as item}
+      <Button
+        href={item.href}
+        shape="round"
+        variant={item.variant ?? 'ghost'}
+        color={(item.color ?? isActive(item.href)) ? 'primary' : 'secondary'}>{item.title}</Button
+      >
+    {/each}
+    <IconButton
+      size="large"
+      shape="round"
+      color="primary"
+      variant="ghost"
+      icon={themeIcon}
+      onclick={handleToggleTheme}
+    />
+  </HStack>
+</nav>

src/lib/components/PageContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Footer from '$lib/components/Footer.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+  };
+
+  let { children }: Props = $props();
+</script>
+
+<section class="flex flex-col h-full">
+  <div class="grow">
+    <div class="w-full h-full md:max-w-screen-lg px-4 py-10 sm:px-20 lg:p-10 m-auto">
+      {@render children?.()}
+    </div>
+  </div>
+  <Footer />
+</section>

src/lib/layouts/DefaultPageLayout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import '$lib/app.css';
+  import Header from '$lib/components/Header.svelte';
+  import PageContent from '$lib/components/PageContent.svelte';
+  import { AppShell, AppShellHeader } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+  };
+
+  let { children }: Props = $props();
+</script>
+
+<AppShell>
+  <AppShellHeader>
+    <Header items={[]} />
+  </AppShellHeader>
+
+  <PageContent>
+    {@render children?.()}
+  </PageContent>
+</AppShell>

src/lib/types.ts

@@ -0,0 +1,8 @@
+import type { Color, Variants } from '@immich/ui';
+
+export type HeaderItem = {
+  title: string;
+  href: string;
+  color?: Color;
+  variant?: Variants;
+};