feat(ui): 🏳️ language switcher because one language is never enough

frontend/src/components/language-switcher.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useTranslation, locales } from '@/lib/i18n';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Globe } from 'lucide-react';
+
+export function LanguageSwitcher() {
+    const { locale, setLocale } = useTranslation();
+
+    const currentLocale = locales.find(l => l.code === locale);
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="gap-2">
+                    <Globe className="h-4 w-4" />
+                    <span className="hidden sm:inline">{currentLocale?.flag} {currentLocale?.name}</span>
+                    <span className="sm:hidden">{currentLocale?.flag}</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                {locales.map((l) => (
+                    <DropdownMenuItem
+                        key={l.code}
+                        onClick={() => setLocale(l.code)}
+                        className={locale === l.code ? 'bg-accent' : ''}
+                    >
+                        <span className="mr-2">{l.flag}</span>
+                        {l.name}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}