Collapsible directory

src/App.svelte

@@ -7,31 +7,32 @@
   let pdfs: string[] = []
   let isCollapse = true
 
-  let tree: NodeT[] = []
+  let trees: NodeT[] = []
 
   onMount(async () => {
     const links = await fetch('./pdf/registry.txt')
-    .then(res => {
-      if (res.ok) return res.text()
-      else throw new Error(`Can't download registry.txt`)
-    })
-    .then(txt => txt.trim())
-    .then(txt => txt.replaceAll('.tex', '.pdf'))
-    .then(txt => txt.replaceAll('./', '/pdf/'))
-    .then(txt => txt.split('\n'))
-    .catch(_ => [])
+      .then(res => {
+        if (res.ok) return res.text()
+        else throw new Error(`Can't download registry.txt`)
+      })
+      .then(txt => txt.trim())
+      .then(txt => txt.replaceAll('.tex', '.pdf'))
+      .then(txt => txt.replaceAll('./', '/pdf/'))
+      .then(txt => txt.split('\n'))
+      .catch(_ => [])
 
     if (links.length === 0) return
     pdfs = links
 
-    tree = pathsToFileTree(links)
-    console.log(tree);
+    trees = pathsToFileTree(links)
   })
 </script>
 
 <main class="h-full p-4 pb-32 md:w-[512pt] mx-auto md:items-center">
   <h1 class="text-3xl font-bold mb-5">Notes</h1>
   <div class="rounded-md overflow-hidden dark:bg-zinc-800 bg-zinc-100 w-full">
-    <FileTree {tree} />
+    {#each trees as tree}
+      <FileTree {tree} />
+    {/each}
   </div>
 </main>

src/File.svelte

@@ -16,13 +16,12 @@
   })
 </script>
 
-  {#if href !== ''}
-    <div bind:this={element} class="w-full px-3 py-2 md:px-2 md:py-1">
-      <a href="{href}" class="hover:underline">{title}</a>
-    </div>
-  {:else}
-    <button bind:this={element} class="dark:hover:bg-zinc-600 hover:bg-zinc-200 w-full px-3 py-2 md:px-2 md:py-1 text-left">
-      {title}
-    </button>
-  {/if}
-  <!-- <h1 class="">{title}</h1> -->
+{#if href !== ''}
+  <div bind:this={element} class="w-full px-3 py-2 md:px-2 md:py-1">
+    <a href="{href}" class="hover:underline">{title}</a>
+  </div>
+{:else}
+  <button on:click bind:this={element} class="dark:hover:bg-zinc-600 hover:bg-zinc-200 w-full px-3 py-2 md:px-2 md:py-1 text-left">
+    {title}
+  </button>
+{/if}

src/FileTree.svelte

@@ -1,13 +1,26 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import File from './File.svelte';
   import { type NodeT } from './FileTree'
 
-  export let tree: NodeT[]
+  export let tree: NodeT
+  let isCollapse = true
+  onMount(async () => {
+    const collapse = localStorage.getItem(tree.key)
+    if (collapse) isCollapse = JSON.parse(collapse)
+  })
 </script>
 
-{#each tree as item}
-  <File title={item.name} level={item.level} href={item.href}/>
-  {#if Array.isArray(item.children)}
-    <svelte:self tree={item.children} />
-  {/if}
-{/each}
+<File title={tree.name} level={tree.level} href={tree.href} on:click={
+  () =>{
+    isCollapse = !isCollapse
+    localStorage.setItem(tree.key, JSON.stringify(isCollapse))
+  }
+}/>
+{#if Array.isArray(tree.children)}
+<div class="{isCollapse ? 'max-h-0' : 'max-h-max'} overflow-hidden">
+  {#each tree.children as child}
+    <svelte:self tree={child} />
+  {/each}
+</div>
+{/if}