Refine coming soon experience and global ambient UI

components/layout/locale-toggle.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { Languages } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
 
 type LocaleToggleProps = {
@@ -16,20 +23,32 @@ export function LocaleToggle({ locale }: LocaleToggleProps) {
   const currentLocale = (["de", "en", "ar"].includes(locale) ? locale : "de") as AppLocale;
 
   return (
-    <div className="flex items-center gap-2">
-      {locales.map((targetLocale) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <Button
-          key={targetLocale}
-          asChild
-          variant={targetLocale === currentLocale ? "secondary" : "outline"}
-          size="sm"
-          className="text-xs"
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label={`Locale: ${currentLocale.toUpperCase()}`}
         >
-          <a href={getLocalizedPath(targetLocale, currentPath)}>
-            {targetLocale.toUpperCase()}
-          </a>
+          <Languages className="h-4 w-4" />
         </Button>
-      ))}
-    </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[8rem]">
+        {locales.map((targetLocale) => (
+          <DropdownMenuItem key={targetLocale} asChild>
+            <a
+              href={getLocalizedPath(targetLocale, currentPath)}
+              className="flex items-center justify-between gap-4"
+            >
+              <span>{targetLocale.toUpperCase()}</span>
+              {targetLocale === currentLocale ? (
+                <span className="text-xs text-muted-foreground">Active</span>
+              ) : null}
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }