feat: improve get_args functions

app/src/lib/settings/Keymap.svelte

@@ -14,7 +14,7 @@
         <div class="command-wrapper">
           <div class="command">
             {#if key.ctrl}
-              <span>Ctrl + </span>
+              <span>Ctrl</span>
             {/if}
             {#if key.shift}
               <span>Shift</span>
@@ -22,7 +22,7 @@
             {#if key.alt}
               <span>Alt</span>
             {/if}
-            <span>{key.key}</span>
+            {key.key}
           </div>
         </div>
         <p>{key.description}</p>
@@ -69,4 +69,9 @@
     display: flex;
     align-items: center;
   }
+
+  span::after {
+    content: " +";
+    opacity: 0.5;
+  }
 </style>

app/src/lib/settings/NestedSettings.svelte

@@ -1,4 +1,5 @@
 <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";
@@ -7,6 +8,13 @@
     [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;
@@ -36,7 +44,11 @@
         {/if}
       </div>
     {:else}
-      <details>
+      {#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} />
@@ -50,11 +62,11 @@
   summary {
     cursor: pointer;
     user-select: none;
+    margin-bottom: 1em;
   }
   details {
-    padding: 1rem;
-    box-sizing: border-box;
-    border-bottom: solid thin var(--outline);
+    padding: 1em;
+    padding-bottom: 0;
   }
 
   .input {
@@ -69,6 +81,7 @@
   .input-boolean {
     display: flex;
     flex-direction: row;
+    align-items: center;
   }
   .input-boolean > label {
     order: 2;
@@ -84,4 +97,12 @@
   .first-level > details {
     border: none;
   }
+  hr {
+    position: absolute;
+    margin: 0;
+    left: 0;
+    right: 0;
+    border: none;
+    border-bottom: solid thin var(--outline);
+  }
 </style>

app/src/lib/settings/Settings.svelte

@@ -90,6 +90,7 @@
         {:else}
           <div class="flex flex-col">
             <NestedSettings
+              id={$activePanel}
               settings={constructNested(panels[$activePanel])}
               store={panels[$activePanel].settings}
             />
@@ -125,6 +126,7 @@
 
   .content {
     background: var(--layer-1);
+    position: relative;
   }
 
   .tabs {

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

@@ -47,22 +47,6 @@ export const AppSettingTypes = {
       value: true
     }
   },
-  stressTest: {
-    __title: "Stress Test",
-    amount: {
-      type: "integer",
-      min: 2,
-      max: 15
-    },
-    loadGrid: {
-      type: "button",
-      label: "Load Grid"
-    },
-    loadTree: {
-      type: "button",
-      label: "Load Tree"
-    },
-  },
   debug: {
     wireframe: {
       type: "boolean",
@@ -74,6 +58,22 @@ export const AppSettingTypes = {
       label: "Show Indices",
       value: false,
     },
+    stressTest: {
+      __title: "Stress Test",
+      amount: {
+        type: "integer",
+        min: 2,
+        max: 15
+      },
+      loadGrid: {
+        type: "button",
+        label: "Load Grid"
+      },
+      loadTree: {
+        type: "button",
+        label: "Load Tree"
+      },
+    },
   }
 }