feat(workspaces): add thumbnail UI across workspace surfaces

src/api/workspaces.ts

@@ -4,6 +4,7 @@ export interface Workspace {
   id: string;
   name: string;
   description?: string;
+  thumbnail?: string | null;
   owner?: string;
   my_role?: 'owner' | 'admin' | 'member' | 'guest';
   [key: string]: any;
@@ -77,10 +78,35 @@ export const getWorkspace = async (id: string): Promise<Workspace> => {
   return await response.json();
 };
 
-export const createWorkspace = async (data: { name: string; description: string; members?: any[] }): Promise<Workspace> => {
+export const createWorkspace = async (data: {
+  name: string;
+  description: string;
+  members?: any[];
+  thumbnail?: File | null;
+}): Promise<Workspace> => {
+  const hasFile = data.thumbnail instanceof File;
+  const body = hasFile
+    ? (() => {
+        const formData = new FormData();
+        formData.append("name", data.name);
+        formData.append("description", data.description);
+        if (Array.isArray(data.members)) {
+          formData.append("members", JSON.stringify(data.members));
+        }
+        if (data.thumbnail) {
+          formData.append("thumbnail", data.thumbnail);
+        }
+        return formData;
+      })()
+    : JSON.stringify({
+        name: data.name,
+        description: data.description,
+        members: data.members,
+      });
+
   const response = await authFetch('/api/workspaces/', {
     method: 'POST',
-    body: JSON.stringify(data),
+    body,
   });
 
   if (!response.ok) {
@@ -90,10 +116,32 @@ export const createWorkspace = async (data: { name: string; description: string;
   return await response.json();
 };
 
-export const updateWorkspace = async (id: string, data: { name?: string; description?: string }): Promise<Workspace> => {
+export const updateWorkspace = async (
+  id: string,
+  data: {
+    name?: string;
+    description?: string;
+    thumbnail?: File | null;
+    clear_thumbnail?: boolean;
+  },
+): Promise<Workspace> => {
+  const hasFile = data.thumbnail instanceof File;
+  const shouldClear = Boolean(data.clear_thumbnail);
+  const useForm = hasFile || shouldClear;
+  const body = useForm
+    ? (() => {
+        const formData = new FormData();
+        if (data.name !== undefined) formData.append("name", data.name);
+        if (data.description !== undefined) formData.append("description", data.description);
+        if (data.thumbnail) formData.append("thumbnail", data.thumbnail);
+        if (shouldClear) formData.append("clear_thumbnail", "true");
+        return formData;
+      })()
+    : JSON.stringify(data);
+
   const response = await authFetch(`/api/workspaces/${id}/`, {
     method: 'PATCH',
-    body: JSON.stringify(data),
+    body,
   });
 
   if (!response.ok) {

src/components/WorkspaceSelector.tsx

@@ -52,8 +52,7 @@ export const WorkspaceSelector: React.FC = () => {
       if (activeWorkspace?.id === e.detail?.id) {
         setActiveWorkspace({
           ...activeWorkspace,
-          name: e.detail.name, 
+          ...e.detail,
-          description: e.detail.description 
         } as Workspace);
       }
       refreshWorkspacesList();
@@ -123,8 +122,12 @@ export const WorkspaceSelector: React.FC = () => {
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center gap-2 px-3 py-2 text-base font-medium text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
       >
-        <div className="w-6 h-6 flex items-center justify-center bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-md">
+        <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
-          {activeWorkspace?.name?.charAt(0) || <Briefcase className="w-4 h-4" />}
+          {activeWorkspace?.thumbnail ? (
+            <img src={activeWorkspace.thumbnail} alt={activeWorkspace?.name || "Workspace"} className="h-full w-full object-cover" />
+          ) : (
+            activeWorkspace?.name?.charAt(0)?.toUpperCase() || <Briefcase className="w-4 h-4" />
+          )}
         </div>
         <span className="max-w-30 truncate">
           {activeWorkspace?.name || t.workspace?.title || "Workspaces"}
@@ -159,8 +162,12 @@ export const WorkspaceSelector: React.FC = () => {
                   className="w-full flex items-center justify-between px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                 >
                   <div className="flex items-center gap-2 truncate">
-                    <div className="w-6 h-6 flex items-center justify-center bg-slate-100 dark:bg-slate-800 rounded-md font-medium">
+                    <div className="w-6 h-6 flex items-center justify-center overflow-hidden rounded-md bg-slate-100 font-medium dark:bg-slate-800">
-                      {ws.name.charAt(0)}
+                      {ws.thumbnail ? (
+                        <img src={ws.thumbnail} alt={ws.name} className="h-full w-full object-cover" />
+                      ) : (
+                        ws.name.charAt(0).toUpperCase()
+                      )}
                     </div>
                     <span className="truncate">{ws.name}</span>
                   </div>

src/pages/WorkspaceCreate.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment } from 'react';
 import { useBlocker, useNavigate } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react';
+import { AlertCircle, UserPlus, Trash2, Shield, Loader2, UploadCloud } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
 import { toast } from 'sonner';
 import { createWorkspace } from '../api/workspaces';
@@ -40,6 +40,8 @@ export default function WorkspaceCreate() {
   // Workspace Info States
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
 
   // Members States (Local)
@@ -55,7 +57,35 @@ export default function WorkspaceCreate() {
   const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
 
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
+  const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0 || !!thumbnailFile;
+
+  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) {
+      setThumbnailFile(null);
+      return;
+    }
+    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
+      return;
+    }
+    const maxBytes = 2 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
+      return;
+    }
+    setThumbnailFile(file);
+  };
 
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -121,7 +151,8 @@ export default function WorkspaceCreate() {
       const payload = {
         name,
         description,
-        members: members.map(m => ({ user_id: m.user.id, role: m.role }))
+        members: members.map(m => ({ user_id: m.user.id, role: m.role })),
+        thumbnail: thumbnailFile,
       };
       const newWorkspace = await createWorkspace(payload);
 
@@ -210,6 +241,45 @@ export default function WorkspaceCreate() {
                 className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
               />
             </div>
+<div className="mb-6">
+  <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+    {t.workspace?.thumbnailLabel || "Thumbnail"}
+  </label>
+
+  <label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
+    {thumbnailPreview ? (
+      <img
+        src={thumbnailPreview}
+        alt={name || "Workspace"}
+        className="h-full w-full object-cover"
+      />
+    ) : (
+      <div className="flex flex-col items-center gap-2 text-center">
+        <UploadCloud className="h-12 w-12 text-slate-500 dark:text-slate-400" />
+          <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
+            {t.workspace?.uploadImage || "Click to upload image"}
+          </span>
+      </div>
+    )}
+
+    <Input
+      type="file"
+      accept=".jpg,.jpeg,.png,.webp"
+      className="hidden"
+      onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
+    />
+  </label>
+
+  {thumbnailFile && (
+    <button
+      type="button"
+      onClick={() => setThumbnailFile(null)}
+      className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
+    >
+      {t.workspace?.removeImage || "Remove image"}
+      </button>
+    )}
+  </div>
             <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
               <Button
                 type="button"

src/pages/WorkspaceEdit.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, Fragment, useMemo, useCallback } from 'react';
 import { useBlocker, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
+import { AlertCircle, UserPlus, Trash2, Shield, UploadCloud } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
 import { toast } from 'sonner';
 import { getPriceUnits, getWorkspaceUserRates, type PriceUnit, type WorkspaceUserRate } from '../api/rates';
@@ -55,6 +55,10 @@ export default function EditWorkspace() {
   // Workspace Info States
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
+  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
+  const [clearThumbnail, setClearThumbnail] = useState(false);
+  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
   const [myRole, setMyRole] = useState<WorkspaceRole>('member');
   const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -91,9 +95,39 @@ export default function EditWorkspace() {
 
     const isNameChanged = name.trim() !== (initialData.name || '').trim();
     const isDescChanged = description.trim() !== (initialData.description || '').trim();
+    const isImageChanged = !!thumbnailFile || clearThumbnail;
 
-    return isNameChanged || isDescChanged;
+    return isNameChanged || isDescChanged || isImageChanged;
-  }, [name, description, initialData, isLoading]);
+  }, [name, description, initialData, isLoading, thumbnailFile, clearThumbnail]);
+
+  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) {
+      setThumbnailFile(null);
+      return;
+    }
+    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(t.workspace?.thumbnailInvalidType || "Unsupported image type. Use JPG, PNG, or WebP.");
+      return;
+    }
+    const maxBytes = 2 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error(t.workspace?.thumbnailMaxSizeError || "Image size must be 2MB or less.");
+      return;
+    }
+    setThumbnailFile(file);
+    setClearThumbnail(false);
+  };
 
   useEffect(() => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
@@ -130,6 +164,9 @@ export default function EditWorkspace() {
       const workspaceData = await getWorkspace(id!);
       setName(workspaceData.name);
       setDescription(workspaceData.description || '');
+      setThumbnailUrl(workspaceData.thumbnail || null);
+      setThumbnailFile(null);
+      setClearThumbnail(false);
       setMyRole(workspaceData.my_role || 'member');
       setWorkspaceOwnerId(workspaceData.owner || '');
 
@@ -225,10 +262,15 @@ export default function EditWorkspace() {
     if (!name.trim() || !id) return;
     try {
       setIsSaving(true);
-      await updateWorkspace(id, { name, description });
+      const updatedWorkspace = await updateWorkspace(id, {
+        name,
+        description,
+        thumbnail: thumbnailFile,
+        clear_thumbnail: clearThumbnail,
+      });
       toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
       window.dispatchEvent(new CustomEvent('workspace_edited', { 
-        detail: { id, name, description } 
+        detail: updatedWorkspace
       }));
       navigate('/workspaces');
     } catch (error) {
@@ -328,6 +370,55 @@ export default function EditWorkspace() {
                 className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
               />
             </div>
+            <div className="mb-6">
+              <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t.workspace?.thumbnailLabel || "Thumbnail"}
+              </label>
+
+              <label className="mt-3 flex aspect-square w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-100 text-5xl font-semibold text-slate-700 transition hover:bg-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
+                {thumbnailPreview ? (
+                  <img
+                    src={thumbnailPreview}
+                    alt={name || "Workspace"}
+                    className="h-full w-full object-cover"
+                  />
+                ) : !clearThumbnail && thumbnailUrl ? (
+                  <img
+                    src={thumbnailUrl}
+                    alt={name || "Workspace"}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <UploadCloud className="h-10 w-10 text-slate-500 dark:text-slate-400" />
+
+                      <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
+                        {t.workspace?.uploadImage || "Click to upload image"}
+                      </span>
+                  </div>
+                )}
+
+                <input
+                  type="file"
+                  accept=".jpg,.jpeg,.png,.webp"
+                  className="hidden"
+                  onChange={(e) => handleThumbnailChange(e.target.files?.[0] || null)}
+                />
+              </label>
+
+              {(thumbnailUrl || thumbnailFile) && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setThumbnailFile(null);
+                    setClearThumbnail(true);
+                  }}
+                  className="mt-2 text-xs text-red-600 hover:underline dark:text-red-400"
+                >
+                  {t.workspace?.removeImage || "Remove image"}
+                </button>
+              )}
+            </div>
             <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
               <Button type="button" variant="ghost" onClick={() => navigate('/workspaces')}>
                 {t.actions?.cancel || "Cancel"}

src/pages/Workspaces.tsx

@@ -157,6 +157,13 @@ export default function Workspaces() {
                   <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
                     <div className="flex-1">
                       <div className="flex items-center gap-3 mb-2">
+                        <div className="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-slate-100 dark:bg-slate-600 flex items-center justify-center text-sm font-semibold text-slate-700 dark:text-slate-200">
+                          {workspace.thumbnail ? (
+                            <img src={workspace.thumbnail} alt={workspace.name} className="h-full w-full object-cover" />
+                          ) : (
+                            workspace.name.trim().charAt(0).toUpperCase() || "W"
+                          )}
+                        </div>
                         <CardTitle className="text-lg line-clamp-1">
                           {workspace.name}
                         </CardTitle>