fixed like action, better dark mode, bottom navigation working, added taskcollection

resources/js/guest/pages/GalleryPage.tsx

@@ -66,21 +66,77 @@ export default function GalleryPage() {
       )}
       {loading && <p>Lade…</p>}
       <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
-        {list.map((p) => (
-          <Card key={p.id} className="relative overflow-hidden">
-            <CardContent className="p-0">
-              <Link to={`../photo/${p.id}`} state={{ photo: p }}>
-                <img src={p.thumbnail_path || p.file_path} alt="Foto" className="aspect-square w-full object-cover" />
-              </Link>
-            </CardContent>
-            <div className="absolute bottom-1 right-1 flex items-center gap-1 rounded-full bg-black/50 px-2 py-1 text-white">
-              <button onClick={() => onLike(p.id)} className={`inline-flex items-center ${liked.has(p.id) ? 'text-red-400' : ''}`} aria-label="Like">
-                <Heart className="h-4 w-4" />
-              </button>
-              <span className="text-xs">{counts[p.id] ?? p.likes_count ?? 0}</span>
-            </div>
-          </Card>
-        ))}
+        {list.map((p: any) => {
+          // Debug: Log image URLs
+          const imgSrc = p.thumbnail_path || p.file_path;
+          
+          // Normalize image URL
+          let imageUrl = imgSrc;
+          let cleanPath = '';
+          
+          if (imageUrl) {
+            // Remove leading/trailing slashes for processing
+            cleanPath = imageUrl.replace(/^\/+|\/+$/g, '');
+            
+            // Check if path already contains storage prefix
+            if (cleanPath.startsWith('storage/')) {
+              // Already has storage prefix, just ensure it starts with /
+              imageUrl = `/${cleanPath}`;
+            } else {
+              // Add storage prefix
+              imageUrl = `/storage/${cleanPath}`;
+            }
+            
+            // Remove double slashes
+            imageUrl = imageUrl.replace(/\/+/g, '/');
+          }
+          
+          // Extended debug logging
+          console.log(`Photo ${p.id} URL processing:`, {
+            id: p.id,
+            original: imgSrc,
+            thumbnail_path: p.thumbnail_path,
+            file_path: p.file_path,
+            cleanPath,
+            finalUrl: imageUrl,
+            isHttp: imageUrl?.startsWith('http'),
+            startsWithStorage: imageUrl?.startsWith('/storage/')
+          });
+          
+          return (
+            <Card key={p.id} className="relative overflow-hidden">
+              <CardContent className="p-0">
+                <Link to={`../photo/${p.id}`} state={{ photo: p }}>
+                  <img
+                    src={imageUrl}
+                    alt={`Foto ${p.id}${p.task_title ? ` - ${p.task_title}` : ''}`}
+                    className="aspect-square w-full object-cover bg-gray-200"
+                    onError={(e) => {
+                      console.error(`❌ Failed to load image ${p.id}:`, imageUrl);
+                      console.error('Error details:', e);
+                      (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
+                    }}
+                    onLoad={() => console.log(`✅ Successfully loaded image ${p.id}:`, imageUrl)}
+                    loading="lazy"
+                  />
+                </Link>
+              </CardContent>
+              
+              {p.task_title && (
+                <div className="px-2 pb-2 text-center">
+                  <p className="text-xs text-gray-700 truncate bg-white/80 py-1 rounded-sm">{p.task_title}</p>
+                </div>
+              )}
+              
+              <div className="absolute bottom-1 right-1 flex items-center gap-1 rounded-full bg-black/50 px-2 py-1 text-white">
+                <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onLike(p.id); }} className={`inline-flex items-center ${liked.has(p.id) ? 'text-red-400' : ''}`} aria-label="Like">
+                  <Heart className="h-4 w-4" />
+                </button>
+                <span className="text-xs">{counts[p.id] ?? (p.likes_count || 0)}</span>
+              </div>
+            </Card>
+          );
+        })}
       </div>
     </Page>
   );