Add Authentik sign-in, fix tab scroll insets, and polish multi-account auth.

Mobile app detects SSO per server, supports OAuth sign-in, and preserves saved
sessions when adding accounts. Tab screens get proper chrome layout and tab-bar
clearance with scrollable page headers.

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

app/(auth)/register.tsx

@@ -20,7 +20,7 @@ import { useAccounts } from "@/contexts/AccountsContext";
 import { useAuthClient } from "@/contexts/AuthContext";
 import { useAppTheme } from "@/contexts/ThemeContext";
 import { registerAccount } from "@/lib/auth-api";
-import { finalizeAuthenticatedAccount } from "@/lib/auth-storage";
+import { completeSignInAfterAuth } from "@/lib/complete-sign-in";
 import { isRequiredString, isValidEmail, isValidPassword, useFieldVisibility } from "@/lib/form-validation";
 
 export default function RegisterScreen() {
@@ -82,11 +82,8 @@ export default function RegisterScreen() {
       const session = await authClient.getSession();
       const user = session.data?.user;
       if (user) {
-        await finalizeAuthenticatedAccount({
+        await completeSignInAfterAuth(authClient, {
           apiUrl,
-          userId: user.id,
-          email: user.email,
-          name: user.name,
           activeAccountId,
           registerAccount: saveAccount,
         });
@@ -109,15 +106,17 @@ export default function RegisterScreen() {
             contentContainerStyle={styles.container}
             keyboardShouldPersistTaps="handled"
           >
-            <AuthServerPicker onReadyChange={setServerReady} />
-            <Card style={styles.card}>
-              <View style={styles.header}>
-                <Logo size="lg" />
-                <HeadingText style={styles.title}>Create your account</HeadingText>
-                <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>
-                  Get started today
-                </Text>
-              </View>
+            <View style={styles.content}>
+              <Card style={styles.card}>
+                <View style={styles.header}>
+                  <Logo size="lg" />
+                  <HeadingText style={styles.title}>Create your account</HeadingText>
+                  <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>
+                    Get started today
+                  </Text>
+                </View>
+
+                <AuthServerPicker onReadyChange={setServerReady} embedded />
 
               <View style={styles.form}>
                 <View style={styles.row}>
@@ -190,6 +189,7 @@ export default function RegisterScreen() {
                 </Link>
               </Text>
             </Card>
+            </View>
           </ScrollView>
         </KeyboardAvoidingView>
       </FullScreen>
@@ -203,17 +203,30 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     justifyContent: "center",
+    alignItems: "center",
     padding: spacing.lg,
-    paddingBottom: spacing.md,
+    paddingVertical: spacing.xl,
+  },
+  content: {
+    width: "100%",
+    maxWidth: 420,
   },
   card: {
     gap: spacing.lg,
   },
-  header: { gap: spacing.sm },
-  title: { fontSize: 24, marginTop: spacing.sm },
+  header: {
+    alignItems: "center",
+    gap: spacing.sm,
+  },
+  title: {
+    fontSize: 24,
+    marginTop: spacing.sm,
+    textAlign: "center",
+  },
   subtitle: {
     fontSize: 14,
     fontFamily: fonts.body,
+    textAlign: "center",
   },
   form: { gap: spacing.md },
   row: { flexDirection: "row", gap: spacing.md },