Mohamed Boudra
cafff08a30
Replace the stateful TitlebarDragRegion (hooks, ResizeObserver, IPC, fullscreen tracking) with a pure static component — matching VS Code's titlebar-drag-region exactly: position absolute, full size, no z-index, no pointer-events, no state, no event listeners. Remove TitlebarNoDragContent entirely — VS Code doesn't wrap content in no-drag; interactive elements get no-drag from the global CSS backstop in index.html. Add drag regions to all header surfaces: - ScreenHeader (sessions, workspace header) - Left sidebar (traffic light area + header) - Split container pane tabs - Explorer sidebar header (Changes/Files tabs) Fix workspace header empty space not draggable by changing headerTitleContainer from flex: 1 to flexShrink: 1.
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { Platform } from "react-native";
|
|
import { getIsElectronRuntime } from "@/constants/layout";
|
|
|
|
/**
|
|
* VS Code-style titlebar drag region for Electron.
|
|
*
|
|
* Copied from VS Code at commit daa0a70:
|
|
* - titlebarPart.ts:463-464 → prepend(container, $('div.titlebar-drag-region'))
|
|
* - titlebarpart.css:57-64 → position: absolute, full size, -webkit-app-region: drag
|
|
* - titlebarpart.css:249-260 → top-edge resizer, no-drag, 4px
|
|
*
|
|
* VS Code's drag region is a static DOM element — no z-index, no pointer-events,
|
|
* no state, no event listeners. Interactive elements get no-drag from their own
|
|
* CSS (global backstop in index.html). The drag region never re-renders.
|
|
*
|
|
* The resizer is Windows/Linux only (titlebarpart.css:249 scopes to .windows/.linux).
|
|
* On macOS, Electron handles edge resize natively.
|
|
*/
|
|
|
|
/**
|
|
* Static drag overlay and top-edge resizer. Returns null on non-Electron.
|
|
* Place as FIRST child of any positioned container that should be draggable.
|
|
*/
|
|
export function TitlebarDragRegion() {
|
|
if (Platform.OS !== "web" || !getIsElectronRuntime()) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Drag overlay — VS Code .titlebar-drag-region (titlebarpart.css:57-64) */}
|
|
<div
|
|
style={{
|
|
top: 0,
|
|
left: 0,
|
|
display: "block",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
// @ts-expect-error — WebkitAppRegion is not in CSSProperties
|
|
WebkitAppRegion: "drag",
|
|
}}
|
|
/>
|
|
{/* Top-edge resizer — VS Code .resizer (titlebarpart.css:249-256) */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
width: "100%",
|
|
height: 4,
|
|
// @ts-expect-error — WebkitAppRegion is not in CSSProperties
|
|
WebkitAppRegion: "no-drag",
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|