@ramonclaudio/create-vexpo 0.1.0 → 0.1.1

package/dist/templates/default/{app → src/app}/(app)/(tabs)/settings/_layout.tsx

@@ -1,7 +1,8 @@
 import { Stack } from "expo-router";
 
 import { useColors } from "@/hooks/use-theme";
-import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { useMotionScreenOptions } from "@/hooks/use-motion-screen-options";
+import { FontFamily } from "@/constants/layout";
 import { HeaderTint } from "@/constants/theme";
 import { LoadingScreen } from "@/components/ui/loading-screen";
 
@@ -10,26 +11,29 @@ export const unstable_settings = {
 };
 
 export function SuspenseFallback() {
-  return <LoadingScreen />;
+  return <LoadingScreen testID="settings-loading" />;
 }
 
 export default function SettingsLayout() {
   const colors = useColors();
-  const reduceMotion = useReducedMotion();
+  const motion = useMotionScreenOptions("default");
 
   return (
     <Stack
       screenOptions={{
+        ...motion,
         headerShown: false,
         contentStyle: { backgroundColor: colors.background as string },
-        animation: reduceMotion ? "fade" : "default",
-        animationDuration: reduceMotion ? 150 : undefined,
       }}
     >
       <Stack.Screen name="index" />
       <Stack.Screen name="preferences" options={{ headerShown: true }}>
         <Stack.Header transparent />
-        <Stack.Screen.Title style={{ color: HeaderTint as string }}>Preferences</Stack.Screen.Title>
+        <Stack.Screen.Title
+          style={{ color: HeaderTint as string, fontFamily: FontFamily.semiBold }}
+        >
+          Preferences
+        </Stack.Screen.Title>
         <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
       </Stack.Screen>
     </Stack>

package/dist/templates/default/{app → src/app}/(app)/(tabs)/settings/index.tsx

@@ -1,9 +1,9 @@
 import { useState, type ComponentProps } from "react";
 import Constants from "expo-constants";
 import * as Clipboard from "expo-clipboard";
-import * as LocalAuthentication from "expo-local-authentication";
+import { useDeleteAccount } from "@/hooks/use-delete-account";
 import { Image as ExpoImage, useImage } from "expo-image";
-import { router, usePreventZoomTransitionDismissal, type Href } from "expo-router";
+import { router, type Href } from "expo-router";
 
 const PROFILE_HREF = "/profile" as Href;
 const DEBUG_HREF = "/debug" as Href;
@@ -18,6 +18,7 @@ import {
   Spacer,
   Image,
   RNHostView,
+  Alert,
   ConfirmationDialog,
 } from "@expo/ui/swift-ui";
 import {
@@ -27,7 +28,7 @@ import {
   foregroundStyle,
   frame,
   padding,
-  onTapGesture,
+  accessibilityHidden,
   accessibilityLabel,
   lineLimit,
   truncationMode,
@@ -36,12 +37,14 @@ import {
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { Button as ButtonTokens } from "@/constants/layout";
 
 import { api } from "@/convex/_generated/api";
 import { authClient } from "@/lib/auth-client";
 import { haptics } from "@/lib/haptics";
 import { announce } from "@/lib/a11y";
+import { ErrorText } from "@/components/ui/status-text";
 import { useColors } from "@/hooks/use-theme";
 import { useDebugEnabled } from "@/lib/preferences";
 
@@ -49,17 +52,16 @@ const HEADER_AVATAR_SIZE = 56;
 
 export default function SettingsScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const me = useQuery(api.users.getMe);
   const removeAllTokens = useMutation(api.pushTokens.removeAll);
-  const deleteAccountMutation = useMutation(api.users.deleteAccount);
+  const { deleteAccount, deleteError } = useDeleteAccount();
 
   const [showSignOut, setShowSignOut] = useState(false);
   const [showDeleteAccount, setShowDeleteAccount] = useState(false);
   const [debugOn] = useDebugEnabled();
 
-  usePreventZoomTransitionDismissal();
-
   const navigate = (path: Href) => {
     haptics.light();
     router.push(path);
@@ -67,8 +69,6 @@ export default function SettingsScreen() {
 
   const handleSignOut = async () => {
     haptics.medium();
-    // Push-token cleanup is best-effort. A stale token gets garbage-collected
-    // by `pushTokens.cleanupStale` after 30 days, so don't gate sign-out on it.
     try {
       await removeAllTokens();
     } catch (err) {
@@ -77,16 +77,6 @@ export default function SettingsScreen() {
     await authClient.signOut();
   };
 
-  const handleDeleteAccount = async () => {
-    haptics.error();
-    const result = await LocalAuthentication.authenticateAsync({
-      promptMessage: "Confirm with Face ID",
-    });
-    if (!result.success) return;
-    await deleteAccountMutation();
-    await authClient.signOut();
-  };
-
   const version = Constants.expoConfig?.version ?? "1.0.0";
 
   const handleCopyVersion = async () => {
@@ -98,12 +88,14 @@ export default function SettingsScreen() {
 
   type SFSymbol = NonNullable<ComponentProps<typeof Image>["systemName"]>;
   const rowButton = ({
+    testID,
     label,
     systemImage,
     onPress,
     role,
     fg,
   }: {
+    testID: string;
     label: string;
     systemImage: SFSymbol;
     onPress: () => void;
@@ -115,9 +107,10 @@ export default function SettingsScreen() {
       (role === "destructive" ? (colors.destructive as string) : (colors.foreground as string));
     return (
       <Button
+        testID={testID}
         modifiers={[
           buttonStyle("plain"),
-          frame({ maxWidth: 10000 }),
+          frame({ maxWidth: Infinity }),
           background(colors.muted as string),
           clipShape("capsule"),
         ]}
@@ -127,17 +120,27 @@ export default function SettingsScreen() {
           spacing={12}
           alignment="center"
           modifiers={[
-            frame({ maxWidth: 10000, height: ButtonTokens.height }),
+            frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
             padding({ horizontal: 16 }),
           ]}
         >
-          <Image systemName={systemImage} size={18} color={labelColor} />
+          <Image
+            systemName={systemImage}
+            size={symbolSize(18)}
+            color={labelColor}
+            modifiers={[accessibilityHidden(true)]}
+          />
           <Text modifiers={[dfont({ size: 16, weight: "medium" }), foregroundStyle(labelColor)]}>
             {label}
           </Text>
           <Spacer />
           {role !== "destructive" ? (
-            <Image systemName="chevron.right" size={13} color={colors.mutedForeground as string} />
+            <Image
+              systemName="chevron.right"
+              size={symbolSize(13)}
+              color={colors.mutedForeground as string}
+              modifiers={[accessibilityHidden(true)]}
+            />
           ) : null}
         </HStack>
       </Button>
@@ -145,7 +148,7 @@ export default function SettingsScreen() {
   };
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="settings-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
         modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
       >
@@ -154,32 +157,32 @@ export default function SettingsScreen() {
           alignment="leading"
           modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
         >
-          {/* Profile header */}
           <Button
+            testID="settings-profile"
             modifiers={[
               buttonStyle("plain"),
-              frame({ maxWidth: 10000 }),
+              frame({ maxWidth: Infinity }),
               background(colors.muted as string),
               clipShape("capsule"),
-              onTapGesture(() => {
-                haptics.light();
-                navigate(PROFILE_HREF);
-              }),
               accessibilityLabel("Open profile"),
             ]}
-            onPress={() => navigate(PROFILE_HREF)}
+            onPress={() => {
+              haptics.light();
+              navigate(PROFILE_HREF);
+            }}
           >
             <HStack
               spacing={16}
               alignment="center"
               modifiers={[
-                frame({ maxWidth: 10000, height: 80 }),
+                frame({ maxWidth: Infinity, minHeight: 80 }),
                 padding({ leading: 8, trailing: 16 }),
               ]}
             >
               <ProfileHeaderAvatar avatarUrl={me?.avatarUrl ?? null} />
               <VStack alignment="leading" spacing={2}>
                 <Text
+                  testID="settings-profile-name"
                   modifiers={[
                     dfont({ size: 17, weight: "semibold" }),
                     foregroundStyle(colors.foreground as string),
@@ -191,6 +194,7 @@ export default function SettingsScreen() {
                 </Text>
                 {me?.email ? (
                   <Text
+                    testID="settings-profile-email"
                     modifiers={[
                       dfont({ size: 14 }),
                       foregroundStyle(colors.mutedForeground as string),
@@ -206,19 +210,22 @@ export default function SettingsScreen() {
               <Spacer />
               <Image
                 systemName="chevron.right"
-                size={13}
+                size={symbolSize(13)}
                 color={colors.mutedForeground as string}
+                modifiers={[accessibilityHidden(true)]}
               />
             </HStack>
           </Button>
 
           <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
             {rowButton({
+              testID: "settings-sessions",
               label: "Sessions",
               systemImage: "list.bullet.rectangle.portrait",
               onPress: () => navigate("/sessions"),
             })}
             {rowButton({
+              testID: "settings-preferences",
               label: "Preferences",
               systemImage: "slider.horizontal.3",
               onPress: () => navigate("/settings/preferences"),
@@ -227,22 +234,26 @@ export default function SettingsScreen() {
 
           <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
             {rowButton({
+              testID: "settings-help",
               label: "Help & Feedback",
-              systemImage: "bubble.left",
+              systemImage: "questionmark.bubble.fill",
               onPress: () => navigate("/help"),
             })}
             {rowButton({
+              testID: "settings-privacy",
               label: "Privacy",
-              systemImage: "hand.raised",
+              systemImage: "lock.shield.fill",
               onPress: () => navigate("/privacy"),
             })}
             {rowButton({
+              testID: "settings-copy-version",
               label: "Copy version",
               systemImage: "doc.on.doc",
               onPress: handleCopyVersion,
             })}
             {debugOn
               ? rowButton({
+                  testID: "settings-debug",
                   label: "Debug",
                   systemImage: "ant.circle",
                   onPress: () => navigate(DEBUG_HREF),
@@ -259,6 +270,7 @@ export default function SettingsScreen() {
             >
               <ConfirmationDialog.Trigger>
                 {rowButton({
+                  testID: "settings-sign-out",
                   label: "Sign out",
                   systemImage: "rectangle.portrait.and.arrow.right",
                   onPress: () => setShowSignOut(true),
@@ -266,8 +278,13 @@ export default function SettingsScreen() {
                 })}
               </ConfirmationDialog.Trigger>
               <ConfirmationDialog.Actions>
-                <Button label="Sign Out" role="destructive" onPress={handleSignOut} />
-                <Button label="Cancel" role="cancel" />
+                <Button
+                  testID="settings-sign-out-confirm"
+                  label="Sign Out"
+                  role="destructive"
+                  onPress={handleSignOut}
+                />
+                <Button testID="settings-sign-out-cancel" label="Cancel" role="cancel" />
               </ConfirmationDialog.Actions>
               <ConfirmationDialog.Message>
                 <Text modifiers={[dfont({ size: 16 })]}>
@@ -276,35 +293,45 @@ export default function SettingsScreen() {
               </ConfirmationDialog.Message>
             </ConfirmationDialog>
 
-            <ConfirmationDialog
+            {/* upstream expo/expo#45700: Alert component, SwiftUI .alert(...) on iOS 15+ */}
+            <Alert
               title="Delete account?"
               isPresented={showDeleteAccount}
               onIsPresentedChange={setShowDeleteAccount}
-              titleVisibility="visible"
             >
-              <ConfirmationDialog.Trigger>
+              <Alert.Trigger>
                 {rowButton({
+                  testID: "settings-delete-account",
                   label: "Delete account",
                   systemImage: "trash",
                   onPress: () => setShowDeleteAccount(true),
                   role: "destructive",
                 })}
-              </ConfirmationDialog.Trigger>
-              <ConfirmationDialog.Actions>
-                <Button label="Delete Forever" role="destructive" onPress={handleDeleteAccount} />
-                <Button label="Cancel" role="cancel" />
-              </ConfirmationDialog.Actions>
-              <ConfirmationDialog.Message>
+              </Alert.Trigger>
+              <Alert.Actions>
+                <Button
+                  testID="settings-delete-account-confirm"
+                  label="Delete Account"
+                  role="destructive"
+                  onPress={deleteAccount}
+                />
+                <Button testID="settings-delete-account-cancel" label="Cancel" role="cancel" />
+              </Alert.Actions>
+              <Alert.Message>
                 <Text modifiers={[dfont({ size: 16 })]}>
-                  This permanently deletes your account and all data. This cannot be undone.
+                  Your account is scheduled for permanent deletion in 30 days. Sign in within that
+                  window to restore it.
                 </Text>
-              </ConfirmationDialog.Message>
-            </ConfirmationDialog>
+              </Alert.Message>
+            </Alert>
           </VStack>
 
-          <HStack modifiers={[frame({ maxWidth: 10000 }), padding({ top: 16 })]}>
+          {deleteError ? <ErrorText testID="settings-delete-error">{deleteError}</ErrorText> : null}
+
+          <HStack modifiers={[frame({ maxWidth: Infinity }), padding({ top: 16 })]}>
             <Spacer />
             <Text
+              testID="settings-version"
               modifiers={[dfont({ size: 12 }), foregroundStyle(colors.tertiaryLabel as string)]}
             >
               v{version}
@@ -327,7 +354,10 @@ function ProfileHeaderAvatar({ avatarUrl }: { avatarUrl: string | null }) {
       systemName="person.crop.circle.fill"
       size={HEADER_AVATAR_SIZE}
       color={colors.mutedForeground as string}
-      modifiers={[frame({ width: HEADER_AVATAR_SIZE, height: HEADER_AVATAR_SIZE })]}
+      modifiers={[
+        frame({ width: HEADER_AVATAR_SIZE, height: HEADER_AVATAR_SIZE }),
+        accessibilityHidden(true),
+      ]}
     />
   );
 }
@@ -341,7 +371,7 @@ function RemoteAvatar({ url, size }: { url: string; size: number }) {
         systemName="person.crop.circle.fill"
         size={size}
         color={colors.mutedForeground as string}
-        modifiers={[frame({ width: size, height: size })]}
+        modifiers={[frame({ width: size, height: size }), accessibilityHidden(true)]}
       />
     );
   }

package/dist/templates/default/{app → src/app}/(app)/(tabs)/settings/preferences.tsx

@@ -10,9 +10,12 @@ import {
   Image,
 } from "@expo/ui/swift-ui";
 import {
+  accessibilityHidden,
+  accessibilityLabel,
   background,
   clipShape,
   controlSize,
+  dynamicTypeSize,
   foregroundStyle,
   frame,
   padding,
@@ -22,6 +25,7 @@ import {
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { Button as ButtonTokens } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
 
 import { haptics } from "@/lib/haptics";
 import { useColors, useThemeMode, type ThemeMode } from "@/hooks/use-theme";
@@ -32,6 +36,7 @@ import {
   type ReduceMotionPref,
 } from "@/lib/preferences";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 
 const MODE_BY_INDEX: ThemeMode[] = ["light", "dark", "system"];
 const INDEX_BY_MODE: Record<ThemeMode, number> = { light: 0, dark: 1, system: 2 };
@@ -45,6 +50,7 @@ const INDEX_BY_MOTION: Record<ReduceMotionPref, number> = {
 
 export default function PreferencesScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const { mode, setMode } = useThemeMode();
   const [hapticsOn, setHapticsOn] = useHapticsEnabled();
@@ -64,11 +70,13 @@ export default function PreferencesScreen() {
   ];
 
   const toggleRow = ({
+    testID,
     icon,
     label,
     value,
     onChange,
   }: {
+    testID: string;
     icon: NonNullable<React.ComponentProps<typeof Image>["systemName"]>;
     label: string;
     value: boolean;
@@ -78,13 +86,18 @@ export default function PreferencesScreen() {
       spacing={12}
       alignment="center"
       modifiers={[
-        frame({ maxWidth: 10000, height: ButtonTokens.height }),
+        frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
         padding({ horizontal: 16 }),
         background(colors.muted as string),
         clipShape("capsule"),
       ]}
     >
-      <Image systemName={icon} size={18} color={colors.foreground as string} />
+      <Image
+        systemName={icon}
+        size={symbolSize(18)}
+        color={colors.foreground as string}
+        modifiers={[accessibilityHidden(true)]}
+      />
       <Text
         modifiers={[
           dfont({ size: 16, weight: "medium" }),
@@ -94,12 +107,17 @@ export default function PreferencesScreen() {
         {label}
       </Text>
       <Spacer />
-      <Toggle isOn={value} onIsOnChange={onChange} modifiers={[tint(colors.primary as string)]} />
+      <Toggle
+        testID={testID}
+        isOn={value}
+        onIsOnChange={onChange}
+        modifiers={[tint(colors.primary as string), accessibilityLabel(label)]}
+      />
     </HStack>
   );
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="preferences-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
         modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
       >
@@ -111,10 +129,15 @@ export default function PreferencesScreen() {
           <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={sectionLabelModifiers}>APPEARANCE</Text>
             <Picker
+              testID="preferences-appearance"
               modifiers={[
                 pickerStyle("segmented"),
                 controlSize("large"),
-                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
+                // upstream expo/expo#46540: fixed segments can't reflow, so cap
+                // Dynamic Type before the labels truncate at AX sizes.
+                dynamicTypeSize({ max: DynamicType.control }),
+                accessibilityLabel("Appearance"),
               ]}
               selection={INDEX_BY_MODE[mode]}
               onSelectionChange={(v) => {
@@ -122,19 +145,39 @@ export default function PreferencesScreen() {
                 setMode(MODE_BY_INDEX[v as number] ?? "system");
               }}
             >
-              <Text modifiers={[tag(0), dfont({ size: 14, weight: "medium" })]}>Light</Text>
-              <Text modifiers={[tag(1), dfont({ size: 14, weight: "medium" })]}>Dark</Text>
-              <Text modifiers={[tag(2), dfont({ size: 14, weight: "medium" })]}>System</Text>
+              <Text
+                testID="preferences-appearance-light"
+                modifiers={[tag(0), dfont({ size: 14, weight: "medium" })]}
+              >
+                Light
+              </Text>
+              <Text
+                testID="preferences-appearance-dark"
+                modifiers={[tag(1), dfont({ size: 14, weight: "medium" })]}
+              >
+                Dark
+              </Text>
+              <Text
+                testID="preferences-appearance-system"
+                modifiers={[tag(2), dfont({ size: 14, weight: "medium" })]}
+              >
+                System
+              </Text>
             </Picker>
           </VStack>
 
           <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={sectionLabelModifiers}>REDUCE MOTION</Text>
             <Picker
+              testID="preferences-reduce-motion"
               modifiers={[
                 pickerStyle("segmented"),
                 controlSize("large"),
-                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
+                // upstream expo/expo#46540: fixed segments can't reflow, so cap
+                // Dynamic Type before the labels truncate at AX sizes.
+                dynamicTypeSize({ max: DynamicType.control }),
+                accessibilityLabel("Reduce motion"),
               ]}
               selection={INDEX_BY_MOTION[motion]}
               onSelectionChange={(v) => {
@@ -142,15 +185,31 @@ export default function PreferencesScreen() {
                 setMotion(MOTION_BY_INDEX[v as number] ?? "system");
               }}
             >
-              <Text modifiers={[tag(0), dfont({ size: 14, weight: "medium" })]}>System</Text>
-              <Text modifiers={[tag(1), dfont({ size: 14, weight: "medium" })]}>Always</Text>
-              <Text modifiers={[tag(2), dfont({ size: 14, weight: "medium" })]}>Never</Text>
+              <Text
+                testID="preferences-reduce-motion-system"
+                modifiers={[tag(0), dfont({ size: 14, weight: "medium" })]}
+              >
+                System
+              </Text>
+              <Text
+                testID="preferences-reduce-motion-always"
+                modifiers={[tag(1), dfont({ size: 14, weight: "medium" })]}
+              >
+                Always
+              </Text>
+              <Text
+                testID="preferences-reduce-motion-never"
+                modifiers={[tag(2), dfont({ size: 14, weight: "medium" })]}
+              >
+                Never
+              </Text>
             </Picker>
           </VStack>
 
           <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={sectionLabelModifiers}>HAPTICS</Text>
             {toggleRow({
+              testID: "preferences-haptics",
               icon: "iphone.radiowaves.left.and.right",
               label: "Haptic feedback",
               value: hapticsOn,
@@ -164,6 +223,7 @@ export default function PreferencesScreen() {
           <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={sectionLabelModifiers}>DEBUG</Text>
             {toggleRow({
+              testID: "preferences-debug",
               icon: "ant.circle.fill",
               label: "Debug mode",
               value: debugOn,