Feature/debug

app/(protected)/(tabs)/index.tsx

@@ -15,6 +15,7 @@ import { InfiniteColumn } from "@/components/videocall/InfiniteColumn";
 import { useSafeAreaControl } from "@/components/SafeArea";
 import { DebugFAB } from "@/components/debug/DebugFAB";
 import { useDebugSection } from "@/components/debug/DebugContext";
+import { useDebugEnabled } from "@/utils/debugState";
 
 const t = createT("auth.home");
 
@@ -32,6 +33,7 @@ function canCall(plan: PlanType, count: number | undefined) {
 }
 
 export default function Index() {
+    const IS_DEV = useDebugEnabled();
     const { theme, gs } = useTheme();
     const { plan } = useActivePlan();
     const [callsData, , , refetch] = useAuthFetch<{ callsToday: number }>(
@@ -151,7 +153,7 @@ export default function Index() {
 
     return (
         <View style={[gs.container, { paddingTop: 48 }]}>
-            <DebugFAB />
+            {IS_DEV && <DebugFAB />}
             <View style={styles.grid}>
                 <InfiniteColumn imgs={leftBase} duration={LEFT_DURATION} />
                 <InfiniteColumn imgs={rightBase} duration={RIGHT_DURATION} />

app/(protected)/(tabs)/settings.tsx

@@ -18,7 +18,8 @@ import Constants from "expo-constants";
 import * as WebBrowser from "expo-web-browser";
 import { BtnText, Button } from "@/components/button";
 import { useSafeAreaControl } from "@/components/SafeArea";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
+import { setDebugEnabled, useDebugEnabled } from "@/utils/debugState";
 import { BROWSER_OPTS } from "@/lib/web/browserConfig";
 
 const t = createT("auth.settings");
@@ -82,6 +83,28 @@ export default function SettingsScreen() {
 
     const { theme } = useTheme();
     const { logout } = useAuth();
+    const isDebug = useDebugEnabled();
+
+    const tapCount = useRef(0);
+    const tapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    function handleVersionTap() {
+        tapCount.current += 1;
+        if (tapTimer.current) clearTimeout(tapTimer.current);
+        tapTimer.current = setTimeout(() => {
+            tapCount.current = 0;
+        }, 2000);
+
+        if (tapCount.current >= 5) {
+            tapCount.current = 0;
+            const next = !isDebug;
+            setDebugEnabled(next);
+            Alert.alert(
+                next ? "Debug ON" : "Debug OFF",
+                next ? "Debug panel is now enabled." : "Debug panel is now disabled.",
+            );
+        }
+    }
 
     const handleLogout = async () => {
         Alert.alert(t("logOut"), t("confirmLogOut"), [
@@ -181,14 +204,15 @@ export default function SettingsScreen() {
                 {/* ── Version ── */}
                 <SectionLabel label={t("info")} />
                 <View style={[styles.card, { backgroundColor: theme.background }]}>
-                    <View style={styles.infoRow}>
+                    <Pressable onPress={handleVersionTap} style={styles.infoRow}>
                         <Text style={[styles.rowLabel, { color: theme.text }]}>
                             {t("version")}
                         </Text>
                         <Text style={[styles.infoValue, { color: theme.text + "66" }]}>
                             {version}
+                            {isDebug ? " 🐛" : ""}
                         </Text>
-                    </View>
+                    </Pressable>
                 </View>
             </View>
 

app/(protected)/settings/personaldetails.tsx

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Alert, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { datePickerCallback } from "@/utils/datePickerCallback";
+import PhoneNumberInput from "@/components/PhoneNumberInput";
 import { useSafeAreaControl } from "@/components/SafeArea";
 import { useAuthFetch } from "@/hooks/useAuthFetch";
 import { useAuth } from "@/lib/auth/AuthProvider";
@@ -328,14 +329,41 @@ export default function PersonalDetails() {
                             keyboardType="email-address"
                             autoComplete="email"
                         />
-                        <Field
-                            label={t("phoneNumber")}
-                            placeholder={t("phonePlaceholder")}
-                            value={phone}
-                            onChangeText={setPhone}
-                            keyboardType="phone-pad"
-                            autoComplete="tel"
-                        />
+                        <View style={{ width: "100%", marginTop: 14 }}>
+                            <Text
+                                style={{
+                                    fontSize: 14,
+                                    fontWeight: "600",
+                                    marginBottom: 6,
+                                    color: theme.primary,
+                                }}
+                            >
+                                Phone Number
+                            </Text>
+                            {!userLoading && (
+                                <PhoneNumberInput
+                                    key={phone}
+                                    initialValue={phone}
+                                    style={{
+                                        height: 52,
+                                        borderWidth: 0,
+                                        borderRadius: 18,
+                                        paddingHorizontal: 16,
+                                        backgroundColor: theme.card,
+                                        marginVertical: 0,
+                                        gap: 8,
+                                    }}
+                                    sendData={(tel, nationalTel) => {
+                                        setPhone(
+                                            (nationalTel || tel || "").replace(
+                                                /\s+/g,
+                                                "",
+                                            ),
+                                        );
+                                    }}
+                                />
+                            )}
+                        </View>
                         <Field
                             label="Job title"
                             placeholder="Software Engineer"
@@ -537,7 +565,7 @@ const makeStyles = (theme: Theme) =>
             justifyContent: "center",
         },
         addImageBox: {
-            width: "31%",
+            width: "30%",
             aspectRatio: 1,
             borderRadius: 16,
             borderWidth: 1.5,