feat(notifications): add unified multi-channel notification system

Introduces a fully featured notification system with three delivery
channels (in-app, email, webhook), normalized per-user/per-event/
per-channel preferences, admin-scoped notifications, scheduled trip
reminders and version update alerts.

- New notificationService.send() as the single orchestration entry point
- In-app notifications with simple/boolean/navigate types and WebSocket push
- Per-user preference matrix with normalized notification_channel_preferences table
- Admin notification preferences stored globally in app_settings
- Migration 69 normalizes legacy notification_preferences table
- Scheduler hooks for daily trip reminders and version checks
- DevNotificationsPanel for testing in dev mode
- All new tests passing, covering dispatch, preferences, migration, boolean
  responses, resilience, and full API integration (NSVC, NPREF, INOTIF,
  MIGR, VNOTIF, NROUTE series)
 - Previous tests passing

client/src/pages/SettingsPage.tsx

@@ -7,7 +7,7 @@ import Navbar from '../components/Layout/Navbar'
 import CustomSelect from '../components/shared/CustomSelect'
 import { useToast } from '../components/shared/Toast'
 import { Save, Map, Palette, User, Moon, Sun, Monitor, Shield, Camera, Trash2, Lock, KeyRound, AlertTriangle, Copy, Download, Printer, Terminal, Plus, Check, Info } from 'lucide-react'
-import { authApi, adminApi } from '../api/client'
+import { authApi, adminApi, notificationsApi, settingsApi } from '../api/client'
 import apiClient from '../api/client'
 import { useAddonStore } from '../store/addonStore'
 import type { LucideIcon } from 'lucide-react'
@@ -75,37 +75,173 @@ function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
   )
 }
 
