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/TastingNoteForm.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { saveTasting } from '@/services/save-tasting';
 import { Loader2, Send, Star, Users, Check } from 'lucide-react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { useI18n } from '@/i18n/I18nContext';
 
 interface Buddy {
     id: string;
@@ -16,6 +17,7 @@ interface TastingNoteFormProps {
 }
 
 export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteFormProps) {
+    const { t } = useI18n();
     const supabase = createClientComponentClient();
     const [rating, setRating] = useState(85);
     const [nose, setNose] = useState('');
@@ -78,10 +80,10 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
                 setSelectedBuddyIds([]);
                 // We don't need to manually refresh because of revalidatePath in the server action
             } else {
-                setError(result.error || 'Fehler beim Speichern');
+                setError(result.error || t('common.error'));
             }
         } catch (err) {
-            setError('Ein unerwarteter Fehler ist aufgetreten');
+            setError(t('common.error'));
         } finally {
             setLoading(false);
         }
@@ -93,7 +95,7 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
                 <div className="flex items-center justify-between">
                     <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
                         <Star size={14} className="text-amber-500 fill-amber-500" />
-                        Rating
+                        {t('tasting.rating')}
                     </label>
                     <span className="text-2xl font-black text-amber-600 tracking-tighter">{rating}<span className="text-zinc-400 text-sm ml-0.5 font-bold">/100</span></span>
                 </div>
@@ -113,7 +115,7 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
             </div>
 
             <div className="space-y-3">
-                <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest">Art der Probe</label>
+                <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest">{t('tasting.overall')}</label>
                 <div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-800/50">
                     <button
                         type="button"
@@ -139,33 +141,33 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
             </div>
 
             <div className="space-y-2">
-                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Nose</label>
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">{t('tasting.nose')}</label>
                 <textarea
                     value={nose}
                     onChange={(e) => setNose(e.target.value)}
-                    placeholder="Aromen in der Nase..."
+                    placeholder={t('tasting.notesPlaceholder')}
                     rows={2}
                     className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                 />
             </div>
 
             <div className="space-y-2">
-                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Palate</label>
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">{t('tasting.palate')}</label>
                 <textarea
                     value={palate}
                     onChange={(e) => setPalate(e.target.value)}
-                    placeholder="Geschmack am Gaumen..."
+                    placeholder={t('tasting.notesPlaceholder')}
                     rows={2}
                     className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                 />
             </div>
 
             <div className="space-y-2">
-                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Finish</label>
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">{t('tasting.finish')}</label>
                 <textarea
                     value={finish}
                     onChange={(e) => setFinish(e.target.value)}
-                    placeholder="Nachhall..."
+                    placeholder={t('tasting.notesPlaceholder')}
                     rows={2}
                     className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                 />
@@ -175,7 +177,7 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
                 <div className="space-y-3">
                     <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
                         <Users size={14} className="text-amber-500" />
-                        Gekostet mit (Buddies)
+                        {t('tasting.participants')}
                     </label>
                     <div className="flex flex-wrap gap-2">
                         {buddies.map((buddy) => (
@@ -210,7 +212,7 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
                 {loading ? <Loader2 className="animate-spin" size={18} /> : (
                     <>
                         <Send size={16} />
-                        Note Speichern
+                        {t('tasting.saveTasting')}
                     </>
                 )}
             </button>