feat: profile pictures — Gravatar fallback + custom upload

New users get a Gravatar-backed avatar automatically (computed from email
at signup); users can upload a custom photo instead via Settings, or
revert to the Gravatar/initials fallback. avatarUrl stays the single
resolved value (custom photo, OAuth photo, or precomputed Gravatar URL)
so every existing avatar-rendering spot across the app needs zero changes.

- users.hasCustomAvatar tracks whether avatarUrl is a real upload vs a
  computed Gravatar fallback, so "remove photo" knows what to revert to.
- New /api/v1/upload/avatar-presign route (session-scoped, generic —
  the existing recipe-photo presign route required a recipeId).
- CSP img-src needed www.gravatar.com added, or every browser blocks
  the fallback avatar outright.
- Settings page now reads avatarUrl from a fresh DB query instead of
  Better Auth's session object — the session cookie cache (5 min TTL)
  was serving a stale image right after upload, showing the initials
  fallback until the cache happened to expire.

Verified locally: signup auto-sets a Gravatar URL, upload persists
across reload, remove correctly reverts to Gravatar/initials.

apps/web/components/settings/settings-form.tsx

@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Switch } from "@/components/ui/switch";
 import { useTranslations } from "next-intl";
 import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";
+import { AvatarUploader } from "./avatar-uploader";
 
 type UserProps = {
   name: string;
@@ -19,6 +20,7 @@ type UserProps = {
   bio: string | null;
   privateBio: string | null;
   isPrivate: boolean;
+  hasCustomAvatar: boolean;
 };
 
 export function SettingsForm({ user }: { user: UserProps }) {
@@ -26,6 +28,8 @@ export function SettingsForm({ user }: { user: UserProps }) {
   const t_common = useTranslations("common");
   const { setLocale } = useLocale();
 
+  const [avatarImage, setAvatarImage] = useState(user.image);
+  const [hasCustomAvatar, setHasCustomAvatar] = useState(user.hasCustomAvatar);
   const [name, setName] = useState(user.name);
   const [bio, setBio] = useState(user.bio ?? "");
   const [privateBio, setPrivateBio] = useState(user.privateBio ?? "");
@@ -96,6 +100,15 @@ export function SettingsForm({ user }: { user: UserProps }) {
     <div className="space-y-6">
       <section className="rounded-xl border p-6 space-y-4">
         <h2 className="font-semibold text-lg">{t("profile")}</h2>
+        <AvatarUploader
+          name={user.name}
+          image={avatarImage}
+          hasCustomAvatar={hasCustomAvatar}
+          onChange={(image, custom) => {
+            setAvatarImage(image);
+            setHasCustomAvatar(custom);
+          }}
+        />
         <div className="space-y-2">
           <Label>{t("displayName")}</Label>
           <Input value={name} onChange={(e) => setName(e.target.value)} />