diff --git a/packages/app/src/components/welcome-screen.tsx b/packages/app/src/components/welcome-screen.tsx index 19f7a5310..bbdf38f7e 100644 --- a/packages/app/src/components/welcome-screen.tsx +++ b/packages/app/src/components/welcome-screen.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react"; import { Pressable, Text, View, Platform, ScrollView } from "react-native"; import { useRouter } from "expo-router"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; -import { QrCode, Link2, ClipboardPaste } from "lucide-react-native"; +import { QrCode, Link2, ClipboardPaste, ExternalLink } from "lucide-react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import type { HostProfile } from "@/types/host-connection"; import { @@ -20,6 +20,7 @@ import { resolveAppVersion } from "@/utils/app-version"; import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates"; import { buildHostRootRoute } from "@/utils/host-routes"; import { PaseoLogo } from "@/components/icons/paseo-logo"; +import { openExternalUrl } from "@/utils/open-external-url"; type WelcomeAction = { key: "scan-qr" | "direct-connection" | "paste-pairing-link"; @@ -118,6 +119,25 @@ const styles = StyleSheet.create((theme) => ({ color: theme.colors.destructive, fontSize: theme.fontSize.sm, }, + setupHint: { + color: theme.colors.foregroundMuted, + fontSize: theme.fontSize.sm, + textAlign: "center", + marginBottom: theme.spacing[6], + lineHeight: theme.fontSize.sm * 1.5, + }, + setupLink: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + gap: 6, + marginBottom: theme.spacing[6], + }, + setupLinkText: { + color: theme.colors.accent, + fontSize: theme.fontSize.sm, + fontWeight: theme.fontWeight.medium, + }, versionLabel: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.xs, @@ -326,6 +346,21 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) { {showHostList ? "Connecting to your hosts…" : "Connect to your host to start"} + {!showHostList && Platform.OS !== "web" && ( + <> + + You need the Paseo desktop app or server running on your computer first. + + openExternalUrl("https://paseo.sh")} + > + Get started at paseo.sh + + + + )} + {actions.map((action) => { const Icon = action.icon;