feat: global ui & functional update

lib/api/client.ts

@@ -81,15 +81,20 @@ export const apiRequest = async <T = any>(
   options: RequestOptions = {}
 ): Promise<T> => {
   const { params, requireAuth = true, ...fetchOptions } = options;
+  const body = fetchOptions.body;
 
   // Build URL
   const url = buildUrl(`${API_URL}${endpoint}`, params);
 
   const headers: HeadersInit = {
-    "Content-Type": "application/json",
     ...fetchOptions.headers,
   };
 
+  // Don't set Content-Type for FormData - browser will set it with boundary
+  if (!(body instanceof FormData)) {
+    (headers as Record<string, string>)["Content-Type"] = "application/json";
+  }
+
   // Add auth token if required
   if (requireAuth) {
     const token = getAuthToken();
@@ -99,9 +104,16 @@ export const apiRequest = async <T = any>(
   }
 
   try {
+    // Serialize body to JSON if it's an object (not FormData or string)
+    let serializedBody = body;
+    if (body && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof String)) {
+      serializedBody = JSON.stringify(body);
+    }
+
     const response = await fetch(url, {
       ...fetchOptions,
       headers,
+      body: serializedBody,
     });
 
     // Handle 204 No Content
@@ -145,21 +157,21 @@ export const api = {
     apiRequest<T>(endpoint, {
       ...options,
       method: "POST",
-      body: body ? JSON.stringify(body) : undefined,
+      body,
     }),
 
   put: <T = any>(endpoint: string, body?: any, options?: RequestOptions) =>
     apiRequest<T>(endpoint, {
       ...options,
       method: "PUT",
-      body: body ? JSON.stringify(body) : undefined,
+      body,
     }),
 
   patch: <T = any>(endpoint: string, body?: any, options?: RequestOptions) =>
     apiRequest<T>(endpoint, {
       ...options,
       method: "PATCH",
-      body: body ? JSON.stringify(body) : undefined,
+      body,
     }),
 
   delete: <T = any>(endpoint: string, options?: RequestOptions) =>