From 89a117e1c19511412ab71fcfc069d7e3a1549e40 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Mon, 23 Feb 2026 15:29:04 +0700 Subject: [PATCH] feat(app): show app version on welcome screen --- .../app/src/components/welcome-screen.tsx | 82 +++++++++++-------- packages/app/src/screens/settings-screen.tsx | 37 +-------- packages/app/src/utils/app-version.ts | 34 ++++++++ 3 files changed, 86 insertions(+), 67 deletions(-) create mode 100644 packages/app/src/utils/app-version.ts diff --git a/packages/app/src/components/welcome-screen.tsx b/packages/app/src/components/welcome-screen.tsx index db82cf4ca..7c94120dc 100644 --- a/packages/app/src/components/welcome-screen.tsx +++ b/packages/app/src/components/welcome-screen.tsx @@ -10,12 +10,19 @@ import { AddHostModal } from "./add-host-modal"; import { PairLinkModal } from "./pair-link-modal"; import { NameHostModal } from "./name-host-modal"; import { buildHostAgentDraftRoute } from "@/utils/host-routes"; +import { resolveAppVersion } from "@/utils/app-version"; +import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates"; const styles = StyleSheet.create((theme) => ({ container: { - flex: 1, + flexGrow: 1, backgroundColor: theme.colors.surface0, padding: theme.spacing[6], + alignItems: "center", + }, + content: { + width: "100%", + flexGrow: 1, justifyContent: "center", alignItems: "center", }, @@ -65,6 +72,12 @@ const styles = StyleSheet.create((theme) => ({ actionTextPrimary: { color: theme.colors.palette.white, }, + versionLabel: { + color: theme.colors.foregroundMuted, + fontSize: theme.fontSize.xs, + textAlign: "center", + marginTop: theme.spacing[6], + }, })); export interface WelcomeScreenProps { @@ -75,6 +88,8 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) { const { theme } = useUnistyles(); const router = useRouter(); const { updateHost } = useDaemonRegistry(); + const appVersion = resolveAppVersion(); + const appVersionText = formatVersionWithPrefix(appVersion); const [isDirectOpen, setIsDirectOpen] = useState(false); const [isPasteLinkOpen, setIsPasteLinkOpen] = useState(false); const [pendingNameHost, setPendingNameHost] = useState<{ serverId: string; hostname: string | null } | null>(null); @@ -103,44 +118,47 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) { showsVerticalScrollIndicator={false} testID="welcome-screen" > - - Welcome to Paseo - Add a host to start. + + + Welcome to Paseo + Add a host to start. - - setIsDirectOpen(true)} - testID="welcome-direct-connection" - > - - Direct connection - + + setIsDirectOpen(true)} + testID="welcome-direct-connection" + > + + Direct connection + - setIsPasteLinkOpen(true)} - testID="welcome-paste-pairing-link" - > - - Paste pairing link - - - {Platform.OS !== "web" ? ( router.push("/pair-scan?source=onboarding")} - testID="welcome-scan-qr" + onPress={() => setIsPasteLinkOpen(true)} + testID="welcome-paste-pairing-link" > - - Scan QR code + + Paste pairing link - ) : null} + + {Platform.OS !== "web" ? ( + router.push("/pair-scan?source=onboarding")} + testID="welcome-scan-qr" + > + + Scan QR code + + ) : null} + + {appVersionText} new Promise((resolve) => { @@ -385,25 +384,6 @@ const styles = StyleSheet.create((theme) => ({ }, })); -function resolveAppVersion(): string | null { - const packageVersion = appPackage?.version; - if (typeof packageVersion === "string" && packageVersion.trim().length > 0) { - return packageVersion.trim(); - } - - const expoVersion = Constants.expoConfig?.version; - if (typeof expoVersion === "string" && expoVersion.trim().length > 0) { - return expoVersion.trim(); - } - - const manifestVersion = (Constants as any).manifest?.version; - if (typeof manifestVersion === "string" && manifestVersion.trim().length > 0) { - return manifestVersion.trim(); - } - - return null; -} - function formatDaemonVersionBadge(version: string | null): string | null { const daemonVersion = version?.trim(); if (!daemonVersion) { @@ -415,19 +395,6 @@ function formatDaemonVersionBadge(version: string | null): string | null { return `v${daemonVersion}`; } -function formatVersionForDisplay(version: string | null | undefined): string { - const value = version?.trim(); - if (!value) { - return "\u2014"; - } - - if (value.startsWith("v")) { - return value; - } - - return `v${value}`; -} - function DesktopAppUpdateRow() { const { isDesktop, @@ -550,7 +517,7 @@ export default function SettingsScreen() { const lastHandledEditHostRef = useRef(null); const isDesktop = Platform.OS === "web"; const appVersion = resolveAppVersion(); - const appVersionText = formatVersionForDisplay(appVersion); + const appVersionText = formatVersionWithPrefix(appVersion); const editingServerId = editingDaemon?.serverId ?? null; const editingDaemonLive = editingServerId ? daemons.find((daemon) => daemon.serverId === editingServerId) ?? null diff --git a/packages/app/src/utils/app-version.ts b/packages/app/src/utils/app-version.ts new file mode 100644 index 000000000..2aca02c0d --- /dev/null +++ b/packages/app/src/utils/app-version.ts @@ -0,0 +1,34 @@ +import Constants from "expo-constants"; +import appPackage from "../../package.json"; + +function toVersionOrNull(value: unknown): string | null { + if (typeof value !== "string") { + return null; + } + + const trimmed = value.trim(); + if (trimmed.length === 0) { + return null; + } + + return trimmed; +} + +export function resolveAppVersion(): string | null { + const packageVersion = toVersionOrNull(appPackage?.version); + if (packageVersion) { + return packageVersion; + } + + const expoVersion = toVersionOrNull(Constants.expoConfig?.version); + if (expoVersion) { + return expoVersion; + } + + const manifestVersion = toVersionOrNull((Constants as any).manifest?.version); + if (manifestVersion) { + return manifestVersion; + } + + return null; +}