+interface PreferencesMatrix {
+  preferences: Record<string, Record<string, boolean>>
+  available_channels: { email: boolean; webhook: boolean; inapp: boolean }
+  event_types: string[]
+  implemented_combos: Record<string, string[]>
+}
+
+const CHANNEL_LABEL_KEYS: Record<string, string> = {
+  email: 'settings.notificationPreferences.email',
+  webhook: 'settings.notificationPreferences.webhook',
+  inapp: 'settings.notificationPreferences.inapp',
+}
+
+const EVENT_LABEL_KEYS: Record<string, string> = {
+  trip_invite: 'settings.notifyTripInvite',
+  booking_change: 'settings.notifyBookingChange',
+  trip_reminder: 'settings.notifyTripReminder',
+  vacay_invite: 'settings.notifyVacayInvite',
+  photos_shared: 'settings.notifyPhotosShared',
+  collab_message: 'settings.notifyCollabMessage',
+  packing_tagged: 'settings.notifyPackingTagged',
+  version_available: 'settings.notifyVersionAvailable',
+}
+
 function NotificationPreferences({ t }: { t: any; memoriesEnabled: boolean }) {
-  const [notifChannel, setNotifChannel] = useState<string>('none')
+  const [matrix, setMatrix] = useState<PreferencesMatrix | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [webhookUrl, setWebhookUrl] = useState('')
+  const [webhookSaving, setWebhookSaving] = useState(false)
+  const [webhookTesting, setWebhookTesting] = useState(false)
+  const toast = useToast()
+
   useEffect(() => {
-    authApi.getAppConfig?.().then((cfg: any) => {
-      if (cfg?.notification_channel) setNotifChannel(cfg.notification_channel)
+    notificationsApi.getPreferences().then((data: PreferencesMatrix) => setMatrix(data)).catch(() => {})
+    settingsApi.get().then((data: { settings: Record<string, unknown> }) => {
+      setWebhookUrl((data.settings?.webhook_url as string) || '')
     }).catch(() => {})
   }, [])
 
-  if (notifChannel === 'none') {
+  if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>Loading…</p>
+
+  // Which channels are both available AND have at least one implemented event
+  const visibleChannels = (['email', 'webhook', 'inapp'] as const).filter(ch => {
+    if (!matrix.available_channels[ch]) return false
+    return matrix.event_types.some(evt => matrix.implemented_combos[evt]?.includes(ch))
+  })
+
+  if (visibleChannels.length === 0) {
     return (
       <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>
-        {t('settings.notificationsDisabled')}
+        {t('settings.notificationPreferences.noChannels')}
       </p>
     )
   }
 
-  const channelLabel = notifChannel === 'email'
-    ? (t('admin.notifications.email') || 'Email (SMTP)')
-    : (t('admin.notifications.webhook') || 'Webhook')
+  const toggle = async (eventType: string, channel: string) => {
+    const current = matrix.preferences[eventType]?.[channel] ?? true
+    const updated = {
+      ...matrix.preferences,
+      [eventType]: { ...matrix.preferences[eventType], [channel]: !current },
+    }
+    setMatrix(m => m ? { ...m, preferences: updated } : m)
+    setSaving(true)
+    try {
+      await notificationsApi.updatePreferences(updated)
+    } catch {
+      // Revert on failure
+      setMatrix(m => m ? { ...m, preferences: matrix.preferences } : m)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const saveWebhookUrl = async () => {
+    setWebhookSaving(true)
+    try {
+      await settingsApi.set('webhook_url', webhookUrl)
+      toast.success(t('settings.webhookUrl.saved'))
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setWebhookSaving(false)
+    }
+  }
+
+  const testWebhookUrl = async () => {
+    if (!webhookUrl) return
+    setWebhookTesting(true)
+    try {
+      const result = await notificationsApi.testWebhook(webhookUrl)
+      if (result.success) toast.success(t('settings.webhookUrl.testSuccess'))
+      else toast.error(result.error || t('settings.webhookUrl.testFailed'))
+    } catch {
+      toast.error(t('settings.webhookUrl.testFailed'))
+    } finally {
+      setWebhookTesting(false)
+    }
+  }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e', flexShrink: 0 }} />
-        <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
-          {t('settings.notificationsActive')}: {channelLabel}
-        </span>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+      {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
+      {/* Webhook URL configuration */}
+      {matrix.available_channels.webhook && (
+        <div style={{ marginBottom: 16, padding: '12px', background: 'var(--bg-secondary)', borderRadius: 8, border: '1px solid var(--border-primary)' }}>
+          <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>
+            {t('settings.webhookUrl.label')}
+          </label>
+          <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>{t('settings.webhookUrl.hint')}</p>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <input
+              type="text"
+              value={webhookUrl}
+              onChange={e => setWebhookUrl(e.target.value)}
+              placeholder={t('settings.webhookUrl.placeholder')}
+              style={{ flex: 1, fontSize: 13, padding: '6px 10px', border: '1px solid var(--border-primary)', borderRadius: 6, background: 'var(--bg-primary)', color: 'var(--text-primary)' }}
+            />
+            <button
+              onClick={saveWebhookUrl}
+              disabled={webhookSaving}
+              style={{ fontSize: 12, padding: '6px 12px', background: 'var(--text-primary)', color: 'var(--bg-primary)', border: 'none', borderRadius: 6, cursor: webhookSaving ? 'not-allowed' : 'pointer', opacity: webhookSaving ? 0.6 : 1 }}
+            >
+              {t('settings.webhookUrl.save')}
+            </button>
+            <button
+              onClick={testWebhookUrl}
+              disabled={!webhookUrl || webhookTesting}
+              style={{ fontSize: 12, padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: (!webhookUrl || webhookTesting) ? 'not-allowed' : 'pointer', opacity: (!webhookUrl || webhookTesting) ? 0.5 : 1 }}
+            >
+              {t('settings.webhookUrl.test')}
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Header row */}
+      <div style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, paddingBottom: 6, marginBottom: 4, borderBottom: '1px solid var(--border-primary)' }}>
+        <span />
+        {visibleChannels.map(ch => (
+          <span key={ch} style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+            {t(CHANNEL_LABEL_KEYS[ch]) || ch}
+          </span>
+        ))}
       </div>
-      <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0, lineHeight: 1.5 }}>
-        {t('settings.notificationsManagedByAdmin')}
-      </p>
+      {/* Event rows */}
+      {matrix.event_types.map(eventType => {
+        const implementedForEvent = matrix.implemented_combos[eventType] ?? []
+        const relevantChannels = visibleChannels.filter(ch => implementedForEvent.includes(ch))
+        if (relevantChannels.length === 0) return null
+        return (
+          <div key={eventType} style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '64px').join(' ')}`, gap: 4, alignItems: 'center', padding: '6px 0', borderBottom: '1px solid var(--border-primary)' }}>
+            <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
+              {t(EVENT_LABEL_KEYS[eventType]) || eventType}
+            </span>
+            {visibleChannels.map(ch => {
+              if (!implementedForEvent.includes(ch)) {
+                return <span key={ch} style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 14 }}>—</span>
+              }
+              const isOn = matrix.preferences[eventType]?.[ch] ?? true
+              return (
+                <div key={ch} style={{ display: 'flex', justifyContent: 'center' }}>
+                  <ToggleSwitch on={isOn} onToggle={() => toggle(eventType, ch)} />
+                </div>
+              )
+            })}
+          </div>
+        )
+      })}
     </div>
   )
 }