-
Notifications
You must be signed in to change notification settings - Fork 0
feat(profile): Create preferences UI #313
Copy link
Copy link
Open
Labels
enhancementNew feature or requestNew feature or request
Description
Summary
Create the user interface for viewing and editing preferences.
Parent Epic
Part of #309 (User Profiles & Personalization)
Dependencies
- Depends on: User profile persistence issue
Deliverables
Settings Access
- Add settings/gear icon button to dashboard header
- Open preferences modal on click
Preferences Modal
- Create
src/main/frontend/components/PreferencesModal.tsx - Form fields for:
- Callsign input (optional, with validation feedback)
- Grid square input (with Maidenhead validation feedback)
- Band selection (multi-select checkboxes: 160m, 80m, 40m, 30m, 20m, 17m, 15m, 12m, 10m, 6m, 2m, 70cm)
- Mode selection (multi-select checkboxes: SSB, CW, FT8, FT4, RTTY, AM, FM, Digital)
- "Login to sync across devices" prompt for anonymous users
- Save/Cancel buttons
- Loading states during save
- Success/error feedback
Styling
- Create
src/main/frontend/components/PreferencesModal.css - Styling consistent with dashboard theme
- Responsive design (works on mobile)
- Accessible (keyboard navigation, ARIA labels)
Integration
- Update
DashboardView.tsxwith settings button in header - Wire up to
usePreferenceshook
UI Mockup
┌─────────────────────────────────────────────────┐
│ ⚙️ Preferences [X] │
├─────────────────────────────────────────────────┤
│ │
│ Callsign (optional) │
│ ┌─────────────────────────────────────────────┐ │
│ │ W1AW │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ Grid Square │
│ ┌─────────────────────────────────────────────┐ │
│ │ FN31pr ✓ Valid │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ Preferred Bands │
│ ☑ 20m ☑ 40m ☐ 80m ☐ 15m ☑ 2m ... │
│ │
│ Preferred Modes │
│ ☑ SSB ☑ FT8 ☐ CW ☐ FM ... │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 💡 Login with GitHub to sync across devices │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ [Cancel] [Save Preferences] │
└─────────────────────────────────────────────────┘
Acceptance Criteria
- Users can view and edit preferences through the UI
- Validation feedback shown for invalid inputs
- Changes persisted to LocalStorage (and DB if logged in)
- Anonymous users see "login to sync" prompt
- Modal accessible via keyboard (Escape to close, Tab navigation)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request