From 42bdf7abad567ca34b110152d71ce56421bb5520 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 6 Feb 2025 14:06:31 -0500
Subject: [PATCH] refactor: buttons with leading icons (#107)

---
 apps/buy.immich.app/routes/+page.svelte       |  4 +-
 .../routes/claim/[[id]]/+page.svelte          |  5 +-
 apps/get.immich.app/routes/+page.svelte       |  4 +-
 .../routes/docker-compose/+page.svelte        | 11 +---
 .../routes/[...rest]/+page.svelte             | 13 +++--
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 src/lib/app.css                               | 16 ++----
 src/lib/components/CodePreview.svelte         | 13 ++---
 src/lib/components/Footer.svelte              | 19 +------
 src/lib/components/FullPageLayout.svelte      | 35 ------------
 src/lib/components/Header.svelte              | 53 ++++++++-----------
 src/lib/components/LicenseKey.svelte          | 24 +++------
 src/lib/layouts/FullPageLayout.svelte         | 24 +++++++++
 14 files changed, 85 insertions(+), 146 deletions(-)
 delete mode 100644 src/lib/components/FullPageLayout.svelte
 create mode 100644 src/lib/layouts/FullPageLayout.svelte

diff --git a/apps/buy.immich.app/routes/+page.svelte b/apps/buy.immich.app/routes/+page.svelte
index f422f3b..9370dbb 100644
--- a/apps/buy.immich.app/routes/+page.svelte
+++ b/apps/buy.immich.app/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
   import { Button, Heading, Icon, Logo, Stack, SupporterBadge, Text } from '@immich/ui';
   import { mdiAccount, mdiCheckCircleOutline, mdiServer } from '@mdi/js';
@@ -8,7 +8,7 @@
   const userFeatures = ['For an individual', 'Lifetime purchase', 'Supporter status'];
 </script>
 
-<FullPageLayout width="md">
+<FullPageLayout size="medium">
   <Stack gap={4}>
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />
diff --git a/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte b/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
index 063a188..756c0c8 100644
--- a/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
+++ b/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
@@ -3,7 +3,7 @@
   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 { Alert, Button, Heading, Link, Stack, Text } from '@immich/ui';
   import { mdiGithub } from '@mdi/js';
   import type { PageData } from './$types';
 
@@ -83,8 +83,7 @@
     {:else}
       <section>
         <Stack align="start" gap={4}>
-          <Button onclick={handleLogin} color="secondary" variant="outline">
-            <Icon icon={mdiGithub} size="2em" />
+          <Button leadingIcon={mdiGithub} onclick={handleLogin} color="secondary" variant="outline">
             <Text>Login with GitHub</Text>
           </Button>
           {#if errorMessage}
diff --git a/apps/get.immich.app/routes/+page.svelte b/apps/get.immich.app/routes/+page.svelte
index d727941..a85711c 100644
--- a/apps/get.immich.app/routes/+page.svelte
+++ b/apps/get.immich.app/routes/+page.svelte
@@ -2,7 +2,7 @@
   import portainerIcon from '$lib/assets/img/portainer.svg';
   import truenasIcon from '$lib/assets/img/truenas-scale.svg';
   import unraidIcon from '$lib/assets/img/unraid.svg';
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import {
     Button,
     Card,
@@ -25,7 +25,7 @@
   import { mdiAndroid, mdiDocker } from '@mdi/js';
 </script>
 
-<FullPageLayout width="lg">
+<FullPageLayout size="large">
   <Stack gap={8}>
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />
diff --git a/apps/get.immich.app/routes/docker-compose/+page.svelte b/apps/get.immich.app/routes/docker-compose/+page.svelte
index ed0fb0f..1afe652 100644
--- a/apps/get.immich.app/routes/docker-compose/+page.svelte
+++ b/apps/get.immich.app/routes/docker-compose/+page.svelte
@@ -9,7 +9,6 @@
     CardTitle,
     Field,
     Heading,
-    Icon,
     Input,
     PasswordInput,
     Stack,
@@ -99,14 +98,8 @@
         <Text>Generate a docker-compose.yaml file for Immich</Text>
       </div>
       <div class="flex gap-2 items-center">
-        <Button shape="round" onclick={() => handleShare()}>
-          <Icon icon={mdiShareVariantOutline} size="1.5rem" />
-          <span>Share</span>
-        </Button>
-        <Button shape="round" onclick={() => handleDownload()}>
-          <Icon icon={mdiDownload} size="1.5rem" />
-          <span>Download</span>
-        </Button>
+        <Button leadingIcon={mdiShareVariantOutline} shape="round" onclick={() => handleShare()}>Share</Button>
+        <Button leadingIcon={mdiDownload} shape="round" onclick={() => handleDownload()}>Download</Button>
       </div>
     </div>
 
diff --git a/apps/my.immich.app/routes/[...rest]/+page.svelte b/apps/my.immich.app/routes/[...rest]/+page.svelte
index 88048ca..63633d6 100644
--- a/apps/my.immich.app/routes/[...rest]/+page.svelte
+++ b/apps/my.immich.app/routes/[...rest]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { StorageKey } from '$lib';
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import {
     Button,
     Card,
@@ -9,7 +9,6 @@
     CardHeader,
     CardTitle,
     Heading,
-    Icon,
     Input,
     Logo,
     Stack,
@@ -47,7 +46,7 @@
   };
 </script>
 
-<FullPageLayout width="sm">
+<FullPageLayout size="small">
   <Stack gap={8} class="min-h-[75vh]">
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />
@@ -65,9 +64,13 @@
           <Stack gap={4}>
             <Input type="text" placeholder="https://demo.immich.app/" bind:value={instanceUrl} oninput={handleChange} />
             <div class="flex justify-end">
-              <Button type="submit" class="w-full sm:w-auto" disabled={saved}>
+              <Button
+                leadingIcon={saved ? mdiCheckCircleOutline : undefined}
+                type="submit"
+                class="w-full sm:w-auto"
+                disabled={saved}
+              >
                 {#if saved}
-                  <Icon icon={mdiCheckCircleOutline} />
                   Saved!
                 {:else}
                   {targetUrl ? 'Save & Redirect' : 'Save'}
diff --git a/package-lock.json b/package-lock.json
index 64dd755..b11c496 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@mdi/js": "^7.4.47"
       },
       "devDependencies": {
-        "@immich/ui": "^0.15.0",
+        "@immich/ui": "^0.16.0",
         "@sveltejs/adapter-static": "^3.0.6",
         "@sveltejs/kit": "^2.12.1",
         "@sveltejs/vite-plugin-svelte": "^5.0.2",
@@ -700,9 +700,9 @@
       }
     },
     "node_modules/@immich/ui": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.15.0.tgz",
-      "integrity": "sha512-vGDNEOGj5Ma/BAIgj31M1roAVoEOVWws5lkgt1xPlIxSHk4pMhGRFMQaJaCsfXeX/nTRsQCd3gOk7Yo0XNrVfg==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.16.0.tgz",
+      "integrity": "sha512-itSOu0r7drZ46qJ+9eNNyq5YZVRAeUKwjRdzBUd6uz4Csy3oEDoepEtWF1EHDaph2XUcKJrNvQPUvETTWeQC6g==",
       "dev": true,
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
diff --git a/package.json b/package.json
index c230ee3..04c3b68 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@immich/ui": "^0.15.0",
+    "@immich/ui": "^0.16.0",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.12.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.2",
diff --git a/src/lib/app.css b/src/lib/app.css
index 5f1e184..45397fc 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -54,11 +54,13 @@
   font-family: 'Overpass', sans-serif;
 }
 
-:root.dark {
+:root.dark,
+body.dark {
   color-scheme: dark;
 }
 
-:root:not(.dark) {
+:root:not(.dark),
+body:not(.dark) {
   color-scheme: light;
 }
 
@@ -72,13 +74,3 @@ body {
   margin: 0;
   color: #3a3a3a;
 }
-
-@layer utilities {
-  .immich-gradient {
-    background:
-      linear-gradient(to bottom right, #ededed 0%, #f0f1fc 50%) bottom right / 50% 50% no-repeat,
-      linear-gradient(to bottom left, #ededed 0%, #f0f1fc 50%) bottom left / 50% 50% no-repeat,
-      linear-gradient(to top left, #ededed 0%, #f0f1fc 50%) top left / 50% 50% no-repeat,
-      linear-gradient(to top right, #ededed 0%, #f0f1fc 50%) top right / 50% 50% no-repeat;
-  }
-}
diff --git a/src/lib/components/CodePreview.svelte b/src/lib/components/CodePreview.svelte
index 0ce733d..9bdfed4 100644
--- a/src/lib/components/CodePreview.svelte
+++ b/src/lib/components/CodePreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Card, Heading, HStack, Icon } from '@immich/ui';
+  import { Button, Card, Heading, HStack } from '@immich/ui';
   import { mdiPencilOutline, mdiXml } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { HighlightSvelte, LineNumbers } from 'svelte-highlight';
@@ -28,23 +28,20 @@
     <Heading size="medium">docker-compose.yaml</Heading>
     <HStack gap={1} class="lg:border rounded-xl p-1">
       <Button
+        leadingIcon={mdiPencilOutline}
         disabled={viewMode === 'children'}
         onclick={handleToggle}
         size="small"
         class={viewMode === 'children' ? 'hidden md:flex' : ''}
-      >
-        <Icon icon={mdiPencilOutline} size="1.5em" />
-        <span>Configure</span>
+        >Configure
       </Button>
       <Button
+        leadingIcon={mdiXml}
         disabled={viewMode === 'code'}
         onclick={handleToggle}
         size="small"
-        class={viewMode === 'code' ? 'hidden md:flex' : ''}
+        class={viewMode === 'code' ? 'hidden md:flex' : ''}>View</Button
       >
-        <Icon icon={mdiXml} size="1.5em" />
-        <span>View</span>
-      </Button>
     </HStack>
   </div>
   <div class={viewMode === 'children' ? 'px-4 pb-4' : ''}>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 5f9f048..c3b5ac8 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Card, Heading, HStack, Icon, IconButton, Link, Stack, Text, theme, Theme, VStack } from '@immich/ui';
+  import { Card, Heading, HStack, Icon, Link, Stack, Text, ThemeSwitcher, VStack } from '@immich/ui';
   import {
     mdiAndroid,
     mdiApple,
@@ -10,16 +10,8 @@
     mdiReddit,
     mdiServerOutline,
     mdiShoppingOutline,
-    mdiWeatherNight,
-    mdiWeatherSunny,
     mdiWeb,
   } from '@mdi/js';
-
-  const handleToggleTheme = () => {
-    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
-  };
-
-  const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
 </script>
 
 <div class="bg-dark/10 rounded-t-3xl mt-16 p-8">
@@ -122,14 +114,7 @@
       <VStack class="text-center">
         <Text size="large">This project is available under GNU AGPL v3 license.</Text>
         <Text color="muted" variant="italic">Privacy should not be a luxury</Text>
-        <IconButton
-          size="large"
-          shape="round"
-          color="secondary"
-          variant="ghost"
-          icon={themeIcon}
-          onclick={handleToggleTheme}
-        />
+        <ThemeSwitcher color="secondary" />
       </VStack>
     </Stack>
   </div>
diff --git a/src/lib/components/FullPageLayout.svelte b/src/lib/components/FullPageLayout.svelte
deleted file mode 100644
index 735b227..0000000
--- a/src/lib/components/FullPageLayout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import Footer from '$lib/components/Footer.svelte';
-  import { Scrollable, syncToDom } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    children: Snippet;
-    width?: 'sm' | 'md' | 'lg';
-  };
-
-  const { width = 'md', children }: Props = $props();
-
-  const maxWidths = {
-    sm: 'max-w-screen-sm',
-    md: 'max-w-screen-md',
-    lg: 'max-w-screen-lg',
-  };
-
-  const widthClass = $derived(maxWidths[width]);
-
-  $effect(() => {
-    syncToDom();
-  });
-</script>
-
-<Scrollable>
-  <section class="flex flex-col h-dvh">
-    <div class="grow">
-      <div class="w-full h-full p-4 sm:p-8 lg:p-10 m-auto {widthClass}">
-        {@render children?.()}
-      </div>
-    </div>
-    <Footer />
-  </section>
-</Scrollable>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index f527974..0001edf 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -2,8 +2,8 @@
   import { afterNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import type { HeaderItem } from '$lib/types';
-  import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, theme, Theme } from '@immich/ui';
-  import { mdiMenu, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+  import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, ThemeSwitcher } from '@immich/ui';
+  import { mdiMenu } from '@mdi/js';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -16,12 +16,6 @@
 
   let { items, 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();
   });
@@ -48,30 +42,25 @@
         color={(item.color ?? isActive(item.href)) ? 'primary' : 'secondary'}>{item.title}</Button
       >
     {/each}
-    <IconButton
-      size="giant"
-      shape="round"
-      color="primary"
-      variant="ghost"
-      class="ml-2"
-      icon={themeIcon}
-      onclick={handleToggleTheme}
-    />
-    <span class="md:hidden">
-      {#if menuOpen}
-        <CloseButton class="md:hidden" size="giant" onclick={() => (menuOpen = false)} />
-      {:else}
-        <IconButton
-          size="giant"
-          shape="round"
-          color="secondary"
-          variant="ghost"
-          class="md:hidden"
-          icon={mdiMenu}
-          onclick={() => (menuOpen = true)}
-        />
-      {/if}
-    </span>
+    <ThemeSwitcher size="large" />
+    {#if items.length > 0}
+      <span class="md:hidden">
+        {#if menuOpen}
+          <CloseButton class="md:hidden" size="large" onclick={() => (menuOpen = false)} />
+        {:else}
+          <IconButton
+            size="large"
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            class="md:hidden"
+            icon={mdiMenu}
+            aria-label="Open menu"
+            onclick={() => (menuOpen = true)}
+          />
+        {/if}
+      </span>
+    {/if}
   </HStack>
 </nav>
 
diff --git a/src/lib/components/LicenseKey.svelte b/src/lib/components/LicenseKey.svelte
index b104261..8daf047 100644
--- a/src/lib/components/LicenseKey.svelte
+++ b/src/lib/components/LicenseKey.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getRedirectUrl } from '$lib/utils/license';
-  import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Icon, Stack, Text } from '@immich/ui';
-  import { mdiCheckCircleOutline } from '@mdi/js';
+  import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Stack, Text } from '@immich/ui';
+  import { mdiCheckCircleOutline, mdiContentCopy } from '@mdi/js';
 
   interface Props {
     productKey: string;
@@ -22,7 +22,7 @@
       clipboardStatus = 'error';
     }
 
-    setTimeout(() => (clipboardStatus = undefined), 5_000);
+    setTimeout(() => (clipboardStatus = undefined), 3_000);
   };
 </script>
 
@@ -45,21 +45,13 @@
       <div class="flex justify-center items-center">
         {#if clipboardStatus === 'error'}
           <Text color="danger">Unable to copy to clipboard</Text>
+        {:else if clipboardStatus === 'success'}
+          <Button disabled color="secondary" size="medium" fullWidth leadingIcon={mdiCheckCircleOutline}>Copied!</Button
+          >
         {:else}
-          <Button
-            onclick={handleCopy}
-            color="secondary"
-            size="medium"
-            fullWidth
-            disabled={clipboardStatus === 'success'}
+          <Button leadingIcon={mdiContentCopy} onclick={handleCopy} color="secondary" size="medium" fullWidth
+            >Copy</Button
           >
-            {#if clipboardStatus === 'success'}
-              <Icon icon={mdiCheckCircleOutline} size="1.5em" />
-              Copied to clipboard!
-            {:else}
-              Copy
-            {/if}
-          </Button>
         {/if}
       </div>
     </div>
diff --git a/src/lib/layouts/FullPageLayout.svelte b/src/lib/layouts/FullPageLayout.svelte
new file mode 100644
index 0000000..db34301
--- /dev/null
+++ b/src/lib/layouts/FullPageLayout.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Footer from '$lib/components/Footer.svelte';
+  import { Container, Scrollable, type Size } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+    size?: Size | 'full';
+    center?: boolean;
+  };
+
+  const { size, children }: Props = $props();
+</script>
+
+<Scrollable>
+  <section class="flex flex-col h-dvh">
+    <div class="grow">
+      <Container {size} center class="p-4 sm:p-8 lg:p-10">
+        {@render children?.()}
+      </Container>
+    </div>
+    <Footer />
+  </section>
+</Scrollable>