refactor files

src/lib/components/HeaderNav.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { appWindow } from '@tauri-apps/api/window'
+  import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons'
+  import { faGithub } from '@fortawesome/free-brands-svg-icons'
+  import Fa from 'svelte-fa'
+  import { link } from 'svelte-spa-router'
+  import { Button } from '$components/ui/button'
+  import { Sun, Moon } from 'lucide-svelte'
+  import { toggleMode } from 'mode-watcher'
+  import { cn } from '$lib/utils'
+
+  import { location } from 'svelte-spa-router'
+
+  // You can structure your links however you'd like, but I like to keep them in an array of objects
+  type Link = {
+    label: string
+    href: string
+  }
+  const links: Link[] = [
+    {
+      label: 'Home',
+      href: '/'
+    },
+    {
+      label: 'IPC',
+      href: '/#IPC'
+    },
+    {
+      label: 'Versions',
+      href: '/#versions'
+    }
+  ]
+</script>
+
+<header
+  data-tauri-drag-region
+  class="flex h-14 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
+   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+  <Button on:click={toggleMode} size="icon" variant="outline" class="ml-2">
+    <Sun
+      class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+    />
+    <Moon
+      class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+    />
+    <span class="sr-only">Toggle theme</span>
+  </Button>
+
+  <nav
+    class="flex space-x-4 text-xl font-bold select-none"
+    on:dragstart|preventDefault
+  >
+    {#each links as { href, label }}
+      <a
+        use:link
+        {href}
+        class={cn(
+          'transition-colors hover:text-foreground/80',
+          href === $location ? '' : 'text-foreground/60'
+        )}>{label}</a
+      >
+    {/each}
+  </nav>
+
+  <div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
+    <a
+      on:dragstart|preventDefault
+      target="_blank"
+      href="https://github.com/Fractal-Tess/Svelte-Tauri"
+      class="flex items-center hover:text-secondary"
+      rel="noreferrer noopener"
+    >
+      <Fa icon={faGithub} size="lg" />
+    </a>
+    <button on:click={appWindow.minimize} class="text-xl hover:text-secondary">
+      <Fa icon={faWindowMinimize} />
+    </button>
+    <button on:click={appWindow.close} class="text-2xl hover:text-secondary">
+      <Fa icon={faXmark} />
+    </button>
+  </div>
+</header>

src/lib/components/IPC/CallTauri.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button'
+  import { helloTauri } from '$lib/ipc'
+  import { cn } from '$lib/utils'
+
+  let message = ''
+  async function callTauri() {
+    message = await helloTauri()
+  }
+</script>
+
+<Button variant="outline" class="px-8 py-6" on:click={callTauri}
+  >Call Tauri</Button
+>
+
+<p
+  class={cn(
+    'text-2xl font-bold border-b-2 border-border transition-opacity min-h-10 duration-500',
+    message ? 'opacity-100' : 'opacity-0'
+  )}
+>
+  {message}
+</p>

src/lib/components/IPC/HashString.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input'
+  import { Label } from '$components/ui/label'
+  import { hash256sum } from '$lib/ipc'
+
+  let hashInput = 'String to hash'
+  let hashOutput = ''
+
+  $: hash256sum(hashInput).then(hash => (hashOutput = hash))
+</script>
+
+<section class="flex items-center justify-center flex-col gap-8">
+  <div class="flex flex-col w-full max-w-sm gap-1.5">
+    <Label for="hash">Hash string</Label>
+    <Input
+      placeholder="String to hash"
+      id="hash"
+      bind:value={hashInput}
+      type="text"
+      class="input-bordered input-secondary input focus:border-secondary
+    focus:outline-none focus:ring-secondary"
+    />
+  </div>
+  <code class="border border-border rounded-md px-2 py-1 text-sm"
+    >{hashOutput}</code
+  >
+</section>

src/lib/components/IPC/KeyValuePair.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { storeReadKey, storeSetKey } from '$lib/ipc'
+  import { Input } from '$components/ui/input'
+  import { Label } from '$components/ui/label'
+  import { Button } from '$components/ui/button'
+  import { toast } from 'svelte-sonner'
+
+  let key = ''
+  let val = ''
+
+  async function setValueWithKey() {
+    await storeSetKey(key, val)
+    let id = (Math.random() + 1).toString(36).substring(16)
+    toast(`You have set the key '${key}' to be the value of '${val}'`, {
+      id,
+      action: {
+        label: 'X',
+        onClick: () => {
+          toast.dismiss(id)
+        }
+      }
+    })
+  }
+
+  async function readValFromKey() {
+    const val = await storeReadKey(key)
+    let id = (Math.random() + 1).toString(36).substring(16)
+    toast(`You have read the key '${key}' to be the value of '${val}'`, {
+      id,
+      action: {
+        label: 'X',
+        onClick: () => {
+          toast.dismiss(id)
+        }
+      }
+    })
+  }
+</script>
+
+<div class="flex flex-col gap-4 items-center justify-center">
+  <div class="flex gap-4">
+    <div class="flex-1 flex-col gap-y-2 flex">
+      <Label for="key">Key</Label>
+      <Input id="key" bind:value={key} />
+    </div>
+
+    <div class="flex-1 flex-col gap-y-2 flex">
+      <Label for="val">Value</Label>
+      <Input id="val" bind:value={val} />
+    </div>
+  </div>
+  <div class="flex w-full gap-4">
+    <Button class="w-full bg-primary" on:click={setValueWithKey}>Set</Button>
+    <Button class="w-full" on:click={readValFromKey}>Read</Button>
+  </div>
+</div>

src/lib/components/buttons/ThemeToggleIcon.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import type { Theme } from '$types';
-  export let theme: Theme = 'dark';
-</script>
-
-<div
-  class="{`${
-    theme === 'dark' ? 'swap-active' : 'swap-off'
-  } swap swap-rotate`} h-8 w-8"
->
-  <svg
-    class="swap-on fill-current h-full w-full"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    ><path
-      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-    /></svg
-  >
-
-  <svg
-    class="swap-off fill-current h-full w-full"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    ><path
-      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-    /></svg
-  >
-</div>

src/lib/layout/BaseHeader.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import ThemeToggleIcon from '$lib/components/buttons/ThemeToggleIcon.svelte';
-  import { theme } from '$lib/stores/theme';
-  import { appWindow } from '@tauri-apps/api/window';
-  import { faXmark, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
-  import { faGithub } from '@fortawesome/free-brands-svg-icons';
-  import Fa from 'svelte-fa';
-  import { link } from 'svelte-spa-router';
-</script>
-
-<header
-  data-tauri-drag-region
-  class="flex h-12 items-center justify-between bg-base-100 px-2 shadow-lg">
-  <button
-    tabindex="-1"
-    on:click={theme.toggleTheme}
-    class="flex items-center hover:text-secondary">
-    <ThemeToggleIcon theme={$theme} />
-  </button>
-
-  <nav>
-    <ul class="flex space-x-4 text-xl font-bold">
-      <li>
-        <a use:link href="/" class="transition-colors hover:text-secondary">
-          Home
-        </a>
-      </li>
-      <li>
-        <a use:link href="/#IPC" class="transition-colors hover:text-secondary">
-          IPC
-        </a>
-      </li>
-
-      <li>
-        <a
-          use:link
-          href="/#versions"
-          class="transition-colors hover:text-secondary">
-          Versions
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="flex h-full [&>*]:px-2 [&>*]:transition-all">
-    <a
-      target="_blank"
-      href="https://github.com/Fractal-Tess/Svelte-Tauri"
-      class="flex items-center hover:text-secondary"
-      rel="noreferrer">
-      <Fa icon={faGithub} size="lg" />
-    </a>
-    <button on:click={appWindow.minimize} class="text-xl hover:text-secondary">
-      <Fa icon={faWindowMinimize} />
-    </button>
-    <button on:click={appWindow.close} class="text-2xl hover:text-secondary">
-      <Fa icon={faXmark} />
-    </button>
-  </div>
-</header>

src/lib/layout/BaseLayout.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-
-  import Header from '$layout/BaseHeader.svelte';
-</script>
-
-<div
-  class="form-control min-h-screen bg-fixed heropattern-topography-black/10 dark:heropattern-topography-white/10">
-  <Header />
-  <main class="form-control flex-1" in:fade={{ delay: 300, duration: 1000 }}>
-    <slot />
-  </main>
-</div>

src/lib/router/Router.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import Router from 'svelte-spa-router';
+  import Router from 'svelte-spa-router'
 
-  import Index from '$lib/router/routes/Index.svelte';
-  import IPC from '$lib/router/routes/IPC.svelte';
-  import Versions from '$router/routes/Versions.svelte';
+  import Home from '$lib/router/routes/Home.svelte'
+  import IPC from '$lib/router/routes/IPC.svelte'
+  import Versions from '$router/routes/Versions.svelte'
 
   const routes = {
-    '/': Index,
+    '/': Home,
     '/#ipc': IPC,
     '/#versions': Versions
-  };
+  }
 </script>
 
 <Router {routes} />

src/lib/router/routes/Home.svelte

@@ -0,0 +1,14 @@
+<section class="h-full flex-col flex items-center justify-center gap-y-8">
+  <h1 class="text-6xl">Welcome</h1>
+  <h2 class="flex items-center text-3xl [&_img]:h-12">
+    This is a &#160
+    <span>
+      <img src="/svelte_logo.svg" alt="svelte logo" />
+    </span>
+    &#160-&#160
+    <span>
+      <img src="/tauri_logo.svg" alt="svelte logo" />
+    </span>
+    &#160 Template
+  </h2>
+</section>

src/lib/router/routes/IPC.svelte

@@ -1,92 +1,11 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { hash256sum, helloTauri, storeSetKey, storeReadKey } from '$ipc';
-
-  // Or you can also do this if you prefer
-
-  // import * as ipc from '$ipc';
-  // message = await ipc.helloTauri()
-
-  // Calling the hash256 function any time the `hashInput` variable  changes
-  let hashInput = 'Hello world';
-  let hashOutput = '';
-  $: (async () => {
-    hashOutput = await hash256sum(hashInput);
-  })();
-
-  // Calling the `helloTauri` when we click the call tauri button
-  let message = '';
-  async function callTauri() {
-    message = await helloTauri();
-  }
-
-  let storeMessage = '';
-  let key = '';
-  let val = '';
-  async function setKeyVal() {
-    await storeSetKey(key, val);
-    storeMessage = `You have set the key '${key}' to be the value of '${val}''`;
-  }
-
-  async function readValFromKey() {
-    const val = await storeReadKey(key);
-    storeMessage = `Using the key '${key}', you have just retrieved the value of '${val}''`;
-  }
+  import CallTauri from '$lib/components/IPC/CallTauri.svelte'
+  import HashString from '$lib/components/IPC/HashString.svelte'
+  import KeyValuePair from '$lib/components/IPC/KeyValuePair.svelte'
 </script>
 
