Add user profile page with name and photo support

- New `/profile` page lets users set first/last name and upload a
  profile photo (resized to 256x256 JPEG server-side via sharp, stored
  as a data URL in Postgres since the container FS is ephemeral)
- Sidebar user block now shows the profile photo (or initial-letter
  fallback) and display name, and links to `/profile`
- Migration adds `firstName`, `lastName`, `avatar` columns to User and
  backfills them from the legacy `name` field; seed updated to match
- Bump Next.js server-action body limit to 11 MB so avatar uploads up
  to the 10 MB cap aren't silently rejected with a 413
- Expose Postgres port on the host in docker-compose for local tooling

README.md

@@ -26,6 +26,9 @@ given instance automatically becomes its administrator.
     password, or delete their account
   - control how the site handles new sign-ups (see [Sign-up modes](#sign-up-modes)
     below)
+- **Profile page** (`/profile`): set a first/last name and a profile photo,
+  shown in the menu on the left (the photo replaces the initial-letter
+  avatar when set)
 
 ## Tech stack
 

app/(app)/layout.tsx

@@ -23,22 +23,36 @@ export default async function AppLayout({ children }: { children: React.ReactNod
   // board (categories/groups/todos) is fetched separately by its own page.
   // `theme` is stored as free text; the set of valid names is enforced
   // client-side (ProjectThemeSchema) so a plain assertion is safe here.
-  const projects: ProjectDTO[] = (
+  const [projects, profile] = await Promise.all([
-    await prisma.project.findMany({
+    prisma.project.findMany({
       where: { ownerId: session.user.id },
       orderBy: { createdAt: "asc" },
       select: { id: true, title: true, theme: true },
-    })
+    }),
-  ).map((p) => ({
+    // The user's profile for the sidebar's bottom user block (name + photo,
+    // both optional); the /profile page fetches the same row itself.
+    prisma.user.findUnique({
+      where: { id: session.user.id },
+      select: { firstName: true, lastName: true, avatar: true },
+    }),
+  ]);
+
+  const projectList: ProjectDTO[] = projects.map((p) => ({
     id: p.id,
     title: p.title,
     theme: p.theme as ThemeName | null,
   }));
 
+  const userName =
+    [profile?.firstName, profile?.lastName]
+      .filter((part): part is string => Boolean(part && part.trim()))
+      .map((part) => part.trim())
+      .join(" ") || null;
+
   return (
     <SideNavProvider>
       <ScheduledPanelProvider>
-        <ProjectsProvider initialProjects={projects}>
+        <ProjectsProvider initialProjects={projectList}>
           <BoardViewProvider>
             <HoldOnCompleteProvider>
             {/* Responsive shell:
@@ -51,7 +65,12 @@ export default async function AppLayout({ children }: { children: React.ReactNod
                   toolbar instead of the stale 100vh. */}
             <div className="flex h-dvh flex-col md:h-screen md:min-w-[860px] md:flex-row md:overflow-x-auto">
               <MobileTopBar />
-              <SideNav userEmail={session.user.email ?? ""} role={session.user.role} />
+              <SideNav
+                userEmail={session.user.email ?? ""}
+                userName={userName}
+                avatar={profile?.avatar ?? null}
+                role={session.user.role}
+              />
               <main className="min-h-0 flex-1 overflow-auto">{children}</main>
               <ScheduledPanel />
             </div>

app/(app)/profile/page.tsx

@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation";
+
+import { auth } from "@/auth";
+import { prisma } from "@/lib/db";
+import type { ProfileDTO } from "@/types/profile";
+import { ProfileForm } from "@/components/profile/profile-form";
+
+export default async function ProfilePage() {
+  const session = await auth();
+  // Defense in depth: proxy.ts already redirects unauthenticated requests,
+  // but every protected data boundary should check for itself too.
+  if (!session?.user) redirect("/login");
+
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { firstName: true, lastName: true, avatar: true },
+  });
+  if (!user) redirect("/login");
+
+  const profile: ProfileDTO = {
+    firstName: user.firstName,
+    lastName: user.lastName,
+    avatar: user.avatar,
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-4 p-4">
+      <div className="px-1">
+        <h1 className="font-heading text-xl font-bold tracking-tight">Profile</h1>
+        <p className="mt-0.5 text-[13px] text-muted-foreground">
+          Your name and photo, shown in the menu on the left.
+        </p>
+      </div>
+
+      <ProfileForm initial={profile} />
+    </div>
+  );
+}

components/nav/side-nav.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { ChevronLeft, ChevronRight, LogOut, NotebookPen } from "lucide-react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 
@@ -14,6 +15,42 @@ import { ThemeToggle } from "@/components/theme/theme-toggle";
 import { logout } from "@/lib/actions/auth";
 import { Role } from "@/lib/generated/prisma/enums";
 
+/**
+ * The signed-in user's circle at the bottom of the nav: their photo when
+ * they've set one, otherwise the letter fallback -- and a link to the
+ * Profile page either way.
+ */
+function UserAvatar({
+  userName,
+  userEmail,
+  avatar,
+  sizeClass,
+}: {
+  userName: string | null;
+  userEmail: string;
+  avatar: string | null;
+  sizeClass: string;
+}) {
+  if (avatar) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element -- data-URL avatars, no image-optimization pipeline in this self-hosted app
+      <img
+        src={avatar}
+        alt={userName ?? userEmail}
+        className={`${sizeClass} shrink-0 rounded-full object-cover`}
+      />
+    );
+  }
+  const letter = (userName?.trim()[0] ?? userEmail[0] ?? "?").slice(0, 1);
+  return (
+    <span
+      className={`${sizeClass} flex shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary uppercase`}
+    >
+      {letter}
+    </span>
+  );
+}
+
 /**
  * The actual nav content, shared by the desktop aside and the mobile
  * hamburger drawer so the two never drift apart. `collapsed` is always
@@ -22,11 +59,15 @@ import { Role } from "@/lib/generated/prisma/enums";
 function SideNavContent({
   collapsed,
   userEmail,
+  userName,
+  avatar,
   role,
   themeMenu,
 }: {
   collapsed: boolean;
   userEmail: string;
+  userName: string | null;
+  avatar: string | null;
   role: Role;
   // Where the theme picker menu opens from its trigger -- right of the
   // trigger in the desktop sidebar, below it in the mobile drawer (a
@@ -34,6 +75,9 @@ function SideNavContent({
   themeMenu: { side: "right" | "bottom"; align: "start" | "end" };
 }) {
   const adminItem = role === Role.ADMIN ? [ADMIN_NAV_ITEM] : [];
+  // The user's display label: their name when set, otherwise the email
+  // (same as before profiles existed).
+  const userLabel = userName || userEmail;
 
   return (
     <>
@@ -85,11 +129,38 @@ function SideNavContent({
       </div>
 
       <div className={cn("flex items-center gap-2 border-t px-4 py-3", collapsed && "justify-center px-0")}>
-        <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary uppercase">
+        {collapsed ? (
-          {(userEmail[0] ?? "?").slice(0, 1)}
+          <Tooltip>
-        </span>
+            <TooltipTrigger
-        {!collapsed && (
+              render={
-          <span className="truncate text-[13px] font-medium text-muted-foreground">{userEmail}</span>
+                <Link href="/profile" aria-label={`View profile (${userLabel})`} />
+              }
+            >
+              <UserAvatar
+                userName={userName}
+                userEmail={userEmail}
+                avatar={avatar}
+                sizeClass="size-7"
+              />
+            </TooltipTrigger>
+            <TooltipContent side="right">{userLabel}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Link
+            href="/profile"
+            className="flex min-w-0 flex-1 items-center gap-2"
+            aria-label="View profile"
+          >
+            <UserAvatar
+              userName={userName}
+              userEmail={userEmail}
+              avatar={avatar}
+              sizeClass="size-7"
+            />
+            <span className="truncate text-[13px] font-medium text-muted-foreground">
+              {userLabel}
+            </span>
+          </Link>
         )}
       </div>
     </>
@@ -100,7 +171,17 @@ function SideNavContent({
  * Mobile (< md) hamburger drawer: the full side nav in a left sheet.
  * Tapping any link closes it; the backdrop and Escape close it too.
  */
-function MobileNavDrawer({ userEmail, role }: { userEmail: string; role: Role }) {
+function MobileNavDrawer({
+  userEmail,
+  userName,
+  avatar,
+  role,
+}: {
+  userEmail: string;
+  userName: string | null;
+  avatar: string | null;
+  role: Role;
+}) {
   const { mobileOpen, setMobileOpen } = useSideNav();
 
   return (
@@ -122,14 +203,31 @@ function MobileNavDrawer({ userEmail, role }: { userEmail: string; role: Role })
           )}
         >
           <DialogPrimitive.Title className="sr-only">Menu</DialogPrimitive.Title>
-          <SideNavContent collapsed={false} userEmail={userEmail} role={role} themeMenu={{ side: "bottom", align: "end" }} />
+          <SideNavContent
+            collapsed={false}
+            userEmail={userEmail}
+            userName={userName}
+            avatar={avatar}
+            role={role}
+            themeMenu={{ side: "bottom", align: "end" }}
+          />
         </DialogPrimitive.Popup>
       </DialogPrimitive.Portal>
     </DialogPrimitive.Root>
   );
 }
 
-export function SideNav({ userEmail, role }: { userEmail: string; role: Role }) {
+export function SideNav({
+  userEmail,
+  userName,
+  avatar,
+  role,
+}: {
+  userEmail: string;
+  userName: string | null;
+  avatar: string | null;
+  role: Role;
+}) {
   const { collapsed, toggle } = useSideNav();
 
   return (
@@ -140,7 +238,14 @@ export function SideNav({ userEmail, role }: { userEmail: string; role: Role })
           collapsed ? "w-16" : "w-60"
         )}
       >
-        <SideNavContent collapsed={collapsed} userEmail={userEmail} role={role} themeMenu={{ side: "right", align: "start" }} />
+        <SideNavContent
+          collapsed={collapsed}
+          userEmail={userEmail}
+          userName={userName}
+          avatar={avatar}
+          role={role}
+          themeMenu={{ side: "right", align: "start" }}
+        />
 
         <div className={cn("flex border-t px-2 py-1.5", collapsed ? "justify-center" : "justify-end")}>
           <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle sidebar">
@@ -149,7 +254,7 @@ export function SideNav({ userEmail, role }: { userEmail: string; role: Role })
         </div>
       </aside>
 
-      <MobileNavDrawer userEmail={userEmail} role={role} />
+      <MobileNavDrawer userEmail={userEmail} userName={userName} avatar={avatar} role={role} />
     </>
   );
 }

components/profile/profile-form.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { Camera, Loader2, Trash2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  removeAvatar as removeAvatarAction,
+  updateProfileNames,
+  uploadAvatar as uploadAvatarAction,
+} from "@/lib/actions/profile";
+import type { ProfileDTO } from "@/types/profile";
+
+// Kept in sync with lib/actions/profile.ts (the server re-checks both).
+const MAX_AVATAR_BYTES = 10 * 1024 * 1024;
+const ACCEPTED_AVATAR_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/webp",
+  "image/gif",
+];
+
+export function ProfileForm({ initial }: { initial: ProfileDTO }) {
+  const [firstName, setFirstName] = useState(initial.firstName ?? "");
+  const [lastName, setLastName] = useState(initial.lastName ?? "");
+  // What's currently saved in the DB -- the "Save" button is only enabled
+  // while the inputs differ from this.
+  const [savedNames, setSavedNames] = useState({
+    firstName: initial.firstName ?? "",
+    lastName: initial.lastName ?? "",
+  });
+  const [avatar, setAvatar] = useState<string | null>(initial.avatar);
+  const [savingNames, setSavingNames] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const namesDirty =
+    firstName.trim() !== savedNames.firstName ||
+    lastName.trim() !== savedNames.lastName;
+
+  async function handleSaveNames() {
+    setSavingNames(true);
+    try {
+      await updateProfileNames(firstName, lastName);
+      setSavedNames({ firstName, lastName });
+      toast.success("Name saved.");
+    } catch {
+      toast.error("Couldn't save your name. Try again.");
+    } finally {
+      setSavingNames(false);
+    }
+  }
+
+  async function handleFileChosen(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    event.target.value = ""; // allow re-picking the same file
+    if (!file) return;
+
+    // Same rules as the server action -- check early so a bad file never
+    // leaves the browser.
+    if (!ACCEPTED_AVATAR_TYPES.includes(file.type)) {
+      toast.error("Please choose a JPEG, PNG, WebP, or GIF image.");
+      return;
+    }
+    if (file.size > MAX_AVATAR_BYTES) {
+      toast.error("Image must be 10 MB or smaller.");
+      return;
+    }
+
+    setUploading(true);
+    try {
+      const result = await uploadAvatarAction(file);
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      setAvatar(result.avatar ?? null);
+      toast.success("Profile photo updated.");
+    } catch (error) {
+      // A thrown (rather than returned) error is a framework-level
+      // rejection -- typically Next.js' server-action body limit 413ing
+      // the file before it reaches the action. Say so instead of the
+      // generic "try another image", which is misleading here.
+      if (error instanceof Error && /body exceeded|413/i.test(error.message)) {
+        toast.error(
+          "Image is too large for the server to accept. Try one under 10 MB."
+        );
+      } else {
+        toast.error("Couldn't upload that photo. Try again.");
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function handleRemoveAvatar() {
+    setUploading(true);
+    try {
+      await removeAvatarAction();
+      setAvatar(null);
+      toast.success("Profile photo removed.");
+    } catch {
+      toast.error("Couldn't remove the photo. Try again.");
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  const initials = (firstName.trim()[0] ?? lastName.trim()[0] ?? "?").toUpperCase();
+
+  return (
+    <Card className="max-w-xl">
+      <CardContent className="space-y-5">
+        {/* Photo */}
+        <div className="flex items-center gap-4">
+          {avatar ? (
+            // eslint-disable-next-line @next/next/no-img-element -- data-URL avatar, no image-optimization pipeline in this self-hosted app
+            <img
+              src={avatar}
+              alt="Profile"
+              className="size-16 shrink-0 rounded-full object-cover"
+            />
+          ) : (
+            <span className="flex size-16 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xl font-bold text-primary">
+              {initials}
+            </span>
+          )}
+          <div className="flex flex-wrap items-center gap-2">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPTED_AVATAR_TYPES.join(",")}
+              className="hidden"
+              onChange={handleFileChosen}
+              disabled={uploading}
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+            >
+              {uploading ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Camera className="size-3.5" />
+              )}
+              {uploading ? "Updating…" : avatar ? "Change photo" : "Add photo"}
+            </Button>
+            {avatar && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemoveAvatar}
+                disabled={uploading}
+              >
+                <Trash2 className="size-3.5" />
+                Remove
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Name */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="profile-first-name">First name</Label>
+            <Input
+              id="profile-first-name"
+              value={firstName}
+              maxLength={60}
+              autoComplete="given-name"
+              placeholder="Alex"
+              onChange={(e) => setFirstName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && namesDirty && !savingNames && handleSaveNames()}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="profile-last-name">Last name</Label>
+            <Input
+              id="profile-last-name"
+              value={lastName}
+              maxLength={60}
+              autoComplete="family-name"
+              placeholder="Fertig"
+              onChange={(e) => setLastName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && namesDirty && !savingNames && handleSaveNames()}
+            />
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter>
+        <Button onClick={handleSaveNames} disabled={!namesDirty || savingNames}>
+          {savingNames ? (
+            <>
+              <Loader2 className="size-3.5 animate-spin" />
+              Saving…
+            </>
+          ) : (
+            "Save name"
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

docker-compose.yml

@@ -9,6 +9,11 @@ services:
     volumes:
       # Local filesystem bind mount, not a named Docker volume.
       - ./data/postgres:/var/lib/postgresql/data
+    ports:
+      # Exposed on the host so host-side tooling (prisma migrate/dev, npm run
+      # dev with the .env's localhost DATABASE_URL) can reach it. The app
+      # container still connects over the compose network's "db" hostname.
+      - "${DB_PORT:-5432}:5432"
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
       interval: 5s

lib/actions/profile.ts

@@ -0,0 +1,103 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import sharp from "sharp";
+
+import { prisma } from "@/lib/db";
+import { requireUserId } from "@/lib/auth-helpers";
+import { ProfileNameSchema } from "@/lib/validation/profile";
+
+/**
+ * Refresh both the Profile page (its form's initial values) and the (app)
+ * layout (the sidebar shows the user's name/photo) after a change.
+ * "layout" type invalidates the whole (app) tree -- see
+ * next/docs revalidatePath "Revalidating a Layout path".
+ */
+function revalidateProfile() {
+  revalidatePath("/profile");
+  revalidatePath("/", "layout");
+}
+
+export type ProfileResult = { error?: string };
+
+/**
+ * Sets the user's first and last name (either may be blank). Blank values
+ * are stored as null so "cleared" and "never set" mean the same thing.
+ */
+export async function updateProfileNames(
+  firstName: string,
+  lastName: string
+): Promise<ProfileResult> {
+  const userId = await requireUserId();
+  const parsed = ProfileNameSchema.parse({ firstName, lastName });
+
+  await prisma.user.update({
+    where: { id: userId },
+    data: {
+      firstName: parsed.firstName || null,
+      lastName: parsed.lastName || null,
+    },
+  });
+
+  revalidateProfile();
+  return {};
+}
+
+const MAX_AVATAR_BYTES = 10 * 1024 * 1024;
+const ALLOWED_AVATAR_TYPES = new Set([
+  "image/jpeg",
+  "image/png",
+  "image/webp",
+  "image/gif",
+]);
+// Avatars render at most a couple of dozen CSS pixels; 256x256 covers
+// retina without bloat. Re-encoded as JPEG so every row stored in the DB
+// has the same shape regardless of the upload's original format.
+const AVATAR_SIZE = 256;
+
+export type UploadAvatarResult = { avatar?: string; error?: string };
+
+/**
+ * Stores the user's profile photo. The upload is resized to 256x256
+ * (cover crop, EXIF-rotated) and re-encoded as JPEG server-side, then
+ * saved as a data URL on the User row -- the app's container filesystem
+ * is ephemeral (only the Postgres volume survives deploys), so the image
+ * lives in the database rather than on disk.
+ */
+export async function uploadAvatar(file: File): Promise<UploadAvatarResult> {
+  const userId = await requireUserId();
+
+  if (!ALLOWED_AVATAR_TYPES.has(file.type)) {
+    return { error: "Please choose a JPEG, PNG, WebP, or GIF image." };
+  }
+  if (file.size === 0) return { error: "That file is empty." };
+  if (file.size > MAX_AVATAR_BYTES) {
+    return { error: "Image must be 10 MB or smaller." };
+  }
+
+  let encoded: Buffer;
+  try {
+    encoded = await sharp(Buffer.from(await file.arrayBuffer()))
+      .rotate() // honor EXIF orientation from phones' photos
+      .resize(AVATAR_SIZE, AVATAR_SIZE, { fit: "cover" })
+      .jpeg({ quality: 85 })
+      .toBuffer();
+  } catch {
+    return { error: "That doesn't look like a valid image." };
+  }
+
+  const avatar = `data:image/jpeg;base64,${encoded.toString("base64")}`;
+  await prisma.user.update({ where: { id: userId }, data: { avatar } });
+
+  revalidateProfile();
+  return { avatar };
+}
+
+export async function removeAvatar(): Promise<ProfileResult> {
+  const userId = await requireUserId();
+
+  await prisma.user.update({ where: { id: userId }, data: { avatar: null } });
+
+  revalidateProfile();
+  return {};
+}

lib/validation/profile.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+const NamePartSchema = z.string().trim().max(60, "Must be 60 characters or fewer");
+
+export const ProfileNameSchema = z.object({
+  firstName: NamePartSchema,
+  lastName: NamePartSchema,
+});
+export type ProfileName = z.infer<typeof ProfileNameSchema>;

next.config.ts

@@ -7,6 +7,15 @@ const nextConfig: NextConfig = {
   // container start, not imported by app code). The Dockerfile instead
   // copies the full `node_modules` into the runtime image, which is a
   // simpler and more reliable trade for a single self-hosted instance.
+  experimental: {
+    serverActions: {
+      // Default is 1 MB, which silently 413s profile-photo uploads larger
+      // than that before the action even runs (the client only sees a
+      // generic failure). Allow the profile action's 10 MB max file plus
+      // room for multipart overhead; other actions send tiny bodies.
+      bodySizeLimit: "11mb",
+    },
+  },
 };
 
 export default nextConfig;

prisma/migrations/20260830170317_add_user_profile/migration.sql

@@ -0,0 +1,16 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "avatar" TEXT,
+ADD COLUMN     "firstName" TEXT,
+ADD COLUMN     "lastName" TEXT;
+
+-- Backfill: existing accounts only have the single `name` captured at
+-- sign-up. Split it into firstName (first word) and lastName (the rest) so
+-- the Profile page starts from what the user already gave us instead of a
+-- blank form. Single-word names (e.g. "Cher") get firstName only.
+UPDATE "User"
+SET "firstName" = split_part("name", ' ', 1)
+WHERE "name" IS NOT NULL AND btrim("name") <> '';
+
+UPDATE "User"
+SET "lastName" = trim(regexp_replace("name", '^\S+\s+', ''))
+WHERE "name" IS NOT NULL AND "name" ~ '^\S+\s+\S+';

prisma/schema.prisma

@@ -34,7 +34,18 @@ model User {
   id           String   @id @default(cuid())
   email        String   @unique
   passwordHash String
+  // Legacy single name field, captured at sign-up. Display and the Admin
+  // page still use it; the Profile page manages firstName/lastName below.
   name         String?
+  // Profile page fields. Null = the user hasn't set them.
+  firstName    String?
+  lastName     String?
+  // Profile photo, stored as a data URL (base64 JPEG) rather than a file on
+  // disk: this app's container filesystem is ephemeral (only the Postgres
+  // volume persists across deploys), so the DB is the one place it can live.
+  // Always server-generated from the user's upload (resized to 256x256 via
+  // sharp in lib/actions/profile.ts), never stored as the raw upload.
+  avatar       String?
   // The very first person to sign up becomes ADMIN regardless of
   // signupMode (the site needs at least one admin to bootstrap). Everyone
   // after that gets USER (signupMode OPEN) or PENDING (APPROVED/CONFIRMED),

prisma/seed.ts

@@ -17,6 +17,11 @@ async function main() {
       email: "dev@example.com",
       passwordHash,
       name: "Dev User",
+      // Mirrors the migration's backfill of the legacy `name` into the
+      // profile fields (first word / rest) so seeded accounts look the
+      // same as ones that predate the Profile page.
+      firstName: "Dev",
+      lastName: "User",
       role: Role.ADMIN,
     },
   });

types/profile.ts

@@ -0,0 +1,7 @@
+/** The signed-in user's profile as rendered by the Profile page and the
+ * sidebar -- nulls mean "not set". */
+export interface ProfileDTO {
+  firstName: string | null;
+  lastName: string | null;
+  avatar: string | null;
+}