jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rewrite titlebar drag to match VS Code's static pattern

Browse Source 
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.
This commit is contained in:
Mohamed Boudra
2026-04-01 17:36:26 +07:00
parent cb60f2a596
commit cafff08a30
9 changed files with 82 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/desktop/titlebar-drag-region.tsx
+26 -197
View File
@@ -1,228 +1,57 @@
import type { ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
import { Platform } from "react-native";
import { getIsElectronRuntime } from "@/constants/layout";
import { getDesktopWindow, updateDesktopWindowControls } from "@/desktop/electron/window";
const DEFAULT_OVERLAY_HEIGHT = 29;
const MAX_EFFECTIVE_TITLEBAR_HEIGHT = 48;
/**
* VS Code-style titlebar drag region for Electron on Windows/Linux.
* VS Code-style titlebar drag region for Electron.
*
* Architecture copied from VS Code at commit daa0a70:
* - titlebarPart.ts:463-464 → dedicated absolute drag overlay element
* - titlebarpart.css:57-64 → drag region styles
* - titlebarpart.css:249-260 → top-edge resizer with no-drag, hidden in fullscreen
* - electron-browser/titlebarPart.ts:205-206 → resizer appended to root container
* 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
*
* This component renders two elements:
* 1. A full-size absolute drag overlay with -webkit-app-region: drag
* 2. A 4px top-edge resizer with -webkit-app-region: no-drag (hidden in fullscreen)
* 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.
*
* Both are positioned absolute within the parent container. Interactive children
* of the parent sit above the drag overlay via normal stacking order.
* The global no-drag reset in index.html remains only as a defensive backstop.
* The resizer is Windows/Linux only (titlebarpart.css:249 scopes to .windows/.linux).
* On macOS, Electron handles edge resize natively.
*/
function useIsFullscreen(): boolean {
const [isFullscreen, setIsFullscreen] = useState(false);
useEffect(() => {
if (Platform.OS !== "web" || !getIsElectronRuntime()) return;
let disposed = false;
let cleanup: (() => void) | undefined;
async function setup() {
const win = getDesktopWindow();
if (!win) return;
const fs = typeof win.isFullscreen === "function" ? await win.isFullscreen() : false;
if (disposed) return;
setIsFullscreen(fs);
if (typeof win.onResized !== "function") return;
const unlisten = await win.onResized(async () => {
if (disposed) return;
const fullscreen = typeof win.isFullscreen === "function" ? await win.isFullscreen() : false;
if (disposed) return;
setIsFullscreen(fullscreen);
});
cleanup = unlisten;
if (disposed) cleanup?.();
}
void setup();
return () => {
disposed = true;
cleanup?.();
};
}, []);
return isFullscreen;
}
/**
* Renders the VS Code-style drag overlay and top-edge resizer.
* Only renders on Electron Windows/Linux (non-mac). Returns null otherwise.
*
* Usage: Place as a child of any positioned container that should be draggable.
* Interactive elements in the same container will sit above the drag overlay
* via normal DOM stacking order (later siblings paint over earlier ones).
* Place TitlebarDragRegion BEFORE interactive children in JSX.
* 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 <TitlebarDragRegionInner />;
}
/**
* Explicit no-drag content layer above the drag overlay.
* Matches VS Code's pattern of z-index: 2500 + -webkit-app-region: no-drag
* on interactive containers within the titlebar (titlebarpart.css:141-143,
* 231-233, 264-268, 288-298, 382-401).
*
* Wrap interactive children of any TitlebarDragRegion parent in this component
* so the no-drag layering is structural, not dependent on the global CSS backstop.
* On non-Electron or mac, renders children directly with no wrapper.
*/
interface TitlebarNoDragContentProps {
children: ReactNode;
/** Layout direction for the no-drag wrapper. Default: "row" for header-style surfaces. */
direction?: "row" | "column";
}
export function TitlebarNoDragContent({ children, direction = "row" }: TitlebarNoDragContentProps) {
if (Platform.OS !== "web" || !getIsElectronRuntime()) {
return <>{children}</>;
}
return (
<div
style={{
position: "relative",
zIndex: 2500,
// @ts-expect-error — WebkitAppRegion is not in CSSProperties
WebkitAppRegion: "no-drag",
display: "flex",
flexDirection: direction,
alignItems: "center",
justifyContent: direction === "column" ? "center" : undefined,
flex: 1,
height: "100%",
minWidth: 0,
}}
>
{children}
</div>
);
}
function TitlebarDragRegionInner() {
const isFullscreen = useIsFullscreen();
const dragRegionRef = useRef<HTMLDivElement | null>(null);
const lastReportedHeightRef = useRef<number | null>(null);
useEffect(() => {
const dragRegion = dragRegionRef.current;
const parent = dragRegion?.parentElement;
if (!dragRegion || !parent) {
return;
}
let disposed = false;
let frameId: number | null = null;
const reportHeight = () => {
if (disposed) {
return;
}
const nextHeight = Math.min(
MAX_EFFECTIVE_TITLEBAR_HEIGHT,
Math.max(DEFAULT_OVERLAY_HEIGHT, Math.round(parent.getBoundingClientRect().height)),
);
if (lastReportedHeightRef.current === nextHeight) {
return;
}
lastReportedHeightRef.current = nextHeight;
void updateDesktopWindowControls({ height: nextHeight }).catch((error) => {
console.warn("[DesktopWindow] Failed to update window controls height", error);
});
};
const scheduleReport = () => {
if (frameId !== null) {
cancelAnimationFrame(frameId);
}
frameId = requestAnimationFrame(() => {
frameId = null;
reportHeight();
});
};
scheduleReport();
const resizeObserver =
typeof ResizeObserver === "function"
? new ResizeObserver(() => {
scheduleReport();
})
: null;
resizeObserver?.observe(parent);
window.addEventListener("resize", scheduleReport);
return () => {
disposed = true;
if (frameId !== null) {
cancelAnimationFrame(frameId);
}
resizeObserver?.disconnect();
window.removeEventListener("resize", scheduleReport);
};
}, []);
return (
<>
{/* Drag overlay — equivalent to VS Code .titlebar-drag-region */}
{/* Drag overlay — VS Code .titlebar-drag-region (titlebarpart.css:57-64) */}
<div
ref={dragRegionRef}
style={{
position: "absolute",
top: 0,
left: 0,
display: "block",
position: "absolute",
width: "100%",
height: "100%",
// @ts-expect-error — WebkitAppRegion is not in CSSProperties
WebkitAppRegion: "drag",
zIndex: 0,
pointerEvents: "auto",
}}
/>
{/* Top-edge resizer — equivalent to VS Code .resizer */}
{!isFullscreen && (
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: 4,
// @ts-expect-error — WebkitAppRegion is not in CSSProperties
WebkitAppRegion: "no-drag",
zIndex: 1,
}}
/>
)}
{/* 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",
}}
/>
</>
);
}
packages/app/src/components/explorer-sidebar.tsx
+3
View File
@@ -18,6 +18,7 @@ import { GitDiffPane } from "./git-diff-pane";
import { FileExplorerPane } from "./file-explorer-pane";
import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
import { useWindowControlsPadding } from "@/utils/desktop-window";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
const MIN_CHAT_WIDTH = 400;
function logExplorerSidebar(_event: string, _details: Record<string, unknown>): void {}
@@ -344,6 +345,7 @@ function SidebarContent({
<View style={styles.sidebarContent} pointerEvents="auto">
{/* Header with tabs and close button */}
<View style={[styles.header, { paddingRight: padding.right }]} testID="explorer-header">
<TitlebarDragRegion />
<View style={styles.tabsContainer}>
{isGit && (
<Pressable
@@ -434,6 +436,7 @@ const styles = StyleSheet.create((theme) => ({
overflow: "hidden",
},
header: {
position: "relative",
height: HEADER_INNER_HEIGHT,
flexDirection: "row",
alignItems: "center",
packages/app/src/components/headers/screen-header.tsx
+3 -5
View File
@@ -9,7 +9,7 @@ import {
isCompactFormFactor,
} from "@/constants/layout";
import { useWindowControlsPadding } from "@/utils/desktop-window";
import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
interface ScreenHeaderProps {
left?: ReactNode;
@@ -46,10 +46,8 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
]}
>
<TitlebarDragRegion />
<TitlebarNoDragContent>
<View style={[styles.left, leftStyle]}>{left}</View>
<View style={[styles.right, rightStyle]}>{right}</View>
</TitlebarNoDragContent>
<View style={[styles.left, leftStyle]}>{left}</View>
<View style={[styles.right, rightStyle]}>{right}</View>
</View>
</View>
</View>
packages/app/src/components/left-sidebar.tsx
+8 -6
View File
@@ -36,7 +36,7 @@ import {
} from "@/hooks/use-sidebar-workspaces-list";
import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
import { useWindowControlsPadding } from "@/utils/desktop-window";
import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
import { Combobox } from "@/components/ui/combobox";
import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
import { formatConnectionStatus } from "@/utils/daemons";
@@ -689,14 +689,14 @@ function DesktopSidebar({
return (
<Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
{padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
<View style={styles.sidebarHeader}>
<View style={styles.sidebarDragArea}>
<TitlebarDragRegion />
<TitlebarNoDragContent>
{padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
<View style={styles.sidebarHeader}>
<View style={styles.sidebarHeaderRow}>
<SessionsButton onPress={handleViewMore} />
</View>
</TitlebarNoDragContent>
</View>
</View>
{isInitialLoad ? (
@@ -834,8 +834,10 @@ const styles = StyleSheet.create((theme) => ({
width: 10,
zIndex: 10,
},
sidebarHeader: {
sidebarDragArea: {
position: "relative",
},
sidebarHeader: {
height: {
xs: HEADER_INNER_HEIGHT_MOBILE,
md: HEADER_INNER_HEIGHT,
packages/app/src/components/split-container.tsx
+3
View File
@@ -33,6 +33,7 @@ import { ResizeHandle } from "@/components/resize-handle";
import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
import { usePanelStore } from "@/stores/panel-store";
import { useWindowControlsPadding } from "@/utils/desktop-window";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
import {
computeTabDropPreview,
type TabDropPreview,
@@ -887,6 +888,7 @@ function SplitPaneView({
{ paddingLeft: padding.left, paddingRight: padding.right },
]}
>
<TitlebarDragRegion />
<WorkspaceDesktopTabsRow
paneId={pane.id}
isFocused={isFocused}
@@ -997,6 +999,7 @@ const styles = StyleSheet.create((theme) => ({
overflow: "hidden",
},
paneTabs: {
position: "relative",
minWidth: 0,
},
paneContent: {
packages/app/src/screens/agent/draft-agent-screen.tsx
+2 -4
View File
@@ -51,7 +51,7 @@ import type {
} from "@server/server/agent/agent-sdk-types";
import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
@@ -1000,8 +1000,7 @@ function DraftAgentScreenContent({
const mainContent = (
<View style={styles.container}>
<TitlebarDragRegion />
<TitlebarNoDragContent direction="column">
<View style={styles.outerContainer}>
<View style={styles.outerContainer}>
<View style={styles.agentPanel}>
<View
style={[
@@ -1264,7 +1263,6 @@ function DraftAgentScreenContent({
/>
) : null}
</View>
</TitlebarNoDragContent>
</View>
);
packages/app/src/screens/open-project-screen.tsx
+17 -19
View File
@@ -9,7 +9,7 @@ import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
import { usePanelStore } from "@/stores/panel-store";
import { useSessionStore } from "@/stores/session-store";
import { isCompactFormFactor } from "@/constants/layout";
import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
export function OpenProjectScreen({ serverId }: { serverId: string }) {
const openAgentList = usePanelStore((s) => s.openAgentList);
@@ -30,24 +30,22 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
<MenuHeader borderless />
<View style={styles.content}>
<TitlebarDragRegion />
<TitlebarNoDragContent direction="column">
<View style={styles.logo}>
<PaseoLogo size={56} />
</View>
<View style={styles.headingGroup}>
<Text style={styles.heading}>What shall we build today?</Text>
{hasHydrated && !hasProjects ? (
<Text style={styles.subtitle}>
Add a project folder to start running agents on your codebase
</Text>
) : null}
</View>
<View style={styles.cta}>
<Button variant="default" leftIcon={FolderOpen} onPress={() => void openProjectPicker()} testID="open-project-submit">
Add a project
</Button>
</View>
</TitlebarNoDragContent>
<View style={styles.logo}>
<PaseoLogo size={56} />
</View>
<View style={styles.headingGroup}>
<Text style={styles.heading}>What shall we build today?</Text>
{hasHydrated && !hasProjects ? (
<Text style={styles.subtitle}>
Add a project folder to start running agents on your codebase
</Text>
) : null}
</View>
<View style={styles.cta}>
<Button variant="default" leftIcon={FolderOpen} onPress={() => void openProjectPicker()} testID="open-project-submit">
Add a project
</Button>
</View>
</View>
</View>
);
packages/app/src/screens/startup-splash-screen.tsx
+19 -25
View File
@@ -11,7 +11,7 @@ import {
getDesktopDaemonLogs,
type DesktopDaemonLogs,
} from "@/desktop/daemon/desktop-daemon";
import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
type StartupSplashScreenProps = {
bootstrapState?: {
@@ -224,10 +224,8 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
return (
<View style={styles.container}>
<TitlebarDragRegion />
<TitlebarNoDragContent direction="column">
<PaseoLogo size={96} />
<Text style={styles.subtitle}>Starting up…</Text>
</TitlebarNoDragContent>
<PaseoLogo size={96} />
<Text style={styles.subtitle}>Starting up…</Text>
</View>
);
}
@@ -236,24 +234,22 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
return (
<View style={styles.container}>
<TitlebarDragRegion />
<TitlebarNoDragContent direction="column">
<View style={styles.centeredContent}>
<PaseoLogo size={96} />
<Text style={styles.title}>Welcome to Paseo</Text>
<View style={styles.progressSteps}>
{progressSteps.map((step) => (
<View key={step.key} style={styles.progressStepRow}>
{step.status === "complete" ? (
<Check size={18} color={theme.colors.success} />
) : (
<ActivityIndicator color={theme.colors.accent} />
)}
<Text style={styles.subtitleInline}>{step.label}</Text>
</View>
))}
</View>
<View style={styles.centeredContent}>
<PaseoLogo size={96} />
<Text style={styles.title}>Welcome to Paseo</Text>
<View style={styles.progressSteps}>
{progressSteps.map((step) => (
<View key={step.key} style={styles.progressStepRow}>
{step.status === "complete" ? (
<Check size={18} color={theme.colors.success} />
) : (
<ActivityIndicator color={theme.colors.accent} />
)}
<Text style={styles.subtitleInline}>{step.label}</Text>
</View>
))}
</View>
</TitlebarNoDragContent>
</View>
</View>
);
}
@@ -261,8 +257,7 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
return (
<View style={[styles.container, styles.containerError]}>
<TitlebarDragRegion />
<TitlebarNoDragContent direction="column">
<View style={styles.errorContent}>
<View style={styles.errorContent}>
<View style={styles.errorHeader}>
<PaseoLogo size={64} />
<Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
@@ -321,7 +316,6 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
</Button>
</View>
</View>
</TitlebarNoDragContent>
</View>
);
}
packages/app/src/screens/workspace/workspace-screen.tsx
+1 -1
View File
@@ -2327,7 +2327,7 @@ const styles = StyleSheet.create((theme) => ({
flexShrink: 1,
},
headerTitleContainer: {
flex: 1,
flexShrink: 1,
minWidth: 0,
flexDirection: "row",
alignItems: "center",