feat: member portal Sprint 3 — profile edit form and privacy center

- PATCH /my/profile API endpoint (displayName, hometown, currentLocation, interests, language, digestPreference, directoryVisible)
- BFF PATCH /api/my/profile route
- ProfileForm client component: interest chips, digest preference, language, directory toggle
- Settings page rewrite: profile edit + privacy center (consent list + opt-out) + session + account delete

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

apps/web/app/my/settings/page.tsx

@@ -1,8 +1,40 @@
-import { getMemberToken } from '../../_lib/api';
+import { getMemberToken, getApiBaseUrl } from '../../_lib/api';
 import { DeleteAccountButton } from './DeleteAccountButton';
 import { MemberLogoutButton } from './MemberLogoutButton';
+import { ProfileForm } from './ProfileForm';
+import Link from 'next/link';
 
-export default async function MySettingsPage() {
+interface FullProfile {
+  id: string;
+  jid: string;
+  displayName: string | null;
+  avatar: string | null;
+  hometown: string | null;
+  currentLocation: string | null;
+  interests: string[];
+  language: string;
+  digestPreference: string;
+  directoryVisible: boolean;
+  createdAt: string;
+}
+
+interface GroupSummary {
+  id: string;
+  name: string;
+  joinedAt: string;
+  consentStatus: string;
+}
+
+async function fetchDashboard(token: string) {
+  const res = await fetch(`${getApiBaseUrl()}/my/dashboard`, {
+    headers: { Authorization: `Bearer ${token}` },
+    cache: 'no-store',
+  }).catch(() => null);
+  if (!res || !res.ok) return null;
+  return res.json() as Promise<{ profile: FullProfile; groups: GroupSummary[] }>;
+}
+
+export default async function SettingsPage() {
   const token = await getMemberToken();
   if (!token) {
     return (
@@ -13,18 +45,80 @@ export default async function MySettingsPage() {
     );
   }
 
+  const data = await fetchDashboard(token);
+
   return (
-    <div className="max-w-2xl mx-auto mt-12 p-6 flex flex-col gap-6">
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-semibold text-gray-900">Profile &amp; settings</h1>
+        <Link href="/my" className="text-sm text-indigo-600 hover:underline">← Dashboard</Link>
+      </div>
+
+      {/* Profile edit */}
       <section className="rounded-xl border border-gray-200 bg-white p-5">
-        <h2 className="text-base font-semibold mb-2">Session</h2>
+        <h2 className="text-sm font-semibold text-gray-700 mb-4">Your profile</h2>
+        {data ? (
+          <ProfileForm
+            initial={{
+              displayName: data.profile.displayName,
+              hometown: data.profile.hometown,
+              currentLocation: data.profile.currentLocation,
+              interests: data.profile.interests,
+              language: data.profile.language,
+              digestPreference: data.profile.digestPreference,
+              directoryVisible: data.profile.directoryVisible,
+            }}
+          />
+        ) : (
+          <p className="text-sm text-gray-500">Could not load profile data.</p>
+        )}
+      </section>
+
+      {/* Privacy center — consent records */}
+      {data && data.groups.length > 0 && (
+        <section className="rounded-xl border border-gray-200 bg-white p-5">
+          <h2 className="text-sm font-semibold text-gray-700 mb-1">Privacy center</h2>
+          <p className="text-xs text-gray-400 mb-4">
+            You gave consent to receive messages from these groups. You can opt out at any time.
+          </p>
+          <div className="divide-y divide-gray-100">
+            {data.groups.map((g) => (
+              <div key={g.id} className="flex items-center justify-between py-3">
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{g.name}</p>
+                  <p className="text-xs text-gray-400">
+                    Since {new Date(g.joinedAt).toLocaleDateString()} · {g.consentStatus === 'GRANTED' ? 'Active' : 'Revoked'}
+                  </p>
+                </div>
+                {g.consentStatus === 'GRANTED' && (
+                  <form method="POST" action="/api/my/opt-out">
+                    <input type="hidden" name="groupId" value={g.id} />
+                    <button
+                      type="submit"
+                      className="text-xs text-red-500 hover:text-red-700 border border-red-200 rounded-md px-3 py-1.5 hover:bg-red-50"
+                    >
+                      Opt out
+                    </button>
+                  </form>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Session */}
+      <section className="rounded-xl border border-gray-200 bg-white p-5">
+        <h2 className="text-sm font-semibold text-gray-700 mb-2">Session</h2>
         <p className="text-sm text-gray-600 mb-3">
           Sign out of your member portal. Your consent records are kept until you delete your account.
         </p>
         <MemberLogoutButton />
       </section>
 
+      {/* Danger zone */}
       <section className="rounded-xl border border-red-200 bg-red-50 p-5">
-        <h2 className="text-base font-semibold text-red-800 mb-2">Delete your account</h2>
+        <h2 className="text-sm font-semibold text-red-800 mb-2">Delete your account</h2>
         <p className="text-sm text-red-700 mb-3">
           This permanently deletes your TOWER user record, all consent records, opt-out history, and
           sessions. The messages themselves stay in their original groups. This cannot be undone.