feat(image-gallery-component): ImageGallery mit Lightbox [tsc:fail]

.phase39-state.json

@@ -1,5 +1,8 @@
 {
   "completed_features": [],
-  "current_feature": "file-upload-component",
-  "started_at": "2026-05-23T10:13:25.521406"
+  "current_feature": "image-gallery-component",
+  "started_at": "2026-05-23T10:13:25.521406",
+  "attempted_features": [
+    "file-upload-component"
+  ]
 }

GENERATION_LOG.md

@@ -4132,3 +4132,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `10:13:53` **INFO**   Committed feature file-upload-component
+- `10:13:53` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: image-gallery-component (2026-05-23 10:13:53)
+
+- `10:13:53` **INFO** Description: ImageGallery mit Lightbox
+- `10:13:53` **INFO**   Generating apps/web/src/components/ImageGallery.tsx (ImageGallery-Component. Props: images (array {url, alt?, caption?}), c…)
+- `10:14:23` **INFO**     wrote 3699 chars in 30.2s (attempt 1)
+- `10:14:23` **INFO** Running tsc --noEmit on api…
+- `10:14:25` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 

apps/web/src/components/ImageGallery.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface GalleryImage {
+  url: string;
+  alt?: string;
+  caption?: string;
+}
+
+interface ImageGalleryProps {
+  images: GalleryImage[];
+  columns?: number;
+}
+
+export default function ImageGallery({ images, columns = 3 }: ImageGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const closeLightbox = useCallback(() => {
+    setSelectedIndex(null);
+  }, []);
+
+  const goToPrev = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedIndex((prev) => (prev !== null && prev > 0 ? prev - 1 : images.length - 1));
+  }, [images.length]);
+
+  const goToNext = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedIndex((prev) => (prev !== null && prev < images.length - 1 ? prev + 1 : 0));
+  }, [images.length]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (selectedIndex === null) return;
+      if (e.key === 'Escape') closeLightbox();
+      if (e.key === 'ArrowLeft') goToPrev({ stopPropagation: () => {} } as any);
+      if (e.key === 'ArrowRight') goToNext({ stopPropagation: () => {} } as any);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedIndex, closeLightbox, goToPrev, goToNext]);
+
+  if (!images || images.length === 0) return null;
+
+  return (
+    <>
+      <div 
+        className="grid gap-4" 
+        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
+      >
+        {images.map((img, idx) => (
+          <div 
+            key={idx} 
+            className="relative aspect-square overflow-hidden rounded-lg cursor-pointer group bg-gray-100"
+            onClick={() => setSelectedIndex(idx)}
+          >
+            <img 
+              src={img.url} 
+              alt={img.alt || ''} 
+              className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
+              loading="lazy"
+            />
+          </div>
+        ))}
+      </div>
+
+      {selectedIndex !== null && (
+        <div 
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm p-4"
+          onClick={closeLightbox}
+        >
+          <button 
+            className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors z-50"
+            onClick={closeLightbox}
+          >
+            <X size={32} />
+          </button>
+
+          <button 
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors z-50 p-2"
+            onClick={goToPrev}
+          >
+            <ChevronLeft size={48} />
+          </button>
+
+          <div 
+            className="relative max-w-5xl max-h-full flex flex-col items-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <img 
+              src={images[selectedIndex].url} 
+              alt={images[selectedIndex].alt || ''} 
+              className="max-w-full max-h-[85vh] object-contain shadow-2xl"
+            />
+            {images[selectedIndex].caption && (
+              <p className="mt-4 text-white text-center text-lg font-medium">
+                {images[selectedIndex].caption}
+              </p>
+            )}
+          </div>
+
+          <button 
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors z-50 p-2"
+            onClick={goToNext}
+          >
+            <ChevronRight size={48} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+}