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

resources/js/guest/components/GalleryPreview.tsx

@@ -2,39 +2,89 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { getDeviceId } from '../lib/device';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 
 type Props = { slug: string };
 
 export default function GalleryPreview({ slug }: Props) {
   const { photos, loading } = usePollGalleryDelta(slug);
-  const [mode, setMode] = React.useState<'latest' | 'popular'>('latest');
+  const [mode, setMode] = React.useState<'latest' | 'popular' | 'myphotos'>('latest');
 
   const items = React.useMemo(() => {
-    const arr = photos.slice();
+    let arr = photos.slice();
+    
+    // MyPhotos filter (requires session_id matching)
+    if (mode === 'myphotos') {
+      const deviceId = getDeviceId();
+      arr = arr.filter((photo: any) => photo.session_id === deviceId);
+    }
+    
+    // Sorting
     if (mode === 'popular') {
       arr.sort((a: any, b: any) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
     } else {
       arr.sort((a: any, b: any) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
     }
-    return arr.slice(0, 6);
+    
+    return arr.slice(0, 4); // 2x2 = 4 items
   }, [photos, mode]);
 
+  // Helper function to generate photo title (must be before return)
+  function getPhotoTitle(photo: any): string {
+    if (photo.task_id) {
+      return `Task: ${photo.task_title || 'Unbekannte Aufgabe'}`;
+    }
+    if (photo.emotion_id) {
+      return `Emotion: ${photo.emotion_name || 'Gefühl'}`;
+    }
+    // Fallback based on creation time or placeholder
+    const now = new Date();
+    const created = new Date(photo.created_at || now);
+    const hours = created.getHours();
+    if (hours < 12) return 'Morgenmoment';
+    if (hours < 18) return 'Nachmittagslicht';
+    return 'Abendstimmung';
+  }
+
   return (
     <div>
-      <div className="mb-2 flex items-center gap-2">
-        <div className="inline-flex rounded-md border p-1 text-xs">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="inline-flex rounded-full bg-white/80 backdrop-blur-sm border border-pink-200 p-1 shadow-sm">
           <button
             onClick={() => setMode('latest')}
-            className={`px-2 py-1 ${mode === 'latest' ? 'rounded-sm bg-muted font-medium' : ''}`}
-          >Neueste</button>
+            className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
+              mode === 'latest'
+                ? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
+                : 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
+            }`}
+          >
+            Newest
+          </button>
           <button
             onClick={() => setMode('popular')}
-            className={`px-2 py-1 ${mode === 'popular' ? 'rounded-sm bg-muted font-medium' : ''}`}
-          >Beliebt</button>
+            className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
+              mode === 'popular'
+                ? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
+                : 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
+            }`}
+          >
+            Popular
+          </button>
+          <button
+            onClick={() => setMode('myphotos')}
+            className={`px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 ${
+              mode === 'myphotos'
+                ? 'bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow-lg scale-105'
+                : 'text-gray-600 hover:bg-pink-50 hover:text-pink-700'
+            }`}
+          >
+            My Photos
+          </button>
         </div>
-        <div className="grow" />
-        <Link to={`../gallery`}><Button variant="link" className="px-0">Alle ansehen →</Button></Link>
+        <Link to={`/e/${slug}/gallery?mode=${mode}`} className="text-sm text-pink-600 hover:text-pink-700 font-medium">
+          Alle ansehen →
+        </Link>
       </div>
 
       {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
@@ -45,15 +95,28 @@ export default function GalleryPreview({ slug }: Props) {
           </CardContent>
         </Card>
       )}
-      <div className="grid grid-cols-3 gap-2">
+      <div className="grid grid-cols-2 gap-3">
         {items.map((p: any) => (
-          <Link key={p.id} to={`../photo/${p.id}`} state={{ photo: p }}>
-            <img
-              src={p.thumbnail_path || p.file_path}
-              alt="Foto"
-              className="aspect-square w-full rounded object-cover"
-              loading="lazy"
-            />
+          <Link key={p.id} to={`/e/${slug}/photo/${p.id}`} state={{ photo: p }} className="block">
+            <div className="relative">
+              <img
+                src={p.thumbnail_path || p.file_path}
+                alt={p.title || 'Foto'}
+                className="aspect-square w-full rounded-xl object-cover shadow-lg hover:shadow-xl transition-shadow duration-200"
+                loading="lazy"
+              />
+              {/* Photo Title */}
+              <div className="mt-2">
+                <div className="text-xs font-medium text-gray-900 line-clamp-2 bg-white/80 px-2 py-1 rounded-md">
+                  {p.title || getPhotoTitle(p)}
+                </div>
+                {p.likes_count > 0 && (
+                  <div className="mt-1 flex items-center gap-1 text-xs text-pink-600">
+                    ❤️ {p.likes_count}
+                  </div>
+                )}
+              </div>
+            </div>
           </Link>
         ))}
       </div>