fix: resolve collection fetch race condition and improve tasting deletion UI

src/app/page.tsx

@@ -12,17 +12,22 @@ export default function Home() {
     const supabase = createClientComponentClient();
     const [bottles, setBottles] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
-    const [user, setUser] = useState<any>(null); // Added user state
+    const [user, setUser] = useState<any>(null);
+    const [fetchError, setFetchError] = useState<string | null>(null);
 
     useEffect(() => {
         // Check session
         const checkUser = async () => {
             try {
                 const { data: { session }, error } = await supabase.auth.getSession();
+                console.log('Initial session check:', session ? 'User logged in' : 'No session');
                 if (error) {
                     console.error('Session retrieval error:', error);
                 }
                 setUser(session?.user ?? null);
+                if (session?.user) {
+                    fetchCollection();
+                }
             } catch (err) {
                 console.error('Fatal error checking user:', err);
                 setUser(null);
@@ -34,7 +39,8 @@ export default function Home() {
         checkUser();
 
         // Listen for auth changes
-        const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+        const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+            console.log('Auth state change:', event, session?.user ? 'User logged in' : 'No user');
             setUser(session?.user ?? null);
             if (session?.user) {
                 fetchCollection();
@@ -60,7 +66,12 @@ export default function Home() {
         `)
                 .order('created_at', { ascending: false });
 
-            if (error) throw error;
+            if (error) {
+                console.error('Supabase fetch error:', error);
+                throw error;
+            }
+
+            console.log(`Fetched ${data?.length || 0} bottles from Supabase`);
 
             // Process data to get the absolute latest tasting date for each bottle
             const processedBottles = (data || []).map(bottle => {
@@ -79,7 +90,8 @@ export default function Home() {
 
             setBottles(processedBottles);
         } catch (err) {
-            console.error('Error fetching collection:', err);
+            console.error('Detailed fetch error:', err);
+            setFetchError('Die Sammlung konnte nicht geladen werden. Bitte versuche es später erneut.');
         } finally {
             setIsLoading(false);
         }
@@ -140,6 +152,17 @@ export default function Home() {
                         <div className="flex justify-center py-12">
                             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
                         </div>
+                    ) : fetchError ? (
+                        <div className="p-8 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded-3xl text-center">
+                            <p className="text-red-600 dark:text-red-400 font-bold mb-2">Hoppla!</p>
+                            <p className="text-red-500/80 text-sm italic">{fetchError}</p>
+                            <button
+                                onClick={fetchCollection}
+                                className="mt-4 px-6 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl text-xs font-bold uppercase tracking-widest"
+                            >
+                                Erneut versuchen
+                            </button>
+                        </div>
                     ) : (
                         <BottleGrid bottles={bottles} />
                     )}

src/components/TastingList.tsx

@@ -120,13 +120,16 @@ export default function TastingList({ initialTastings }: TastingListProps) {
                                 <button
                                     onClick={() => handleDelete(note.id, note.bottle_id)}
                                     disabled={!!isDeleting}
-                                    className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50"
+                                    className="px-3 py-1.5 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-transparent hover:border-red-200 dark:hover:border-red-900/30 font-black text-[9px] uppercase tracking-widest"
                                     title="Tasting löschen"
                                 >
                                     {isDeleting === note.id ? (
                                         <Loader2 size={14} className="animate-spin" />
                                     ) : (
+                                        <>
                                             <Trash2 size={14} />
+                                            <span className="opacity-0 group-hover:opacity-100 transition-opacity">Löschen</span>
+                                        </>
                                     )}
                                 </button>
                             </div>