refactor: migrate to VS Code titlebar drag region pattern

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -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 { useDesktopDragHandlers } from "@/utils/desktop-window";
+import { TitlebarDragRegion, TitlebarNoDragContent } 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";
@@ -243,7 +243,6 @@ function DraftAgentScreenContent({
   const activateExplorerTabForCheckout = usePanelStore(
     (state) => state.activateExplorerTabForCheckout,
   );
-  const dragHandlers = useDesktopDragHandlers();
   const isExplorerOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
   const draftIdRef = useRef(generateDraftId());
   const draftAgentIdRef = useRef(generateDraftId());
@@ -999,8 +998,10 @@ function DraftAgentScreenContent({
   const explorerServerId = draftExplorerCheckout?.serverId ?? null;
   const explorerIsGit = draftExplorerCheckout?.isGit ?? false;
   const mainContent = (
-    <View style={styles.container} {...dragHandlers}>
-      <View style={styles.outerContainer}>
+    <View style={styles.container}>
+      <TitlebarDragRegion />
+      <TitlebarNoDragContent direction="column">
+        <View style={styles.outerContainer}>
         <View style={styles.agentPanel}>
           <View
             style={[
@@ -1263,6 +1264,7 @@ function DraftAgentScreenContent({
           />
         ) : null}
       </View>
+      </TitlebarNoDragContent>
     </View>
   );
 
@@ -1292,6 +1294,7 @@ function DraftAgentScreenContent({
 
 const styles = StyleSheet.create((theme) => ({
   container: {
+    position: "relative",
     flex: 1,
     backgroundColor: theme.colors.surface0,
   },

packages/app/src/screens/open-project-screen.tsx

@@ -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 { useDesktopDragHandlers } from "@/utils/desktop-window";
+import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const openAgentList = usePanelStore((s) => s.openAgentList);
@@ -18,7 +18,6 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const hasProjects = useSessionStore((s) => (s.sessions[serverId]?.workspaces?.size ?? 0) > 0);
 
   const isCompactLayout = isCompactFormFactor();
-  const dragHandlers = useDesktopDragHandlers();
 
   useEffect(() => {
     if (!isCompactLayout) {
@@ -29,23 +28,26 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   return (
     <View style={styles.container}>
       <MenuHeader borderless />
-      <View style={styles.content} {...dragHandlers}>
-        <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 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>
     </View>
   );
@@ -58,6 +60,7 @@ const styles = StyleSheet.create((theme) => ({
     userSelect: "none",
   },
   content: {
+    position: "relative",
     flexGrow: 1,
     justifyContent: "center",
     alignItems: "center",

packages/app/src/screens/startup-splash-screen.tsx

@@ -11,7 +11,7 @@ import {
   getDesktopDaemonLogs,
   type DesktopDaemonLogs,
 } from "@/desktop/daemon/desktop-daemon";
-import { useDesktopDragHandlers } from "@/utils/desktop-window";
+import { TitlebarDragRegion, TitlebarNoDragContent } from "@/components/desktop/titlebar-drag-region";
 
 type StartupSplashScreenProps = {
   bootstrapState?: {
@@ -26,6 +26,7 @@ const DOCS_URL = "https://paseo.sh/docs";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
+    position: "relative",
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
@@ -140,7 +141,6 @@ const styles = StyleSheet.create((theme) => ({
 
 export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps) {
   const { theme } = useUnistyles();
-  const dragHandlers = useDesktopDragHandlers();
   const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
   const [logsError, setLogsError] = useState<string | null>(null);
   const [isLoadingLogs, setIsLoadingLogs] = useState(false);
@@ -222,39 +222,47 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
 
   if (isSimpleSplash) {
     return (
-      <View style={styles.container} {...dragHandlers}>
-        <PaseoLogo size={96} />
-        <Text style={styles.subtitle}>Starting up…</Text>
+      <View style={styles.container}>
+        <TitlebarDragRegion />
+        <TitlebarNoDragContent direction="column">
+          <PaseoLogo size={96} />
+          <Text style={styles.subtitle}>Starting up…</Text>
+        </TitlebarNoDragContent>
       </View>
     );
   }
 
   if (!isError) {
     return (
-      <View style={styles.container} {...dragHandlers}>
-        <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 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>
-        </View>
+        </TitlebarNoDragContent>
       </View>
     );
   }
 
   return (
-    <View style={[styles.container, styles.containerError]} {...dragHandlers}>
-      <View style={styles.errorContent}>
+    <View style={[styles.container, styles.containerError]}>
+      <TitlebarDragRegion />
+      <TitlebarNoDragContent direction="column">
+        <View style={styles.errorContent}>
         <View style={styles.errorHeader}>
           <PaseoLogo size={64} />
           <Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
@@ -313,6 +321,7 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
           </Button>
         </View>
       </View>
+      </TitlebarNoDragContent>
     </View>
   );
 }