feat: add LocaleProvider and hooks for managing locale and timezone settings

src/pages/AccountPage.tsx

@@ -20,6 +20,8 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import { useAuth } from '@/contexts/AuthContext'
 import { useTheme } from '@/hooks/use-theme'
+import { useLocale } from '@/hooks/use-locale'
+import { getSupportedTimezones } from '@/lib/utils/locale'
 import {
   type ApiTokenStatusResponse,
   type UserProvider,
@@ -44,6 +46,7 @@ import { toast } from 'sonner'
 export function AccountPage() {
   const { user, setUser } = useAuth()
   const { theme, setTheme } = useTheme()
+  const { locale, timezone, setLocale, setTimezone } = useLocale()
 
   // Profile state
   const [profileName, setProfileName] = useState('')
@@ -363,11 +366,62 @@ export function AccountPage() {
                 </p>
               </div>
 
-              <div className="pt-4">
+              <div className="space-y-2">
+                <Label>Language Preference</Label>
+                <Select
+                  value={locale}
+                  onValueChange={(value: 'en-US' | 'fr-FR') =>
+                    setLocale(value)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="en-US">English (US)</SelectItem>
+                    <SelectItem value="fr-FR">Français (FR)</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Choose your preferred language for the interface
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Timezone</Label>
+                <Select
+                  value={timezone}
+                  onValueChange={setTimezone}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {getSupportedTimezones().map((tz) => (
+                      <SelectItem key={tz} value={tz}>
+                        {tz.replace('_', ' ')}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Choose your timezone for date and time display
+                </p>
+              </div>
+
+              <div className="pt-4 space-y-1">
                 <div className="text-sm text-muted-foreground">
                   Current theme:{' '}
                   <span className="font-medium capitalize">{theme}</span>
                 </div>
+                <div className="text-sm text-muted-foreground">
+                  Current language:{' '}
+                  <span className="font-medium">{locale === 'en-US' ? 'English (US)' : 'Français (FR)'}</span>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Current timezone:{' '}
+                  <span className="font-medium">{timezone.replace('_', ' ')}</span>
+                </div>
               </div>
             </CardContent>
           </Card>