@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/app/(app)/(tabs)/settings/index.tsx

@@ -0,0 +1,362 @@
+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 { Image as ExpoImage, useImage } from "expo-image";
+import { router, usePreventZoomTransitionDismissal, type Href } from "expo-router";
+
+const PROFILE_HREF = "/profile" as Href;
+const DEBUG_HREF = "/debug" as Href;
+import { useMutation, useQuery } from "convex/react";
+import {
+  Host,
+  ScrollView,
+  Button,
+  Text,
+  HStack,
+  VStack,
+  Spacer,
+  Image,
+  RNHostView,
+  ConfirmationDialog,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  foregroundStyle,
+  frame,
+  padding,
+  onTapGesture,
+  accessibilityLabel,
+  lineLimit,
+  truncationMode,
+  textSelection,
+  scrollDismissesKeyboard,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+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 { useColors } from "@/hooks/use-theme";
+import { useDebugEnabled } from "@/lib/preferences";
+
+const HEADER_AVATAR_SIZE = 56;
+
+export default function SettingsScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const me = useQuery(api.users.getMe);
+  const removeAllTokens = useMutation(api.pushTokens.removeAll);
+  const deleteAccountMutation = useMutation(api.users.deleteAccount);
+
+  const [showSignOut, setShowSignOut] = useState(false);
+  const [showDeleteAccount, setShowDeleteAccount] = useState(false);
+  const [debugOn] = useDebugEnabled();
+
+  usePreventZoomTransitionDismissal();
+
+  const navigate = (path: Href) => {
+    haptics.light();
+    router.push(path);
+  };
+
+  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) {
+      if (__DEV__) console.warn("[signOut] removeAllTokens failed:", err);
+    }
+    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 () => {
+    haptics.light();
+    await Clipboard.setStringAsync(`v${version}`);
+    haptics.success();
+    announce("Version copied");
+  };
+
+  type SFSymbol = NonNullable<ComponentProps<typeof Image>["systemName"]>;
+  const rowButton = ({
+    label,
+    systemImage,
+    onPress,
+    role,
+    fg,
+  }: {
+    label: string;
+    systemImage: SFSymbol;
+    onPress: () => void;
+    role?: "destructive";
+    fg?: string;
+  }) => {
+    const labelColor =
+      fg ??
+      (role === "destructive" ? (colors.destructive as string) : (colors.foreground as string));
+    return (
+      <Button
+        modifiers={[
+          buttonStyle("plain"),
+          frame({ maxWidth: 10000 }),
+          background(colors.muted as string),
+          clipShape("capsule"),
+        ]}
+        onPress={onPress}
+      >
+        <HStack
+          spacing={12}
+          alignment="center"
+          modifiers={[
+            frame({ maxWidth: 10000, height: ButtonTokens.height }),
+            padding({ horizontal: 16 }),
+          ]}
+        >
+          <Image systemName={systemImage} size={18} color={labelColor} />
+          <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} />
+          ) : null}
+        </HStack>
+      </Button>
+    );
+  };
+
+  return (
+    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <ScrollView
+        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+      >
+        <VStack
+          spacing={12}
+          alignment="leading"
+          modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+        >
+          {/* Profile header */}
+          <Button
+            modifiers={[
+              buttonStyle("plain"),
+              frame({ maxWidth: 10000 }),
+              background(colors.muted as string),
+              clipShape("capsule"),
+              onTapGesture(() => {
+                haptics.light();
+                navigate(PROFILE_HREF);
+              }),
+              accessibilityLabel("Open profile"),
+            ]}
+            onPress={() => navigate(PROFILE_HREF)}
+          >
+            <HStack
+              spacing={16}
+              alignment="center"
+              modifiers={[
+                frame({ maxWidth: 10000, height: 80 }),
+                padding({ leading: 8, trailing: 16 }),
+              ]}
+            >
+              <ProfileHeaderAvatar avatarUrl={me?.avatarUrl ?? null} />
+              <VStack alignment="leading" spacing={2}>
+                <Text
+                  modifiers={[
+                    dfont({ size: 17, weight: "semibold" }),
+                    foregroundStyle(colors.foreground as string),
+                    lineLimit(2),
+                    truncationMode("tail"),
+                  ]}
+                >
+                  {me?.name ?? "Loading..."}
+                </Text>
+                {me?.email ? (
+                  <Text
+                    modifiers={[
+                      dfont({ size: 14 }),
+                      foregroundStyle(colors.mutedForeground as string),
+                      lineLimit(1),
+                      truncationMode("middle"),
+                      textSelection(true),
+                    ]}
+                  >
+                    {me.email}
+                  </Text>
+                ) : null}
+              </VStack>
+              <Spacer />
+              <Image
+                systemName="chevron.right"
+                size={13}
+                color={colors.mutedForeground as string}
+              />
+            </HStack>
+          </Button>
+
+          <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
+            {rowButton({
+              label: "Sessions",
+              systemImage: "list.bullet.rectangle.portrait",
+              onPress: () => navigate("/sessions"),
+            })}
+            {rowButton({
+              label: "Preferences",
+              systemImage: "slider.horizontal.3",
+              onPress: () => navigate("/settings/preferences"),
+            })}
+          </VStack>
+
+          <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
+            {rowButton({
+              label: "Help & Feedback",
+              systemImage: "bubble.left",
+              onPress: () => navigate("/help"),
+            })}
+            {rowButton({
+              label: "Privacy",
+              systemImage: "hand.raised",
+              onPress: () => navigate("/privacy"),
+            })}
+            {rowButton({
+              label: "Copy version",
+              systemImage: "doc.on.doc",
+              onPress: handleCopyVersion,
+            })}
+            {debugOn
+              ? rowButton({
+                  label: "Debug",
+                  systemImage: "ant.circle",
+                  onPress: () => navigate(DEBUG_HREF),
+                })
+              : null}
+          </VStack>
+
+          <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
+            <ConfirmationDialog
+              title="Sign out?"
+              isPresented={showSignOut}
+              onIsPresentedChange={setShowSignOut}
+              titleVisibility="visible"
+            >
+              <ConfirmationDialog.Trigger>
+                {rowButton({
+                  label: "Sign out",
+                  systemImage: "rectangle.portrait.and.arrow.right",
+                  onPress: () => setShowSignOut(true),
+                  role: "destructive",
+                })}
+              </ConfirmationDialog.Trigger>
+              <ConfirmationDialog.Actions>
+                <Button label="Sign Out" role="destructive" onPress={handleSignOut} />
+                <Button label="Cancel" role="cancel" />
+              </ConfirmationDialog.Actions>
+              <ConfirmationDialog.Message>
+                <Text modifiers={[dfont({ size: 16 })]}>
+                  You will need to sign in again to access your account.
+                </Text>
+              </ConfirmationDialog.Message>
+            </ConfirmationDialog>
+
+            <ConfirmationDialog
+              title="Delete account?"
+              isPresented={showDeleteAccount}
+              onIsPresentedChange={setShowDeleteAccount}
+              titleVisibility="visible"
+            >
+              <ConfirmationDialog.Trigger>
+                {rowButton({
+                  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>
+                <Text modifiers={[dfont({ size: 16 })]}>
+                  This permanently deletes your account and all data. This cannot be undone.
+                </Text>
+              </ConfirmationDialog.Message>
+            </ConfirmationDialog>
+          </VStack>
+
+          <HStack modifiers={[frame({ maxWidth: 10000 }), padding({ top: 16 })]}>
+            <Spacer />
+            <Text
+              modifiers={[dfont({ size: 12 }), foregroundStyle(colors.tertiaryLabel as string)]}
+            >
+              v{version}
+            </Text>
+            <Spacer />
+          </HStack>
+        </VStack>
+      </ScrollView>
+    </Host>
+  );
+}
+
+function ProfileHeaderAvatar({ avatarUrl }: { avatarUrl: string | null }) {
+  const colors = useColors();
+  if (avatarUrl) {
+    return <RemoteAvatar key={avatarUrl} url={avatarUrl} size={HEADER_AVATAR_SIZE} />;
+  }
+  return (
+    <Image
+      systemName="person.crop.circle.fill"
+      size={HEADER_AVATAR_SIZE}
+      color={colors.mutedForeground as string}
+      modifiers={[frame({ width: HEADER_AVATAR_SIZE, height: HEADER_AVATAR_SIZE })]}
+    />
+  );
+}
+
+function RemoteAvatar({ url, size }: { url: string; size: number }) {
+  const colors = useColors();
+  const image = useImage(url, { maxWidth: size * 4 });
+  if (!image) {
+    return (
+      <Image
+        systemName="person.crop.circle.fill"
+        size={size}
+        color={colors.mutedForeground as string}
+        modifiers={[frame({ width: size, height: size })]}
+      />
+    );
+  }
+  return (
+    <RNHostView matchContents>
+      <ExpoImage
+        source={image}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+        }}
+        contentFit="cover"
+        accessibilityLabel="Profile photo"
+      />
+    </RNHostView>
+  );
+}

