feat: add LogoManagementModal component for logo upload and management

components/BannerManagementModal.tsx

@@ -131,6 +131,61 @@ const BannerManagementModal: React.FC<BannerManagementModalProps> = ({
             </p>
           </div>
 
+          {/* File Upload */}
+          <div className="mb-6">
+            <h4 className="font-semibold text-textMain mb-3">Oder Bild hochladen</h4>
+            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accentInfo/50 transition-colors">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+
+                  const formData = new FormData();
+                  formData.append('banner', file);
+
+                  try {
+                    setLoading(true);
+                    setError(null);
+
+                    const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/banner/upload`, {
+                      method: 'POST',
+                      credentials: 'include',
+                      body: formData
+                    });
+
+                    if (response.ok) {
+                      const data = await response.json();
+                      setBannerUrl(data.bannerUrl);
+                      onUpdate();
+                      onClose();
+                    } else {
+                      const errorData = await response.json();
+                      setError(errorData.error || 'Fehler beim Hochladen');
+                    }
+                  } catch (err) {
+                    console.error('Error uploading banner:', err);
+                    setError('Netzwerkfehler beim Hochladen');
+                  } finally {
+                    setLoading(false);
+                  }
+                }}
+                className="hidden"
+                id="banner-upload"
+              />
+              <label htmlFor="banner-upload" className="cursor-pointer">
+                <div className="w-12 h-12 mx-auto mb-4 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                  <svg className="w-6 h-6 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                  </svg>
+                </div>
+                <p className="text-sm text-textMain font-medium">Bild auswählen</p>
+                <p className="text-xs text-textMuted mt-1">Max. 10MB, nur Bilddateien</p>
+              </label>
+            </div>
+          </div>
+
           {/* Preview */}
           {bannerUrl && bannerUrl !== currentBannerUrl && (
             <div className="mb-6">

components/GalleryManagementModal.tsx

@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Icons } from './IconSet';
 
+interface GalleryImage {
+  id: string;
+  url: string;
+}
+
 interface GalleryManagementModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -14,7 +19,7 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
   projectId,
   onUpdate
 }) => {
-  const [images, setImages] = useState<string[]>([]);
+  const [images, setImages] = useState<GalleryImage[]>([]);
   const [loading, setLoading] = useState(false);
   const [imageUrl, setImageUrl] = useState('');
   const [error, setError] = useState<string | null>(null);
@@ -73,10 +78,10 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
     }
   };
 
-  const removeImage = async (index: number) => {
+  const removeImage = async (imageId: string) => {
     try {
       setLoading(true);
-      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/${index}`, {
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/${imageId}`, {
         method: 'DELETE',
         credentials: 'include'
       });
@@ -118,7 +123,9 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
           {/* Add Image */}
           <div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 mb-6">
             <h4 className="font-semibold text-textMain mb-4">Bild hinzufügen</h4>
-            <div className="flex gap-2">
+
+            {/* URL Input */}
+            <div className="flex gap-2 mb-4">
               <input
                 type="url"
                 value={imageUrl}
@@ -134,9 +141,68 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
                 Hinzufügen
               </button>
             </div>
-            <p className="text-xs text-textMuted mt-2">
+            <p className="text-xs text-textMuted mb-4">
               Geben Sie eine direkte URL zu einem Bild ein (z.B. von Imgur, Discord, etc.)
             </p>
+
+            {/* File Upload */}
+            <div className="border-t border-border pt-4">
+              <div className="border-2 border-dashed border-border rounded-lg p-4 text-center hover:border-accentInfo/50 transition-colors">
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={async (e) => {
+                    const files = e.target.files as FileList;
+                    if (!files || files.length === 0) return;
+
+                    try {
+                      setLoading(true);
+                      setError(null);
+
+                      // Upload each file
+                      const fileArray = Array.from(files) as File[];
+                      for (const file of fileArray) {
+                        const formData = new FormData();
+                        formData.append('gallery', file);
+
+                        const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/upload`, {
+                          method: 'POST',
+                          credentials: 'include',
+                          body: formData
+                        });
+
+                        if (!response.ok) {
+                          const errorData = await response.json();
+                          setError(errorData.error || `Fehler beim Hochladen von ${file.name}`);
+                          break;
+                        }
+                      }
+
+                      // Reload gallery after all uploads
+                      await loadGallery();
+
+                    } catch (err) {
+                      console.error('Error uploading images:', err);
+                      setError('Netzwerkfehler beim Hochladen');
+                    } finally {
+                      setLoading(false);
+                    }
+                  }}
+                  className="hidden"
+                  id="gallery-upload"
+                />
+                <label htmlFor="gallery-upload" className="cursor-pointer">
+                  <div className="w-10 h-10 mx-auto mb-3 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                    <svg className="w-5 h-5 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                    </svg>
+                  </div>
+                  <p className="text-sm text-textMain font-medium">Bilder auswählen</p>
+                  <p className="text-xs text-textMuted mt-1">Max. 10MB pro Bild, Mehrfachauswahl möglich</p>
+                </label>
+              </div>
+            </div>
           </div>
 
           {/* Gallery Grid */}
