diff --git a/packages/app/src/app/pair-scan.tsx b/packages/app/src/app/pair-scan.tsx index e1019fe8d..bdc210fa3 100644 --- a/packages/app/src/app/pair-scan.tsx +++ b/packages/app/src/app/pair-scan.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { Alert, Platform, Pressable, Text, View } from "react-native"; import { useRouter } from "expo-router"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { CameraView, useCameraPermissions } from "expo-camera"; import type { BarcodeScanningResult } from "expo-camera"; @@ -13,7 +14,6 @@ const styles = StyleSheet.create((theme) => ({ }, header: { paddingHorizontal: theme.spacing[6], - paddingTop: theme.spacing[6], paddingBottom: theme.spacing[4], flexDirection: "row", justifyContent: "space-between", @@ -32,7 +32,6 @@ const styles = StyleSheet.create((theme) => ({ body: { flex: 1, paddingHorizontal: theme.spacing[6], - paddingBottom: theme.spacing[6], }, cameraWrap: { flex: 1, @@ -132,6 +131,7 @@ function extractOfferUrlFromScan(result: BarcodeScanningResult): string | null { export default function PairScanScreen() { const { theme } = useUnistyles(); + const insets = useSafeAreaInsets(); const router = useRouter(); const { upsertDaemonFromOfferUrl } = useDaemonRegistry(); @@ -172,17 +172,17 @@ export default function PairScanScreen() { if (Platform.OS === "web") { return ( - + Scan QR router.back()}> Close - + Not available on web - QR scanning isn’t supported in the web build. Use “Paste link” instead. + QR scanning isn't supported in the web build. Use "Paste link" instead. router.replace("/settings")}> Back to Settings @@ -197,14 +197,14 @@ export default function PairScanScreen() { return ( - + Scan QR router.back()}> Close - + {!granted ? ( Camera permission diff --git a/packages/app/src/app/settings.tsx b/packages/app/src/app/settings.tsx index 148c34455..c8a66c5d0 100644 --- a/packages/app/src/app/settings.tsx +++ b/packages/app/src/app/settings.tsx @@ -12,6 +12,7 @@ import { Platform, } from "react-native"; import { router } from "expo-router"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles"; import { Sun, Moon, Monitor } from "lucide-react-native"; import { Fonts } from "@/constants/theme"; @@ -378,6 +379,8 @@ const styles = StyleSheet.create((theme) => ({ export default function SettingsScreen() { + const { theme } = useUnistyles(); + const insets = useSafeAreaInsets(); const { settings, isLoading: settingsLoading, updateSettings, resetSettings } = useAppSettings(); const { daemons, @@ -561,7 +564,7 @@ export default function SettingsScreen() { - + {/* Host Management */} diff --git a/packages/app/src/components/download-toast.tsx b/packages/app/src/components/download-toast.tsx index 41ecb2492..5bbd6515c 100644 --- a/packages/app/src/components/download-toast.tsx +++ b/packages/app/src/components/download-toast.tsx @@ -1,5 +1,6 @@ import { useEffect, useRef } from "react"; import { ActivityIndicator, Pressable, Text, View } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { Check, X, XCircle } from "lucide-react-native"; import { useDownloadStore, formatSpeed, formatEta } from "@/stores/download-store"; @@ -8,6 +9,7 @@ const AUTO_DISMISS_DELAY = 3000; export function DownloadToast() { const { theme } = useUnistyles(); + const insets = useSafeAreaInsets(); const downloads = useDownloadStore((state) => state.downloads); const activeDownloadId = useDownloadStore((state) => state.activeDownloadId); const dismissDownload = useDownloadStore((state) => state.dismissDownload); @@ -39,7 +41,7 @@ export function DownloadToast() { } return ( - + {activeDownload.status === "downloading" ? ( @@ -89,7 +91,6 @@ export function DownloadToast() { const styles = StyleSheet.create((theme) => ({ container: { position: "absolute", - bottom: theme.spacing[4], left: theme.spacing[4], right: theme.spacing[4], zIndex: 1000, diff --git a/packages/app/src/components/draggable-list.web.tsx b/packages/app/src/components/draggable-list.web.tsx index 5afb80315..b04212876 100644 --- a/packages/app/src/components/draggable-list.web.tsx +++ b/packages/app/src/components/draggable-list.web.tsx @@ -61,10 +61,14 @@ function SortableItem({ // Trigger drag - handled by dnd-kit's listeners }; + const baseTransform = CSS.Transform.toString(transform); + const scaleTransform = isDragging ? "scale(1.02)" : ""; + const combinedTransform = [baseTransform, scaleTransform].filter(Boolean).join(" "); + const style = { - transform: CSS.Transform.toString(transform), + transform: combinedTransform || undefined, transition, - opacity: isDragging ? 0.5 : 1, + opacity: isDragging ? 0.9 : 1, zIndex: isDragging ? 1000 : 1, }; diff --git a/packages/app/src/components/grouped-agent-list.tsx b/packages/app/src/components/grouped-agent-list.tsx index 510b5b101..6d1f32fa3 100644 --- a/packages/app/src/components/grouped-agent-list.tsx +++ b/packages/app/src/components/grouped-agent-list.tsx @@ -649,6 +649,7 @@ const styles = StyleSheet.create((theme) => ({ }, sectionDragging: { opacity: 0.9, + transform: [{ scale: 1.02 }], }, chevron: { opacity: 0.5, diff --git a/packages/app/src/screens/agent/agent-ready-screen.tsx b/packages/app/src/screens/agent/agent-ready-screen.tsx index 9d6764e3e..ff9872855 100644 --- a/packages/app/src/screens/agent/agent-ready-screen.tsx +++ b/packages/app/src/screens/agent/agent-ready-screen.tsx @@ -617,14 +617,25 @@ function AgentScreenContent({ {isMobile ? ( - + checkout?.isGit ? ( + + ) : ( + + ) ) : (