Let users upload a profile picture, cropped in the browser

Users now have an avatar. The account page takes an image, lets the user
drag and zoom it under a circular mask, and uploads exactly what the circle
shows as a 256x256 PNG. The picture replaces the initial-letter circle in
the sidebar, on the account page, on the on-call hero and week strip, on
the schedule's day chips and in the incident assign menu; someone without
one keeps the initial.

The picture lives in Postgres (user_avatars, bytea) rather than on a
volume: the chart runs two replicas on a read-only root filesystem, and
the k8up pg_dump backup then covers it without any chart or operator
change. The server does not trust the client's crop. It decodes the PNG or
JPEG, checks the declared size before decoding, centre-crops to a square,
scales to 256 and re-encodes, which drops EXIF and anything that is not
pixels. Standard library only; WebP is cropped by the browser and arrives
as PNG, a raw WebP sent to the API is refused.

GET/PUT/DELETE /api/users/{id}/avatar: anyone signed in may read, only the
owner or an administrator may change. /api/me and /api/users gain
avatar_version, absent when there is no picture, which is also the ?v= that
busts the cache after a change. Incident timeline entries and the queue are
text-only and are unchanged.

Claude-Session: https://claude.ai/code/session_016mBLURvJoMuUEr9cB2RpUN

internal/web/static/js/api.js

@@ -72,6 +72,30 @@ export const setPassword = (userID, password, currentPassword) =>
 // users
 export const users = () => call('GET', '/users');
 
+// A profile picture is raw image bytes, not JSON, so it does not go through call.
+export async function setAvatar(userID, blob) {
+  let resp;
+  try {
+    resp = await fetch(`/api/users/${userID}/avatar`, {
+      method: 'PUT', headers: { 'Content-Type': blob.type || 'image/png' }, body: blob, credentials: 'same-origin',
+    });
+  } catch {
+    throw new ApiError(0, 'Cannot reach the server.');
+  }
+  let data = null;
+  try {
+    data = await resp.json();
+  } catch {
+    /* keep null */
+  }
+  if (!resp.ok) {
+    if (resp.status === 401) onUnauthorized();
+    throw new ApiError(resp.status, (data && data.error) || `Server answered ${resp.status}.`);
+  }
+  return data;
+}
+export const removeAvatar = (userID) => call('DELETE', `/users/${userID}/avatar`);
+
 // What one person is in. /teams answers "what am I in" and cannot be asked
 // about anybody else, which is what the admin page's per-user view needs.
 export const userTeams = (id) => call('GET', `/users/${id}/teams`);