@@ -156,11 +222,11 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
               </div>
             ) : (
               <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                {images.map((imageUrl, index) => (
-                  <div key={index} className="relative group">
+                {images.map((image, index) => (
+                  <div key={image.id} className="relative group">
                     <div className="aspect-square rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
                       <img
-                        src={imageUrl}
+                        src={image.url}
                         alt={`Galerie ${index + 1}`}
                         className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                         onError={(e) => {
@@ -172,7 +238,7 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
 
                     {/* Delete Button */}
                     <button
-                      onClick={() => removeImage(index)}
+                      onClick={() => removeImage(image.id)}
                       disabled={loading}
                       className="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
                       title="Bild entfernen"

components/LogoManagementModal.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { Icons } from './IconSet';
+
+interface LogoManagementModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  projectId: string;
+  currentLogoUrl?: string;
+  onUpdate: () => void;
+}
+
+const LogoManagementModal: React.FC<LogoManagementModalProps> = ({
+  isOpen,
+  onClose,
+  projectId,
+  currentLogoUrl,
+  onUpdate
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileUpload = async (file: File) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const formData = new FormData();
+      formData.append('logo', file);
+
+      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/logo/upload`, {
+        method: 'POST',
+        credentials: 'include',
+        body: formData
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Logo uploaded successfully:', data);
+        onUpdate();
+        onClose();
+      } else {
+        const errorData = await response.json();
+        setError(errorData.error || 'Fehler beim Hochladen des Logos');
+      }
+    } catch (err) {
+      console.error('Error uploading logo:', err);
+      setError('Netzwerkfehler beim Hochladen');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const removeLogo = async () => {
+    // Note: We'll need to implement logo deletion in the backend
+    // For now, this is a placeholder
+    alert('Logo-Löschen ist noch nicht implementiert. Kontaktieren Sie einen Administrator.');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-md shadow-2xl flex flex-col max-h-[90vh]">
+        <div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
+          <h3 className="font-bold text-textMain flex items-center gap-2">
+            <Icons.Layers className="w-5 h-5" />
+            Logo verwalten
+          </h3>
+          <button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">&times;</button>
+        </div>
+
+        <div className="p-6 flex-1 overflow-y-auto">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
+              <p className="text-red-400">{error}</p>
+            </div>
+          )}
+
+          {/* Current Logo Preview */}
+          {currentLogoUrl && (
+            <div className="mb-6">
+              <h4 className="text-sm font-semibold text-textMain mb-3">Aktuelles Logo</h4>
+              <div className="flex items-center gap-4 p-4 bg-surfaceHighlight/30 border border-border rounded-lg">
+                <img
+                  src={currentLogoUrl}
+                  alt="Aktuelles Logo"
+                  className="w-16 h-16 rounded-lg object-cover border border-white/10"
+                />
+                <div className="flex-1">
+                  <p className="text-sm text-textMuted">Logo ist gesetzt</p>
+                  <button
+                    onClick={removeLogo}
+                    className="text-xs text-red-400 hover:text-red-300 mt-1"
+                    disabled={loading}
+                  >
+                    Logo entfernen
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* File Upload */}
+          <div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accentInfo/50 transition-colors">
+            <input
+              type="file"
+              accept="image/*"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  handleFileUpload(file);
+                }
+              }}
+              className="hidden"
+              id="logo-upload"
+              disabled={loading}
+            />
+            <label htmlFor="logo-upload" className="cursor-pointer">
+              <div className="w-12 h-12 mx-auto mb-4 bg-surfaceHighlight rounded-full flex items-center justify-center">
+                <svg className="w-6 h-6 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                </svg>
+              </div>
+              <p className="text-sm text-textMain font-medium">
+                {loading ? 'Lädt hoch...' : 'Logo auswählen'}
+              </p>
+              <p className="text-xs text-textMuted mt-2">
+                PNG, JPG oder GIF • Max. 2MB • Quadratische Formate bevorzugt
+              </p>
+            </label>
+          </div>
+
+          <div className="mt-4 text-xs text-textMuted">
+            <p>• Das Logo wird in der Projektübersicht angezeigt</p>
+            <p>• Verwenden Sie transparente Hintergründe für beste Ergebnisse</p>
+            <p>• Das Logo wird automatisch auf 64x64px skaliert</p>
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-border flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
+          >
+            Schließen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogoManagementModal;