feat(media): manage client and project thumbnails

src/components/projects/ProjectEditModal.tsx

@@ -24,13 +24,17 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
   const canArchiveProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_ARCHIVE);
   const [loading, setLoading] = useState(false);
   const [clients, setClients] = useState<any[]>([]);
-  const [formData, setFormData] = useState({
-    name: "",
-    description: "",
-    color: "#3B82F6",
-    client: "",
-  });
-  const [loadingClients, setLoadingClients] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    color: "#3B82F6",
+    client: "",
+  });
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
+  const [clearThumbnail, setClearThumbnail] = useState(false);
+  const [loadingClients, setLoadingClients] = useState(false);
 
   useEffect(() => {
     if (isOpen && activeWorkspace) {
@@ -47,11 +51,38 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
       setFormData({
         name: project.name || "",
         description: project.description || "",
-        color: project.color || "#3B82F6",
-        client: project.client ? project.client.id : "",
-      });
-    }
-  }, [project]);
+        color: project.color || "#3B82F6",
+        client: project.client ? project.client.id : "",
+      });
+      setThumbnailUrl(project.thumbnail || null);
+      setThumbnailFile(null);
+      setClearThumbnail(false);
+    }
+  }, [project]);
+
+  useEffect(() => {
+    if (!thumbnailFile) {
+      setThumbnailPreview(null);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(thumbnailFile);
+    setThumbnailPreview(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [thumbnailFile]);
+
+  const handleThumbnailChange = (file: File | null) => {
+    if (!file) return;
+    if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
+      toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
+      return;
+    }
+    if (file.size > 2 * 1024 * 1024) {
+      toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
+      return;
+    }
+    setThumbnailFile(file);
+    setClearThumbnail(false);
+  };
 
   const handleSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
@@ -64,6 +95,8 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
         description: formData.description,
         color: formData.color,
         client: formData.client || null,
+        thumbnail: thumbnailFile,
+        clear_thumbnail: clearThumbnail,
       });
 
       toast.success(t.projects?.updateSuccess || "Project updated successfully.");
@@ -164,7 +197,37 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
           </div>
         </div>
 
-        <div>
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.workspace?.thumbnailLabel || "Thumbnail"}
+          </label>
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl text-sm font-semibold text-white" style={{ backgroundColor: formData.color || "#3B82F6" }}>
+              {thumbnailPreview ? (
+                <img src={thumbnailPreview} alt="" className="h-full w-full object-cover" />
+              ) : !clearThumbnail && thumbnailUrl ? (
+                <img src={thumbnailUrl} alt="" className="h-full w-full object-cover" />
+              ) : (
+                formData.name.trim().charAt(0).toUpperCase() || "P"
+              )}
+            </div>
+            <Input type="file" accept="image/jpeg,image/png,image/webp" onChange={(event) => handleThumbnailChange(event.target.files?.[0] || null)} />
+            {(thumbnailFile || (!clearThumbnail && thumbnailUrl)) ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setThumbnailFile(null);
+                  setClearThumbnail(true);
+                }}
+                className="rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600"
+              >
+                {t.remove || "Remove"}
+              </button>
+            ) : null}
+          </div>
+        </div>
+
+        <div>
           <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
             {t.projects?.descriptionLabel || 'Description'}
           </label>