Left carets, home star, project subtitles, empty-group rename fix

Fold carets move to the left of the label (aligned spacer for leaf
rows); the hover trash overlays the row end so long titles run to the
edge. A muted star marks the home page. Renaming a group with no
children no longer loses its input — every group-label single-click
consequence now defers behind the same 280ms timer the double-click
cancels. The home page's first paragraph becomes the project's
subtitle (derived on store, persisted on the registry) and previews
under each title in the project dropdown.

Co-Authored-By: Codex <noreply@openai.com>
Co-Authored-By: Claude Opus <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.e2e-dnd-data/docs/Mu8PCMYK.md

@@ -1,2 +0,0 @@
-# DnD e2e
-

.e2e-dnd-data/docs/hUfaQZjM.md

@@ -0,0 +1,3 @@
+# DnD e2e
+
+A tiny project used by the browser test.

.e2e-dnd-data/registry.json

@@ -1,29 +1,30 @@
 {
-  "Mu8PCMYK": {
+  "hUfaQZjM": {
     "title": "DnD e2e",
-    "createdAt": 1785799046623,
-    "updatedAt": 1785799061921,
+    "createdAt": 1785800941745,
+    "updatedAt": 1785800977161,
     "createdBy": "alice",
     "pages": {
       "_structure": {
         "title": "Structure",
-        "createdAt": 1785799046633
+        "createdAt": 1785800941755
       },
       "intro": {
         "title": "Intro Renamed",
-        "createdAt": 1785799046640,
+        "createdAt": 1785800941762,
         "createdBy": "alice"
       },
       "notes": {
         "title": "Notes",
-        "createdAt": 1785799046652,
+        "createdAt": 1785800941771,
         "createdBy": "alice"
       },
       "untitled": {
         "title": "Fresh Page",
-        "createdAt": 1785799059504,
+        "createdAt": 1785800954962,
         "createdBy": "alice"
       }
-    }
+    },
+    "subtitle": "A tiny project used by the browser test."
   }
 }

.e2e-dnd-data/session-secret

@@ -1 +1 @@
-bce198fbd9965593ec73dc9d4be025e270943af1b54503e30d64efbb3252362e
+cc366cbee91eb082c31e73e023746c356916662d233098a2d4a5533b684cc451

client/app.css

@@ -254,6 +254,8 @@ textarea { resize: vertical; }
 .doc-row.current { background: var(--accent-soft); }
 .doc-row-main { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
 .doc-row .title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* the project's subtitle (home page's first paragraph) — a description line */
+.doc-row .doc-row-sub { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .doc-row .meta { font-size: 11.5px; color: var(--text-3); }
 .doc-row .iconbtn { opacity: 0; flex-shrink: 0; }
 .doc-row:hover .iconbtn, .doc-row .iconbtn:focus-visible { opacity: 1; }
@@ -759,28 +761,32 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 #page-tree .nav-cat { margin-bottom: 10px; }
 #page-tree .nav-cat .nav-cat { margin-bottom: 2px; }
 #page-tree .tree-row {
-  display: flex; align-items: center; min-width: 0; border-left: 2px solid transparent; border-radius: 5px;
+  --sidebar-row-bg: var(--bg);
+  position: relative; display: flex; align-items: center; min-width: 0; border-left: 2px solid transparent; border-radius: 5px;
 }
 #page-tree a {
   display: block; flex: 1; min-width: 0; padding: 5px 9px; color: var(--text-2); font-size: 12.5px; line-height: 1.35; text-decoration: none;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   transition: background .12s, color .12s;
 }
-#page-tree .page-row:hover { background: var(--hl-weak); }
+#page-tree .page-row:hover { --sidebar-row-bg: var(--hl-weak); background: var(--sidebar-row-bg); }
 #page-tree .page-row:hover > a { color: var(--text); }
-#page-tree .page-row:has(a.current) { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+#page-tree .page-row:has(a.current) {
+  --sidebar-row-bg: color-mix(in srgb, var(--accent) 12%, transparent);
+  border-left-color: var(--accent); background: var(--sidebar-row-bg);
+}
 #page-tree a.current { color: var(--accent); font-weight: 500; }
