feat: update some more components to svelte 5

app/src/lib/settings/NestedSettings.svelte

@@ -77,13 +77,13 @@
 
   let internalValue = $state(getDefaultValue());
 
-  let open = $state(openSections[id]);
+  let open = $state(openSections.value[id]);
 
   // Persist <details> open/closed state for groups
   if (depth > 0 && !isNodeInput(type[key!])) {
     $effect(() => {
       if (open !== undefined) {
-        openSections[id] = open;
+        openSections.value[id] = open;
       }
     });
   }
@@ -110,7 +110,7 @@
   <!-- Leaf input -->
   <div class="input input-{type[key].type}" class:first-level={depth === 1}>
     {#if type[key].type === "button"}
-      <button onclick={() => console.log(type[key])}>
+      <button onclick={() => type[key].callback()}>
         {type[key].label || key}
       </button>
     {:else}
@@ -124,7 +124,7 @@
     <NestedSettings
       id={`${id}.${childKey}`}
       key={childKey}
-      {value}
+      bind:value
       {type}
       depth={depth + 1}
     />
@@ -142,7 +142,7 @@
         <NestedSettings
           id={`${id}.${childKey}`}
           key={childKey}
-          value={value[key] as SettingsValue}
+          bind:value={value[key] as SettingsValue}
           type={type[key] as unknown as SettingsType}
           depth={depth + 1}
         />

app/src/lib/settings/app-settings.svelte.ts

@@ -144,7 +144,7 @@ type ExtractSettingsValues<T> = {
         : never;
 };
 
-function settingsToStore<T>(settings: T): ExtractSettingsValues<T> {
+export function settingsToStore<T>(settings: T): ExtractSettingsValues<T> {
   const result = {} as any;
   for (const key in settings) {
     const value = settings[key];
@@ -166,7 +166,7 @@ export let appSettings = localState(
 
 $effect.root(() => {
   $effect(() => {
-    const theme = appSettings.theme;
+    const theme = appSettings.value.theme;
     const classes = document.documentElement.classList;
     const newClassName = `theme-${theme}`;
     if (classes) {