Bohdan Triapitsyn
f9acf68c8f
Rework the desktop layout so the left sidebar spans the full window height and reads as a distinct column, separate from the header. - Persistent top-left controls (sidebar toggle + project actions) as a single overlay that no longer migrates between header and sidebar, so it stays put while panels animate. Drag regions carve out only under the buttons so the strip stays draggable and the buttons clickable. - Header sits in the content column (bg-background); the divider lives on the chat content (border-t) so it doesn't run between header and right sidebar. Right sidebar gets a top border + small content padding. - Drop the rounded chat card and corner masks for flat 1px borders. - Right sidebar, context panel and git/files views inherit the background color instead of bg-sidebar. - Remove hover background from Changes/Staged rows. - Mini-chat header: borderless, bg-background.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
/**
|
|
* Strip at the top of the desktop left sidebar that reserves room for the
|
|
* persistent {@link TitlebarLeftControls} overlay (sidebar toggle + project
|
|
* actions), so the session list starts below them. Its height tracks the
|
|
* header via `--oc-header-height`.
|
|
*
|
|
* Split into two regions so the strip stays a window drag area while the
|
|
* overlay buttons remain clickable: a `no-drag` carve matching the overlay
|
|
* footprint (the overlay sits on top of it; an OS drag region here would steal
|
|
* the buttons' clicks, since a separate-subtree `no-drag` can't carve a drag
|
|
* region in Electron/macOS) plus a `drag` remainder for window dragging.
|
|
*/
|
|
export const SidebarTopBar: React.FC = () => (
|
|
<div
|
|
aria-hidden
|
|
className="flex shrink-0"
|
|
style={{ height: 'var(--oc-header-height, 3rem)' }}
|
|
>
|
|
{/* Drag region for the window-controls inset (traffic lights). */}
|
|
<div
|
|
className="app-region-drag shrink-0"
|
|
style={{ width: 'var(--oc-titlebar-left-inset, 0.75rem)' }}
|
|
/>
|
|
{/* No-drag carve under the overlay buttons so they stay clickable. */}
|
|
<div
|
|
className="app-region-no-drag shrink-0"
|
|
style={{ width: 'calc(var(--oc-titlebar-controls-width, 5.5rem) + 0.5rem)' }}
|
|
/>
|
|
{/* Draggable remainder of the strip. */}
|
|
<div className="app-region-drag flex-1" />
|
|
</div>
|
|
);
|