mockup · sidebar tidy-up round 1

Quotes & Codebooks left sidebars — before / after

Every frame below is drawn with the shipped tokens and the real sidebar.css rules — panel width, type scale, weights, the 7px status dot, the outdented close ×. Nothing here is approximated, so what you see is what lands.

ArtefactFramed. Real pixels only — if it isn't in the frame, it isn't in the product.
CommentaryHatched, ruled left. Reasoning and open questions. Never ships.
ASK Decision pillBlue = you've already called it. Grey = still open, this bench exists to settle it.
palette appearance follows your system — flip macOS to dark to check both
called · remove "Contents"

1 · Quotes sidebar

The title goes. Section and theme headings stay — they're doing real work, separating two different groupings of the same quotes.

Commentary

Correction to what I told you in chat. I said the × sat beside the title and would need re-aligning. It doesn't. .sidebar-header is flex-direction: column and the × carries order:-1 with a -0.5rem hanging indent, so it sits above the title, aligned to where the rail icon was. Drop the title and the × stays exactly where it is. No CSS change needed in the browser.

The two remaining .toc-heading rules keep their bottom rules, so the list still reads as two groups. "Sections" becomes the first thing in the panel — which is what the panel is.


called · title, 3 renames, button

2 · Codebooks sidebar

Four changes at once: title out, "Your tags" → Manual tags, "Built-in" → Default, "Frameworks" → Library, and the "Codebook Library →" button removed.

Commentary

"Library" is the change that earns the most. It stops the heading and the button underneath it saying two different words for one thing — and once the heading says Library, the button reads as a duplicate, which is the argument for deleting it rather than moving it.

The button loses nothing. The browse modal is still reached three ways: the primary button in the Codebooks panel header (same string, visible on the same screen), clicking any greyed row here, and the native Browse Codebooks… menu item.

Open — "Manual tags" may be false. AutoCode-accepted tags land in this same group carrying source:"autocode". They are not manual. Bench 4 puts the three candidates side by side.

Knock-on. The browse modal's own section title is codebook.frameworksHeader = "Codebook frameworks". If Frameworks becomes Library here, that should follow, or the modal contradicts the sidebar that opened it.


open · two lenses or all five?

3 · The title is one shared element

There is a single <span class="sidebar-title"> in SidebarLayout. Commenting it out removes it from all five lenses, not two. Here's what the other three lose.

Commentary

Sessions survives it. "P1 · Rukmini Iyer" is self-evidently a session. The title was restating the rows.

Analysis is the one to look hard at. Without "Signals", the rows are five bare noun phrases — "Delivery slot anxiety" doesn't announce what kind of object it is. This is the one lens where the title was classifying rather than repeating.

Recommendation: take all five anyway. Keeping one exception means a conditional in SidebarLayout that exists solely to preserve a word — and if Analysis genuinely needs the classification, the honest fix is a .toc-heading inside the panel (like Quotes' "Sections"/"Themes"), not a title bar the other four don't need.


open · which word?

4 · "Your tags" → what, exactly

Same panel, three headings. The group holds every tag that isn't from an installed codebook — typed by hand and accepted from AutoCode.

Commentary
  • Manual tags — reads cleanly against "Default" and "Library" (all three become where the tags came from). But it is factually wrong for every AutoCode-accepted tag in the group, and that's a growing share.
  • Project tags — stays true whatever the provenance, and matches the row beneath it, which already renders as "Grocery delivery 2026 tags" in the panel. Slightly duller.
  • Your tags — today's. Ownership rather than origin, so it sits awkwardly beside two origin words.

One more thing this key does: codebook.yourTags is also the fallback heading in the Codebooks panel when a project has no name. Whichever word wins shows up there too.


open · did you mean change the default?

5 · Panel width — 280 today, 200 minimum

You said the minimum width is a good default. Read one way that's "leave it alone"; read the other it's "make 200 the default". Both drawn with the same rows.

Commentary

Framework titles are the stress test — Nielsen's runs to four lines at 200px against three at 280px. Everything else in both panels is unaffected. If you meant "leave the minimum where it is", say so and I'll change nothing; if you meant "ship 200 as the default", it's one constant (DEFAULT_WIDTH) and the existing per-user saved width still wins.


open · collapse the empty header?

6 · The desktop app has no close ×

In the Mac app the sidebars are driven from the native toolbar, so SidebarLayout gates the × out. Remove the title as well and the header holds nothing — but still occupies space-md + 0.25rem of the panel.

after · header kept
after · header collapsed

hatched red = empty box still taking vertical space

Commentary

It's ~1rem of nothing at the top of every panel on the Mac, and it pushes the first heading off the datum the toolbar establishes. Cheap to fix: render the header only when it has a child. In the browser nothing changes — the × keeps the header alive there.

Vocabulary drift, for later. The native View menu still says Show Contents / Hide Contents and the toolbar button is labelled Contents. Once no panel says the word, that's the only place it survives. Menus naming a panel is ordinary Mac practice, so it can stand — but if it bothers you, Show Sidebar is the stock phrasing.