Redesign mobile time clock, add shortcuts, and improve account management.

Add iOS Shortcuts/Siri intents, local send-reminder notifications, stable
client picker with last-client defaults, account refresh/remove, and softer
session handling on unauthorized API responses.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/settings.tsx

@@ -19,6 +19,7 @@ import { useAppLock } from "@/contexts/AppLockContext";
 import { useAuthClient, useSession } from "@/contexts/AuthContext";
 import { type ColorMode, useAppTheme } from "@/contexts/ThemeContext";
 import { startAdditionalAccountSignIn } from "@/lib/add-account";
+import { confirmRemoveAccount, finishAccountRemoval } from "@/lib/account-actions";
 import { api } from "@/lib/trpc";
 
 const THEME_OPTIONS: { value: ColorMode; label: string }[] = [
@@ -37,6 +38,7 @@ export default function SettingsScreen() {
     apiUrl,
     switchAccount,
     removeAccount,
+    refreshAccounts,
     clearActiveAccount,
   } = useAccounts();
   const { colors, colorMode, setColorMode } = useAppTheme();
@@ -67,6 +69,31 @@ export default function SettingsScreen() {
   >(null);
   const [pendingPin, setPendingPin] = useState("");
   const [showAdvanced, setShowAdvanced] = useState(false);
+  const [refreshingAccounts, setRefreshingAccounts] = useState(false);
+
+  async function handleRefreshAccounts() {
+    setRefreshingAccounts(true);
+    try {
+      await refreshAccounts();
+      await profileQuery.refetch();
+    } finally {
+      setRefreshingAccounts(false);
+    }
+  }
+
+  function handleRemoveAccount(accountId: string, label: string) {
+    confirmRemoveAccount(
+      label,
+      () => removeAccount(accountId),
+      async (result) => {
+        await finishAccountRemoval({
+          result,
+          clearActiveAccount,
+          signOut: () => authClient.signOut(),
+        });
+      },
+    );
+  }
 
   async function handleSignOut() {
     await authClient.signOut();
@@ -77,18 +104,7 @@ export default function SettingsScreen() {
   function confirmSignOut() {
     Alert.alert("Sign out", "Sign out of this account on this device?", [
       { text: "Cancel", style: "cancel" },
-      { text: "Sign out", style: "destructive", onPress: handleSignOut },
-    ]);
-  }
-
-  function confirmRemoveAccount(accountId: string, label: string) {
-    Alert.alert("Remove account", `Remove ${label} from this device?`, [
-      { text: "Cancel", style: "cancel" },
-      {
-        text: "Remove",
-        style: "destructive",
-        onPress: () => void removeAccount(accountId),
-      },
+      { text: "Sign out", style: "destructive", onPress: () => void handleSignOut() },
     ]);
   }
 
@@ -218,47 +234,64 @@ export default function SettingsScreen() {
             {accounts.map((account) => {
               const isActive = account.id === activeAccountId;
               return (
-                <Pressable
+                <View
                   key={account.id}
-                  accessibilityRole="button"
-                  onPress={() => void switchAccount(account.id)}
-                  onLongPress={() => confirmRemoveAccount(account.id, account.email)}
-                  style={({ pressed }) => [
+                  style={[
                     styles.accountRow,
                     {
                       borderColor: colors.border,
                       backgroundColor: isActive ? colors.muted : "transparent",
                     },
-                    pressed && styles.pressed,
                   ]}
                 >
-                  <View style={styles.accountMeta}>
-                    <Text style={[styles.accountName, { color: colors.foreground }]}>
-                      {account.name || account.email}
-                    </Text>
-                    <Text style={[styles.accountSub, { color: colors.mutedForeground }]}>
-                      {account.email}
-                    </Text>
-                    <Text style={[styles.accountSub, { color: colors.mutedForeground }]}>
-                      {account.instanceUrl.replace(/^https?:\/\//, "")}
-                    </Text>
-                  </View>
-                  {isActive ? (
-                    <Text style={[styles.activeBadge, { color: colors.primary }]}>Active</Text>
-                  ) : null}
-                </Pressable>
+                  <Pressable
+                    accessibilityRole="button"
+                    onPress={() => void switchAccount(account.id)}
+                    style={({ pressed }) => [styles.accountMain, pressed && styles.pressed]}
+                  >
+                    <View style={styles.accountMeta}>
+                      <Text style={[styles.accountName, { color: colors.foreground }]}>
+                        {account.name || account.email}
+                      </Text>
+                      <Text style={[styles.accountSub, { color: colors.mutedForeground }]}>
+                        {account.email}
+                      </Text>
+                      <Text style={[styles.accountSub, { color: colors.mutedForeground }]}>
+                        {account.instanceUrl.replace(/^https?:\/\//, "")}
+                      </Text>
+                    </View>
+                    {isActive ? (
+                      <Text style={[styles.activeBadge, { color: colors.primary }]}>Active</Text>
+                    ) : null}
+                  </Pressable>
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={`Remove ${account.name || account.email}`}
+                    hitSlop={8}
+                    onPress={() =>
+                      handleRemoveAccount(account.id, account.name || account.email)
+                    }
+                    style={({ pressed }) => [styles.removeButton, pressed && styles.pressed]}
+                  >
+                    <Ionicons name="trash-outline" size={18} color={colors.destructive} />
+                  </Pressable>
+                </View>
               );
             })}
+            <Button
+              title={refreshingAccounts ? "Refreshing…" : "Refresh accounts"}
+              variant="secondary"
+              disabled={refreshingAccounts}
+              onPress={() => void handleRefreshAccounts()}
+            />
             <Button
               title="Add another account"
               variant="secondary"
               onPress={() => void startAdditionalAccountSignIn(clearActiveAccount)}
             />
-            {accounts.length > 1 ? (
-              <Text style={[styles.meta, { color: colors.mutedForeground }]}>
-                Long-press an account to remove it from this device.
-              </Text>
-            ) : null}
+            <Text style={[styles.meta, { color: colors.mutedForeground }]}>
+              Tap an account to switch. Refresh updates names from saved sign-in data.
+            </Text>
           </Card>
 
           <Card title="Security">
@@ -418,11 +451,25 @@ const styles = StyleSheet.create({
   accountRow: {
     borderWidth: 1,
     borderRadius: 12,
-    padding: spacing.md,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.sm,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.sm,
+  },
+  accountMain: {
+    flex: 1,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     gap: spacing.md,
+    paddingVertical: spacing.md,
+  },
+  removeButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 36,
+    minHeight: 36,
   },
   pressed: {
     opacity: 0.92,