From d63597a480c928130ae0e4f3001dfbba9d23b529 Mon Sep 17 00:00:00 2001
From: Santiago Lo Coco <se23m504@technikum-wien.at>
Date: Tue, 23 Apr 2024 23:17:46 +0200
Subject: [PATCH] Refactor ThemePicker

---
 src/lib/components/NavBar.svelte      | 61 ++-------------------------
 src/lib/components/ThemePicker.svelte | 49 ++++++++++++---------
 2 files changed, 32 insertions(+), 78 deletions(-)

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 67a982c..7d83c84 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -1,49 +1,9 @@
-<script lang="ts" context="module">
-  export const themes = ["light", "dark", "auto"] as const
-  //   export type Theme = (typeof themes)[number]
-</script>
-
 <script lang="ts">
-  // import {browser} from '$app/environment'
   import { applyAction, enhance } from "$app/forms"
-  import { page } from "$app/stores"
-  import { slide } from "svelte/transition"
+  import ThemePicker from "./ThemePicker.svelte"
   import type { Theme } from "../../hooks.server"
+
   let { theme } = $props<{ theme: Theme }>()
-
-  // const deriveNextTheme = (theme: Theme): Theme => {
-  // 	switch (theme) {
-  // 		case 'dark':
-  // 			return 'light'
-  // 		case 'light':
-  // 			return 'dark'
-  // 		case 'auto':
-  // 		default:
-  // 			if (!browser) return 'auto'
-  // 			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark'
-  // 	}
-  // }
-  // $derived nextTheme = deriveNextTheme($theme)
-
-  function toggleTheme() {
-    const currentIndex = themes.indexOf(theme)
-    theme = themes[(currentIndex + 1) % themes.length]
-    if (theme == "auto") {
-      theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "light"
-        : "dark"
-    }
-    console.log(theme)
-  }
-
-  let icon = $derived.by(() => {
-    if (theme === "light") return "🌞"
-    if (theme === "dark") return "🌙"
-    if (theme === "auto")
-      return window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "🌙"
-        : "🌞"
-  })
 </script>
 
 <header class="flex items-center justify-between px-2 py-4">
@@ -54,21 +14,6 @@
   <nav class="flex items-center gap-4">
     <button class="py-2 px-4"> Login </button>
 
-    <form
-      method="POST"
-      action="/?/theme"
-      use:enhance={async () => {
-        return async ({ result }) => {
-          await applyAction(result)
-        }
-      }}
-    >
-      <input name="theme" value={theme} hidden />
-      {#key theme}
-        <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
-          {icon}
-        </button>
-      {/key}
-    </form>
+    <ThemePicker bind:theme />
   </nav>
 </header>
diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte
index 6cb2e2a..c926ba5 100644
--- a/src/lib/components/ThemePicker.svelte
+++ b/src/lib/components/ThemePicker.svelte
@@ -1,38 +1,47 @@
 <script lang="ts" context="module">
-  export const themes = ["light", "dark"] as const
-  export type Theme = (typeof themes)[number]
+  export const themes = ["light", "dark", "auto"] as const
 </script>
 
 <script lang="ts">
   import { slide } from "svelte/transition"
+  import type { Theme } from "../../hooks.server"
+  import { applyAction, enhance } from "$app/forms"
   let { theme } = $props<{ theme: Theme }>()
 
   function toggleTheme() {
     const currentIndex = themes.indexOf(theme)
     theme = themes[(currentIndex + 1) % themes.length]
-    // if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
-    //   localStorage.setItem("theme", theme)
-    // }
+    if (theme == "auto") {
+      theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "light"
+        : "dark"
+    }
+    console.log(theme)
   }
 
   let icon = $derived.by(() => {
     if (theme === "light") return "🌞"
     if (theme === "dark") return "🌙"
+    if (theme === "auto")
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "🌙"
+        : "🌞"
   })
 </script>
 
-{#key theme}
-  <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
-    {icon}
-  </button>
-{/key}
-
-<slot />
-
-<style lang="postcss">
-  button {
-    @apply absolute top-0 right-0;
-    @apply text-3xl;
-    @apply cursor-pointer;
-  }
-</style>
+<form
+  method="POST"
+  action="/?/theme"
+  use:enhance={async () => {
+    return async ({ result }) => {
+      await applyAction(result)
+    }
+  }}
+>
+  <input name="theme" value={theme} hidden />
+  {#key theme}
+    <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
+      {icon}
+    </button>
+  {/key}
+</form>