package/dist/templates/default/app/(app)/(tabs)/settings/preferences.tsx

@@ -0,0 +1,184 @@
+import {
+  Host,
+  ScrollView,
+  Picker,
+  Toggle,
+  Text,
+  VStack,
+  HStack,
+  Spacer,
+  Image,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  clipShape,
+  controlSize,
+  foregroundStyle,
+  frame,
+  padding,
+  pickerStyle,
+  scrollDismissesKeyboard,
+  tag,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { Button as ButtonTokens } from "@/constants/layout";
+
+import { haptics } from "@/lib/haptics";
+import { useColors, useThemeMode, type ThemeMode } from "@/hooks/use-theme";
+import {
+  useDebugEnabled,
+  useHapticsEnabled,
+  useReduceMotionPref,
+  type ReduceMotionPref,
+} from "@/lib/preferences";
+import { useDynamicFont } from "@/lib/dynamic-font";
+
+const MODE_BY_INDEX: ThemeMode[] = ["light", "dark", "system"];
+const INDEX_BY_MODE: Record<ThemeMode, number> = { light: 0, dark: 1, system: 2 };
+
+const MOTION_BY_INDEX: ReduceMotionPref[] = ["system", "always", "never"];
+const INDEX_BY_MOTION: Record<ReduceMotionPref, number> = {
+  system: 0,
+  always: 1,
+  never: 2,
+};
+
+export default function PreferencesScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const { mode, setMode } = useThemeMode();
+  const [hapticsOn, setHapticsOn] = useHapticsEnabled();
+  const [motion, setMotion] = useReduceMotionPref();
+  const [debugOn, setDebugOn] = useDebugEnabled();
+
+  const sectionLabelModifiers = [
+    dfont({ size: 13, weight: "semibold" }),
+    foregroundStyle(colors.mutedForeground as string),
+    padding({ horizontal: 8 }),
+  ];
+
+  const helperModifiers = [
+    dfont({ size: 13 }),
+    foregroundStyle(colors.mutedForeground as string),
+    padding({ horizontal: 8 }),
+  ];
+
+  const toggleRow = ({
+    icon,
+    label,
+    value,
+    onChange,
+  }: {
+    icon: NonNullable<React.ComponentProps<typeof Image>["systemName"]>;
+    label: string;
+    value: boolean;
+    onChange: (v: boolean) => void;
+  }) => (
+    <HStack
+      spacing={12}
+      alignment="center"
+      modifiers={[
+        frame({ maxWidth: 10000, height: ButtonTokens.height }),
+        padding({ horizontal: 16 }),
+        background(colors.muted as string),
+        clipShape("capsule"),
+      ]}
+    >
+      <Image systemName={icon} size={18} color={colors.foreground as string} />
+      <Text
+        modifiers={[
+          dfont({ size: 16, weight: "medium" }),
+          foregroundStyle(colors.foreground as string),
+        ]}
+      >
+        {label}
+      </Text>
+      <Spacer />
+      <Toggle isOn={value} onIsOnChange={onChange} modifiers={[tint(colors.primary as string)]} />
+    </HStack>
+  );
+
+  return (
+    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <ScrollView
+        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+      >
+        <VStack
+          spacing={20}
+          alignment="leading"
+          modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+        >
+          <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={sectionLabelModifiers}>APPEARANCE</Text>
+            <Picker
+              modifiers={[
+                pickerStyle("segmented"),
+                controlSize("large"),
+                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+              ]}
+              selection={INDEX_BY_MODE[mode]}
+              onSelectionChange={(v) => {
+                haptics.selection();
+                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>
+            </Picker>
+          </VStack>
+
+          <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={sectionLabelModifiers}>REDUCE MOTION</Text>
+            <Picker
+              modifiers={[
+                pickerStyle("segmented"),
+                controlSize("large"),
+                frame({ maxWidth: 10000, height: ButtonTokens.height }),
+              ]}
+              selection={INDEX_BY_MOTION[motion]}
+              onSelectionChange={(v) => {
+                haptics.selection();
+                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>
+            </Picker>
+          </VStack>
+
+          <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={sectionLabelModifiers}>HAPTICS</Text>
+            {toggleRow({
+              icon: "iphone.radiowaves.left.and.right",
+              label: "Haptic feedback",
+              value: hapticsOn,
+              onChange: (v) => {
+                setHapticsOn(v);
+                if (v) haptics.light();
+              },
+            })}
+          </VStack>
+
+          <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={sectionLabelModifiers}>DEBUG</Text>
+            {toggleRow({
+              icon: "ant.circle.fill",
+              label: "Debug mode",
+              value: debugOn,
+              onChange: (v) => {
+                setDebugOn(v);
+                haptics.light();
+              },
+            })}
+            <Text modifiers={helperModifiers}>
+              Reveals a Debug screen with version, device, OTA update, and push diagnostics. Off in
+              production builds by default.
+            </Text>
+          </VStack>
+        </VStack>
+      </ScrollView>
+    </Host>
+  );
+}

package/dist/templates/default/app/(app)/_layout.tsx

@@ -0,0 +1,73 @@
+import { Stack } from "expo-router";
+
+import { useColors } from "@/hooks/use-theme";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { FontFamily } from "@/constants/layout";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+export { AppErrorBoundary as ErrorBoundary } from "@/components/ui/error-boundary";
+
+export function SuspenseFallback() {
+  return <LoadingScreen />;
+}
+
+export default function AppLayout() {
+  const colors = useColors();
+  const reduceMotion = useReducedMotion();
+  const headerTint = colors.foreground as string;
+  const titleStyle = { color: headerTint, fontFamily: FontFamily.semiBold };
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: colors.background as string },
+        headerBackTitle: "Back",
+        headerTintColor: headerTint,
+        headerShadowVisible: false,
+        animation: reduceMotion ? "fade" : "slide_from_right",
+        animationDuration: reduceMotion ? 150 : 300,
+      }}
+    >
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="welcome"
+        options={{ headerShown: false, animation: reduceMotion ? "none" : "fade" }}
+      />
+
+      <Stack.Screen name="debug">
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={titleStyle}>Debug</Stack.Screen.Title>
+        <Stack.Screen.BackButton withMenu>Settings</Stack.Screen.BackButton>
+      </Stack.Screen>
+
+      <Stack.Screen name="help">
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={titleStyle}>Help</Stack.Screen.Title>
+        <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+      </Stack.Screen>
+
+      <Stack.Screen name="privacy">
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={titleStyle}>Privacy</Stack.Screen.Title>
+        <Stack.Screen.BackButton displayMode="minimal" withMenu>
+          Settings
+        </Stack.Screen.BackButton>
+      </Stack.Screen>
+
+      <Stack.Screen name="linked" options={{ headerShown: true, title: "Linked" }} />
+
+      <Stack.Screen name="profile" options={{ headerShown: true }}>
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={titleStyle}>Profile</Stack.Screen.Title>
+        <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+      </Stack.Screen>
+
+      <Stack.Screen name="sessions" options={{ headerShown: true }}>
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={titleStyle}>Sessions</Stack.Screen.Title>
+        <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+      </Stack.Screen>
+    </Stack>
+  );
+}