feat: implement comprehensive i18n system with German and English support

- Created type-safe i18n system with TranslationKeys interface
- Added German (de) and English (en) translations with 160+ keys
- Implemented I18nContext provider and useI18n hook
- Added LanguageSwitcher component for language selection
- Refactored all major components to use translations:
  * Home page, StatsDashboard, DramOfTheDay
  * BottleGrid, EditBottleForm, CameraCapture
  * BuddyList, SessionList, TastingNoteForm
  * StatusSwitcher and bottle management features
- Implemented locale-aware currency formatting (EUR)
- Implemented locale-aware date formatting
- Added localStorage persistence for language preference
- Added automatic browser language detection
- Organized translations into 8 main categories
- System is extensible for additional languages

src/components/SessionList.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users } from 'lucide-react';
 import Link from 'next/link';
+import { useI18n } from '@/i18n/I18nContext';
 
 interface Session {
     id: string;
@@ -13,6 +14,7 @@ interface Session {
 }
 
 export default function SessionList() {
+    const { t, locale } = useI18n();
     const supabase = createClientComponentClient();
     const [sessions, setSessions] = useState<Session[]>([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -70,7 +72,7 @@ export default function SessionList() {
         <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl">
             <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
                 <GlassWater size={24} className="text-amber-600" />
-                Tasting Sessions
+                {t('session.title')}
             </h3>
 
             <form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
@@ -78,7 +80,7 @@ export default function SessionList() {
                     type="text"
                     value={newName}
                     onChange={(e) => setNewName(e.target.value)}
-                    placeholder="Event Name (z.B. Islay Night)..."
+                    placeholder={t('session.sessionName')}
                     className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
                 />
                 <button
@@ -96,7 +98,7 @@ export default function SessionList() {
                 </div>
             ) : sessions.length === 0 ? (
                 <div className="text-center py-8 text-zinc-500 text-sm">
-                    Noch keine Sessions geplant.
+                    {t('session.noSessions')}
                 </div>
             ) : (
                 <div className="space-y-3">
@@ -111,12 +113,12 @@ export default function SessionList() {
                                 <div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-zinc-400">
                                     <span className="flex items-center gap-1">
                                         <Calendar size={12} />
-                                        {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
+                                        {new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
                                     </span>
                                     {session.participant_count! > 0 && (
                                         <span className="flex items-center gap-1">
                                             <Users size={12} />
-                                            {session.participant_count} Teilnehmer
+                                            {session.participant_count} {t('tasting.participants')}
                                         </span>
                                     )}
                                 </div>