@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

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

@@ -1,8 +1,8 @@
 import { startTransition, useActionState, useEffect, useState } from "react";
 import { Image as ExpoImage, useImage } from "expo-image";
 import * as ImagePicker from "expo-image-picker";
-import * as LocalAuthentication from "expo-local-authentication";
-import { Stack } from "expo-router";
+import { useDeleteAccount } from "@/hooks/use-delete-account";
+import { router, Stack } from "expo-router";
 import { useMutation, useQuery } from "convex/react";
 import {
   Host,
@@ -15,9 +15,8 @@ import {
   Spacer,
   Image,
   RNHostView,
+  Alert,
   ConfirmationDialog,
-  BottomSheet,
-  Group,
   ProgressView,
   useNativeState,
 } from "@expo/ui/swift-ui";
@@ -27,12 +26,15 @@ import {
   buttonStyle,
   clipShape,
   cornerRadius,
+  defaultScrollAnchorForRole,
+  dynamicTypeSize,
   foregroundStyle,
   disabled,
   keyboardType,
   lineLimit,
   onSubmit,
   submitLabel,
+  textContentType,
   textFieldStyle,
   textInputAutocapitalization,
   monospacedDigit,
@@ -40,25 +42,34 @@ import {
   multilineTextAlignment,
   padding,
   frame,
-  presentationDetents,
-  presentationDragIndicator,
+  contentShape,
+  shapes,
   progressViewStyle,
   scrollDismissesKeyboard,
-  onTapGesture,
+  accessibilityHidden,
   accessibilityLabel,
   accessibilityHint,
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
-import { Button as ButtonTokens } from "@/constants/layout";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
+import { Button as ButtonTokens, TouchTarget } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
+
+import { runOnJS } from "react-native-worklets";
 
 import { api } from "@/convex/_generated/api";
 import { authClient } from "@/lib/auth-client";
 import { haptics } from "@/lib/haptics";
-import { firstError, profileUpdateSchema } from "@/lib/schemas";
+import { maskOtp, maskUsername } from "@/lib/masks";
+import { setNativeValue } from "@/lib/native-state";
+import {
+  firstError,
+  profileUpdateOptionalUsernameSchema,
+  profileUpdateSchema,
+} from "@/lib/schemas";
 import { validateBio } from "@/convex/validators";
 import { useColors } from "@/hooks/use-theme";
-import { PasswordField } from "@/components/auth/password-field";
 import { ProminentButton } from "@/components/ui/prominent-button";
 import { ErrorText, SuccessText } from "@/components/ui/status-text";
 import { formatError } from "@/components/ui/convex-error";
@@ -69,16 +80,16 @@ const AVATAR_SIZE = 96;
 
 type SaveState = { error?: string; success?: string; pendingEmail?: string };
 type OtpState = { error?: string; success?: string };
-type PasswordState = { error?: string; success?: string };
 
 export default function ProfileScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const me = useQuery(api.users.getMe);
   const hasPasswordResult = useQuery(api.auth.hasPassword);
   // Email change requires the email-OTP flow which requires Resend. In lite
   // mode (`REQUIRE_EMAIL_VERIFICATION` unset) the email field is read-only
-  //. no way to send a verification code to the new address.
+  // no way to send a verification code to the new address.
   const providers = useQuery(api.auth.getEnabledProviders);
   const emailFeatures = providers?.emailFeatures === true;
   const updateProfile = useMutation(api.users.updateProfile);
@@ -86,10 +97,13 @@ export default function ProfileScreen() {
   const updateAvatar = useMutation(api.users.updateAvatar);
   const deleteAvatar = useMutation(api.users.deleteAvatar);
   const removeAllTokens = useMutation(api.pushTokens.removeAll);
-  const deleteAccountMutation = useMutation(api.users.deleteAccount);
+  const { deleteAccount, deleteError } = useDeleteAccount();
 
   // SwiftUI source of truth via useNativeState; mirrored to React state via
-  // onTextChange so derived values like `hasChanges` stay reactive.
+  // onTextChange so derived values like `hasChanges` stay reactive. Username
+  // and the email-OTP field below add a "worklet" onTextChange so the mask
+  // (lowercase / digits-only) rewrites the field synchronously on the UI
+  // thread; name, email, and bio need no masking so they keep a plain mirror.
   const nameState = useNativeState(me?.name ?? "");
   const usernameState = useNativeState(me?.username ?? "");
   const emailState = useNativeState(me?.email ?? "");
@@ -107,10 +121,10 @@ export default function ProfileScreen() {
   const currentKey = me ? `${me._id}:${me.updatedAt}` : null;
   useEffect(() => {
     if (!me) return;
-    nameState.value = me.name;
-    usernameState.value = me.username ?? "";
-    emailState.value = me.email;
-    bioState.value = me.bio ?? "";
+    setNativeValue(nameState, me.name);
+    setNativeValue(usernameState, me.username ?? "");
+    setNativeValue(emailState, me.email);
+    setNativeValue(bioState, me.bio ?? "");
     setName(me.name);
     setUsername(me.username ?? "");
     setEmail(me.email);
@@ -124,14 +138,6 @@ export default function ProfileScreen() {
   const [avatarPicker, setAvatarPicker] = useState(false);
   const [signOutConfirm, setSignOutConfirm] = useState(false);
   const [deleteAccountConfirm, setDeleteAccountConfirm] = useState(false);
-  const [passwordSheet, setPasswordSheet] = useState(false);
-  const currentPasswordState = useNativeState("");
-  const newPasswordState = useNativeState("");
-  const confirmPasswordState = useNativeState("");
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
   const hasChanges =
     !!me &&
     (name.trim() !== me.name ||
@@ -143,7 +149,10 @@ export default function ProfileScreen() {
     if (!me) return { error: "Not loaded" };
     haptics.light();
 
-    const parsed = profileUpdateSchema.safeParse({ name, username, email });
+    // Accounts without a username must still save name/email/bio; the strict
+    // schema would reject the empty username field they never set.
+    const schema = me.username ? profileUpdateSchema : profileUpdateOptionalUsernameSchema;
+    const parsed = schema.safeParse({ name, username, email });
     if (!parsed.success) {
       haptics.error();
       return { error: firstError(parsed)! };
@@ -226,6 +235,7 @@ export default function ProfileScreen() {
   const [avatarError, setAvatarError] = useState<string | null>(null);
 
   const pickAvatar = async (source: "library" | "camera") => {
+    haptics.light();
     setAvatarPicker(false);
     await new Promise((r) => setTimeout(r, 350));
     const perm =
@@ -233,10 +243,10 @@ export default function ProfileScreen() {
         ? await ImagePicker.requestCameraPermissionsAsync()
         : await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!perm.granted) {
+      haptics.error();
       setAvatarError(source === "camera" ? "Camera access denied" : "Photos access denied");
       return;
     }
-    haptics.light();
     const options: ImagePicker.ImagePickerOptions = {
       mediaTypes: ["images"],
       allowsEditing: true,
@@ -304,66 +314,13 @@ export default function ProfileScreen() {
     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 [passwordState, changePassword, isChangingPassword] = useActionState<PasswordState, void>(
-    async () => {
-      haptics.light();
-      if (!currentPassword || !newPassword || !confirmPassword) {
-        haptics.error();
-        return { error: "Fill in every field" };
-      }
-      if (newPassword.length < 10 || newPassword.length > 128) {
-        haptics.error();
-        return { error: "Password must be 10-128 characters" };
-      }
-      if (newPassword !== confirmPassword) {
-        haptics.error();
-        return { error: "Passwords do not match" };
-      }
-      try {
-        const res = await authClient.changePassword({
-          currentPassword,
-          newPassword,
-          revokeOtherSessions: true,
-        });
-        if (res.error) {
-          haptics.error();
-          return { error: res.error.message ?? "Failed to change password" };
-        }
-        haptics.success();
-        announce("Password changed. Other sessions have been signed out.");
-        currentPasswordState.value = "";
-        newPasswordState.value = "";
-        confirmPasswordState.value = "";
-        setCurrentPassword("");
-        setNewPassword("");
-        setConfirmPassword("");
-        setPasswordSheet(false);
-        return { success: "Password updated. Other sessions have been signed out." };
-      } catch {
-        haptics.error();
-        return { error: "An unexpected error occurred" };
-      }
-    },
-    {} as PasswordState,
-  );
-
-  const error = saveState.error ?? otpState.error ?? passwordState.error ?? avatarError;
-  const success = saveState.success ?? otpState.success ?? passwordState.success;
+  const error = saveState.error ?? otpState.error ?? avatarError ?? deleteError;
+  const success = saveState.success ?? otpState.success;
 
   if (!me) {
     return (
-      <Host style={{ flex: 1, backgroundColor: colors.background }}>
-        <SkeletonProfile />
+      <Host testID="profile-loading" style={{ flex: 1, backgroundColor: colors.background }}>
+        <SkeletonProfile testID="profile-skeleton" />
       </Host>
     );
   }
@@ -373,7 +330,7 @@ export default function ProfileScreen() {
   const inputModifiers = [
     textFieldStyle("plain"),
     padding({ horizontal: 16 }),
-    frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+    frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
     background(colors.muted as string),
     clipShape("capsule"),
     dfont({ size: 16 }),
@@ -391,9 +348,16 @@ export default function ProfileScreen() {
         />
       </Stack.Toolbar>
 
-      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <Host testID="profile-screen" style={{ flex: 1, backgroundColor: colors.background }}>
         <ScrollView
-          modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+          modifiers={[
+            scrollDismissesKeyboard("interactively"),
+            tint(colors.primary as string),
+            // Keep the visible center pinned when an inline error or the avatar
+            // sheet expands the form so the user doesn't jump to a new section.
+            // No-op below iOS 18.
+            defaultScrollAnchorForRole("center", "sizeChanges"),
+          ]}
         >
           <VStack
             spacing={20}
@@ -407,92 +371,122 @@ export default function ProfileScreen() {
               titleVisibility="visible"
             >
               <ConfirmationDialog.Trigger>
-                <HStack
-                  spacing={16}
-                  alignment="center"
+                <Button
+                  testID="profile-avatar"
                   modifiers={[
-                    frame({ maxWidth: 10000 }),
-                    onTapGesture(() => {
-                      haptics.light();
-                      setAvatarPicker(true);
-                    }),
+                    buttonStyle("plain"),
+                    frame({ maxWidth: Infinity, minHeight: TouchTarget.min }),
+                    contentShape(shapes.rectangle()),
                     accessibilityLabel("Change profile photo"),
                   ]}
+                  onPress={() => {
+                    haptics.light();
+                    setAvatarPicker(true);
+                  }}
                 >
-                  <AvatarView avatarUrl={me.avatarUrl} loading={avatarUpdating} />
-                  <VStack alignment="leading" spacing={4}>
-                    <Text modifiers={[dfont({ size: 17, weight: "semibold" })]}>{me.name}</Text>
-                    <Text
-                      modifiers={[
-                        dfont({ size: 14 }),
-                        foregroundStyle(colors.mutedForeground as string),
-                      ]}
-                    >
-                      {me.email}
-                    </Text>
-                  </VStack>
-                  <Spacer />
-                  <Image
-                    systemName="camera.circle.fill"
-                    size={28}
-                    color={colors.primary as string}
-                  />
-                </HStack>
+                  <HStack
+                    spacing={16}
+                    alignment="center"
+                    modifiers={[frame({ maxWidth: Infinity })]}
+                  >
+                    <AvatarView avatarUrl={me.avatarUrl} loading={avatarUpdating} />
+                    <VStack alignment="leading" spacing={4}>
+                      <Text
+                        testID="profile-name-value"
+                        modifiers={[dfont({ size: 17, weight: "semibold" })]}
+                      >
+                        {me.name}
+                      </Text>
+                      <Text
+                        testID="profile-email-value"
+                        modifiers={[
+                          dfont({ size: 14 }),
+                          foregroundStyle(colors.mutedForeground as string),
+                        ]}
+                      >
+                        {me.email}
+                      </Text>
+                    </VStack>
+                    <Spacer />
+                    <Image
+                      systemName="camera.circle.fill"
+                      size={symbolSize(28)}
+                      color={colors.primary as string}
+                      modifiers={[accessibilityHidden(true)]}
+                    />
+                  </HStack>
+                </Button>
               </ConfirmationDialog.Trigger>
               <ConfirmationDialog.Actions>
                 <Button
+                  testID="profile-avatar-choose"
                   label="Choose Photo"
                   systemImage="photo.on.rectangle"
                   onPress={() => pickAvatar("library")}
                 />
                 <Button
+                  testID="profile-avatar-take"
                   label="Take Photo"
                   systemImage="camera"
                   onPress={() => pickAvatar("camera")}
                 />
                 {me.hasUploadedAvatar && (
-                  <Button label="Remove Photo" role="destructive" onPress={removeAvatar} />
+                  <Button
+                    testID="profile-avatar-remove"
+                    label="Remove Photo"
+                    role="destructive"
+                    onPress={removeAvatar}
+                  />
                 )}
-                <Button label="Cancel" role="cancel" />
+                <Button testID="profile-avatar-cancel" label="Cancel" role="cancel" />
               </ConfirmationDialog.Actions>
             </ConfirmationDialog>
 
-            {error ? <ErrorText>{error}</ErrorText> : null}
-            {success && !pendingEmail ? <SuccessText>{success}</SuccessText> : null}
+            {error ? <ErrorText testID="profile-error">{error}</ErrorText> : null}
+            {success && !pendingEmail ? (
+              <SuccessText testID="profile-success">{success}</SuccessText>
+            ) : null}
 
             {pendingEmail ? (
               <>
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Verify new email</Text>
                   <TextField
+                    testID="profile-email-otp"
                     text={otpCodeState}
                     placeholder="000000"
                     onTextChange={(text) => {
-                      const digits = text.replace(/\D/g, "").slice(0, 6);
-                      if (digits !== text) otpCodeState.value = digits;
-                      setOtp(digits);
+                      "worklet";
+                      const digits = maskOtp(text);
+                      otpCodeState.value = digits;
+                      runOnJS(setOtp)(digits);
                     }}
                     autoFocus
                     modifiers={[
                       ...inputModifiers,
                       keyboardType("numeric"),
+                      textContentType("oneTimeCode"),
                       onSubmit(() => startTransition(() => verifyOtp())),
                       dfont({ size: 24, design: "monospaced" }),
                       monospacedDigit(),
                       kerning(8),
                       multilineTextAlignment("center"),
+                      // upstream expo/expo#46540: six monospaced glyphs in a
+                      // capsule that can't wrap, cap Dynamic Type so they fit.
+                      dynamicTypeSize({ max: DynamicType.otp }),
                       submitLabel("done"),
                       disabled(isVerifying),
                       accessibilityLabel("Verification code"),
                       accessibilityHint("Enter the 6 digit code sent to your new email"),
                     ]}
                   />
-                  <Text modifiers={helperModifiers}>
+                  <Text testID="profile-email-otp-sent" modifiers={helperModifiers}>
                     A 6-digit code was sent to {pendingEmail}.
                   </Text>
                 </VStack>
 
                 <ProminentButton
+                  testID="profile-email-verify"
                   label={isVerifying ? "Verifying..." : "Verify"}
                   onPress={() => startTransition(() => verifyOtp())}
                   disabled={isVerifying || otp.length !== 6}
@@ -500,6 +494,7 @@ export default function ProfileScreen() {
 
                 <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Button
+                    testID="profile-email-verify-cancel"
                     label="Cancel"
                     modifiers={[
                       buttonStyle("plain"),
@@ -508,6 +503,7 @@ export default function ProfileScreen() {
                       disabled(isVerifying),
                     ]}
                     onPress={() => {
+                      haptics.light();
                       setPendingEmail(null);
                       setOtp("");
                     }}
@@ -519,12 +515,14 @@ export default function ProfileScreen() {
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Name</Text>
                   <TextField
+                    testID="profile-name"
                     text={nameState}
                     placeholder="Name"
                     onTextChange={setName}
                     modifiers={[
                       ...inputModifiers,
                       textInputAutocapitalization("words"),
+                      textContentType("name"),
                       disabled(isSaving),
                       submitLabel("next"),
                       accessibilityLabel("Name"),
@@ -536,14 +534,21 @@ export default function ProfileScreen() {
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Username</Text>
                   <TextField
+                    testID="profile-username"
                     text={usernameState}
                     placeholder="johndoe"
-                    onTextChange={(v) => setUsername(v.toLowerCase())}
+                    onTextChange={(text) => {
+                      "worklet";
+                      const next = maskUsername(text);
+                      usernameState.value = next;
+                      runOnJS(setUsername)(next);
+                    }}
                     modifiers={[
                       ...inputModifiers,
                       keyboardType("ascii-capable"),
                       autocorrectionDisabled(),
                       textInputAutocapitalization("never"),
+                      textContentType("username"),
                       disabled(isSaving),
                       submitLabel("next"),
                       accessibilityLabel("Username"),
@@ -558,6 +563,7 @@ export default function ProfileScreen() {
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Email</Text>
                   <TextField
+                    testID="profile-email"
                     text={emailState}
                     placeholder="you@example.com"
                     onTextChange={setEmail}
@@ -566,6 +572,7 @@ export default function ProfileScreen() {
                       keyboardType("email-address"),
                       autocorrectionDisabled(),
                       textInputAutocapitalization("never"),
+                      textContentType("emailAddress"),
                       disabled(isSaving || !emailFeatures),
                       submitLabel("next"),
                       accessibilityLabel("Email address"),
@@ -579,13 +586,14 @@ export default function ProfileScreen() {
                   <Text modifiers={helperModifiers}>
                     {emailFeatures
                       ? "Changing your email requires verifying the new address with a 6-digit code."
-                      : "Email change requires Resend setup. Run `bunx vexpo full` to enable."}
+                      : "Email change requires Resend setup. Run `npx vexpo full` to enable."}
                   </Text>
                 </VStack>
 
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Bio</Text>
                   <TextField
+                    testID="profile-bio"
                     text={bioState}
                     placeholder="Tell others about yourself"
                     onTextChange={setBio}
@@ -612,6 +620,7 @@ export default function ProfileScreen() {
                 <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
                   <Text modifiers={labelModifiers}>Member since</Text>
                   <Text
+                    testID="profile-member-since-value"
                     modifiers={[
                       dfont({ size: 16 }),
                       foregroundStyle(colors.mutedForeground as string),
@@ -623,6 +632,7 @@ export default function ProfileScreen() {
 
                 {hasChanges ? (
                   <ProminentButton
+                    testID="profile-save"
                     label={isSaving ? "Saving..." : "Save changes"}
                     onPress={() => startTransition(() => save())}
                     disabled={isSaving}
@@ -631,20 +641,21 @@ export default function ProfileScreen() {
 
                 {hasPasswordResult ? (
                   <Button
+                    testID="profile-change-password"
                     modifiers={[
                       buttonStyle("plain"),
-                      frame({ maxWidth: 10000 }),
+                      frame({ maxWidth: Infinity }),
                       background(colors.muted as string),
                       clipShape("capsule"),
                     ]}
                     onPress={() => {
                       haptics.light();
-                      setPasswordSheet(true);
+                      router.push("/profile/change-password");
                     }}
                   >
                     <Text
                       modifiers={[
-                        frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                        frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
                         multilineTextAlignment("center"),
                         dfont({
                           size: ButtonTokens.fontSize,
@@ -666,17 +677,21 @@ export default function ProfileScreen() {
                 >
                   <ConfirmationDialog.Trigger>
                     <Button
+                      testID="profile-sign-out"
                       modifiers={[
                         buttonStyle("plain"),
-                        frame({ maxWidth: 10000 }),
+                        frame({ maxWidth: Infinity }),
                         background(colors.muted as string),
                         clipShape("capsule"),
                       ]}
-                      onPress={() => setSignOutConfirm(true)}
+                      onPress={() => {
+                        haptics.medium();
+                        setSignOutConfirm(true);
+                      }}
                     >
                       <Text
                         modifiers={[
-                          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                          frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
                           multilineTextAlignment("center"),
                           dfont({
                             size: ButtonTokens.fontSize,
@@ -690,8 +705,13 @@ export default function ProfileScreen() {
                     </Button>
                   </ConfirmationDialog.Trigger>
                   <ConfirmationDialog.Actions>
-                    <Button label="Sign Out" role="destructive" onPress={handleSignOut} />
-                    <Button label="Cancel" role="cancel" />
+                    <Button
+                      testID="profile-sign-out-confirm"
+                      label="Sign Out"
+                      role="destructive"
+                      onPress={handleSignOut}
+                    />
+                    <Button testID="profile-sign-out-cancel" label="Cancel" role="cancel" />
                   </ConfirmationDialog.Actions>
                   <ConfirmationDialog.Message>
                     <Text modifiers={[dfont({ size: 16 })]}>
@@ -700,24 +720,27 @@ export default function ProfileScreen() {
                   </ConfirmationDialog.Message>
                 </ConfirmationDialog>
 
-                <ConfirmationDialog
+                <Alert
                   title="Delete account?"
                   isPresented={deleteAccountConfirm}
                   onIsPresentedChange={setDeleteAccountConfirm}
-                  titleVisibility="visible"
                 >
-                  <ConfirmationDialog.Trigger>
+                  <Alert.Trigger>
                     <Button
+                      testID="profile-delete-account"
                       modifiers={[
                         buttonStyle("plain"),
-                        frame({ maxWidth: 10000 }),
+                        frame({ maxWidth: Infinity }),
                         clipShape("capsule"),
                       ]}
-                      onPress={() => setDeleteAccountConfirm(true)}
+                      onPress={() => {
+                        haptics.warning();
+                        setDeleteAccountConfirm(true);
+                      }}
                     >
                       <Text
                         modifiers={[
-                          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+                          frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
                           multilineTextAlignment("center"),
                           dfont({
                             size: ButtonTokens.fontSize,
@@ -729,128 +752,27 @@ export default function ProfileScreen() {
                         Delete account
                       </Text>
                     </Button>
-                  </ConfirmationDialog.Trigger>
-                  <ConfirmationDialog.Actions>
+                  </Alert.Trigger>
+                  <Alert.Actions>
                     <Button
-                      label="Delete Forever"
+                      testID="profile-delete-account-confirm"
+                      label="Delete Account"
                       role="destructive"
-                      onPress={handleDeleteAccount}
+                      onPress={deleteAccount}
                     />
-                    <Button label="Cancel" role="cancel" />
-                  </ConfirmationDialog.Actions>
-                  <ConfirmationDialog.Message>
+                    <Button testID="profile-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>
         </ScrollView>
-
-        <BottomSheet isPresented={passwordSheet} onIsPresentedChange={setPasswordSheet}>
-          <Group
-            modifiers={[presentationDetents(["medium"]), presentationDragIndicator("visible")]}
-          >
-            <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={6} alignment="leading">
-                    <Text modifiers={[dfont({ size: 22, weight: "bold" })]}>Change password</Text>
-                    <Text
-                      modifiers={[
-                        dfont({ size: 14 }),
-                        foregroundStyle(colors.mutedForeground as string),
-                      ]}
-                    >
-                      Other devices will be signed out.
-                    </Text>
-                  </VStack>
-
-                  <VStack
-                    spacing={6}
-                    alignment="leading"
-                    modifiers={[frame({ maxWidth: Infinity })]}
-                  >
-                    <Text modifiers={labelModifiers}>Current password</Text>
-                    <PasswordField
-                      text={currentPasswordState}
-                      onTextChange={setCurrentPassword}
-                      disabled={isChangingPassword}
-                      submitLabelType="next"
-                      accessibilityLabel="Current password"
-                      accessibilityHint="Enter your existing password"
-                    />
-                  </VStack>
-
-                  <VStack
-                    spacing={6}
-                    alignment="leading"
-                    modifiers={[frame({ maxWidth: Infinity })]}
-                  >
-                    <Text modifiers={labelModifiers}>New password</Text>
-                    <PasswordField
-                      text={newPasswordState}
-                      onTextChange={setNewPassword}
-                      disabled={isChangingPassword}
-                      submitLabelType="next"
-                      accessibilityLabel="New password"
-                      accessibilityHint="Choose a new password with at least 10 characters"
-                    />
-                    <Text modifiers={helperModifiers}>At least 10 characters.</Text>
-                  </VStack>
-
-                  <VStack
-                    spacing={6}
-                    alignment="leading"
-                    modifiers={[frame({ maxWidth: Infinity })]}
-                  >
-                    <Text modifiers={labelModifiers}>Confirm new password</Text>
-                    <PasswordField
-                      text={confirmPasswordState}
-                      onTextChange={setConfirmPassword}
-                      onSubmit={() => startTransition(() => changePassword())}
-                      disabled={isChangingPassword}
-                      accessibilityLabel="Confirm new password"
-                      accessibilityHint="Re-enter the new password to confirm"
-                    />
-                  </VStack>
-
-                  {passwordState.error ? <ErrorText>{passwordState.error}</ErrorText> : null}
-
-                  <ProminentButton
-                    label={isChangingPassword ? "Updating..." : "Update password"}
-                    onPress={() => startTransition(() => changePassword())}
-                    disabled={isChangingPassword}
-                  />
-
-                  <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
-                    <Button
-                      label="Cancel"
-                      modifiers={[
-                        buttonStyle("plain"),
-                        foregroundStyle(colors.mutedForeground as string),
-                        dfont({ size: 14, weight: "semibold" }),
-                        disabled(isChangingPassword),
-                      ]}
-                      onPress={() => setPasswordSheet(false)}
-                    />
-                  </VStack>
-                </VStack>
-              </ScrollView>
-            </Host>
-          </Group>
-        </BottomSheet>
       </Host>
     </>
   );
@@ -864,7 +786,9 @@ function AvatarView({ avatarUrl, loading }: { avatarUrl: string | null; loading:
         alignment="center"
         modifiers={[frame({ width: AVATAR_SIZE, height: AVATAR_SIZE }), clipShape("circle")]}
       >
-        <ProgressView modifiers={[progressViewStyle("circular")]} />
+        <ProgressView
+          modifiers={[progressViewStyle("circular"), accessibilityLabel("Updating profile photo")]}
+        />
       </VStack>
     );
   }
@@ -876,7 +800,7 @@ function AvatarView({ avatarUrl, loading }: { avatarUrl: string | null; loading:
       systemName="person.crop.circle.fill"
       size={AVATAR_SIZE}
       color={colors.mutedForeground as string}
-      modifiers={[frame({ width: AVATAR_SIZE, height: AVATAR_SIZE })]}
+      modifiers={[frame({ width: AVATAR_SIZE, height: AVATAR_SIZE }), accessibilityHidden(true)]}
     />
   );
 }
@@ -890,7 +814,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)]}
       />
     );
   }