From a8642e72636d27f950fb631b73c7860dac6da33a Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 8 Jan 2025 16:59:57 -0500
Subject: [PATCH] refactor: clean up

---
 apps/buy.immich.app/routes/+page.svelte       |  1 -
 .../routes/claim/[[id]]/+page.svelte          |  2 +-
 .../routes/success/+page.svelte               |  4 +-
 .../routes/docker-compose/+page.svelte        |  2 +-
 .../routes/[...rest]/+page.svelte             |  1 -
 src/lib/components/DefaultPageLayout.svelte   | 50 -------------------
 src/lib/components/Header.svelte              | 49 ++++++++++++++++++
 src/lib/components/PageContent.svelte         | 19 +++++++
 src/lib/layouts/DefaultPageLayout.svelte      | 23 +++++++++
 src/lib/types.ts                              |  8 +++
 10 files changed, 103 insertions(+), 56 deletions(-)
 delete mode 100644 src/lib/components/DefaultPageLayout.svelte
 create mode 100644 src/lib/components/Header.svelte
 create mode 100644 src/lib/components/PageContent.svelte
 create mode 100644 src/lib/layouts/DefaultPageLayout.svelte
 create mode 100644 src/lib/types.ts

diff --git a/apps/buy.immich.app/routes/+page.svelte b/apps/buy.immich.app/routes/+page.svelte
index 046102e..f422f3b 100644
--- a/apps/buy.immich.app/routes/+page.svelte
+++ b/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';
diff --git a/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte b/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
index bb90dbf..063a188 100644
--- a/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
+++ b/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';
diff --git a/apps/buy.immich.app/routes/success/+page.svelte b/apps/buy.immich.app/routes/success/+page.svelte
index ec57bf4..bf78375 100644
--- a/apps/buy.immich.app/routes/success/+page.svelte
+++ b/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;
diff --git a/apps/get.immich.app/routes/docker-compose/+page.svelte b/apps/get.immich.app/routes/docker-compose/+page.svelte
index d215e46..ed0fb0f 100644
--- a/apps/get.immich.app/routes/docker-compose/+page.svelte
+++ b/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,
diff --git a/apps/my.immich.app/routes/[...rest]/+page.svelte b/apps/my.immich.app/routes/[...rest]/+page.svelte
index 6929bf2..88048ca 100644
--- a/apps/my.immich.app/routes/[...rest]/+page.svelte
+++ b/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,
diff --git a/src/lib/components/DefaultPageLayout.svelte b/src/lib/components/DefaultPageLayout.svelte
deleted file mode 100644
index 44b0312..0000000
--- a/src/lib/components/DefaultPageLayout.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-  import '$lib/app.css';
-  import Footer from '$lib/components/Footer.svelte';
-  import { AppShell, AppShellHeader, IconButton, Logo, syncToDom, theme, Theme } from '@immich/ui';
-  import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    children: Snippet;
-  };
-
-  let { children }: 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>
-
-<AppShell>
-  <AppShellHeader>
-    <nav class="flex items-center justify-between gap-2 p-2">
-      <a href="/" class="flex gap-2 text-4xl">
-        <Logo variant="inline" />
-      </a>
-      <IconButton
-        size="large"
-        shape="round"
-        color="primary"
-        variant="ghost"
-        icon={themeIcon}
-        onclick={handleToggleTheme}
-      />
-    </nav>
-  </AppShellHeader>
-
-  <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>
-</AppShell>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..4a9897c
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/PageContent.svelte b/src/lib/components/PageContent.svelte
new file mode 100644
index 0000000..8e6dee5
--- /dev/null
+++ b/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>
diff --git a/src/lib/layouts/DefaultPageLayout.svelte b/src/lib/layouts/DefaultPageLayout.svelte
new file mode 100644
index 0000000..2fa95e8
--- /dev/null
+++ b/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>
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..8edd25a
--- /dev/null
+++ b/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;
+};