Use af in the default state and configure the phone number input styling

src/interface/web/app/settings/page.tsx

@@ -424,6 +424,31 @@ export default function SettingsView() {
         }
     };
 
+    const disconnectNumber = async () => {
+        try {
+            const response = await fetch(`/api/phone`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) throw new Error('Failed to disconnect phone number');
+
+            setPhoneNumber(undefined);
+            setNumberValidationState(PhoneNumberValidationState.Setup);
+            toast({
+                title: "📱 Phone",
+                description: "Phone number disconnected",
+            });
+        } catch (error) {
+            console.error('Error disconnecting phone number:', error);
+            toast({
+                title: "📱 Phone",
+                description: "Failed to disconnect phone number. Try again or contact us at team@khoj.dev",
+            });
+        }
+    }
+
     const setSubscription = async (state: string) => {
         try {
             const url = `/api/subscription?email=${userConfig?.username}&operation=${state}`;
@@ -951,8 +976,9 @@ export default function SettingsView() {
                                                 disabled={numberValidationState === PhoneNumberValidationState.VerifyOTP}
                                                 initOptions={{
                                                     separateDialCode: true,
-                                                    initialCountry: "us",
+                                                    initialCountry: "af",
                                                     utilsScript: "https://assets.khoj.dev/intl-tel-input%4023.8.0_build_js_utils.js",
+                                                    containerClass: `${styles.phoneInput}`
                                             }}
                                             />
                                             {numberValidationState === PhoneNumberValidationState.VerifyOTP && (
@@ -1000,6 +1026,16 @@ export default function SettingsView() {
                                                     }
                                                 </Button>
                                             )}
+                                            {
+                                                numberValidationState === PhoneNumberValidationState.Verified && (
+                                                    <Button
+                                                        variant="outline"
+                                                        onClick={() => disconnectNumber()}
+                                                    >
+                                                        <CloudSlash className="h-5 w-5 mr-2" />Disconnect
+                                                    </Button>
+                                                )
+                                            }
                                         </CardFooter>
                                     </Card>
                                 </div>

src/interface/web/app/settings/settings.module.css

@@ -9,3 +9,14 @@ div.contentBody {
     display: grid;
     margin: auto;
 }
+
+div.phoneInput {
+    padding: 0rem;
+}
+
+div.phoneInput input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid hsla(var(--border));
+    border-radius: 0.25rem;
+}