Phase 7 Artifact — Settings / Preferences Page Design

Status: Draft Last Updated: August 29, 2026 Tags: wireframe, ux, settings, preferences, user-profile

---

Summary

Settings/preferences page lets authenticated users control their account: display name, bio, avatar, notification frequency, content category interests, privacy toggles, and a danger zone for account deletion or full unsubscribe.

---

Route & Access

• Route: /settings (authenticated users only; redirect to /login if unauthenticated)
• Parent layout: same as profile page — nav + main outlet + footer
• Method: form POST or PATCH to /api/users/:id/settings

---

Component Sketch

┌─────────────────────────────────────────────────────┐
│  [Logo]              [Nav]            [User Avatar] │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ← Back to Profile                                  │
│                                                     │
│  ┌───────────────────────────────────────────────┐  │
│  │  Preferences                              [Save]│  │
│  └───────────────────────────────────────────────┘  │
│                                                     │
│  ┌─ Identity ─────────────────────────────────────┐  │
│  │  Display Name   [___________________]          │  │
│  │  Bio            [___________________]          │  │
│  │  Avatar URL     [___________________]          │  │
│  │  [Avatar preview circle]                       │  │
│  └────────────────────────────────────────────────┘  │
│                                                     │
│  ┌─ Notifications ────────────────────────────────┐  │
│  │  Email frequency  (○ None  ● Weekly  ○ Daily)│  │
│  │  Newsletter opt-in  [✓ subscribed]             │  │
│  └────────────────────────────────────────────────┘  │
│                                                     │
│  ┌─ Content Interests ────────────────────────────┐  │
│  │  Categories I follow:                          │  │
│  │  [✓] Infrastructure  [ ] AI/ML  [✓] DevOps   │  │
│  │  [✓] Security       [ ] Privacy  [ ] Philosophy│  │
│  └────────────────────────────────────────────────┘  │
│                                                     │
│  ┌─ Privacy ─────────────────────────────────────┐  │
│  │  Public profile  [Toggle: on/off]              │  │
│  │  Show email publicly  [Toggle: off]           │  │
│  └────────────────────────────────────────────────┘  │
│                                                     │
│  ┌─ Danger Zone ────────────────────────────────┐  │
│  │  [Unsubscribe from all email]                │  │
│  │  [Delete my account] (requires confirmation)  │  │
│  └────────────────────────────────────────────────┘  │
│                                                     │
└─────────────────────────────────────────────────────┘

---

Fields

Section	Field	Type	Validation	Default
Identity	displayName	text	2–50 chars	—
Identity	bio	textarea	max 280 chars	—
Identity	avatarUrl	url	valid URL, image host	—
Notifications	emailFrequency	radio	none / weekly / daily	weekly
Notifications	newsletterOptIn	checkbox	boolean	true
Content	followedCategories	multi-checkbox	array of category IDs	[]
Privacy	publicProfile	toggle	boolean	false
Privacy	showEmailPublicly	toggle	boolean	false
Danger	unsubscribe	button (POST)	—	—
Danger	deleteAccount	button (DELETE)	confirmation dialog	—

---

States

• Loading: skeleton form placeholders
• Save success: green banner "Preferences saved" with timestamp; auto-dismiss after 4s
• Save error: red inline error on the failed field(s); form retains values
• Unsubscribe confirm: modal "You will no longer receive any emails. Resubscribe anytime." + [Cancel] [Unsubscribe]
• Delete account confirm: modal with text input "Type DELETE to confirm" + [Cancel] [Delete Forever]

---

Desktop Layout

Two-column layout: form on the left (2/3), sticky summary panel on the right (1/3) showing current avatar, display name, and a "Member since" timestamp.

---

Mobile Layout

Full-width single column; sections collapse to accordions to reduce scroll; Danger zone always at the bottom.

---

Implementation Notes

• PUT /api/users/:id/settings endpoint (or extend existing profile endpoint)
• Categories pulled from GET /api/categories on page load
• Avatar preview: <img src={avatarUrl} onError={...}> with fallback initials
• Unsubscribe: soft-delete (set status=UNSUBSCRIBED on Subscriber), keep User record
• Delete account: hard cascade with confirmation; clears User + Sessions + Subscriptions

---

Next Steps

1. Implement PUT /api/users/:id/settings in vite.config.ts
2. Add /settings route + SettingsPage component in src/main.tsx
3. Add SettingsSection and DangerZoneSection components
4. Wire categories API and render category checkboxes
5. Add unsubsribe + delete-account confirmation modals

Sources & Related

• kb/wireframes.md — existing wireframe conventions
• kb/tasks.md Phase 7 — settings/preferences page task
• kb/fogserv/deployment-runbook.md — for any settings tied to infra config

Change Log

• August 29, 2026 — Created component sketch, field table, states, and implementation notes for settings/preferences page.