More things

template/app/components/TreeNode.vue

@@ -4,7 +4,7 @@ import { useTreeState } from '~/composables/useTreeState'
 defineProps({ nodes: Array, depth: { type: Number, default: 0 } })
 
 const router = useRouter()
-const { collapsed } = useTreeState()   // ← shared state, not local ref
+const { collapsed } = useTreeState()
 
 function getTitle(node) {
   if (node.title === 'index') return 'Index'
@@ -19,12 +19,37 @@ function navigate(path) {
 function toggle(key) {
   collapsed.value[key] = !collapsed.value[key]
 }
+
+/**
+ * If the folder contains a child whose path/title matches the folder itself
+ * (e.g. places/ has a child at places/places.md), return that child.
+ * Otherwise return null.
+ */
+function getSelfTitledChild(node) {
+  if (!node.children?.length) return null
+  const folderSlug = node.path?.split('/').pop() ?? node.title
+  return node.children.find((child) => {
+    const childSlug = child.path?.split('/').pop() ?? child.title
+    return childSlug === folderSlug
+  }) ?? null
+}
+
+/**
+ * Children to actually render — excludes the self-titled child so it
+ * doesn't appear twice (once as the clickable folder label, once in the list).
+ */
+function visibleChildren(node) {
+  const selfTitled = getSelfTitledChild(node)
+  if (!selfTitled) return node.children
+  return node.children.filter((c) => c !== selfTitled)
+}
 </script>
 
 <template>
   <ul :style="{ paddingLeft: depth ? '1rem' : '0' }">
     <li v-for="node in nodes" :key="node.path ?? node.title">
 
+      <!-- Leaf node (no children) -->
       <template v-if="!node.children?.length">
         <a v-if="node.path" :href="node.path" @click.prevent="navigate(node.path)">
           {{ getTitle(node) }}
@@ -32,14 +57,33 @@ function toggle(key) {
         <span v-else>{{ getTitle(node) }}</span>
       </template>
 
+      <!-- Folder node -->
       <template v-else>
-        <button class="folder-toggle" @click="toggle(node.path ?? node.title)">
-          <span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
-          {{ getTitle(node) }}
-        </button>
+        <div class="folder-row">
+          <!-- Chevron toggle (always present) -->
+          <button
+            class="folder-toggle"
+            @click="toggle(node.path ?? node.title)"
+            :aria-expanded="!collapsed[node.path ?? node.title]"
+          >
+            <span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
+          </button>
+
+          <!-- Folder label: clickable link if there's a self-titled child, plain text otherwise -->
+          <a
+            v-if="getSelfTitledChild(node)"
+            class="folder-label folder-label--link"
+            :href="getSelfTitledChild(node).path"
+            @click.prevent="navigate(getSelfTitledChild(node).path)"
+          >
+            {{ getTitle(node) }}
+          </a>
+          <span v-else class="folder-label">{{ getTitle(node) }}</span>
+        </div>
+
         <TreeNode
           v-if="!collapsed[node.path ?? node.title]"
-          :nodes="node.children"
+          :nodes="visibleChildren(node)"
           :depth="depth + 1"
         />
       </template>
@@ -62,24 +106,44 @@ a {
   color: var(--text-link);
 }
 
+.folder-row {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
 .folder-toggle {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
+  flex-shrink: 0;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   color: inherit;
   font: inherit;
-  width: 100%;
-  text-align: left;
+  line-height: 1;
 
   &:hover {
     color: var(--text-link);
   }
 }
 
+.folder-label {
+  flex: 1;
+  cursor: default;
+
+  &--link {
+    color: var(--text-link);
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .chevron {
   display: inline-block;
   font-style: normal;