Add Demo Mode for App Store review

app/index.tsx

@@ -1,10 +1,12 @@
 import { Redirect, Stack, useRouter } from 'expo-router';
+import { useMemo } from 'react';
 import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useEntitlement } from '@/billing';
 import { EntitlementFooter } from '@/components/billing/EntitlementFooter';
 import { DeviceRow } from '@/components/DeviceRow';
 import { HeaderIconButton } from '@/components/HeaderIconButton';
+import { DEMO_DEVICE_ID } from '@/demo/demoBackend';
 import { useDevicesStore, useSettingsStore, type DeviceEntry } from '@/state';
 import { useTokens } from '@/theme';
 
@@ -15,11 +17,17 @@ export default function DevicesScreen() {
   const hasHydrated = useDevicesStore((s) => s.hasHydrated);
   const settingsHydrated = useSettingsStore((s) => s.hasHydrated);
   const hasOnboarded = useSettingsStore((s) => s.hasOnboarded);
+  const demoMode = useSettingsStore((s) => s.demoMode);
   const devices = useDevicesStore((s) => s.devices);
   const setActiveDevice = useDevicesStore((s) => s.setActiveDevice);
   const removeDevice = useDevicesStore((s) => s.removeDevice);
   const entitlement = useEntitlement();
 
+  const visibleDevices = useMemo(
+    () => (demoMode ? devices.filter((d) => d.id === DEMO_DEVICE_ID) : devices.filter((d) => d.id !== DEMO_DEVICE_ID)),
+    [demoMode, devices],
+  );
+
   if (!hasHydrated || !settingsHydrated) return null;
   if (!hasOnboarded) return <Redirect href="/onboarding" />;
 
@@ -79,7 +87,7 @@ export default function DevicesScreen() {
         }}
       />
 
-      {devices.length === 0 ? (
+      {visibleDevices.length === 0 ? (
         <View style={styles.center}>
           <Text style={[styles.emptyTitle, { color: tokens.text.primary }]}>No devices yet</Text>
           <Text style={[styles.emptyBody, { color: tokens.text.muted }]}>
@@ -88,15 +96,15 @@ export default function DevicesScreen() {
         </View>
       ) : (
         <ScrollView contentContainerStyle={styles.list}>
-          {devices.map((d) => (
+          {visibleDevices.map((d) => (
             <DeviceRow
               key={d.id}
               label={d.label}
               host={d.host}
               port={d.port}
               needsRepair={Boolean(d.needsRepair)}
               onPress={() => handleSelect(d.id)}
-              onLongPress={() => handleLongPress(d)}
+              onLongPress={demoMode && d.id === DEMO_DEVICE_ID ? () => {} : () => handleLongPress(d)}
               onRepair={() => handleRepair(d)}
             />
           ))}

app/settings.tsx

@@ -12,6 +12,8 @@ export default function SettingsScreen() {
   const router = useRouter();
   const useNerdFont = useSettingsStore((s) => s.useNerdFont);
   const setUseNerdFont = useSettingsStore((s) => s.setUseNerdFont);
+  const demoMode = useSettingsStore((s) => s.demoMode);
+  const setDemoMode = useSettingsStore((s) => s.setDemoMode);
 
   const hint =
     source === 'device'
@@ -85,6 +87,25 @@ export default function SettingsScreen() {
           />
         </View>
       </View>
+
+      <Text style={[styles.sectionLabel, { color: tokens.text.muted }]}>Demo</Text>
+      <View
+        style={[styles.card, { backgroundColor: tokens.surface.secondary, borderColor: tokens.border.subtle }]}>
+        <View style={styles.toggleRow}>
+          <View style={styles.toggleText}>
+            <Text style={[styles.rowLabel, { color: tokens.text.primary }]}>Demo Mode</Text>
+            <Text style={[styles.rowHint, { color: tokens.text.muted }]}>
+              Loads sample data so you can try the app without a Mac. Switching it off restores your real devices.
+            </Text>
+          </View>
+          <Switch
+            value={demoMode}
+            onValueChange={setDemoMode}
+            trackColor={{ true: tokens.accent.primary, false: tokens.surface.tertiary }}
+            thumbColor={tokens.surface.primary}
+          />
+        </View>
+      </View>
     </ScrollView>
   );
 }