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/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>
);
}