feat(workspaces): add thumbnail UI across workspace surfaces

src/api/workspaces.ts

@@ -2,12 +2,13 @@ import { authFetch } from "./client";
 
 export interface Workspace {
   id: string;
-  name: string;
-  description?: string;
-  owner?: string;
-  my_role?: 'owner' | 'admin' | 'member' | 'guest';
-  [key: string]: any;
-}
+  name: string;
+  description?: string;
+  thumbnail?: string | null;
+  owner?: string;
+  my_role?: 'owner' | 'admin' | 'member' | 'guest';
+  [key: string]: any;
+}
 
 export interface PaginatedResponse<T> {
   count: number;
@@ -77,11 +78,36 @@ 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> => {
-  const response = await authFetch('/api/workspaces/', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  });
+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,
+  });
 
   if (!response.ok) {
     const errorData = await response.json();
@@ -90,11 +116,33 @@ 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> => {
-  const response = await authFetch(`/api/workspaces/${id}/`, {
-    method: 'PATCH',
-    body: JSON.stringify(data),
-  });
+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,
+  });
 
   if (!response.ok) {
     const errorData = await response.json();