fullstack: added profile pictures/avatars to accounts and improved settings page layout

src/api/account.ts

@@ -1,10 +1,37 @@
 import { UpdateUserResponse } from '../types';
 import { apiFetch } from './client'
-// import type { User } from '../types'
+import { upload } from '@tauri-apps/plugin-upload';
+import { getAuthData } from '../authStore';
+import { API } from '../main.ts';
 
 export function updateSettings(username: string, email: string, password: string) {
-  return apiFetch<UpdateUserResponse>('/settings', {
+  return apiFetch<UpdateUserResponse>('/account/settings', {
     method: 'PUT',
     body: JSON.stringify({ username, email, password }),
   });
 }
+
+export async function uploadAvatar(
+  filePath: string,
+  onProgress: (progress: number, total: number) => void
+) {
+  const auth = await getAuthData();
+  const url = `${API}/account/upload-avatar`;
+  const headers = new Map<string, string>([
+    ['Authorization', `Bearer ${auth.token}`],
+    ['Content-Type', 'application/octet-stream']
+  ]);
+
+  return upload(
+    url,
+    filePath,
+    ({ progress, total }) => {
+      onProgress(progress, total);
+    },
+    headers
+  );
+}
+
+export function getAvatar(uuid: string): string {
+  return `${API}/account/get-avatar/${uuid}`;
+}

src/api/client.ts

@@ -9,11 +9,14 @@ export async function apiFetch<T>(
 ): Promise<T> {
   const auth = await getAuthData()
 
+  const isFormData = options.body instanceof FormData;
+
   const res = await fetch(`${API}${path}`, {
     ...options,
     method: options.method || 'GET',
     headers: {
-      'Content-Type': 'application/json',
+      // Only add json header if it's not formdata
+      ...(!isFormData ? { 'Content-Type': 'application/json' } : {}),
       ...(auth.token ? { Authorization: `Bearer ${auth.token}` } : {}),
       ...options.headers,
     },