Merge pull request #72899 from NousResearch/bb/desktop-recede-chrome-seams

Let the desktop chrome recede, and mark the active tab instead
This commit is contained in:
brooklyn! 2026-07-27 16:07:08 -05:00 committed by GitHub
commit 1d76a15188
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 21 additions and 28 deletions

View file

@ -10,7 +10,7 @@ import {
ContextMenuSeparator,
ContextMenuTrigger
} from '@/components/ui/context-menu'
import { PANE_TAB_STRIP_LINE, PaneTab, PaneTabLabel } from '@/components/ui/pane-tab'
import { PaneTab, PaneTabLabel } from '@/components/ui/pane-tab'
import { Tip } from '@/components/ui/tooltip'
import { translateNow, useI18n } from '@/i18n'
import { formatCombo } from '@/lib/keybinds/combo'
@ -131,12 +131,7 @@ export function ChatPreviewRail({ onRestartServer, setTitlebarToolGroup }: ChatP
// titlebar-height so it opens below the band. 0px elsewhere → unchanged.
style={{ paddingTop: 'var(--right-rail-top-inset, 0px)' }}
>
<div
className={cn(
'group/rail-tabs flex h-(--titlebar-height) shrink-0 bg-(--ui-sidebar-surface-background)',
PANE_TAB_STRIP_LINE
)}
>
<div className="group/rail-tabs flex h-(--titlebar-height) shrink-0 bg-(--ui-sidebar-surface-background)">
<div
className="flex min-w-0 flex-1 overflow-x-auto overflow-y-hidden overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
role="tablist"

View file

@ -665,7 +665,7 @@ export function ContribController() {
tree-published --workspace-left/right vars (pure CSS, no rect
threading), clamped to clear the REAL TitlebarControls
clusters (fixed, z-70); center is truly window-centered. */}
<div className="relative flex h-[34px] shrink-0 items-center border-b border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background) text-xs">
<div className="relative flex h-[34px] shrink-0 items-center bg-(--ui-sidebar-surface-background) text-xs">
{/* Drag strips, AppShell-style: cut to AVOID the fixed control
clusters instead of overlapping them Electron's no-drag
carve-out of fixed/transformed elements is unreliable, so a

View file

@ -92,7 +92,7 @@ export function StatusbarControls({ className, leftItems = [], items = [], ...pr
<ContextMenuTrigger asChild>
<footer
className={cn(
'flex h-5 shrink-0 items-stretch justify-between gap-2 border-t border-(--ui-stroke-tertiary) bg-(--ui-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
'flex h-5 shrink-0 items-stretch justify-between gap-2 bg-(--ui-sidebar-surface-background) px-1 py-0 text-(--ui-text-tertiary) [-webkit-app-region:no-drag]',
className
)}
data-slot="statusbar"

View file

@ -17,7 +17,6 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger }
import { DecodeText } from '@/components/ui/decode-text'
import { DROP_SHEET_BLUR_CLASS, DROP_SHEET_CLASS } from '@/components/ui/drop-affordance'
import {
PANE_TAB_STRIP_LINE,
PANE_TAB_STRIP_LINE_LEFT,
PANE_TAB_STRIP_LINE_RIGHT,
PaneTab,
@ -404,13 +403,10 @@ export function TreeGroup({
<ZoneMenu {...zoneMenu}>
<div
// Active = sidebar surface (merges into body). Strip =
// `--theme-card-seed` (VS Code `tab.inactiveBackground`). Line =
// PANE_TAB_STRIP_LINE; active tab cuts through it.
// `--theme-card-seed` (VS Code `tab.inactiveBackground`). No bottom
// rule — the active tab's primary underline is the only seam.
// data-zone-tabstrip: a drop over here STACKS (drag-session reads it).
className={cn(
'group/pane-header relative flex h-7 shrink-0 select-none bg-(--pane-tab-strip-bg) [-webkit-app-region:no-drag] [--pane-tab-active-bg:var(--ui-sidebar-surface-background)] [--pane-tab-strip-bg:var(--theme-card-seed)]',
PANE_TAB_STRIP_LINE
)}
className="group/pane-header relative flex h-7 shrink-0 select-none bg-(--pane-tab-strip-bg) [-webkit-app-region:no-drag] [--pane-tab-active-bg:var(--ui-sidebar-surface-background)] [--pane-tab-strip-bg:var(--theme-card-seed)]"
data-zone-tabstrip={node.id}
onContextMenu={e => {
setMenuPane(

View file

@ -591,10 +591,11 @@ function Sash({
>
{/* Persistent hairline: same token as PaneShell's divider sash
(--ui-stroke-secondary) so every seam vertical or horizontal
reads identically. */}
reads identically. Sits at 0.1 so seams recede into the surface,
and comes up to full on hover alongside the thicker grab band. */}
<span
className={cn(
'absolute bg-(--ui-stroke-secondary)',
'absolute bg-(--ui-stroke-secondary) opacity-10 transition-opacity duration-100 group-hover:opacity-100',
horizontal ? 'inset-y-0 left-1/2 w-px -translate-x-1/2' : 'inset-x-0 top-1/2 h-px -translate-y-1/2'
)}
/>

View file

@ -2,9 +2,6 @@ import * as React from 'react'
import { cn } from '@/lib/utils'
/** Inset bottom stroke for a horizontal tab strip — titlebar color, cut by the active tab. */
export const PANE_TAB_STRIP_LINE = 'shadow-[inset_0_-1px_0_var(--ui-stroke-tertiary)]'
/** Inset stroke for a vertical tab rail — content-facing edge. */
export const PANE_TAB_STRIP_LINE_LEFT = 'shadow-[inset_1px_0_0_var(--ui-stroke-tertiary)]'
export const PANE_TAB_STRIP_LINE_RIGHT = 'shadow-[inset_-1px_0_0_var(--ui-stroke-tertiary)]'
@ -12,18 +9,20 @@ export const PANE_TAB_STRIP_LINE_RIGHT = 'shadow-[inset_-1px_0_0_var(--ui-stroke
const TAB =
'group/tab relative flex shrink-0 items-center border-transparent bg-(--tab-bg) text-[0.6875rem] font-medium [-webkit-app-region:no-drag]'
// Stop 1px short: the strip's rule is an INSET shadow painted in the
// container's own last pixel row, so a full-height tab covers it and reads as
// overhanging the bar. The container owns the line; nothing redraws it.
const TAB_HORIZONTAL =
'h-[calc(100%-1px)] min-w-0 max-w-48 not-first:border-l not-first:border-l-(--ui-stroke-quaternary)'
// Full height: with the strip's rule removed there is no last-pixel row to
// leave uncovered, so tabs fill the bar and no sliver of gutter shows through.
const TAB_HORIZONTAL = 'h-full min-w-0 max-w-48 not-first:border-l not-first:border-l-(--ui-stroke-quaternary)'
const TAB_VERTICAL =
'w-full max-h-48 justify-center not-first:border-t not-first:border-t-(--ui-stroke-quaternary) [writing-mode:vertical-rl]'
// Full height, so the active tab alone covers that row and cuts the rule.
const TAB_ACTIVE = 'h-full text-foreground [--tab-bg:var(--pane-tab-active-bg,var(--ui-editor-surface-background))]'
// Horizontal only: the active tab is the sole seam on the strip — a
// theme-primary underline drawn as an inset shadow in its own last pixel row,
// so it costs no layout and can't shift the tab.
const TAB_ACTIVE_UNDERLINE = 'shadow-[inset_0_-2px_0_var(--pane-tab-active-accent,var(--theme-primary))]'
// Inactive = gutter. Hover DARKENS: active is the lighter content surface, so a
// lightening wash made the two nearly indistinguishable.
const TAB_IDLE =
@ -81,7 +80,9 @@ export const PaneTab = React.forwardRef<HTMLDivElement, PaneTabProps>(function P
TAB,
vertical ? TAB_VERTICAL : TAB_HORIZONTAL,
edge,
active ? TAB_ACTIVE : cn(TAB_IDLE, edge && `${edge}-(--ui-stroke-tertiary)`),
active
? cn(TAB_ACTIVE, !vertical && TAB_ACTIVE_UNDERLINE)
: cn(TAB_IDLE, edge && `${edge}-(--ui-stroke-tertiary)`),
className
)}
data-active={active}