From 06fa208dd855ac5b44e82935fb195910bb02f574 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Mon, 19 Jan 2026 23:26:55 +0100
Subject: [PATCH] feat: Auto browser language detection, remove
 LanguageSwitcher

- Update I18nContext to auto-detect browser language
- Default to English, switch to German if browser is German
- Remove LanguageSwitcher from guest and authenticated views
- Remove DramOfTheDay from header
- Cleaner, mobile-friendly header layout
---
 src/app/page.tsx         | 15 ++-------------
 src/i18n/I18nContext.tsx | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2128f48..15ed360 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,13 +5,12 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { createClient } from '@/lib/supabase/client';
 import BottleGrid from "@/components/BottleGrid";
 import AuthForm from "@/components/AuthForm";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
 import OfflineIndicator from "@/components/OfflineIndicator";
 import { useI18n } from "@/i18n/I18nContext";
 import { useAuth } from "@/context/AuthContext";
 import { useSession } from "@/context/SessionContext";
 import TastingHub from "@/components/TastingHub";
-import { Sparkles, Loader2, Search, SlidersHorizontal, Settings, CircleUser } from "lucide-react";
+import { Sparkles, Loader2, Search, SlidersHorizontal } from "lucide-react";
 import { BottomNavigation } from '@/components/BottomNavigation';
 import ScanAndTasteFlow from '@/components/ScanAndTasteFlow';
 import UserStatusBadge from '@/components/UserStatusBadge';
@@ -19,7 +18,6 @@ import { getActiveSplits } from '@/services/split-actions';
 import SplitCard from '@/components/SplitCard';
 import HeroBanner from '@/components/HeroBanner';
 import QuickActionsGrid from '@/components/QuickActionsGrid';
-import DramOfTheDay from '@/components/DramOfTheDay';
 import { checkIsAdmin } from '@/services/track-api-usage';
 
 export default function Home() {
@@ -152,9 +150,6 @@ export default function Home() {
                     <p className="text-zinc-500 max-w-sm mx-auto font-bold tracking-wide">
                         {t('home.tagline')}
                     </p>
-                    <div className="mt-8">
-                        <LanguageSwitcher />
-                    </div>
                 </div>
                 <AuthForm />
 
@@ -208,15 +203,9 @@ export default function Home() {
                                 </div>
                             )}
                         </div>
-                        <div className="flex items-center gap-1 sm:gap-2 flex-wrap justify-end">
+                        <div className="flex items-center gap-2">
                             <UserStatusBadge />
                             <OfflineIndicator />
-                            <div className="hidden sm:block">
-                                <LanguageSwitcher />
-                            </div>
-                            <div className="hidden sm:block">
-                                <DramOfTheDay bottles={bottles} />
-                            </div>
                             <button
                                 onClick={handleLogout}
                                 className="text-[9px] font-bold uppercase tracking-widest text-zinc-600 hover:text-white transition-colors whitespace-nowrap"
diff --git a/src/i18n/I18nContext.tsx b/src/i18n/I18nContext.tsx
index bbaefb0..0769318 100644
--- a/src/i18n/I18nContext.tsx
+++ b/src/i18n/I18nContext.tsx
@@ -18,19 +18,25 @@ const translations: Record<Locale, TranslationKeys> = { de, en };
 const I18nContext = createContext<I18nContextType | undefined>(undefined);
 
 export const I18nProvider = ({ children }: { children: ReactNode }) => {
-    const [locale, setLocaleState] = useState<Locale>('de');
+    const [locale, setLocaleState] = useState<Locale>('en');
+    const [isInitialized, setIsInitialized] = useState(false);
 
     useEffect(() => {
+        // Check for saved preference first
         const savedLocale = localStorage.getItem('locale') as Locale;
         if (savedLocale && (savedLocale === 'de' || savedLocale === 'en')) {
             setLocaleState(savedLocale);
         } else {
-            // Try to detect browser language
-            const browserLang = navigator.language.split('-')[0];
-            if (browserLang === 'en') {
-                setLocaleState('en');
+            // Auto-detect from browser: default to English, switch to German if detected
+            const browserLang = navigator.language.toLowerCase();
+            if (browserLang.startsWith('de')) {
+                setLocaleState('de');
+                localStorage.setItem('locale', 'de');
+            } else {
+                localStorage.setItem('locale', 'en');
             }
         }
+        setIsInitialized(true);
     }, []);
 
     const setLocale = (newLocale: Locale) => {