refactor: move startup logic to app-support, improve welcome screen UI

packages/app/src/app/_layout.tsx

@@ -61,6 +61,7 @@ import {
 import { buildNotificationRoute } from "@/utils/notification-routing";
 import {
   buildHostRootRoute,
+  parseServerIdFromPathname,
   parseHostAgentRouteFromPathname,
   parseWorkspaceOpenIntent,
 } from "@/utils/host-routes";
@@ -469,7 +470,8 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const params = useGlobalSearchParams<{ open?: string | string[] }>();
   useFaviconStatus();
-  const shouldShowAppChrome = pathname !== "/" && pathname !== "";
+  const activeServerId = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
+  const shouldShowAppChrome = activeServerId !== null;
 
   // Parse selectedAgentKey directly from pathname
   // useLocalSearchParams doesn't update when navigating between same-pattern routes

packages/app/src/app/index.tsx

@@ -10,7 +10,7 @@ import {
   shouldRedirectToWelcome,
   shouldWaitOnStartupRace,
   WELCOME_ROUTE,
-} from './index-startup'
+} from '@/app-support/index-startup'
 
 const STARTUP_TIMEOUT_MS = 30_000
 function useAnyHostOnline(serverIds: string[]): string | null {

packages/app/src/components/welcome-screen.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useState } from "react";
-import { Image, Pressable, Text, View, Platform, ScrollView } from "react-native";
+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 { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { HostProfile } from "@/types/host-connection";
 import { useHostMutations } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
@@ -12,12 +13,23 @@ import { NameHostModal } from "./name-host-modal";
 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";
+
+type WelcomeAction = {
+  key: "scan-qr" | "direct-connection" | "paste-pairing-link";
+  label: string;
+  testID: string;
+  primary: boolean;
+  icon: typeof QrCode;
+  onPress: () => void;
+};
 
 const styles = StyleSheet.create((theme) => ({
   container: {
     flexGrow: 1,
     backgroundColor: theme.colors.surface0,
     padding: theme.spacing[6],
+    paddingBottom: 0,
     alignItems: "center",
   },
   content: {
@@ -26,11 +38,6 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
     alignItems: "center",
   },
-  logo: {
-    width: 96,
-    height: 96,
-    marginBottom: theme.spacing[6],
-  },
   title: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.xl,
@@ -61,8 +68,8 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.border,
   },
   actionButtonPrimary: {
-    backgroundColor: theme.colors.palette.blue[500],
-    borderColor: theme.colors.palette.blue[500],
+    backgroundColor: theme.colors.accent,
+    borderColor: theme.colors.accent,
   },
   actionText: {
     color: theme.colors.foreground,
@@ -70,7 +77,7 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.medium,
   },
   actionTextPrimary: {
-    color: theme.colors.palette.white,
+    color: theme.colors.accentForeground,
   },
   versionLabel: {
     color: theme.colors.foregroundMuted,
@@ -86,6 +93,7 @@ export interface WelcomeScreenProps {
 
 export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
   const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
   const router = useRouter();
   const { renameHost } = useHostMutations();
   const appVersion = resolveAppVersion();
@@ -111,51 +119,87 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
     [router]
   );
 
+  const actions: WelcomeAction[] = Platform.OS === "web"
+    ? [
+        {
+          key: "direct-connection",
+          label: "Direct connection",
+          testID: "welcome-direct-connection",
+          primary: true,
+          icon: Link2,
+          onPress: () => setIsDirectOpen(true),
+        },
+        {
+          key: "paste-pairing-link",
+          label: "Paste pairing link",
+          testID: "welcome-paste-pairing-link",
+          primary: false,
+          icon: ClipboardPaste,
+          onPress: () => setIsPasteLinkOpen(true),
+        },
+      ]
+    : [
+        {
+          key: "scan-qr",
+          label: "Scan QR code",
+          testID: "welcome-scan-qr",
+          primary: true,
+          icon: QrCode,
+          onPress: () => router.push("/pair-scan?source=onboarding"),
+        },
+        {
+          key: "direct-connection",
+          label: "Direct connection",
+          testID: "welcome-direct-connection",
+          primary: false,
+          icon: Link2,
+          onPress: () => setIsDirectOpen(true),
+        },
+        {
+          key: "paste-pairing-link",
+          label: "Paste pairing link",
+          testID: "welcome-paste-pairing-link",
+          primary: false,
+          icon: ClipboardPaste,
+          onPress: () => setIsPasteLinkOpen(true),
+        },
+      ];
+
   return (
     <ScrollView
       style={{ flex: 1, backgroundColor: theme.colors.surface0 }}
-      contentContainerStyle={styles.container}
+      contentContainerStyle={[
+        styles.container,
+        { paddingBottom: theme.spacing[6] + insets.bottom },
+      ]}
       showsVerticalScrollIndicator={false}
       testID="welcome-screen"
     >
       <View style={styles.content}>
-        <Image
-          source={require("../../assets/images/icon.png")}
-          style={styles.logo}
-          resizeMode="contain"
-        />
+        <PaseoLogo size={96} color={theme.colors.foreground} />
         <Text style={styles.title}>Welcome to Paseo</Text>
-        <Text style={styles.subtitle}>Add a host to start.</Text>
+        <Text style={styles.subtitle}>Connect to your host to start</Text>
 
         <View style={styles.actions}>
-          <Pressable
-            style={[styles.actionButton, styles.actionButtonPrimary]}
-            onPress={() => setIsDirectOpen(true)}
-            testID="welcome-direct-connection"
-          >
-            <Link2 size={18} color={theme.colors.palette.white} />
-            <Text style={[styles.actionText, styles.actionTextPrimary]}>Direct connection</Text>
-          </Pressable>
-
-          <Pressable
-            style={styles.actionButton}
-            onPress={() => setIsPasteLinkOpen(true)}
-            testID="welcome-paste-pairing-link"
-          >
-            <ClipboardPaste size={18} color={theme.colors.foreground} />
-            <Text style={styles.actionText}>Paste pairing link</Text>
-          </Pressable>
-
-          {Platform.OS !== "web" ? (
+          {actions.map((action) => {
+            const Icon = action.icon;
+            return (
             <Pressable
-              style={styles.actionButton}
-              onPress={() => router.push("/pair-scan?source=onboarding")}
-              testID="welcome-scan-qr"
+              key={action.key}
+              style={[styles.actionButton, action.primary ? styles.actionButtonPrimary : null]}
+              onPress={action.onPress}
+              testID={action.testID}
             >
-              <QrCode size={18} color={theme.colors.foreground} />
-              <Text style={styles.actionText}>Scan QR code</Text>
+              <Icon
+                size={18}
+                color={action.primary ? theme.colors.accentForeground : theme.colors.foreground}
+              />
+              <Text style={[styles.actionText, action.primary ? styles.actionTextPrimary : null]}>
+                {action.label}
+              </Text>
             </Pressable>
-          ) : null}
+            );
+          })}
         </View>
       </View>
       <Text style={styles.versionLabel}>{appVersionText}</Text>

packages/app/src/desktop/components/desktop-updates-section.tsx

@@ -554,7 +554,7 @@ function PairingOfferDialogContent(input: {
     void QRCode.toDataURL(pairingOffer.url, {
       errorCorrectionLevel: 'M',
       margin: 1,
-      width: 320,
+      width: 480,
     })
       .then((dataUrl) => {
         if (cancelled) {
@@ -606,17 +606,19 @@ function PairingOfferDialogContent(input: {
       </Text>
       <View style={styles.qrCard}>
         {qrDataUrl ? (
-          <Image source={{ uri: qrDataUrl }} style={styles.qrImage} />
+          <Image source={{ uri: qrDataUrl }} style={styles.qrImage} resizeMode="contain" />
         ) : qrError ? (
           <Text style={styles.hintText}>QR unavailable: {qrError}</Text>
         ) : (
           <ActivityIndicator size="small" />
         )}
       </View>
-      <Text style={styles.linkLabel}>Pairing link</Text>
-      <Text style={styles.linkText} selectable>
-        {pairingOffer.url}
-      </Text>
+      <View style={styles.linkSection}>
+        <Text style={styles.linkLabel}>Pairing link</Text>
+        <Text style={styles.linkText} selectable>
+          {pairingOffer.url}
+        </Text>
+      </View>
       <View style={styles.modalActions}>
         <Button variant="outline" size="sm" onPress={onCopyLink}>
           Copy link
@@ -717,18 +719,21 @@ const styles = StyleSheet.create((theme) => ({
   qrCard: {
     alignItems: 'center',
     justifyContent: 'center',
-    alignSelf: 'center',
-    minHeight: 220,
-    minWidth: 220,
-    padding: theme.spacing[4],
+    width: '100%',
+    aspectRatio: 1,
+    alignSelf: 'stretch',
+    padding: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
     borderWidth: 1,
     borderColor: theme.colors.border,
     backgroundColor: theme.colors.surface0,
   },
   qrImage: {
-    width: 220,
-    height: 220,
+    width: '100%',
+    height: '100%',
+  },
+  linkSection: {
+    gap: theme.spacing[2],
   },
   linkLabel: {
     color: theme.colors.foreground,

packages/app/src/hooks/use-sidebar-workspaces-list.ts

@@ -7,6 +7,7 @@ import { projectDisplayNameFromProjectId } from '@/utils/project-display-name'
 
 const EMPTY_ORDER: string[] = []
 const EMPTY_PROJECTS: SidebarProjectEntry[] = []
+const EMPTY_WORKSPACE_ORDER_SCOPE: Record<string, string[]> = {}
 
 export type SidebarStateBucket = WorkspaceDescriptor['status']
 
@@ -271,7 +272,7 @@ export function useSidebarWorkspacesList(options?: {
     serverId ? (state.projectOrderByServerId[serverId] ?? EMPTY_ORDER) : EMPTY_ORDER
   )
   const persistedWorkspaceOrderByScope = useSidebarOrderStore((state) =>
-    serverId ? state.workspaceOrderByServerAndProject : {}
+    serverId ? state.workspaceOrderByServerAndProject : EMPTY_WORKSPACE_ORDER_SCOPE
   )
 
   const isActive = Boolean(serverId)