Skip to content

feat(profile): Create preferences UI #313

@arunderwood

Description

@arunderwood

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.tsx with settings button in header
  • Wire up to usePreferences hook

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions