feat: refactor how frontend was structured

app/src/lib/settings/NestedSettings.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-  import localStore from "$lib/helpers/localStore";
-  import type { NodeInput } from "@nodes/types";
-  import Input from "@nodes/ui";
-  import type { Writable } from "svelte/store";
-
-  interface Nested {
-    [key: string]: Nested | NodeInput;
-  }
-
-  export let id: string;
-
-  $: expandedDetails = localStore<Record<string, boolean>>(
-    `nodes.settings.expanded.${id}`,
-    {},
-  );
-
-  export let settings: Nested;
-  export let store: Writable<Record<string, any>>;
-  export let depth = 0;
-
-  const keys = Object.keys(settings).filter((key) => key !== "__title");
-  function isNodeInput(v: NodeInput | Nested): v is NodeInput {
-    return v && "type" in v;
-  }
-</script>
-
-{#if store}
-  {#each keys as key}
-    {@const value = settings[key]}
-    <div class="wrapper" class:first-level={depth === 0}>
-      {#if isNodeInput(value)}
-        <div class="input input-{settings[key].type}">
-          {#if settings[key].type === "button"}
-            <button on:click={() => settings[key]?.callback?.()}
-              >{settings[key].label || key}</button
-            >
-          {:else if "setting" in value}
-            <label for={key}>{settings[key].label || key}</label>
-            <Input id={key} input={value} bind:value={$store[value?.setting]} />
-          {:else}
-            <label for={key}>{settings[key].label || key}</label>
-            <Input id={key} input={value} bind:value={$store[key]} />
-          {/if}
-        </div>
-      {:else}
-        {#if depth > 0}
-          <hr />
-        {/if}
-
-        <details bind:open={$expandedDetails[key]}>
-          <summary>{settings[key]?.__title || key}</summary>
-          <div class="content">
-            <svelte:self settings={settings[key]} {store} depth={depth + 1} />
-          </div>
-        </details>
-      {/if}
-    </div>
-  {/each}
-{/if}
-
-<style>
-  summary {
-    cursor: pointer;
-    user-select: none;
-    margin-bottom: 1em;
-  }
-  details {
-    padding: 1em;
-    padding-bottom: 0;
-  }
-
-  .input {
-    margin-top: 15px;
-    margin-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding-left: 14px;
-  }
-
-  .input-boolean {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .input-boolean > label {
-    order: 2;
-  }
-
-  .first-level > .input {
-    padding-right: 1rem;
-  }
-
-  .first-level {
-    border-bottom: solid thin var(--outline);
-  }
-  .first-level > details {
-    border: none;
-  }
-  hr {
-    position: absolute;
-    margin: 0;
-    left: 0;
-    right: 0;
-    border: none;
-    border-bottom: solid thin var(--outline);
-  }
-</style>