-#page-tree .tree-row[data-selected='1']:not(:has(a.current)) { background: var(--hl); }
+#page-tree .tree-row[data-selected='1']:not(:has(a.current)) { --sidebar-row-bg: var(--hl); background: var(--sidebar-row-bg); }
 #page-tree .tree-row[data-selected='1']:not(:has(a.current)) a,
 #page-tree .group-row[data-selected='1'] .group-label { color: var(--text); }
 #page-tree a.ghost-page { color: var(--text-3); font-style: italic; }
 #page-tree .tree-caret,
 #page-tree .tree-caret-spacer {
-  order: 3; margin-left: auto; width: 16px; height: 26px; flex: 0 0 16px; padding: 0; border: 0; background: transparent;
+  width: 16px; height: 26px; flex: 0 0 16px; margin: 0; padding: 0; border: 0; background: transparent;
 }
 #page-tree .tree-caret {
   color: var(--text-3); cursor: pointer; font-size: 18px; line-height: 26px; transform: rotate(0deg);
-  text-align: center; transition: transform .15s, color .12s;
+  align-self: center; text-align: center; transition: transform .15s, color .12s;
 }
 #page-tree .tree-caret.collapsed { transform: rotate(-90deg); }
 #page-tree .tree-caret:hover { color: var(--text); }
@@ -794,7 +800,8 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 #page-tree .group-row.lvl-2 .group-label { font-size: 12.5px; }
 #page-tree .group-row.lvl-3 .group-label,
 #page-tree .group-row.lvl-4 .group-label { color: var(--text-2); font-size: 12px; }
-#page-tree .group-row:hover { background: var(--hl-weak); }
+#page-tree .group-row:hover { --sidebar-row-bg: var(--hl-weak); background: var(--sidebar-row-bg); }
+#page-tree .home-star { width: 12px; height: 12px; flex: 0 0 12px; color: var(--text-3); }
 #page-tree .sidebar-rename {
   flex: 1; min-width: 0; margin: 1px 3px; padding: 3px 5px; border: 1px solid var(--accent); border-radius: 5px;
   background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
@@ -907,12 +914,11 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 #margin-toggle:hover { color: var(--text); }
 
 
-/* The delete slot is always reserved: hover only changes visibility, so labels
-   and carets never jump. It is the final control at the far right. */
-#page-tree .page-del, #page-tree .group-del, #page-tree .tree-delete-spacer {
-  order: 4; width: 22px; height: 26px; flex: 0 0 22px; margin: 0; padding: 0 2px;
-}
+/* Trash overlays the row's trailing edge instead of shortening every title.
+   Its opaque hover-matched fill lets text disappear cleanly underneath. */
 #page-tree .page-del, #page-tree .group-del {
+  position: absolute; right: 0; top: 50%; z-index: 2; width: 22px; height: 26px; margin: 0; padding: 0 2px;
+  transform: translateY(-50%); background: var(--sidebar-row-bg);
   visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s, color .12s, background .12s;
 }
 #page-tree .tree-row:hover > .page-del, #page-tree .tree-row:hover > .group-del,
@@ -921,7 +927,7 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 }
 #page-tree .page-del svg, #page-tree .group-del svg { width: 13px; height: 13px; }
 #page-tree .page-del:hover, #page-tree .group-del:hover { color: var(--danger); }
-#page-tree .page-del.arming, #page-tree .group-del.arming { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
+#page-tree .page-del.arming, #page-tree .group-del.arming { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--sidebar-row-bg)); }
 
 
 /* --- slug legend on the structure page --- */
@@ -1262,7 +1268,7 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   #page-tree a { padding: 10px 10px; border-radius: 8px; }
   #page-tree .tree-caret, #page-tree .tree-caret-spacer { width: 24px; height: 40px; flex-basis: 24px; line-height: 40px; }
   #page-tree .group-label { padding: 10px 6px; font-size: 13.5px; }
-  #page-tree .page-del, #page-tree .group-del, #page-tree .tree-delete-spacer { width: 30px; height: 40px; flex-basis: 30px; }
+  #page-tree .page-del, #page-tree .group-del { width: 30px; height: 40px; }
   #page-tree .page-del, #page-tree .group-del { visibility: visible; opacity: 1; pointer-events: auto; padding: 6px; }
   #page-tree .page-del svg, #page-tree .group-del svg { width: 16px; height: 16px; }
   /* the desktop edge tabs are replaced by real header buttons */

client/src/common.js

