Initialize repo and add session changes (2025-09-08)

resources/js/guest/pages/PhotoLightbox.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Heart } from 'lucide-react';
+import { likePhoto } from '../services/photosApi';
+
+type Photo = { id: number; file_path?: string; thumbnail_path?: string; likes_count?: number; created_at?: string };
+
+export default function PhotoLightbox() {
+  const nav = useNavigate();
+  const { state } = useLocation();
+  const { photoId } = useParams();
+  const [photo, setPhoto] = React.useState<Photo | null>((state as any)?.photo ?? null);
+
+  const [likes, setLikes] = React.useState<number | null>(null);
+  const [liked, setLiked] = React.useState(false);
+
+  React.useEffect(() => {
+    if (photo) return;
+    (async () => {
+      const res = await fetch(`/api/v1/photos/${photoId}`);
+      if (res.ok) setPhoto(await res.json());
+    })();
+  }, [photo, photoId]);
+
+  React.useEffect(() => {
+    if (photo && likes === null) setLikes(photo.likes_count ?? 0);
+  }, [photo, likes]);
+
+  async function onLike() {
+    if (liked || !photo) return;
+    setLiked(true);
+    const c = await likePhoto(photo.id);
+    setLikes(c);
+  }
+
+  function onOpenChange(open: boolean) {
+    if (!open) nav(-1);
+  }
+
+  return (
+    <Dialog open onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
+        <div className="flex items-center justify-between p-2">
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="sm" onClick={onLike} disabled={liked}>
+              <Heart className="mr-1 h-4 w-4" /> {likes ?? 0}
+            </Button>
+          </div>
+          <Button variant="secondary" size="sm" onClick={() => nav(-1)}>Schließen</Button>
+        </div>
+        <div className="flex items-center justify-center">
+          {photo ? (
+            <img src={photo.file_path || photo.thumbnail_path} alt="Foto" className="max-h-[80vh] w-auto" />
+          ) : (
+            <div className="p-6">Lade…</div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}