hosman20 splits the Mike shell into two rails

A 64-pixel icon strip plus a 224-pixel contextual column replaces the old collapsible sidebar - and quietly makes room for Playbooks.

chat-uibranding

The fork's app chrome now opens with two columns: a narrow strip of top-level icons on the far left, and a wider contextual menu next to it that changes with where you are in the product. The old all-in-one collapsible sidebar is gone, and a new Playbooks slot has been carved into the navigation - empty for now, but clearly load-bearing for what comes next.

Two honest caveats from hosman20: on phones, both columns currently disappear with nothing in their place, and the Playbooks link initially points at a page that doesn't exist yet. Both get patched in follow-up work in the same batch. The shell is also a foundation for the wider Mike 2.1 rebrand - a warm-paper, hairline-border look aimed at a paid Middle East law-firm product.

So what Worth a look for anyone planning a serious UI refresh on a Mike fork - it's a clean template for a two-rail layout, but only if you take the design tokens and mobile plan with it.

View this fork on GitHub →

Spotted something wrong? Or know the PR text has fresher detail than the writeup above?

Commits in this thread

1 commit from hosman20/mike-2.0, oldest first. Source extracted verbatim from the harvested git log.

SHA Subject Author Date

571af72d feat(chrome): split AppSidebar into 64px IconRail and 224px SecondaryNav z 2026-05-13 ↗ GitHub

SHA	Subject	Author	Date
`571af72d`	feat(chrome): split AppSidebar into 64px IconRail and 224px SecondaryNav	z	2026-05-13	↗ GitHub
commit body Batch 3 - replace the legacy collapsible AppSidebar with the Mike 2.1 two-column nav shell (IconRail 64w + SecondaryNav 224w). - frontend/src/components/chrome/icon-rail.tsx: top-level icon column. - frontend/src/components/chrome/secondary-nav.tsx: contextual nav, includes a new Playbooks entry. - frontend/src/app/(pages)/layout.tsx: switch to new chrome. - frontend/src/components/chrome/__tests__/chrome.smoke.test.tsx. .pen frame references: wF9tL, x72bX, FdYC1, yEGYQ, QxArF, CzlFI. Notes: - AppSidebar.tsx left on disk (removed in batch 7 cleanup commit). - Mobile (<md) currently hides both columns; no drawer yet. - TrialBanner mount in this layout lands in batch 6 (billing UI). Agent ID: a36447602e8db8572 (general-purpose).

commit body

Batch 3 - replace the legacy collapsible AppSidebar with the Mike 2.1
two-column nav shell (IconRail 64w + SecondaryNav 224w).

- frontend/src/components/chrome/icon-rail.tsx: top-level icon column.
- frontend/src/components/chrome/secondary-nav.tsx: contextual nav,
  includes a new Playbooks entry.
- frontend/src/app/(pages)/layout.tsx: switch to new chrome.
- frontend/src/components/chrome/__tests__/chrome.smoke.test.tsx.

.pen frame references: wF9tL, x72bX, FdYC1, yEGYQ, QxArF, CzlFI.

Notes:
- AppSidebar.tsx left on disk (removed in batch 7 cleanup commit).
- Mobile (<md) currently hides both columns; no drawer yet.
- TrialBanner mount in this layout lands in batch 6 (billing UI).

Agent ID: a36447602e8db8572 (general-purpose).

Capture this thread into my fork

Download a single Markdown prompt that tells Claude how to port every commit above into your working tree — adapting paths and structure to match your repo. Run it via claude -p < capture-thread-405.md from inside the repo you want the changes in.

⬇ Download capture-thread-405.md