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