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"

src/components/Sidebar.vue

@@ -34,7 +34,7 @@ const byKind = computed(() => {
 
 const trees = computed((): Record<RefKind, TreeNode[]> => {
   const tree = (refs: Ref[]) => buildTree(refs.map((ref) => ({ short: shortName(ref.name), ref })));
-  // Tags stay a flat list, newest first; equal times fall back to the higher version.
+  // Tags are newest first; equal times fall back to the higher version.
   const tags = [...byKind.value.tag].sort(
     (a, b) =>
       props.timeOf(b.target) - props.timeOf(a.target) ||
@@ -43,7 +43,7 @@ const trees = computed((): Record<RefKind, TreeNode[]> => {
   return {
     local: tree(byKind.value.local),
     remote: tree(byKind.value.remote),
-    tag: tags.map((ref) => ({ label: shortName(ref.name), path: ref.name, children: [], ref })),
+    tag: buildTree(tags.map((ref) => ({ short: shortName(ref.name), ref })), true),
   };
 });
 
@@ -115,7 +115,6 @@ function onPatternKey(e: KeyboardEvent) {
 
 <style scoped>
 .side {
-  width: 270px;
   flex: none;
   background: var(--bg-side);
   border-right: 1px solid var(--border);