From 04f279dab313e3f888dcd38c59894c781b7c89ee Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <git@martials.no>
Date: Sat, 15 Feb 2025 14:34:47 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20Updated=20legacy=20svel?=
 =?UTF-8?q?te=20components=20to=20runes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 messages/en.json                            |  1 +
 messages/nb.json                            |  1 +
 package.json                                |  1 +
 src/components/Select.svelte                | 19 ++++++++++--------
 src/components/UsesPage.svelte              | 22 ++++++++++-----------
 src/components/collapse/Collapse.svelte     | 10 ++++++++--
 src/components/collapse/CollapseList.svelte |  7 +++++--
 src/pages/uses.astro                        |  2 +-
 8 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 0e7db30..cbd1ac5 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -8,6 +8,7 @@
   "myLinks": "My links",
   "myProjects": "My projects",
   "uses": "Uses",
+  "hardware": "Hardware",
   "accessories": "Accessories",
   "sourceCode": "Source code",
   "createdAt": "Created at",
diff --git a/messages/nb.json b/messages/nb.json
index ad2603e..ae228b5 100644
--- a/messages/nb.json
+++ b/messages/nb.json
@@ -8,6 +8,7 @@
   "myLinks": "Mine lenker",
   "myProjects": "Mine prosjekter",
   "uses": "Uses",
+  "hardware": "Maskinvare",
   "accessories": "Tilbehør",
   "sourceCode": "Kildekode",
   "createdAt": "Opprettet",
diff --git a/package.json b/package.json
index f9d06f8..15708ca 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "type-check": "astro check",
     "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
     "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\"",
     "watch-messages": "paraglide-js compile --watch --project ./project.inlang --outdir ./src/paraglide"
diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index 87dc6df..a50d0df 100644
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
 
   // TODO move to types?
-  interface Option {
-    key: string
+  interface Option<Key> {
+    key: Key
     value: string
   }
 
-  export let options: Option[] = []
-  // TODO bind data instead of dispatching events
-  const dispatch = createEventDispatcher<{ change: string }>()
+  interface Props<Key = string> {
+    selected: Key
+    options?: Option<Key>[]
+    class?: string
+  }
+
+  let { selected = $bindable(), options = [], class: clazz }: Props = $props()
 </script>
 
 <select
-  class="select select-bordered w-full max-w-xs ${$$restProps.class}"
-  on:change={(value) => dispatch("change", value.currentTarget.value)}
+  bind:value={selected}
+  class="select select-bordered w-full max-w-xs ${clazz}"
 >
   {#each options as { key, value }}
     <option value={key}>{value}</option>
diff --git a/src/components/UsesPage.svelte b/src/components/UsesPage.svelte
index 8ff5c75..5a3ba37 100644
--- a/src/components/UsesPage.svelte
+++ b/src/components/UsesPage.svelte
@@ -2,32 +2,32 @@
   import Select from "./Select.svelte"
   import * as m from "@/paraglide/messages"
   import CollapseList from "@/components/collapse/CollapseList.svelte"
+  import type { CollectionEntry } from "astro:content"
 
-  export let uses: any[] = []
+  interface Props {
+    uses: CollectionEntry<'uses'>[]
+  }
+
+  const { uses }: Props = $props()
 
   const hardwareOptions = uses.map((item) => ({
     key: item.id,
     value: item.data.title
   }))
 
-  let selectedHardwareKey: string = uses[0].id
-  $: selectedHardware = uses.find((item) => item.id === selectedHardwareKey)!
-
-  // TODO bind to component
-  // TODO onChange not called
-  function onChange({ detail }: CustomEvent<string>) {
-    selectedHardwareKey = detail
-  }
+  let selectedHardwareKey = $state(uses[0].id)
+  let selectedHardware = $derived(uses.find((item) => item.id === selectedHardwareKey)!)
 
 </script>
+
 <div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
   <h1 class="text-center">{m.uses()}</h1>
   <div>
-    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
+    <Select options={hardwareOptions} bind:selected={selectedHardwareKey} class="mx-auto w-max" />
   </div>
   <br />
 
-  <CollapseList items={selectedHardware.data.hardware} title={m.uses()} />
+  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
   <div class="my-2"></div>
   {#if (selectedHardware.data.accessories)}
     <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
diff --git a/src/components/collapse/Collapse.svelte b/src/components/collapse/Collapse.svelte
index 3d4952f..5021914 100644
--- a/src/components/collapse/Collapse.svelte
+++ b/src/components/collapse/Collapse.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
-  export let title: string = ""
+
+  interface Props {
+    title?: string
+    children: any
+  }
+
+  const { title = "", children }: Props = $props()
 </script>
 
 <details class="collapse collapse-arrow bg-base-200">
   <summary class="collapse-title text-xl font-medium">{title}</summary>
   <div class="collapse-content">
-    <slot />
+    {@render children()}
   </div>
 </details>
\ No newline at end of file
diff --git a/src/components/collapse/CollapseList.svelte b/src/components/collapse/CollapseList.svelte
index b7e3d11..7dd9c90 100644
--- a/src/components/collapse/CollapseList.svelte
+++ b/src/components/collapse/CollapseList.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import Collapse from "@/components/collapse/Collapse.svelte"
 
-  export let items: string[] = []
-  export let title: string = ""
+  interface Props {
+    items?: string[]
+    title?: string
+  }
 
+  const { items = [], title = "" }: Props = $props()
 </script>
 
 <Collapse title={title}>
diff --git a/src/pages/uses.astro b/src/pages/uses.astro
index afc4c0f..17a61b5 100644
--- a/src/pages/uses.astro
+++ b/src/pages/uses.astro
@@ -8,5 +8,5 @@ const uses = await getCollection("uses")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <UsesPage server:defer uses={uses} />
+  <UsesPage client:load uses={uses} />
 </Layout>