Page: Profile Settings
Code: SPRF Route: /settings/profile Access: Authenticated Priority: P1 Test Script: scripts/page-tests/test-SPRF.sh Components: src/components/settings/ProfileSettings.tsx
Purpose
Allow users to edit their profile information including name, handle, bio, social links, and privacy settings.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
| SETT | "Profile" menu item | From main settings page |
| PROF | "Edit Profile" button | From public profile view |
Outgoing (users navigate to)
| Target | Trigger | Notes |
| SETT | Breadcrumb navigation | Return to settings |
| PROF | "View Profile" link | Preview public profile |
Data Requirements
| Entity | Fields Used | Purpose |
| users | name, handle, title, bio, website, location, linkedin_url, twitter_url, youtube_url, privacy_public, avatar_url | Edit and display profile fields |
Sections
Header
- • Page title: "Profile Settings"
- • Description of purpose
Basic Information
- • Display name input (required)
- • Handle input with @ prefix
- • Title/headline input
- • Bio textarea with 500 char limit
Contact & Location
- • Website URL input
- • Location text input
Social Links
- • LinkedIn URL input
- • Twitter/X URL input
- • YouTube URL input
Privacy
- • Public profile toggle with description
User Stories Fulfilled
- • US-S008
- • US-S047
- • US-P005
States & Variations
| State | Description |
| Loading | Skeleton animation while fetching profile |
| Error | Red border, error message, Retry button |
| Loaded | Form fields populated with current values |
| Saving | Save button shows spinner, disabled |
| Validation Error | Error list displayed above form |
| Save Success | Green success message |
Mobile Considerations
- • Full-width inputs on mobile
- • Section cards stack vertically
- • Save button remains accessible
Error Handling
| Error | Display |
| Failed to load profile | "Unable to load profile" with retry |
| Validation errors | List of errors above form |
| Handle taken | "This handle is already taken" |
| Invalid URL | "[field] must be a valid URL" |
Analytics Events
| Event | Trigger | Data |
page_view | Page load | profile_settings |
profile_save | Save button clicked | fields_changed |
Notes
- • All users can edit their profile
- • Handle must be unique across platform
- • Avatar upload handled via separate endpoint
- • URL fields validated on save
Features
Avatar
- ○
Avatar preview display [US-S008]
- ○
Avatar upload with drag-and-drop [US-S008]
- ○
Avatar crop/resize before upload [US-S008]
Basic Information
- ✓
Display name input [US-S008]
- ✓
Handle input with uniqueness check [US-S008]
- ✓
Title/headline input [US-S008]
- ✓
Bio textarea with character count [US-S008]
Contact & Location
- ✓
Website URL input [US-S008]
- ✓
Location input [US-S008]
Social Links
- ✓
LinkedIn URL input [US-S008]
- ✓
Twitter/X URL input [US-S008]
- ✓
YouTube URL input [US-S008]
Privacy
- ✓
Public profile toggle [US-S047]
UX Enhancements
- ○
Collapsible sections
- ○
Auto-dismiss success message after 3 seconds
- ○
View my profile link to preview public profile [US-P005]
- ○
Unsaved changes warning on navigation
Interactive Elements
Buttons: 2/2 active
Links: 1/1 active
Buttons
| Element | Component | Action | Status |
| Retry | ProfileSettings | fetchProfile() - Refetch data | active |
| Save Changes | ProfileSettings | handleSave() - PATCH profile | active |
Links
Navigation
| Element | Target | Status |
| Settings breadcrumb | /settings | active |
Target Pages Status
| Target | Page Code | Status |
/settings | SETT | Implemented |
Test Coverage
Component ✓
Page ○
SSR ○
API 3/3
✓ Ready
Script: scripts/page-tests/test-SPRF.sh
Page Test: tests/pages/settings/profile.test.tsx ○
Component Test: tests/components/settings/ProfileSettings.test.tsx ✓
API Tests
| Endpoint | Test File | Status |
GET /api/me/profile | tests/api/me/profile.test.ts | ✓ tested |
PATCH /api/me/profile | tests/api/me/profile.test.ts | ✓ tested |
GET /api/users/check-handle | tests/api/users/check-handle.test.ts | ✓ tested |