Repository navigation
feat: vertical tabs, finished: a bar across the top, find a tab, one line round the terminal, acrylic sidebar, fixed tabs - #191
Merged
Merged
Conversation
Over the dropped bar and the sidebar's grab strip (drag regions) the page hears no pointer move and Windows says the pointer left, so both went away under the cursor. Main now streams the cursor while either can show, and one rule decides from it or the page: in at the edge zone, out only past the far edge plus 4 px. The e2e hands main a cursor and fails on the old code. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…ut one included Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…e list's end - Secondary colour (Appearance): the vertical tabs' sidebar and title bars wear it; unpicked it is the theme's flat panel, a step off the ground. - New tab is the tab list's last row, a tab's size; the foot keeps Help, Settings and the sidebar button. - A 16 px grab strip above the tabs (10 px was Windows' resize border). - Under Ring every name starts at one x. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
Ctrl+B is Claude Code's and the shell's, Ctrl+S PowerShell's and the terminal's; Ctrl+Shift+B is free and is taken only while the tabs are vertical. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…e text Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…s readable, window colours saveable - The sidebar casts a shadow, a plane above the terminal. - No app icon in the title bar for now. - Help and Settings stay in the title bar, the dropped one included. - Secondary colour sits above Accent. - Background, Secondary and Accent picks are changes to save: Save changes lights in the accent, Save keeps them with Custom, Custom brings them back, a theme switch asks first (core: extraDirty / onSaved). - Light themes: dim text, icons and hints held to the body floor, a mid grey off track, a dark pressed segment (--p-pressed). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
With the tabs down the side and a title bar showing, the bar draws no line, the body wears the secondary colour and the terminal is cut round at its top left; the dropped bar has the same curve under its left end. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…under the title bar Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…g the sidebar Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…ab in front an accent pill
The owner's pick from the sidebar treatments mockup ("Same, with a line").
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…, shadow edge Black themes keep a black sidebar with a hairline; every other theme gets a sidebar a step darker than its ground with a shadow as its edge. Rows carry the folder they sit in; Ctrl+Shift+K finds a tab; New tab is a button at the sidebar's foot. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The unpicked sidebar is the terminal's ground 0.045 darker in OKLab lightness (a black ground stays black); its names are held to 7:1 and its folder lines to 4.5:1 on the sidebar and on the accent pill. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The bundled app-icon.png was still the icon from before #136, so About showed it too; it is now the current badge. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…e text - The sidebar's top and the start screen draw the app's one-colour mark in the accent (build/icon-mark.svg, AppMark). - A picked accent too dark to see is lifted by OKLab lightness, keeping its hue: mixed with white, a near-black red had turned a pink grey on Save. - A strong mid accent (red, blue) carries white text, the accent a shade deeper until white reads at 4.5:1. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…ebar - Tabs along the top always sit in the top row with the window's buttons at its end (the old "title bar off"). - Vertical tabs: the sidebar runs from the window's top and a bar from its edge holds the window's buttons, always down, the terminal below it. - Gone: the setting, the pop-out bar, its reveal zone and the sidebar-edge store. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…oins the bar, one coat under See-through - Tab width is gone: every tab is one width. Every Classic tab draws its faint line at its right, the last one too. - The collapsed sidebar, slid out, keeps its shadow below the bar and meets it with a curved corner. It is solid under See-through; pinned open it is see-through. - Vertical tabs paint each surface once: the body no longer paints under the sidebar, the bar and the terminal, which had read nearly solid. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The open sidebar draws no shadow or line over glass, where a shadow is a dark band down the terminal's edge. The terminal's corner is cut by a mask that is the exact inverse of the corner piece, so the two no longer leave a dark arc where they meet. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
…a shadow elsewhere One edge along the terminal's top and, beside the open sidebar, its left, round the cut corner: a hairline when both grounds are black, otherwise one inset shadow, so the bar's and the sidebar's edges join instead of two shadows meeting darker at the corner. Slid out on black, the collapsed sidebar draws its line from the bar down. See-through follows the same rule. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
… See-through At a scale that is not whole (the owner's 225 %), a 235 px sidebar ended inside a screen pixel; the two see-through surfaces each half-covered it and the desktop showed through as a line the window's height. The width is rounded to whole screen pixels. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
… slid-out sidebar above the page - The terminal's edge is one line in the divider's ink on every theme, along the bar, round the cut corner and down the sidebar, so it follows Panel edges. The shadows and the black-theme rule are gone. - Slid out, the collapsed sidebar draws its line from the bar down, curving into the bar's, and lies above the page beside it (Settings' search icon showed through). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The sidebar's z-30 tied with Settings' raised search (also z-30, later in the page), so the magnifier showed over the slid-out sidebar. The page's column is isolated, so nothing inside it rises above the sidebar. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
With vertical tabs the bar spans the window, the app's mark and name at its left and the window's buttons at its right. The sidebar, pinned or slid out, starts below it and never covers it; the terminal's line runs along the bar's foot and curves down the sidebar's edge. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
It wears the window's tint, and the page under it is cut away on its own slide, so only the window's acrylic lies beneath and the terminal's text never shows through. CSS backdrop blur does nothing in a see-through window. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The page is cut away under the sidebar's curved corner piece too, so the corner is one coat like the rest. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
The terminal's cut and the corner piece outside it are masks from the same SVG path, one the inverse of the other, pinned and slid out alike. A small gradient mask layer over a full one sampled half clear at its edges and drew a darker square line round the corner. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA
github-actions Bot
pushed a commit
that referenced
this pull request
Oct 12, 2026
…line round the terminal, acrylic sidebar, fixed tabs (#191) * wip: reveal by main's cursor * fix: the pop-out title bar and the collapsed sidebar stay under the hand Over the dropped bar and the sidebar's grab strip (drag regions) the page hears no pointer move and Windows says the pointer left, so both went away under the cursor. Main now streams the cursor while either can show, and one rule decides from it or the page: in at the edge zone, out only past the far edge plus 4 px. The e2e hands main a cursor and fails on the old code. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the pop-out bar starts at the sidebar's on-screen edge, a slid-out one included Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: no line under the pop-out title bar Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: a Secondary colour for the sidebar and title bar, New tab at the list's end - Secondary colour (Appearance): the vertical tabs' sidebar and title bars wear it; unpicked it is the theme's flat panel, a step off the ground. - New tab is the tab list's last row, a tab's size; the foot keeps Help, Settings and the sidebar button. - A 16 px grab strip above the tabs (10 px was Windows' resize border). - Under Ring every name starts at one x. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: Ctrl+Shift+B opens or collapses the sidebar, and its button goes Ctrl+B is Claude Code's and the shell's, Ctrl+S PowerShell's and the terminal's; Ctrl+Shift+B is free and is taken only while the tabs are vertical. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: light themes get a darker secondary colour, 10 percent toward the text Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: sidebar shadow, Help and Settings in the title bar, light themes readable, window colours saveable - The sidebar casts a shadow, a plane above the terminal. - No app icon in the title bar for now. - Help and Settings stay in the title bar, the dropped one included. - Secondary colour sits above Accent. - Background, Secondary and Accent picks are changes to save: Save changes lights in the accent, Save keeps them with Custom, Custom brings them back, a theme switch asks first (core: extraDirty / onSaved). - Light themes: dim text, icons and hints held to the body floor, a mid grey off track, a dark pressed segment (--p-pressed). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: no line at the sidebar's edge, its shadow is the edge Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the title bar and the sidebar merge round the terminal's corner With the tabs down the side and a title bar showing, the bar draws no line, the body wears the secondary colour and the terminal is cut round at its top left; the dropped bar has the same curve under its left end. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the sidebar's shadow falls on the terminal's side only, no seam under the title bar Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the dropped title bar's shadow falls below it only, no line along the sidebar Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the sidebar in the terminal's own colour with a hairline, the tab in front an accent pill The owner's pick from the sidebar treatments mockup ("Same, with a line"). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the sidebar looks: find a tab, folder line, New tab at the foot, shadow edge Black themes keep a black sidebar with a hairline; every other theme gets a sidebar a step darker than its ground with a shadow as its edge. Rows carry the folder they sit in; Ctrl+Shift+K finds a tab; New tab is a button at the sidebar's foot. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: one even sidebar step on every theme, its text held to 7:1 The unpicked sidebar is the terminal's ground 0.045 darker in OKLab lightness (a black ground stays black); its names are held to 7:1 and its folder lines to 4.5:1 on the sidebar and on the accent pill. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the app's icon and name at the top of the sidebar The bundled app-icon.png was still the icon from before #136, so About showed it too; it is now the current badge. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the app's mark in the accent; saves keep the accent's hue, white text - The sidebar's top and the start screen draw the app's one-colour mark in the accent (build/icon-mark.svg, AppMark). - A picked accent too dark to see is lifted by OKLab lightness, keeping its hue: mixed with white, a near-black red had turned a pink grey on Save. - A strong mid accent (red, blue) carries white text, the accent a shade deeper until white reads at 4.5:1. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: no Show title bar: tabs in the top row, or a bar beside the sidebar - Tabs along the top always sit in the top row with the window's buttons at its end (the old "title bar off"). - Vertical tabs: the sidebar runs from the window's top and a bar from its edge holds the window's buttons, always down, the terminal below it. - Gone: the setting, the pop-out bar, its reveal zone and the sidebar-edge store. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: fixed tabs only, a line on every tab, a slid-out sidebar that joins the bar, one coat under See-through - Tab width is gone: every tab is one width. Every Classic tab draws its faint line at its right, the last one too. - The collapsed sidebar, slid out, keeps its shadow below the bar and meets it with a curved corner. It is solid under See-through; pinned open it is see-through. - Vertical tabs paint each surface once: the body no longer paints under the sidebar, the bar and the terminal, which had read nearly solid. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: under See-through, no sidebar edge and a clean terminal corner The open sidebar draws no shadow or line over glass, where a shadow is a dark band down the terminal's edge. The terminal's corner is cut by a mask that is the exact inverse of the corner piece, so the two no longer leave a dark arc where they meet. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * docs: the see-through sidebar edge and corner in the vertical tabs spec Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the sidebar's edge drawn once on the terminal, a line on black, a shadow elsewhere One edge along the terminal's top and, beside the open sidebar, its left, round the cut corner: a hairline when both grounds are black, otherwise one inset shadow, so the bar's and the sidebar's edges join instead of two shadows meeting darker at the corner. Slid out on black, the collapsed sidebar draws its line from the bar down. See-through follows the same rule. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the sidebar ends on a whole screen pixel, so no line shows under See-through At a scale that is not whole (the owner's 225 %), a 235 px sidebar ended inside a screen pixel; the two see-through surfaces each half-covered it and the desktop showed through as a line the window's height. The width is rounded to whole screen pixels. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: one line round the terminal on every theme, by Panel edges; the slid-out sidebar above the page - The terminal's edge is one line in the divider's ink on every theme, along the bar, round the cut corner and down the sidebar, so it follows Panel edges. The shadows and the black-theme rule are gone. - Slid out, the collapsed sidebar draws its line from the bar down, curving into the bar's, and lies above the page beside it (Settings' search icon showed through). Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: the slid-out sidebar covers Settings' search icon The sidebar's z-30 tied with Settings' raised search (also z-30, later in the page), so the magnifier showed over the slid-out sidebar. The page's column is isolated, so nothing inside it rises above the sidebar. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the app's name in a bar across the window, the sidebar under it With vertical tabs the bar spans the window, the app's mark and name at its left and the window's buttons at its right. The sidebar, pinned or slid out, starts below it and never covers it; the terminal's line runs along the bar's foot and curves down the sidebar's edge. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * feat: the slid-out sidebar is the window's acrylic under See-through It wears the window's tint, and the page under it is cut away on its own slide, so only the window's acrylic lies beneath and the terminal's text never shows through. CSS backdrop blur does nothing in a see-through window. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: no darker square at the slid-out sidebar's corner under See-through The page is cut away under the sidebar's curved corner piece too, so the corner is one coat like the rest. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA * fix: one curve for both sides of the sidebar corner, no square line The terminal's cut and the corner piece outside it are masks from the same SVG path, one the inverse of the other, pinned and slid out alike. A small gradient mask layer over a full one sampled half clear at its edges and drew a darker square line round the corner. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA --------- Co-authored-by: Claude Opus 5.5 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #190 (#162), from the owner on 2026-10-11: "the title bar disappears too easily, my cursor can be on the titlebar and its disappearing ... i should be able to have the cursor 2-3 px off the titlebar before it disappears ... sidebar is also somewhat broken, if i have the cursor on the sidebar at the top of it it will disappear when im still on the sidebar. lower down though it works fine".
Cause
The dropped bar and the sidebar's grab strip are drag regions: a press there is Windows', so the page hears no pointer move over them, and Windows tells the page the pointer has left. So the bar went away with the cursor on it, and the sidebar went away at its top (the grab strip) but not lower down (the tabs, which are the page's).
Fix
lib/revealZones.ts, decides from main's cursor or the page's pointer: in at the edge zone (top 16 px, left 24 px), out only past the far edge plus 4 px (the bar's bottom, the sidebar's right edge), with the existing 340 ms grace.--e2eonly, main reads the suite's cursor (globalThis.__e2eCursor), never the owner's.App only. 0.39.6 -> 0.39.7.
Checks
revealZones.test.ts); unit 1907/1907 total; typecheck and lint clean.verticalTabs53/53.Added on 2026-10-12, before merging (installed for the owner first)
--p-secondary, the ground 4 percent toward the text), the owner's pick from the surfaces mockup on every theme; a pick is held to the ink floors; a theme pick resets it. Snapshots change only by the new token.verticalTabs57/57,indicatorStyles,titleBar,options,themeSwitchpass; unit 1948/1948. App 0.39.8.🤖 Generated with Claude Code
https://claude.ai/code/session_017XYVRPzvhLpPCr75uB6uaA