Resizable sidebar remembered in settings.json; nest tags by / like branches

src/components/RefTree.vue

@@ -19,8 +19,10 @@ const emit = defineEmits<{ jump: [ref: Ref]; toggle: [names: string[]] }>();
 const allHidden = (n: TreeNode) => refsUnder(n).every((r) => props.filters.hidden.includes(r.name));
 const anyVisible = (n: TreeNode) => refsUnder(n).some((r) => isRefVisible(r.name, props.filters));
 
-function toggleFolder(path: string) {
-  if (!props.closed.delete(path)) props.closed.add(path);
+// Keyed by kind too, so a `backup` tag folder and a `backup` branch folder are separate.
+const key = (n: TreeNode) => `${props.kind}:${n.path}`;
+function toggleFolder(n: TreeNode) {
+  if (!props.closed.delete(key(n))) props.closed.add(key(n));
 }
 </script>
 
@@ -30,13 +32,13 @@ function toggleFolder(path: string) {
       class="item"
       :class="{ off: !anyVisible(n), head: n.ref?.name === headRef, folder: n.children.length }"
       :style="{ paddingLeft: 10 + depth * 14 + 'px' }"
-      @click="n.ref ? emit('jump', n.ref) : toggleFolder(n.path)"
+      @click="n.ref ? emit('jump', n.ref) : toggleFolder(n)"
     >
       <span
         v-if="n.children.length"
         class="arrow"
-        :class="{ open: !closed.has(n.path) }"
-        @click.stop="toggleFolder(n.path)"
+        :class="{ open: !closed.has(key(n)) }"
+        @click.stop="toggleFolder(n)"
       >▸</span>
       <span v-else class="arrow" />
       <RefIcon v-if="n.ref" :kind="kind" />
@@ -47,7 +49,7 @@ function toggleFolder(path: string) {
       <EyeButton :shut="allHidden(n)" @click.stop="emit('toggle', refsUnder(n).map((r) => r.name))" />
     </div>
     <RefTree
-      v-if="n.children.length && !closed.has(n.path)"
+      v-if="n.children.length && !closed.has(key(n))"
       :nodes="n.children"
       :kind="kind"
       :depth="depth + 1"