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

@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 import { Users, UserPlus, Trash2, User, Loader2 } from 'lucide-react';
+import { useI18n } from '@/i18n/I18nContext';
 
 interface Buddy {
     id: string;
@@ -11,6 +12,7 @@ interface Buddy {
 }
 
 export default function BuddyList() {
+    const { t } = useI18n();
     const supabase = createClientComponentClient();
     const [buddies, setBuddies] = useState<Buddy[]>([]);
     const [newName, setNewName] = useState('');
@@ -77,7 +79,7 @@ export default function BuddyList() {
         <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">
                 <Users size={24} className="text-amber-600" />
-                Deine Buddies
+                {t('buddy.title')}
             </h3>
 
             <form onSubmit={handleAddBuddy} className="flex gap-2 mb-6">
@@ -85,7 +87,7 @@ export default function BuddyList() {
                     type="text"
                     value={newName}
                     onChange={(e) => setNewName(e.target.value)}
-                    placeholder="Buddy Name..."
+                    placeholder={t('buddy.placeholder')}
                     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
@@ -103,7 +105,7 @@ export default function BuddyList() {
                 </div>
             ) : buddies.length === 0 ? (
                 <div className="text-center py-8 text-zinc-500 text-sm">
-                    Noch keine Buddies hinzugefügt.
+                    {t('buddy.noBuddies')}
                 </div>
             ) : (
                 <div className="space-y-2 max-h-[300px] overflow-y-auto scrollbar-hide">
@@ -119,7 +121,7 @@ export default function BuddyList() {
                                 <div>
                                     <span className="font-semibold text-zinc-800 dark:text-zinc-200 text-sm">{buddy.name}</span>
                                     {buddy.buddy_profile_id && (
-                                        <span className="ml-2 inline-block px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500 text-[8px] font-black uppercase rounded">verknüpft</span>
+                                        <span className="ml-2 inline-block px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500 text-[8px] font-black uppercase rounded">{t('common.link')}</span>
                                     )}
                                 </div>
                             </div>