feat: notification preferences toggle card

[kevinrutledge]

What needs to be built?

A card with toggle switches for email and text notification preferences. Each toggle has a label and helper text. Toggling a switch calls a callback to update the preference. The text notifications toggle should only be visible when SMS is enabled.

Design reference

Figma link: https://www.figma.com/design/O8reTcdtMARvnTzCtlsvmp/Paso-Food-Co-Op?node-id=407-4433&p=f&t=wZjCheHOOyiYBbH4-0

Documentation

Existing patterns:

• src/services/user-preference.ts - getUserPreferences(), updateUserPreferences()
• src/actions/settings.ts - updateUserPreferencesAction()
• src/components/ui/switch.tsx - shadcn Switch
• src/components/ui/card.tsx - shadcn Card

Official docs:

• shadcn Switch
• shadcn Card
• Lucide Icons - Bell

Technical notes

Create the component at src/components/settings/notification-preferences-card.tsx.

Layout:

• Bell icon + "Notifications" heading in bold at top
• Rounded card containing toggle rows:
  • "Always send email notifications" label + "Receive emails sample text" gray helper + dark red Switch toggle
  • "Always send text notifications" label + "Receive texts sample text" gray helper + dark red Switch toggle (only rendered when smsEnabled is true)

Toggle behavior:

• Each toggle fires onToggle with the preference key and new value
• Toggles reflect current state from UserPreference.notifyEmailDefault and notifySmsDefault

interface NotificationPreferencesCardProps {
  emailEnabled: boolean;
  smsEnabled: boolean;
  smsFeatureEnabled: boolean;
  onToggle: (key: "notifyEmailDefault" | "notifySmsDefault", value: boolean) => void;
}

The parent page passes current preference values and the SMS feature flag. smsFeatureEnabled controls whether the text toggle row renders at all.

Acceptance criteria

• Component created at src/components/settings/notification-preferences-card.tsx
• Bell icon + "Notifications" heading in bold
• Email toggle row with label, helper text, and Switch
• Text toggle row with label, helper text, and Switch
• Text toggle row hidden when smsFeatureEnabled is false
• Switch color matches dark red design (#831002)
• onToggle fires with preference key and new boolean value
• Toggles reflect current preference state
• Uses shadcn Switch and Card
• Exported as named export
• Preview rendered on your team page (/team/[yourname]) with hardcoded toggle states
• Screenshot of the rendered preview posted in the PR
• npm run build passes