fix: implement proper avatar upload and display

- Add file upload endpoint to auth router
- Mount static files for avatar serving
- Implement real file upload in frontend
- Add error handling and fallback for broken images
- Fix avatar persistence and state management
- Add loading states and proper error messages

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

web/src/pages/SettingsPage.tsx

@@ -40,6 +40,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
   const [ncUsername, setNcUsername] = useState(me.nc_username ?? "");
   const [ncPassword, setNcPassword] = useState("");
   const [avatarUrl, setAvatarUrl] = useState(me.avatar_url ?? "");
+  const [uploading, setUploading] = useState(false);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -120,17 +121,27 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
           <input
             type="file"
             accept="image/*"
-            onChange={(e) => {
+            onChange={async (e) => {
               const file = e.target.files?.[0];
               if (file) {
-                // In a real app, you would upload the file to a server
-                // and get a URL back. For now, we'll use a placeholder.
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                  // This is a simplified approach - in production you'd upload to server
-                  setAvatarUrl(event.target?.result as string);
-                };
-                reader.readAsDataURL(file);
+                setUploading(true);
+                try {
+                  const formData = new FormData();
+                  formData.append('file', file);
+                  
+                  const response = await api.post<MemberRead>('/auth/me/avatar', formData, {
+                    headers: {
+                      'Content-Type': 'multipart/form-data'
+                    }
+                  });
+                  
+                  setAvatarUrl(response.avatar_url || '');
+                  qc.invalidateQueries({ queryKey: ['me'] });
+                } catch (err) {
+                  setError(err instanceof Error ? err.message : 'Failed to upload avatar');
+                } finally {
+                  setUploading(false);
+                }
               }
             }}
             style={{ display: "none" }}
@@ -146,13 +157,21 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
             fontWeight: 600, 
             fontSize: 14 
           }}>
-            Upload Avatar
+            {uploading ? "Uploading..." : "Upload Avatar"}
           </label>
           <button
-            onClick={() => {
-              // Generate a new random avatar
-              const randomSeed = Math.random().toString(36).substring(2, 15);
-              setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${randomSeed}&backgroundType=gradientLinear&size=128`);
+            onClick={async () => {
+              // Generate a new random avatar using user ID as seed for consistency
+              const seed = Math.random().toString(36).substring(2, 15);
+              const newAvatarUrl = `https://api.dicebear.com/v6/identicon/svg?seed=${seed}&backgroundType=gradientLinear&size=128`;
+              
+              try {
+                await updateSettings({ avatar_url: newAvatarUrl });
+                setAvatarUrl(newAvatarUrl);
+                qc.invalidateQueries({ queryKey: ["me"] });
+              } catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to update avatar');
+              }
             }}
             style={{ 
               background: "none", 
@@ -169,9 +188,26 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
         </div>
         {avatarUrl && (
           <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-            <img src={avatarUrl} alt="Preview" style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }} />
+            <img 
+              src={avatarUrl} 
+              alt="Preview" 
+              style={{ width: 48, height: 48, borderRadius: "50%", objectFit: "cover" }}
+              onError={(e) => {
+                console.error("Failed to load avatar:", avatarUrl);
+                // Set to default avatar on error
+                setAvatarUrl(`https://api.dicebear.com/v6/identicon/svg?seed=${me.id}&backgroundType=gradientLinear&size=128`);
+              }}
+            />
             <button
-              onClick={() => setAvatarUrl("")}
+              onClick={async () => {
+                try {
+                  await updateSettings({ avatar_url: null });
+                  setAvatarUrl("");
+                  qc.invalidateQueries({ queryKey: ["me"] });
+                } catch (err) {
+                  setError(err instanceof Error ? err.message : 'Failed to remove avatar');
+                }
+              }}
               style={{ 
                 background: "none", 
                 border: "none",