One project on screen at a time. A permanent 52 px rail for everything global, a 236 px panel for the project you're in, and a top bar that finally says which board you're looking at. This document takes that idea all the way down — anatomy, behaviour at fifty projects, the multi-project reviewer, the icon and emoji system, every breakpoint down to mobile web, and what it costs to build.
Your answers to the open questions, now treated as fixed constraints. Everything below obeys them.
You said "monogram" for boards and views. I've read that as monochrome — single-colour line glyphs, no per-board hue on the glyph itself — because that's the proposal it was answering and because a literal two-letter monogram on a board row (CP for "Core Platform") would be less scannable than a shape, not more.
If you did mean literal letter monograms for boards, say so and I'll redraw §06 — it's a contained change, but it changes every board row in both alternatives.
A's whole bet is that the sidebar should render one project, not all of them. That's what makes its height constant as you go from 20 products to 50. The cost is obvious and has to be paid for explicitly: the person who checks in on six products every morning can no longer see six trees at once.
Opens Janus on their board, works tickets, occasionally hits Backlog or the Roadmap. Wants the fastest possible path to their boards and nothing else on screen. A serves this natively — the panel is their project and nothing but.
An EM, a QA lead, a PM. Needs a morning sweep: what moved, what's blocked, what's in review — across everything. A serves this not by showing six trees but by three dedicated affordances: cross-project My Work, pinned project tiles in the rail, and ⌘P. §04 is entirely about this persona.
Every slot, its size, and why it's there. The rail is fixed and never scrolls; the panel scrolls only when a project has an unusual number of boards.
Click returns Home. In a multi-tenant future this is where a workspace switcher would live; today it's a logo and nothing more.
Home · My Work · Search · Agents · Reports · Config. Six is the ceiling: past that the rail stops being scannable and starts being a list. Anything new goes inside one of these six, never beside them.
The reviewer's shortcut. Each is the project's colour tile; one click swaps the whole panel. Separated from the global block by a hairline so the two never read as one list. Overflow beyond six goes to ⌘P.
Avatar opens the account menu that now absorbs Preferences, Admin Management and Application Preferences — the three rows that used to compete with projects for vertical space.
Colour tile + name + key + the up/down chevron pair that signals "this swaps". The single most-clicked control in the panel, so it gets the top slot and a distinct raised surface.
Monochrome glyph, board name, and a 5 px dot carrying board.color. The dot is the only place per-board colour appears. Sprint boards get no special glyph — mode is shown in the top bar where it's actionable.
One step quieter than boards — 60% opacity glyph, dimmer label. That weight difference is what encodes "lens over work" vs "place work lives" without adding chrome.
Only rendered when project.qa_enabled. Splitting it out of VIEWS stops a QA project's sub-tree reading as a ten-item wall.
Settings and Members, gated on the same project.role === 'project_admin' || isSuperAdmin check the current cog uses. Moving them here kills the per-row cog entirely.
| Element | Size | Scroll | Collapsed behaviour |
|---|---|---|---|
| Rail | 52px fixed | never | always visible — this is the point |
| Context panel | 236px, resizable 200–320 | only the group block | hides entirely; board access moves to the top-bar switcher |
| Top bar | 44px | sticky | unchanged |
| Total chrome | 288px → 52px | — | vs. 256px → 64px today |
This is the constraint that decides the whole design. Because the panel renders one project, the sidebar's height is independent of project count — twenty products and two hundred cost the same pixels. What has to be designed is not the list, it's the switch.
You said old products stay on the board rather than washing out. At 50 that is fine if there's a way to say "this one is dormant" — otherwise the switcher's alphabetical tail grows forever and ⌘P starts returning three things you don't want above the one you do.
The cheapest version is a per-user Hide from my sidebar toggle, which needs no schema change if pins are client-side and no policy debate. A real project.status = active | archived field is better but is a product decision beyond this ticket. I'd ship the per-user hide with A and raise archiving separately.
The persona A is weakest for, so it gets a dedicated answer rather than a hand-wave. The insight: this person doesn't actually want six navigation trees — they want six answers. Trees are how they get them today because nothing better exists.
Assigned to me · reviewing · blocked · mentioned — across every project the user can see. Replaces the act of visiting six boards to check whether anything needs them.
For the sweeps that genuinely need the board itself. Six one-click destinations in the rail, always in the same pixels, no menu in between.
⌘P swaps project, ⌘K searches tickets and boards globally. For power users this beats any tree, and it's the same muscle memory as every other tool they use.
You approved removing the per-screen project header. That returns roughly 73 px on every project screen and ends the duplicated identity. Everything it carried has to land somewhere, so here is the full accounting, route by route.
| Route | Breadcrumb | Right side | Second row |
|---|---|---|---|
| Board | tile · project · board switcher | Board/Sheet toggle · Filter · Create | sprint strip (sprint mode + active sprint only) |
| Backlog | tile · project · Backlog | Filter · Create | none |
| Future Sprints | tile · project · Future Sprints | Create sprint | none |
| Roadmap | tile · project · Roadmap | cycle range · Create initiative | none |
| Test Cases | tile · project · Test Cases | Filter · New test case | folder path (when inside a folder) |
Ticket /browse/KEY | tile · project · board · KEY | status · assignee · ⋯ | none |
| Reports · Agents | section · page | page-specific controls | none |
You asked for a much wider palette. Today's reality: eight hardcoded emoji for projects (📋 🚀 🦞 🧪 ⚡ 🎯 🔧 💎 in CreateProjectDialog.tsx) and thirteen lucide icons for boards in boardIconCatalog.ts. At fifty products, eight emoji means every seventh project looks identical.
Ship a real picker over the platform's own emoji set — categories, search by name, recently-used. Zero curation forever, users already know it, and it renders identically to what they type elsewhere. The stored value stays a single emoji string, so nothing migrates.
A hand-picked grid of ~100. More visually consistent, and safe from someone picking an emoji that renders as a black-and-white glyph on one OS — but it is a list somebody has to own and extend, forever, and it will still be too small for someone.
It's tempting to give boards the same expanded emoji set. Don't: emoji are full-colour by definition, and Rule 02 says colour identifies rather than decorates. A panel with four colour emoji stacked under a colour project tile is exactly the noise this ticket was filed about — just at a different depth.
Projects earn colour because there are fifty of them and they're the top-level identity. Boards sit inside an already-identified project, so a shape plus a colour dot is sufficient and much calmer.
Today mobile is useIsMobile() at 768 px swapping the sidebar for an 18 rem drawer — containing the same overloaded tree. That isn't a mobile design, it's the desktop one in a narrower box. A translates unusually well because a rail of six global destinations is already the shape of a bottom tab bar.
| Width | Rail | Panel | Top bar |
|---|---|---|---|
| ≥ 1280 | 52px, persistent | 236px, persistent | full breadcrumb + search field + Create |
| 1024 – 1279 | 52px, persistent | 236px, collapsible — remembers choice | search collapses to an icon |
| 768 – 1023 | 52px, persistent | overlay — slides over content, dismisses on nav | breadcrumb truncates to board name |
| < 768 | becomes a bottom tab bar | becomes a bottom sheet off the project chip | 40px: project chip · title · search · avatar |
Home · My Work · Create · Boards · More. Thumb-reachable, and the same six global destinations minus Search (which moves into the top bar) and Config (which moves into More).
Tapping the project chip or the Boards tab raises the same BOARDS / VIEWS / QUALITY groups as a sheet, with the project switcher at its head. Identical information architecture — different container.
Out of scope for this ticket but worth flagging: a five-column board on a 390 px screen needs a status-picker-plus-list treatment, not horizontal scroll. Raise separately.
You said client-side is preferred and server-side is a nice-to-have — and in the same breath that people will use web, mobile web, and a planned Electron app. Those two pull in opposite directions, so it's worth being explicit rather than picking quietly.
Zero backend, zero migration, works offline, lands in the same PR as the UI. But pins are per-browser: the same person gets a different rail on their laptop, their phone, and the Electron app — and clearing site data wipes them silently.
A small per-user key/value on the existing preferences surface. Pins follow the person across web, mobile web and Electron, which is precisely the multi-platform story you described. Costs one table or one JSON column and one endpoint.
Build the UI against a tiny pins interface — read, toggle, reorder — and back it with localStorage on day one. Because every call goes through that interface, swapping in a server implementation later is a one-file change with no UI churn.
That gives you the client-side answer you preferred without painting the multi-device story into a corner. If the Electron app is close, skip straight to server-side — the interface is the same either way.
Sequenced so each phase is independently shippable and independently revertible. Phase 1 closes the literal ticket on its own.
Monochrome board glyphs with colour dots, emoji-in-tile for projects, icons for the seven bare view rows, native emoji picker, board catalog to ~60. Touches AppSidebar, BoardIcon, boardIconCatalog, CreateProjectDialog, BoardFormDialog. No shell change, no route change.
Breadcrumb with board switcher, global search entry, Create. Delete ProjectBoard's sticky header and the equivalent block on every other project screen. Highest-value phase, and it's shared with Alternative B — do it regardless of which shell wins.
New AppRail and ProjectPanel, App.tsx layout change, active-project resolution on every route. The /browse/<KEY> lookup already does this via the ["ticket", key] cache, so the hard case is solved.
⌘P switcher, pin interface, cross-project My Work page. My Work is the only one needing new backend query work.
Bottom tab bar, project sheet, tablet overlay. Replaces the current mobile Sheet wholesale.
Reports, Agents and Config have no project. The panel needs a defined empty state — most likely it collapses and the content goes full width, which incidentally recovers some of what Alternative C offered.
A /browse/KEY link must resolve the project and populate the panel before first paint, or the panel flashes empty. The query cache makes this solvable but it needs deliberate handling, not luck.
Everyone currently scans a vertical list of project names. The rail is tiles. Expect a fortnight of "where did Payments go" — mitigated by keeping names on hover and shipping ⌘P at the same time, not after.
The design forbids a seventh global destination. If a new top-level product area is coming, it has to nest inside one of the six — decide that before building, not after.