-<div
-  class="form-control h-full flex-1 items-center justify-center gap-y-8
-  [&>section]:form-control [&>section]:items-center [&>section]:justify-center [&>section]:gap-y-4">
-  <section class="">
-    <button
-      on:click={callTauri}
-      class="btn-outline btn-primary btn text-2xl capitalize"
-      >Call Tauri</button>
-    <div class="flex h-20 items-center">
-      {#key message}
-        <p
-          class="whitespace-nowrap border-b-2 border-accent
-    text-2xl"
-          in:fade={{ duration: 300 }}>
-          {message}
-        </p>
-      {/key}
-    </div>
-  </section>
-  <section>
-    <label class="input-group flex max-w-max">
-      <span>Hash string</span>
-      <input
-        bind:value={hashInput}
-        type="text"
-        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
-    </label>
-    <p class="text-center text-lg">{hashOutput}</p>
-  </section>
-
-  <div class="grid grid-cols-2 gap-4">
-    <label class="input-group flex max-w-max">
-      <span>Key</span>
-      <input
-        bind:value={key}
-        type="text"
-        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
-    </label>
-    <label class="input-group flex max-w-max">
-      <span>Value</span>
-      <input
-        bind:value={val}
-        type="text"
-        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
-    </label>
-
-    <button on:click={setKeyVal} class="btn-outline btn-primary btn capitalize"
-      >Set key</button>
-    <button
-      on:click={readValFromKey}
-      class="btn-outline btn-primary btn capitalize">Read key</button>
-    <p class="text-bold font-2xl col-span-full text-center text-primary">
-      {storeMessage}
-    </p>
-  </div>
+<div class="h-full flex flex-col items-center justify-center gap-y-8">
+  <CallTauri />
+  <HashString />
+  <KeyValuePair />
 </div>

src/lib/router/routes/Index.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-</script>
-
-<div
-  class="form-control flex-1 items-center justify-center space-y-6 text-center font-bold">
-  <h1 class="text-6xl">Welcome</h1>
-  <h2 class="flex items-center text-3xl [&_img]:h-12">
-    This is a &#160
-    <span>
-      <img src={'/svelte_logo.svg'} alt="svelte logo" />
-    </span>
-    &#160-&#160
-    <span>
-      <img src={'/tauri_logo.svg'} alt="svelte logo" />
-    </span>
-    &#160 Template
-  </h2>
-</div>

src/lib/router/routes/Versions.svelte

@@ -1,38 +1,34 @@
 <script lang="ts">
-  import { getTauriVersion, getVersion, getName } from '@tauri-apps/api/app';
+  import { getTauriVersion, getVersion, getName } from '@tauri-apps/api/app'
   type Versions = {
-    tauri: string;
-    app: string;
-    name: string;
-  };
+    tauri: string
+    app: string
+    name: string
+  }
 
   const getVersions = async (): Promise<Versions> => {
     const [name, tauri, app] = await Promise.all([
       getName(),
       getTauriVersion(),
       getVersion()
-    ]);
+    ])
     return {
       tauri,
       app,
       name
-    };
-  };
+    }
+  }
 </script>
 
-<div
-  class="form-control flex-1 items-center justify-center space-y-8 text-2xl font-bold">
-  <h1 class="text-5xl text-primary">Versions</h1>
-  <div>
-    <ul class="form-control space-y-4">
+<section class="h-full flex flex-col items-center justify-center gap-10">
+  <h1 class="text-5xl font-extrabold italic">Versions</h1>
+  <ul class="flex flex-col gap-2">
     {#await getVersions() then versions}
       {#each Object.entries(versions) as [key, val]}
-          <li>
-            <span class="text-secondary"> {key}</span> -
-            <span class="text-primary"> {val}</span>
+        <li class="text-xl font-bold">
+          {key} - {val}
         </li>
       {/each}
     {/await}
   </ul>
-  </div>
-</div>
+</section>