feat: add user profile and settings module

[Chigybillionz]

Pull Request: Feature — User Profile and Settings Module

Closes #29

Summary

Adds a full User Profile & Settings module so authenticated users can view their profile, edit their information (display name, avatar, notification preferences), and persist those changes client-side.

What's Included

Types ( src/types/ )

• src/types/profile.ts — new UserProfile and UserPreferences interfaces (extends the existing User type with avatar URL, display name, and notification/contact preferences).
• Updated src/types/index.ts to re-export the new profile types.

Service layer ( src/services/ )

• src/services/profileService.ts — typed CRUD functions ( getProfile , updateProfile , uploadAvatar ) backed by localStorage with simulated API latency, following the same patterns as authService.ts and notificationService.ts .

Components ( src/components/ )

• ProfileView.tsx — read-only view of the user's profile (name, email, avatar, joined date) with an "Edit profile" CTA.
• ProfileEdit.tsx — form component with client-side validation (required fields, name length limits), avatar upload with client-side preview via FileReader , and save/cancel actions.
• AvatarUpload.tsx — reusable avatar picker with image preview, file-type validation (JPEG/PNG/WebP, max 2 MB), and a remove/clear option.

Pages ( src/app/ )

• src/app/profile/page.tsx — Next.js page shell (Server Component with metadata).
• src/app/profile/ProfileClient.tsx — client component that switches between ProfileView and ProfileEdit states.

Hooks ( src/hooks/ )

• src/hooks/useProfile.ts — context provider + hook for profile state management ( useProfile ), mirroring the useAuth pattern.

Settings integration

• Updated src/app/settings/SettingsClient.tsx to include the profile section above the existing notification preferences panel.
• Updated src/components/Navbar.tsx to show the user's avatar (if uploaded) next to their name in the header, with a link to /profile .

Tests ( src/components/tests/ and src/tests/ )

• ProfileView.test.tsx — renders profile fields, shows placeholder avatar for users without one, links to edit mode.
• ProfileEdit.test.tsx — validates required fields, rejects oversized images, calls save handler with correct payload.
• profileService.test.ts — tests CRUD operations, avatar upload simulation, and preference persistence.

Changes at a Glance

┌────────────────┬────────────────────────────────────────────────────────────────────────────────────┐
│ Area │ Files │
├────────────────┼────────────────────────────────────────────────────────────────────────────────────┤
│ New types │ src/types/profile.ts │
│ New service │ src/services/profileService.ts │
│ New components │ ProfileView.tsx, ProfileEdit.tsx, AvatarUpload.tsx │
│ New page │ src/app/profile/page.tsx, src/app/profile/ProfileClient.tsx │
│ New hook │ src/hooks/useProfile.ts │
│ Modified │ src/types/index.ts, src/app/settings/SettingsClient.tsx, src/components/Navbar.tsx │
│ Tests │ ProfileView.test.tsx, ProfileEdit.test.tsx, profileService.test.ts │
└────────────────┴────────────────────────────────────────────────────────────────────────────────────┘

Acceptance Criteria Checklist

[x] Users can view their current profile and update fields successfully.
[x] Avatar uploads show client preview and persist after save.
[x] Preferences are saved and used by the app (notification toggles affect behavior via the existing NotificationPreferences integration).
[x] Validation and error handling present; unit tests cover the profile save flow.

Testing

// bash
npm run type-check # passes
npm test # all new + existing tests green
npm run build # builds without errors

Notes for Reviewers

• Avatar storage is client-side only (localStorage + FileReader data URL) for now. A future backend endpoint can replace profileService.uploadAvatar with a real multipart upload.
• The profile feature is gated behind useAuth().isAuthenticated — unauthenticated users are redirected via the existing ProtectedRoute wrapper.
• No new dependencies were added. All styling uses the existing Tailwind + brand-* token system.