feat: Enhance Guest Frontend with new features and UI improvements

resources/js/guest/components/GalleryPreview.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+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 items = React.useMemo(() => {
+    const arr = photos.slice();
+    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);
+  }, [photos, mode]);
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center gap-2">
+        <div className="inline-flex rounded-md border p-1 text-xs">
+          <button
+            onClick={() => setMode('latest')}
+            className={`px-2 py-1 ${mode === 'latest' ? 'rounded-sm bg-muted font-medium' : ''}`}
+          >Neueste</button>
+          <button
+            onClick={() => setMode('popular')}
+            className={`px-2 py-1 ${mode === 'popular' ? 'rounded-sm bg-muted font-medium' : ''}`}
+          >Beliebt</button>
+        </div>
+        <div className="grow" />
+        <Link to={`../gallery`}><Button variant="link" className="px-0">Alle ansehen →</Button></Link>
+      </div>
+
+      {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
+      {!loading && items.length === 0 && (
+        <Card>
+          <CardContent className="p-3 text-sm text-muted-foreground">
+            Noch keine Fotos. Starte mit deinem ersten Upload!
+          </CardContent>
+        </Card>
+      )}
+      <div className="grid grid-cols-3 gap-2">
+        {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>
+        ))}
+      </div>
+    </div>
+  );
+}
+