feat: some shut

app/src/lib/node-store/BreadCrumbs.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
+  import { Select } from "@nodes/ui";
   import type { Writable } from "svelte/store";
 
+  let activeStore = 0;
   export let activeId: Writable<string>;
   $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
 </script>
 
 <div class="breadcrumbs">
   {#if activeUser}
-    <button
-      on:click={() => {
-        $activeId = "";
-      }}
-    >
-      root
-    </button>
+    <Select id="root" options={["root"]} bind:value={activeStore}></Select>
     {#if activeCollection}
       <button
         on:click={() => {
@@ -38,7 +34,7 @@
       <span>{activeUser}</span>
     {/if}
   {:else}
-    <span>root</span>
+    <Select id="root" options={["root"]} bind:value={activeStore}></Select>
   {/if}
 </div>
 
@@ -61,7 +57,8 @@
     cursor: pointer;
   }
 
-  .breadcrumbs > button::after {
+  .breadcrumbs > button::after,
+  .breadcrumbs :global(select)::after {
     content: "/";
     position: absolute;
     right: -11px;
@@ -78,4 +75,9 @@
     font-size: 1em;
     opacity: 0.5;
   }
+
+  .breadcrumbs :global(select) {
+    padding: 3px 5px;
+    outline: none;
+  }
 </style>

app/src/lib/node-store/NodeStore.svelte

@@ -26,7 +26,9 @@
 
 <div class="wrapper">
   {#if !activeUser}
-    <h3>Users</h3>
+    <div class="header">
+      <h3>Users</h3>
+    </div>
     {#await nodeRegistry.fetchUsers()}
       <div>Loading...</div>
     {:then users}
@@ -44,7 +46,15 @@
     {#await nodeRegistry.fetchUser(activeUser)}
       <div>Loading...</div>
     {:then user}
-      <h3>Collections</h3>
+      <div class="header">
+        <button
+          on:click={() => {
+            $activeId = "";
+          }}
+          class="i-tabler-arrow-back"
+        ></button>
+        <h3>Collections</h3>
+      </div>
       {#each user.collections as collection}
         <button
           on:click={() => {
@@ -58,35 +68,47 @@
       <div>{error.message}</div>
     {/await}
   {:else if !activeNode}
-    <h3>Nodes</h3>
+    <div class="header">
+      <button
+        on:click={() => {
+          $activeId = activeUser;
+        }}
+        class="i-tabler-arrow-back"
+      ></button>
+      <h3>Nodes</h3>
+    </div>
     {#await nodeRegistry.fetchCollection(`${activeUser}/${activeCollection}`)}
       <div>Loading...</div>
     {:then collection}
       {#each collection.nodes as node}
-        <button
-          on:click={() => {
-            $activeId = node.id;
-          }}
-        >
-          {node.id.split(`/`)[2]}
-        </button>
+        {#await nodeRegistry.fetchNodeDefinition(node.id)}
+          <div>Loading...</div>
+        {:then node}
+          <DraggableNode {node} />
+        {:catch error}
+          <div>{error.message}</div>
+        {/await}
       {/each}
     {:catch error}
       <div>{error.message}</div>
     {/await}
-  {:else}
-    {#await nodeRegistry.fetchNodeDefinition(`${activeUser}/${activeCollection}/${activeNode}`)}
-      <div>Loading...</div>
-    {:then node}
-      <DraggableNode {node} />
-    {:catch error}
-      <div>{error.message}</div>
-    {/await}
   {/if}
 </div>
 
 <style>
   .wrapper {
-    padding: 1em;
+    padding: 0.8em;
+    max-height: calc(100vh - 170px);
+    overflow-y: auto;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  h3 {
+    margin: 0;
   }
 </style>