@@ -3,6 +3,7 @@
 const ICONS = {
   file: '<path d="M6 3.5h7l3 3v12H6z"/><path d="M13 3.5v3h3"/>',
   folder: '<path d="M3.5 6.5h6l2-2h7v13h-15z"/>',
+  star: '<path d="M11 3.5l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7z"/>',
   tree: '<path d="M4 5h14M9 11h9M9 17h9M4 5v9.5a2.5 2.5 0 0 0 2.5 2.5H6"/>',
   key: '<circle cx="7.5" cy="14.5" r="3.5"/><path d="M10 12l8-8M14.5 4.5l3 3M12 7l2.5 2.5"/>',
   todo: '<rect x="4" y="4" width="6" height="6" rx="1.5"/><path d="M5.2 7l1.3 1.3L8.8 6"/><path d="M13 6.5h6M13 11h6M13 15.5h6"/><rect x="4" y="12.5" width="6" height="6" rx="1.5"/>',

client/src/doc.js

@@ -1608,10 +1608,13 @@ async function loadStructure() {
         let clickTimer = null
         label.addEventListener('click', e => {
           clearTimeout(clickTimer)
-          const plain = updateSelection(e, key)
-          if (!plain) return loadStructure()
-          if (hasChildren) clickTimer = setTimeout(() => setSidebarCollapsed(key, !isCollapsed), 280)
-          else loadStructure()
+          const modifiers = { shiftKey: e.shiftKey, metaKey: e.metaKey, ctrlKey: e.ctrlKey }
+          clickTimer = setTimeout(() => {
+            const plain = updateSelection(modifiers, key)
+            if (!plain) return loadStructure()
+            if (hasChildren) setSidebarCollapsed(key, !isCollapsed)
+            else loadStructure()
+          }, 280)
         })
         label.addEventListener('dblclick', e => {
           e.preventDefault()
@@ -1639,9 +1642,10 @@ async function loadStructure() {
           if (e.button !== 0) return
           e.preventDefault()
           clearTimeout(clickTimer)
-          const plain = updateSelection(e, key)
-          if (!plain) return loadStructure()
+          const modifiers = { shiftKey: e.shiftKey, metaKey: e.metaKey, ctrlKey: e.ctrlKey }
           clickTimer = setTimeout(() => {
+            const plain = updateSelection(modifiers, key)
+            if (!plain) return loadStructure()
             if (node.slug === pageSlug) loadStructure()
             else openPage(node.slug)
           }, 280)
@@ -1653,9 +1657,13 @@ async function loadStructure() {
           if (!known.has(node.slug)) return
           beginPageRename(a, node.slug, pageTitle)
         })
+        if (node.slug === 'home') {
+          const star = icon('star')
+          star.classList.add('home-star')
+          row.appendChild(star)
+        }
         row.appendChild(a)
         if (deletablePage(node.slug)) row.appendChild(pageDeleteBtn(node.slug))
-        else row.appendChild(el('span', { class: 'tree-delete-spacer', 'aria-hidden': 'true' }))
       }
       li.appendChild(row)
       if (hasChildren && !isCollapsed) li.appendChild(renderNodes(node.children, refPath, key, depth + 1))
@@ -1686,9 +1694,10 @@ async function loadStructure() {
         if (e.button !== 0) return
         e.preventDefault()
         clearTimeout(clickTimer)
-        const plain = updateSelection(e, slug)
-        if (!plain) return loadStructure()
+        const modifiers = { shiftKey: e.shiftKey, metaKey: e.metaKey, ctrlKey: e.ctrlKey }
         clickTimer = setTimeout(() => {
+          const plain = updateSelection(modifiers, slug)
+          if (!plain) return loadStructure()
           if (slug === pageSlug) loadStructure()
           else openPage(slug)
         }, 280)
@@ -1701,7 +1710,6 @@ async function loadStructure() {
       })
       row.appendChild(a)
       if (deletablePage(slug)) row.appendChild(pageDeleteBtn(slug))
-      else row.appendChild(el('span', { class: 'tree-delete-spacer', 'aria-hidden': 'true' }))
       li.appendChild(row)
       ul.appendChild(li)
     }
@@ -2951,6 +2959,7 @@ function openComposer(editor, opts = {}) {
 // There is no separate index page: the document you are in is the whole app, and
 // this is how you reach the others. Switching is a normal navigation — the shell
 // is cheap and it keeps one document per URL, which is what sharing a link means.
+
 function wireDocsMenu() {
   const btn = document.getElementById('docs-btn')
   const pop = document.getElementById('docs-pop')
@@ -2970,6 +2979,9 @@ function wireDocsMenu() {
       const row = el('div', { class: 'doc-row' + (d.id === docId ? ' current' : '') })
       const link = el('a', { href: `/d/${d.id}`, class: 'doc-row-main' })
       link.appendChild(el('span', { class: 'title' }, d.title || 'Untitled'))
+      // how the project itself opens, so the list says what each one is about.
+      // Nothing written under home's title yet = no second line at all.
+      if (d.subtitle) link.appendChild(el('span', { class: 'doc-row-sub' }, d.subtitle))
       const who = d.createdBy && d.createdBy !== state.me?.username ? `${d.createdBy} · ` : ''
       // timeAgo says 'now' for anything inside a minute, which does not take 'ago'
       const when = timeAgo(d.updatedAt)

server/api.js

@@ -40,7 +40,9 @@ export function apiRouter() {
     const reg = store.getRegistry()
     const docs = Object.entries(reg)
       .filter(([id]) => store.canAccessDoc(id, req.user.username))
-      .map(([id, meta]) => ({ id, ...meta }))
+      // subtitle spelled out: the switcher shows it under each title, and a
+      // project that has none must still say so rather than leave the key off
+      .map(([id, meta]) => ({ id, ...meta, subtitle: meta.subtitle || null }))
       .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
     res.json({ docs })
   })
@@ -90,6 +92,7 @@ export function apiRouter() {
     res.json({
       id: req.params.id,
       title: meta.title,
+      subtitle: meta.subtitle || null,
       page: docName.includes('::') ? docName.split('::')[1] : 'home',
       pages: Object.entries(pages).map(([slug, p]) => ({ slug, title: p.title || slug })),
       created_by: meta.createdBy || null,

server/collab.js

@@ -195,27 +195,60 @@ export const hocuspocus = new Hocuspocus({
     let homeMarkdown = null
     for (const name of projectPageNames(projectId)) {
       try {
+        const slug = pageSlugOf(name)
         const pm = yDocToProsemirrorJSON(document, pageField(name))
-        if (pageSlugOf(name) === 'home') homeMarkdown = pmToMarkdown(pm)
-        store.touchProjectOnStore(projectId, pageSlugOf(name), titleFromPm(pm))
+        if (slug === 'home') homeMarkdown = pmToMarkdown(pm)
+        // the subtitle only describes the project, so only home has one
+        store.touchProjectOnStore(projectId, slug, titleFromPm(pm), slug === 'home' ? subtitleFromPm(pm) : null)
       } catch {}
     }
     store.saveDocState(projectId, Y.encodeStateAsUpdate(document), homeMarkdown)
   },
 })
 
-function titleFromPm(pm) {
-  for (const node of pm.content || []) {
-    const text = blockToMarkdown(node)
+// The plain text of a ProseMirror block, with the markup that markdown adds
+// around it taken back off — what a title or a subtitle reads as, not how it is
+// written. (blockPlainText below is the same idea for *parsed markdown* blocks.)
+function pmBlockText(node) {
+  return (
+    blockToMarkdown(node)
       ?.replace(/^#+\s*/, '')
+      .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1') // images -> their alt text, if any
       .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1') // links -> their text
       .replace(/[*_`]/g, '')
-      .trim()
+      .trim() || ''
+  )
+}
+
+function titleFromPm(pm) {
+  for (const node of pm.content || []) {
+    const text = pmBlockText(node)
     if (text) return text.slice(0, 80)
   }
   return null
 }
 
+// The project's one-line description: the first ordinary paragraph under the
+// title, the way the page itself opens. Derived like the title — read-only, on
+// store, never written back into the document. Section headings, code, lists and
+// tables are not prose, so they are passed over rather than ending the search.
+const SUBTITLE_MAX = 160
+
+function subtitleFromPm(pm) {
+  let pastTitle = false
+  for (const node of pm.content || []) {
+    const text = pmBlockText(node)
+    if (!text) continue
+    if (!pastTitle) {
+      pastTitle = true // whatever it was, that block is the title
+      continue
+    }
+    if (node.type !== 'paragraph') continue
+    return text.slice(0, SUBTITLE_MAX).trim()
+  }
+  return null
+}
+
 // --- document watcher: detect new @mentions in comment threads ---
 
 // Watch the LIVE document instance, not just the name. A document can be

server/store.js

@@ -145,7 +145,7 @@ export function canAccessDoc(docName, username) {
 // One combined registry touch per doc store, and only when something actually
 // changed — registry.json lives on bucket-mounted storage where every sync
 // write is expensive (and a hung write blocks the event loop).
-export function touchProjectOnStore(projectId, slug, title) {
+export function touchProjectOnStore(projectId, slug, title, subtitle) {
   const reg = getRegistry()
   const meta = reg[projectId]
   if (!meta) return
@@ -157,6 +157,15 @@ export function touchProjectOnStore(projectId, slug, title) {
       next.title = title || 'Untitled'
       dirty = true
     }
+    // the project's one-line description, from home's opening paragraph. Absent
+    // (the paragraph was emptied or never written) drops the key rather than
+    // storing a null — a write either way, but only when it really changed.
+    const sub = subtitle || null
+    if (sub !== (meta.subtitle || null)) {
+      if (sub) next.subtitle = sub
+      else delete next.subtitle
+      dirty = true
+    }
   } else {
     const pageTitle = slug === '_structure' ? 'Structure' : title || slug
     if (meta.pages?.[slug]?.title !== pageTitle) {

test/e2e-dnd.mjs

@@ -236,8 +236,48 @@ try {
     assert.ok(!st.tree.some(n => n.group === 'Extras'), 'armed second click dissolves')
   }
 
+  // --- round 4: caret left, home star, empty-group rename, subtitle ---
+
+  // 19. caret sits LEFT of the label; home row carries the star
+  {
+    const order = await page.evaluate(() => {
+      const row = document.querySelector('#page-tree [data-key="home"]')
+      return [...row.children].map(c => c.className && String(c.className.baseVal ?? c.className).split(' ')[0])
+    })
+    const caretAt = order.findIndex(c => c && c.startsWith('tree-caret'))
+    const starAt = order.findIndex(c => c === 'icon' || c === 'home-star')
+    const labelAt = order.findIndex(c => !c || c === 'current' || c === '')
+    assert.ok(caretAt === 0, 'caret/spacer first in the row: ' + JSON.stringify(order))
+    assert.ok(await page.locator('#page-tree [data-key="home"] .home-star').count(), 'home star present')
+    assert.ok(starAt < labelAt || labelAt === -1, 'star before label: ' + JSON.stringify(order))
+  }
+
+  // 20. renaming a group with NO children: the input must survive the double-click
+  await api(`/api/docs/${doc.id}/structure/groups`, { label: 'Lonely' })
+  await page.waitForTimeout(1200)
+  await page.dblclick(`#page-tree [data-key='"Lonely"'] .group-label`)
+  await page.waitForTimeout(600) // long enough for any stray re-render to kill it
+  const lonelyInput = page.locator('#page-tree input.sidebar-rename')
+  assert.ok(await lonelyInput.count(), 'rename input still open on an empty group')
+  await lonelyInput.fill('Kept')
+  await lonelyInput.press('Enter')
+  await page.waitForTimeout(700)
+  st = await api(`/api/docs/${doc.id}/structure`)
+  assert.ok(st.tree.some(n => n.group === 'Kept'), 'empty group renamed: ' + JSON.stringify(st.tree))
+
+  // 21. home subtitle: first paragraph under the H1 previews in the project dropdown
+  await page.click('#page-tree [data-key="home"] a')
+  await page.waitForTimeout(800)
+  await page.evaluate(() => window.__editor.commands.focus('end'))
+  await page.keyboard.type('A tiny project used by the browser test.')
+  await page.waitForTimeout(4000) // store debounce persists the registry subtitle
+  await page.click('#docs-btn')
+  await page.waitForSelector('.doc-row', { timeout: 5000 })
+  const sub = await page.locator('.doc-row .doc-row-sub').first().textContent()
+  assert.ok(sub.includes('tiny project'), 'subtitle previews in the dropdown: ' + sub)
+
   await page.screenshot({ path: path.join(root, '.e2e-final.png') })
-  console.log('E2E DND TESTS PASSED (rounds 1+2+3)')
+  console.log('E2E DND TESTS PASSED (rounds 1-4)')
   console.log(st.raw)
 } finally {
   await browser?.close()