Shell redesign: full-width header, centered Messages/Media tabs, list-only sidebar, no md+ burger

[joestump]

Part of #190

Real-Mac owner feedback round (2026-07-06), all four items as one coherent shell change.

What changed

1. Scroll-through gap — killed structurally

The body never scrolls anymore. page_start renders the header as a full-window row above the daisyUI drawer; below it, the sidebar and #main-content are independent scroll containers. conv-header is now sticky top-0 inside the #main-content scroller, so the transcript scrolls under it with zero slit — there is no offset left to drift. The old #main-content { scroll-margin-top: 54px } boosted-nav offset is retired with the body-scroll model (verified: only conversation.html carried a sticky offset; the settings sub-nav and gallery filter bar were never sticky).

2. Full-width header

<header class="app-toolbar"> spans the entire window including over the sidebar. In the desktop shell the macOS traffic lights therefore always overlay the header's left edge: the traffic-light inset is now one unconditional padding-left: 80px under .desktop-chrome, and the whole drawer-state-dependent corner-ownership block (sidebar top strip + drag rules + html.sidebar-collapsed variants) is deleted. The header keeps --wails-draggable: drag; the no-drag child list gained nav (the tab strip's own padding sits between clickable tabs). desktop.js needed no changes — its computed-style check reads the event target, and every interactive child resolves no-drag (verified in-browser).

3. Header contents, left → right

• below-md drawer burger (md:hidden, keyboard-operable label as before)
• the contextual title (.NavTitle behavior kept — "msgbrowse" on home, conversation name on transcripts, always links home), width-capped so it can never run under the centered tabs
• centered tabs: Messages → /, Media → /media, absolutely centered on the window, boosted like all in-app nav, styled as a segmented pair consistent with the settings-subnav aesthetic
• search pill (hidden below sm) plus a new below-sm icon-only /search link, theme toggle, settings gear

4. Tab active state — mechanism and decision

Mechanism: small static JS (shell.js), not an OOB fragment. The server renders the correct state on full loads (baseData.NavTab); shell.js re-derives it from location.pathname on htmx:afterSettle / popstate / htmx:historyRestore — the exact event wiring sidebar.js already uses for the active conversation row, so the two stay consistent. Chosen over an OOB fragment because it adds zero payload to every boosted response, needs no gating between full and partial renders, and handles back/forward for free. No flash of wrong state: full loads are server-correct, and boosted swaps update the tabs at settle time exactly like the sidebar highlight.

Decision (documented in code + tests): / and every /c/* transcript activate Messages; /media and /gallery* activate Media; everything else (/search, /settings, /providers, /logs, /status) activates neither.

Route note: GET /media is a new alias that renders the gallery handler directly (single request, no redirect hop). /gallery stays the canonical surface — its tab/filter links keep their /gallery?... URLs, which is why /gallery* also reads as Media-active. The exact-path pattern cannot shadow the GET /media/{id}/{path...} attachment route.

5. Sidebar = list only

The nav block (Search + Media links) is gone; the sidebar is filter + Pinned + Conversations, scrolling internally (h-full aside, min-h-0 on the list — kept identical on the #186 OOB copy). The #sidebar-pinned-section / #sidebar-conversations / #sidebar-conversations-count OOB target ids and all sidebar.js behavior are preserved.

6. Burger removal + #175 collapse retired

Drawer breakpoint moved lg→md, so a ~1000px window shows the pinned sidebar with no burger (verified at exactly 1000px in headless Chrome). Below md the overlay drawer keeps a header burger, keyboard-operable as before. The #175 lg+ persistent collapse is retired wholesale: html.sidebar-collapsed CSS, the sidebar-toggle.js collapse branch and its localStorage key (the new script also removes the stale key), and the related test assertions. cmd/msgbrowse-desktop sets Wails MinWidth: 800 / MinHeight: 600 so the desktop app can never reach drawer territory — the nested cgo module was built successfully in this environment (make desktop-linux, webkit2gtk-4.1 headers present) alongside make desktop-test.

Two mechanical notes

• Un-layered vs layered cascade: the hand-written .toolbar-icon-btn display rule (un-layered) outranks Tailwind's layered sm:hidden/md:hidden utilities, so the burger/search-link breakpoint gates are restated un-layered in input.css (caught in live verification, covered by the markup + CSS drift tests).
• htmx revealed under inner scrolling: htmx 2.0.4 only re-checks revealed sentinels after a window scroll/resize event, and inner-container scrolls don't bubble. shell.js forwards them (capture-phase listener → synthetic window scroll), keeping the transcript/gallery infinite scroll alive without touching the documented hx-trigger="revealed" contract.

Known trade-off

htmx history snapshots restore window scroll only, so back/forward now lands at the top of the content scroller instead of the previous offset. Inherent to independent scroll areas; deemed acceptable against the structural fix for the scroll-through gap.

Verification

• CGO_ENABLED=0 go build ./... && go vet ./... && go test ./... green; gofmt clean
• rm -rf .tools && make css twice + once more from clean cache — byte-identical app.css committed
• Live headless-Chrome pass against the fixture archive: 1000px (no burger, tabs centered, Messages active), transcript scroll-under with gap == 0 between header bottom and conv-header top, boosted tab sync across /media → /settings → / → history-back, 500px overlay drawer open/close with aria-expanded sync, desktop-chrome 80px inset + drag/no-drag computed values, inner-scroll → window scroll forwarding

🤖 Posted on behalf of @joestump by Claude.