refactor(app): restructure settings with modular section navigation

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

@@ -1,7 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { View, Text } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
-import { FolderOpen } from "lucide-react-native";
+import { FolderOpen, Smartphone } from "lucide-react-native";
 import { PaseoLogo } from "@/components/icons/paseo-logo";
 import { Button } from "@/components/ui/button";
 import { MenuHeader } from "@/components/headers/menu-header";
@@ -15,12 +15,16 @@ import {
   HEADER_TOP_PADDING_MOBILE,
 } from "@/constants/layout";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
+import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
+import { PairDeviceModal } from "@/desktop/components/pair-device-modal";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const openAgentList = usePanelStore((s) => s.openAgentList);
   const openProjectPicker = useOpenProjectPicker(serverId);
   const hasHydrated = useSessionStore((s) => s.sessions[serverId]?.hasHydratedWorkspaces ?? false);
   const hasProjects = useSessionStore((s) => (s.sessions[serverId]?.workspaces?.size ?? 0) > 0);
+  const isLocalDaemon = useIsLocalDaemon(serverId);
+  const [isPairDeviceOpen, setIsPairDeviceOpen] = useState(false);
 
   const isCompactLayout = useIsCompactFormFactor();
 
@@ -55,8 +59,23 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
           >
             Add a project
           </Button>
+          {isLocalDaemon ? (
+            <Button
+              variant="outline"
+              leftIcon={Smartphone}
+              onPress={() => setIsPairDeviceOpen(true)}
+              testID="open-project-pair-device"
+            >
+              Pair device
+            </Button>
+          ) : null}
         </View>
       </View>
+      <PairDeviceModal
+        visible={isPairDeviceOpen}
+        onClose={() => setIsPairDeviceOpen(false)}
+        testID="open-project-pair-device-modal"
+      />
     </View>
   );
 }
@@ -88,6 +107,9 @@ const styles = StyleSheet.create((theme) => ({
   },
   cta: {
     marginTop: theme.spacing[12],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
   },
   heading: {
     color: theme.colors.foreground,