Skip to content

Feat: Settings & Preferences Module - #41

Open
uadamu00005-netizen wants to merge 13 commits into
Chulilee:mainfrom
uadamu00005-netizen:feat/Settings
Open

Feat: Settings & Preferences Module#41
uadamu00005-netizen wants to merge 13 commits into
Chulilee:mainfrom
uadamu00005-netizen:feat/Settings

Conversation

@uadamu00005-netizen

Copy link
Copy Markdown

Closes #24

Summary

Adds a full Settings & Preferences page with four sections (Account, Privacy, Notifications, Display), app-wide dark mode support, and complete account management functionality.

What's new

Settings page (/settings)

  • Sticky sidebar navigation with IntersectionObserver-based active section tracking
  • Four sections: Account, Privacy, Notifications, Display

Account management (new authService methods)

  • updateAccount(AccountUpdate) — update name and email, syncs localStorage user registry
  • changePassword(PasswordChange) — validates current password, enforces 8-char minimum
  • deleteAccount() — removes user, clears session and profile data (with typed "DELETE" confirmation)

Privacy settings

  • Toggle profile visibility (showProfile) and listing visibility (showListings)
  • Persisted via profileService and stored across sessions

Display settings

  • Three-way theme picker: Light / Dark / System (follows OS preference)
  • Compact layout toggle (denser spacing)
  • System preference listener updates theme in real time

Dark mode infrastructure

  • darkMode: "class" in Tailwind config
  • CSS custom properties for --brand-accent / --brand-muted with .dark overrides
  • usePreferences hook resolves effective theme and applies dark class to <html>
  • ThemeProvider wired into Providers for app-wide theme application
  • dark: variant classes on all new settings components

Files changed

File Change
src/types/auth.ts Added AccountUpdate, PasswordChange interfaces
src/types/profile.ts Added compactLayout, showProfile, showListings to UserPreferences
src/services/authService.ts Added updateAccount(), changePassword(), deleteAccount()
src/services/profileService.ts updateProfile() handles new preference fields
src/hooks/usePreferences.ts New — theme resolution, preference read/write, system listener
src/components/ThemeProvider.tsx New — applies resolved theme on mount
src/components/settings/AccountSettings.tsx New — account details, password, danger zone
src/components/settings/PrivacySettings.tsx New — profile/listing visibility toggles
src/components/settings/DisplaySettings.tsx New — theme picker, compact layout
src/app/settings/SettingsClient.tsx Rewritten with sticky sidebar nav + 4 sections
src/app/settings/page.tsx Widened layout for sidebar
src/components/Providers.tsx Added ThemeProvider wrapper
src/app/globals.css Brand color variables + dark mode overrides
tailwind.config.ts darkMode: "class" + brand color namespace
src/components/__tests__/ProfileEdit.test.tsx Updated fixture with new fields
src/components/__tests__/ProfileView.test.tsx Updated fixture with new fields

Type-check

✅ Zero new errors — all 7 remaining errors are pre-existing (lucide-react, mock-socket missing type declarations)

Tests

✅ 140/140 tests pass (6 pre-existing component test suite failures from missing @testing-library/dom transitive dependency)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Settings & Preferences pages

1 participant