From e864caac00055f3a7ae8203beaba1a6aeceeb2d7 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sun, 30 Aug 2026 09:08:58 +0200
Subject: [PATCH] fix(landing): replace language cycle button with dropdown
 selector

The landing page language switcher cycled to the next language on every
click. It is now a dropdown listing all 13 languages; the cycling button
variant is removed from the LanguageSwitcher component.
---
 .../src/components/landing/landing-page.tsx   |  4 +-
 .../src/components/ui/language-switcher.tsx   | 39 ++++---------------
 2 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/landing/landing-page.tsx b/frontend/src/components/landing/landing-page.tsx
index d7e382d..6481881 100644
--- a/frontend/src/components/landing/landing-page.tsx
+++ b/frontend/src/components/landing/landing-page.tsx
@@ -56,7 +56,7 @@ const Navbar = () => {
           <a href="#formats" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.formats')}</a>
           <a href="#pricing" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.pricing')}</a>
           <div className="h-4 w-[1px] bg-black/10 dark:bg-white/10"></div>
-          <LanguageSwitcher variant="button" />
+          <LanguageSwitcher className="h-9 w-auto gap-1.5 rounded-full border-black/10 dark:border-white/10 bg-transparent dark:bg-transparent px-4 text-[11px] font-bold uppercase tracking-widest text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white shadow-none" />
           <Link href="/auth/login" className="text-brand-dark/60 dark:text-white/60 hover:text-brand-dark dark:hover:text-white transition-colors text-[11px] font-bold uppercase tracking-widest">{t('landing.nav.login')}</Link>
           <Link href="/auth/register" className="premium-button py-2.5 px-6 leading-none">{t('landing.nav.startFree')}</Link>
         </div>
@@ -78,7 +78,7 @@ const Navbar = () => {
           >
             <div className="px-6 pt-4 pb-10 space-y-4 text-center">
               <div className="flex justify-center">
-                <LanguageSwitcher variant="button" />
+                <LanguageSwitcher className="w-full h-11 rounded-2xl border-2 border-black/5 dark:border-white/10 bg-transparent dark:bg-transparent font-bold text-brand-dark dark:text-white shadow-none" />
               </div>
               <a href="#features" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.why')}</a>
               <a href="#formats" onClick={() => setIsOpen(false)} className="block py-3 text-lg font-bold text-brand-dark dark:text-white">{t('landing.nav.formats')}</a>
diff --git a/frontend/src/components/ui/language-switcher.tsx b/frontend/src/components/ui/language-switcher.tsx
index 80ddc81..712f28e 100644
--- a/frontend/src/components/ui/language-switcher.tsx
+++ b/frontend/src/components/ui/language-switcher.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { Globe } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -28,49 +27,27 @@ const languages: { value: Locale; label: string; flag: string }[] = [
 ];
 
 interface LanguageSwitcherProps {
-  variant?: "select" | "button";
+  className?: string;
 }
 
-export function LanguageSwitcher({ variant = "select" }: LanguageSwitcherProps) {
+export function LanguageSwitcher({ className }: LanguageSwitcherProps) {
   const { locale, setLocale } = useI18n();
-
-  if (variant === "button") {
-    const currentIndex = languages.findIndex((l) => l.value === locale);
-    const nextIndex = (currentIndex + 1) % languages.length;
-    const nextLang = languages[nextIndex];
-    const currentLang = languages[currentIndex];
-
-    return (
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={() => setLocale(nextLang.value)}
-        className="gap-1.5 text-muted-foreground hover:text-foreground"
-      >
-        <Globe className="h-4 w-4" />
-        <span className="text-sm">{currentLang.flag}</span>
-        <span className="text-xs font-medium uppercase">{currentLang.value}</span>
-      </Button>
-    );
-  }
+  const current = languages.find((l) => l.value === locale) ?? languages[0];
 
   return (
     <Select value={locale} onValueChange={(v) => setLocale(v as Locale)}>
-      <SelectTrigger className="w-[150px] h-9">
+      <SelectTrigger className={className} aria-label="Change language">
         <SelectValue>
           <span className="flex items-center gap-2">
             <Globe className="h-4 w-4" />
-            {languages.find((l) => l.value === locale)?.flag}{" "}
-            {languages.find((l) => l.value === locale)?.label}
+            <span>{current.flag}</span>
+            <span>{current.label}</span>
           </span>
         </SelectValue>
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent align="start">
         {languages.map((lang) => (
-          <SelectItem
-            key={lang.value}
-            value={lang.value}
-          >
+          <SelectItem key={lang.value} value={lang.value}>
             <span className="flex items-center gap-2">
               <span>{lang.flag}</span>
               <span>{lang.label}</span>