fix: avatar stale state, nginx intercept, and dev tooling

Frontend (SettingsPage):
- Sync avatarUrl state via useEffect when me.avatar_url changes after
  background refetch, so profile section never shows stale avatar
- Invalidate ["comments"] after upload/generate/remove so SongPage
  comment avatars update immediately instead of waiting for staleTime
- Fix Remove button: was sending avatar_url: undefined which JSON.stringify
  drops entirely, so the server never cleared it; now sends ""

nginx:
- Change /api/ and /ws/ locations to use ^~ prefix so the static-asset
  regex rule (~* \.(png|svg|ico)$) cannot intercept API paths; PNG/SVG
  avatar uploads were returning 404 from nginx in production
- Merge nc-scan 300s timeout into ^~ /api/v1/bands/ block
- Add client_max_body_size 10m (default 1MB was silently rejecting
  uploads before they reached FastAPI)

Dev tooling:
- Add docker-compose.dev.yml for hot-reload development workflow
- Add Taskfile.yml with dev, test, lint, migrate, and shell tasks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/nginx.conf

@@ -3,8 +3,27 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # Proxy API requests to the FastAPI backend
-    location /api/ {
+    # Allow avatar uploads up to 10MB (API enforces a 5MB limit)
+    client_max_body_size 10m;
+
+    # Band routes — NC scan can take several minutes on large libraries.
+    # ^~ prevents the static-asset regex below from matching /api/ paths.
+    location ^~ /api/v1/bands/ {
+        proxy_pass http://api:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        proxy_read_timeout 300s;
+        proxy_send_timeout 300s;
+    }
+
+    # All other API requests (including /api/static/avatars/* served by FastAPI).
+    # ^~ prevents the static-asset regex below from intercepting these paths.
+    location ^~ /api/ {
         proxy_pass http://api:8000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
@@ -19,26 +38,13 @@ server {
         proxy_send_timeout 60s;
     }
 
-    # NC scan hits Nextcloud for every file — can take several minutes on large libraries
-    location ~ ^/api/v1/bands/[^/]+/nc-scan {
-        proxy_pass http://api:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_http_version 1.1;
-
-        proxy_read_timeout 300s;
-        proxy_send_timeout 300s;
-    }
-
     # WebSocket proxy for real-time version room events
-    location /ws/ {
+    location ^~ /ws/ {
         proxy_pass http://api:8000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
-        # WebSocket specific headers
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
@@ -52,7 +58,8 @@ server {
         try_files $uri $uri/ /index.html;
     }
 
-    # Cache static assets aggressively
+    # Cache static assets aggressively (Vite build output — hashed filenames).
+    # This regex only runs for paths NOT matched by the ^~ rules above.
     location ~* \.(js|css|woff2|png|svg|ico)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";

web/src/pages/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
@@ -44,6 +44,12 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Keep local avatarUrl in sync when the server-side value changes (e.g. after
+  // a background refetch or a change made on another device).
+  useEffect(() => {
+    setAvatarUrl(me.avatar_url ?? "");
+  }, [me.avatar_url]);
+
   // Image resizing function
   const resizeImage = (file: File, maxWidth: number, maxHeight: number): Promise<File> => {
     return new Promise((resolve, reject) => {
@@ -216,6 +222,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                   
                   setAvatarUrl(response.avatar_url || '');
                   qc.invalidateQueries({ queryKey: ['me'] });
+                  qc.invalidateQueries({ queryKey: ['comments'] });
                 } catch (err) {
                   console.error("Upload failed:", err);
                   let errorMessage = 'Failed to upload avatar. Please try again.';
@@ -271,6 +278,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                 await updateSettings({ avatar_url: newAvatarUrl });
                 setAvatarUrl(newAvatarUrl);
                 qc.invalidateQueries({ queryKey: ["me"] });
+                qc.invalidateQueries({ queryKey: ["comments"] });
                 
                 console.log("Avatar updated successfully");
               } catch (err) {
@@ -306,9 +314,10 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
             <button
               onClick={async () => {
                 try {
-                  await updateSettings({ avatar_url: undefined });
+                  await updateSettings({ avatar_url: "" });
                   setAvatarUrl("");
                   qc.invalidateQueries({ queryKey: ["me"] });
+                  qc.invalidateQueries({ queryKey: ["comments"] });
                 } catch (err) {
                   setError(err instanceof Error ? err.message : 'Failed to remove avatar');
                 }