feat: add theming support

app/src/lib/settings/Panel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { NodeInput } from "@nodes/types";
   import type { Writable } from "svelte/store";
-  import { Input } from "@nodes/ui";
+  import NestedSettings from "./NestedSettings.svelte";
 
   export let setting: {
     icon: string;
@@ -12,27 +12,38 @@
 
   const store = setting.settings;
 
-  const keys = setting?.definition
-    ? (Object.keys(
-        setting.definition,
-      ) as unknown as (keyof typeof setting.definition)[])
-    : [];
+  interface Nested {
+    [key: string]: NodeInput | Nested;
+  }
+
+  $: nestedSettings = constructNested();
+
+  function constructNested() {
+    const nested: Nested = {};
+
+    for (const key in setting.definition) {
+      const parts = key.split(".");
+      let current = nested;
+      for (let i = 0; i < parts.length; i++) {
+        if (i === parts.length - 1) {
+          current[parts[i]] = setting.definition[key];
+        } else {
+          current[parts[i]] = current[parts[i]] || {};
+          current = current[parts[i]] as Nested;
+        }
+      }
+    }
+    return nested;
+  }
 </script>
 
-<div class="flex flex-col gap-4">
-  <h1 class="m-0">{setting.id}</h1>
-  {#each keys as key}
-    <div>
-      {#if setting.definition && key in setting.definition}
-        <Input
-          id="test"
-          input={setting.definition[key]}
-          bind:value={$store[key]}
-        ></Input>
-      {/if}
-      <label for="test">
-        {key}
-      </label>
-    </div>
-  {/each}
+<div class="flex flex-col">
+  <h1 class="m-0 p-4">{setting.id}</h1>
+  <NestedSettings settings={nestedSettings} {store} />
 </div>
+
+<style>
+  h1 {
+    border-bottom: solid thin var(--outline);
+  }
+</style>