Floating glassmorphic pill strips for split groups#228
Merged
Conversation
… and 'origin/fix/split-tabs-deferred-followups' into feat/split-group-pill-strips
Split groups no longer render a second full-size tab bar row. Their
tabs live in a compact island pill floating top-center over the group
content: rounded-full, translucent chrome background with backdrop
blur, roughly half the tab bar height, 10px type, smaller icons and
close buttons. The pill border brightens when the group is focused.
PanelTabStrip gains a variant prop ('bar' | 'pill'); the primary tab
bar keeps the existing full-size bar variant untouched. All strip
mechanics carry over to the pill: drag to reorder with the midpoint
indicator, trailing append zone, close, rename, activity dot. The pill
sits at z-30 so reorder drops stay interactive above the drop overlay
(z-20) mid-drag.
Also fixes a shipped styling bug this work surfaced: Tailwind opacity
modifiers on the var()-based design tokens (bg-interactive/10,
ring-interactive/30, border-interactive/40) silently compile to
nothing because the tokens are plain var() strings without
alpha-value. The 5-zone drop highlights and the focused-group ring
never rendered. Replaced with color-mix() arbitrary values, which
compile and render correctly in Electron's Chromium.
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
1 participant
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.
Description
Split groups no longer render a second full-size tab bar row stacked against the primary bar. Each split group now carries its tabs in a floating island pill, centered at the top of the group, hovering over the content: glassmorphic (translucent chrome background, backdrop blur, soft shadow), rounded-full, roughly half the tab bar height with 10px type and scaled-down icons, close buttons, and activity dots. The pill border brightens subtly when the group has focus.
PanelTabStripgains avariantprop ('bar' | 'pill'). The primary tab bar keeps the existing full-sizebarvariant pixel-identical.Also fixes a shipped styling bug found while building this: Tailwind opacity modifiers on the var()-based design tokens (
bg-interactive/10,border-interactive/40,ring-interactive/30) silently compile to nothing because the tokens are plainvar()strings without<alpha-value>. In practice the 5-zone drop highlights and the focused-group ring never rendered at all. Replaced withcolor-mix()arbitrary values (verified they compile; Electron's Chromium supports color-mix).Stacked PR: this branch includes #226 and #227; merge those first and this PR reduces to the single pill commit.
Type of Change
Checklist
pnpm typecheckandpnpm lintlocallyCritical Areas Modified