Use PhoneInput component with country dropdown in onboarding

Replace plain text input with the existing PhoneInput component that
includes country code dropdown with flags and auto-formatting.
Default country is set to Monaco (MC).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/(auth)/onboarding/page.tsx

@@ -6,6 +6,7 @@ import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { PhoneInput } from '@/components/ui/phone-input'
 import {
   Card,
   CardContent,
@@ -162,15 +163,15 @@ export default function OnboardingPage() {
             <CardContent className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="phone">Phone Number (Optional)</Label>
-                <Input
+                <PhoneInput
                   id="phone"
-                  type="tel"
                   value={phoneNumber}
-                  onChange={(e) => setPhoneNumber(e.target.value)}
-                  placeholder="+377 12 34 56 78"
+                  onChange={(value) => setPhoneNumber(value || '')}
+                  defaultCountry="MC"
+                  placeholder="Enter phone number"
                 />
                 <p className="text-xs text-muted-foreground">
-                  Include country code for WhatsApp notifications
+                  Select your country and enter your number for WhatsApp notifications
                 </p>
               </div>