Merge pull request #421 from mauriceboe/dev

v2.9.0

.gitattributes

@@ -0,0 +1,29 @@
+# Normalize line endings to LF on commit
+* text=auto eol=lf
+
+# Explicitly enforce LF for source files
+*.ts   text eol=lf
+*.tsx  text eol=lf
+*.js   text eol=lf
+*.jsx  text eol=lf
+*.json text eol=lf
+*.css  text eol=lf
+*.html text eol=lf
+*.md   text eol=lf
+*.yml  text eol=lf
+*.yaml text eol=lf
+*.py   text eol=lf
+*.sh   text eol=lf
+
+# Binary files — no line ending conversion
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.ico  binary
+*.woff binary
+*.woff2 binary
+*.ttf  binary
+*.eot  binary
+*.pdf  binary
+*.zip  binary

.github/workflows/test.yml

@@ -4,11 +4,6 @@ permissions:
   contents: read
 
 on:
-  push:
-    branches: [main, dev]
-    paths:
-      - 'server/**'
-      - '.github/workflows/test.yml'
   pull_request:
     branches: [main, dev]
     paths:

.gitignore

@@ -57,4 +57,5 @@ coverage
 *.tsbuildinfo
 *.tgz
 
-.scannerwork
+.scannerwork
+test-data

client/src/App.tsx

@@ -43,7 +43,8 @@ function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" replace />
+    const redirectParam = encodeURIComponent(location.pathname + location.search)
+    return <Navigate to={`/login?redirect=${redirectParam}`} replace />
   }
 
   if (

client/src/api/authUrl.ts

@@ -1,4 +1,4 @@
-export async function getAuthUrl(url: string, purpose: 'download' | 'immich'): Promise<string> {
+export async function getAuthUrl(url: string, purpose: 'download'): Promise<string> {
   if (!url) return url
   try {
     const resp = await fetch('/api/auth/resource-token', {

client/src/api/client.ts

@@ -27,7 +27,8 @@ apiClient.interceptors.response.use(
   (error) => {
     if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
       if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/')) {
-        window.location.href = '/login'
+        const currentPath = window.location.pathname + window.location.search
+        window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
       }
     }
     if (
@@ -130,12 +131,24 @@ export const packingApi = {
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
+  saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
+  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds }).then(r => r.data),
   listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
   createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
   updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
   deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
 }
 
+export const todoApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/todo/${id}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds }).then(r => r.data),
+  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo/category-assignees`).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
+}
+
 export const tagsApi = {
   list: () => apiClient.get('/tags').then(r => r.data),
   create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
@@ -187,6 +200,8 @@ export const adminApi = {
   rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
   sendTestNotification: (data: Record<string, unknown>) =>
     apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
+  getNotificationPreferences: () => apiClient.get('/admin/notification-preferences').then(r => r.data),
+  updateNotificationPreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/admin/notification-preferences', prefs).then(r => r.data),
 }
 
 export const addonsApi = {
@@ -316,9 +331,9 @@ export const shareApi = {
 
 export const notificationsApi = {
   getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
-  updatePreferences: (prefs: Record<string, boolean>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
+  updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
   testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => r.data),
-  testWebhook: () => apiClient.post('/notifications/test-webhook').then(r => r.data),
+  testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => r.data),
 }
 
 export const inAppNotificationsApi = {

client/src/components/Admin/AddonManager.tsx

@@ -15,7 +15,17 @@ interface Addon {
   name: string
   description: string
   icon: string
+  type: string
   enabled: boolean
+  config?: Record<string, unknown>
+}
+
+interface ProviderOption {
+  key: string
+  label: string
+  description: string
+  enabled: boolean
+  toggle: () => Promise<void>
 }
 
 interface AddonIconProps {
@@ -34,7 +44,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
   const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const toast = useToast()
   const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
-  const [addons, setAddons] = useState([])
+  const [addons, setAddons] = useState<Addon[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -53,7 +63,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
-  const handleToggle = async (addon) => {
+  const handleToggle = async (addon: Addon) => {
     const newEnabled = !addon.enabled
     // Optimistic update
     setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
@@ -68,9 +78,44 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
+  const isPhotoProviderAddon = (addon: Addon) => {
+    return addon.type === 'photo_provider'
+  }
+
+  const isPhotosAddon = (addon: Addon) => {
+    const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
+    return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
+  }
+
+  const handleTogglePhotoProvider = async (providerAddon: Addon) => {
+    const enableProvider = !providerAddon.enabled
+    const prev = addons
+
+    setAddons(current => current.map(a => a.id === providerAddon.id ? { ...a, enabled: enableProvider } : a))
+
+    try {
+      await adminApi.updateAddon(providerAddon.id, { enabled: enableProvider })
+      refreshGlobalAddons()
+      toast.success(t('admin.addons.toast.updated'))
+    } catch {
+      setAddons(prev)
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
   const tripAddons = addons.filter(a => a.type === 'trip')
   const globalAddons = addons.filter(a => a.type === 'global')
+  const photoProviderAddons = addons.filter(isPhotoProviderAddon)
   const integrationAddons = addons.filter(a => a.type === 'integration')
+  const photosAddon = tripAddons.find(isPhotosAddon)
+  const providerOptions: ProviderOption[] = photoProviderAddons.map((provider) => ({
+      key: provider.id,
+      label: provider.name,
+      description: provider.description,
+      enabled: provider.enabled,
+      toggle: () => handleTogglePhotoProvider(provider),
+    }))
+  const photosDerivedEnabled = providerOptions.some(p => p.enabled)
 
   if (loading) {
     return (
@@ -108,7 +153,42 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
                 </div>
                 {tripAddons.map(addon => (
                   <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
+                    <AddonRow
+                      addon={addon}
+                      onToggle={handleToggle}
+                      t={t}
+                      nameOverride={photosAddon && addon.id === photosAddon.id ? 'Memories providers' : undefined}
+                      descriptionOverride={photosAddon && addon.id === photosAddon.id ? 'Enable or disable each photo provider.' : undefined}
+                      statusOverride={photosAddon && addon.id === photosAddon.id ? photosDerivedEnabled : undefined}
+                      hideToggle={photosAddon && addon.id === photosAddon.id}
+                    />
+                    {photosAddon && addon.id === photosAddon.id && providerOptions.length > 0 && (
+                      <div className="px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
+                        <div className="space-y-2">
+                          {providerOptions.map(provider => (
+                            <div key={provider.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                                <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{provider.label}</div>
+                                <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{provider.description}</div>
+                              </div>
+                              <div className="flex items-center gap-2 shrink-0">
+                                <span className="hidden sm:inline text-xs font-medium" style={{ color: provider.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+                                  {provider.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+                                </span>
+                                <button
+                                  onClick={provider.toggle}
+                                  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                  style={{ background: provider.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                                >
+                                  <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                                    style={{ transform: provider.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
+                                </button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
                     {addon.id === 'packing' && addon.enabled && onToggleBagTracking && (
                       <div className="flex items-center gap-4 px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
                         <div style={{ flex: 1, minWidth: 0 }}>
@@ -171,8 +251,10 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
 
 interface AddonRowProps {
   addon: Addon
-  onToggle: (addonId: string) => void
+  onToggle: (addon: Addon) => void
   t: (key: string) => string
+  statusOverride?: boolean
+  hideToggle?: boolean
 }
 
 function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
@@ -187,9 +269,12 @@ function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string
   }
 }
 
-function AddonRow({ addon, onToggle, t }: AddonRowProps) {
+function AddonRow({ addon, onToggle, t, nameOverride, descriptionOverride, statusOverride, hideToggle }: AddonRowProps & { nameOverride?: string; descriptionOverride?: string }) {
   const isComingSoon = false
   const label = getAddonLabel(t, addon)
+  const displayName = nameOverride || label.name
+  const displayDescription = descriptionOverride || label.description
+  const enabledState = statusOverride ?? addon.enabled
   return (
     <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
       {/* Icon */}
@@ -200,7 +285,7 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{label.name}</span>
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{displayName}</span>
           {isComingSoon && (
             <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
               Coming Soon
@@ -210,28 +295,30 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
             {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
           </span>
         </div>
-        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{label.description}</p>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{displayDescription}</p>
       </div>
 
       {/* Toggle */}
       <div className="flex items-center gap-2 shrink-0">
-        <span className="hidden sm:inline text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-          {isComingSoon ? t('admin.addons.disabled') : addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        <span className="hidden sm:inline text-xs font-medium" style={{ color: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {isComingSoon ? t('admin.addons.disabled') : enabledState ? t('admin.addons.enabled') : t('admin.addons.disabled')}
         </span>
-        <button
-          onClick={() => !isComingSoon && onToggle(addon)}
-          disabled={isComingSoon}
-          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-          style={{ background: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
-        >
-          <span
-            className="inline-block h-4 w-4 transform rounded-full transition-transform"
-            style={{
-              background: 'var(--bg-card)',
-              transform: (addon.enabled && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
-            }}
-          />
-        </button>
+        {!hideToggle && (
+          <button
+            onClick={() => !isComingSoon && onToggle(addon)}
+            disabled={isComingSoon}
+            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+            style={{ background: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
+          >
+            <span
+              className="inline-block h-4 w-4 transform rounded-full transition-transform"
+              style={{
+                background: 'var(--bg-card)',
+                transform: (enabledState && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
+              }}
+            />
+          </button>
+        )}
       </div>
     </div>
   )

client/src/components/Admin/DevNotificationsPanel.tsx

@@ -2,7 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { adminApi, tripsApi } from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
-import { Bell, Send, Zap, ArrowRight, CheckCircle, XCircle, Navigation, User } from 'lucide-react'
+import {
+  Bell, Zap, ArrowRight, CheckCircle, Navigation, User,
+  Calendar, Clock, Image, MessageSquare, Tag, UserPlus,
+  Download, MapPin,
+} from 'lucide-react'
 
 interface Trip {
   id: number
@@ -37,7 +41,7 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }).catch(() => {})
   }, [])
 
-  const send = async (label: string, payload: Record<string, unknown>) => {
+  const fire = async (label: string, payload: Record<string, unknown>) => {
     setSending(label)
     try {
       await adminApi.sendTestNotification(payload)
@@ -49,74 +53,69 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }
   }
 
-  const buttons = [
-    {
-      label: 'Simple → Me',
-      icon: Bell,
-      color: '#6366f1',
-      payload: {
-        type: 'simple',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.title',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.text',
-        text_params: {},
-      },
-    },
-    {
-      label: 'Boolean → Me',
-      icon: CheckCircle,
-      color: '#10b981',
-      payload: {
-        type: 'boolean',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.booleanTitle',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.booleanText',
-        text_params: {},
-        positive_text_key: 'notifications.test.accept',
-        negative_text_key: 'notifications.test.decline',
-        positive_callback: { action: 'test_approve', payload: {} },
-        negative_callback: { action: 'test_deny', payload: {} },
-      },
-    },
-    {
-      label: 'Navigate → Me',
-      icon: Navigation,
-      color: '#f59e0b',
-      payload: {
-        type: 'navigate',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.navigateTitle',
-        title_params: {},
-        text_key: 'notifications.test.navigateText',
-        text_params: {},
-        navigate_text_key: 'notifications.test.goThere',
-        navigate_target: '/dashboard',
-      },
-    },
-    {
-      label: 'Simple → Admins',
-      icon: Zap,
-      color: '#ef4444',
-      payload: {
-        type: 'simple',
-        scope: 'admin',
-        target: 0,
-        title_key: 'notifications.test.adminTitle',
-        title_params: {},
-        text_key: 'notifications.test.adminText',
-        text_params: { actor: user?.username || 'Admin' },
-      },
-    },
-  ]
+  const selectedTrip = trips.find(t => t.id === selectedTripId)
+  const selectedUser = users.find(u => u.id === selectedUserId)
+  const username = user?.username || 'Admin'
+  const tripTitle = selectedTrip?.title || 'Test Trip'
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+
+  const Btn = ({
+    id, label, sub, icon: Icon, color, onClick,
+  }: {
+    id: string; label: string; sub: string; icon: React.ElementType; color: string; onClick: () => void
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={sending !== null}
+      className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left w-full"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
+      onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)' }}
+    >
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
+        style={{ background: `${color}20`, color }}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+        <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>{sub}</p>
+      </div>
+      {sending === id && (
+        <div className="w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin flex-shrink-0" />
+      )}
+    </button>
+  )
+
+  const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+    <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>{children}</h3>
+  )
+
+  const TripSelector = () => (
+    <select
+      value={selectedTripId ?? ''}
+      onChange={e => setSelectedTripId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {trips.map(trip => <option key={trip.id} value={trip.id}>{trip.title}</option>)}
+    </select>
+  )
+
+  const UserSelector = () => (
+    <select
+      value={selectedUserId ?? ''}
+      onChange={e => setSelectedUserId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.email})</option>)}
+    </select>
+  )
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2 mb-2">
+    <div className="space-y-8">
+      <div className="flex items-center gap-2">
         <div className="px-2 py-0.5 rounded text-xs font-mono font-bold" style={{ background: '#fbbf24', color: '#000' }}>
           DEV ONLY
         </div>
@@ -125,219 +124,162 @@ export default function DevNotificationsPanel(): React.ReactElement {
         </span>
       </div>
 
-      <p className="text-xs" style={{ color: 'var(--text-muted)' }}>
-        Send test notifications to yourself, all admins, or trip members. These use test i18n keys.
-      </p>
-
-      {/* Quick-fire buttons */}
+      {/* ── Type Testing ─────────────────────────────────────────────────── */}
       <div>
-        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Quick Send</h3>
+        <SectionTitle>Type Testing</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Test how each in-app notification type renders, sent to yourself.
+        </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          {buttons.map(btn => {
-            const Icon = btn.icon
-            return (
-              <button
-                key={btn.label}
-                onClick={() => send(btn.label, btn.payload)}
-                disabled={sending !== null}
-                className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-                style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-              >
-                <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                  style={{ background: `${btn.color}20`, color: btn.color }}>
-                  <Icon className="w-4 h-4" />
-                </div>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{btn.label}</p>
-                  <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>
-                    {btn.payload.type} · {btn.payload.scope}
-                  </p>
-                </div>
-                {sending === btn.label && (
-                  <div className="ml-auto w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
-                )}
-              </button>
-            )
-          })}
+          <Btn id="simple-me" label="Simple → Me" sub="test_simple · user" icon={Bell} color="#6366f1"
+            onClick={() => fire('simple-me', {
+              event: 'test_simple',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="boolean-me" label="Boolean → Me" sub="test_boolean · user" icon={CheckCircle} color="#10b981"
+            onClick={() => fire('boolean-me', {
+              event: 'test_boolean',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+              inApp: {
+                type: 'boolean',
+                positiveCallback: { action: 'test_approve', payload: {} },
+                negativeCallback: { action: 'test_deny', payload: {} },
+              },
+            })}
+          />
+          <Btn id="navigate-me" label="Navigate → Me" sub="test_navigate · user" icon={Navigation} color="#f59e0b"
+            onClick={() => fire('navigate-me', {
+              event: 'test_navigate',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="simple-admins" label="Simple → All Admins" sub="test_simple · admin" icon={Zap} color="#ef4444"
+            onClick={() => fire('simple-admins', {
+              event: 'test_simple',
+              scope: 'admin',
+              targetId: 0,
+              params: {},
+            })}
+          />
         </div>
       </div>
 
-      {/* Trip-scoped notifications */}
+      {/* ── Trip-Scoped Events ───────────────────────────────────────────── */}
       {trips.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Trip-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedTripId ?? ''}
-              onChange={e => setSelectedTripId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {trips.map(trip => (
-                <option key={trip.id} value={trip.id}>{trip.title}</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>Trip-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each trip event to all members of the selected trip (excluding yourself).
+          </p>
+          <TripSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedTripId && send('Simple → Trip', {
-                type: 'simple',
+            <Btn id="booking_change" label="booking_change" sub="navigate · trip" icon={Calendar} color="#6366f1"
+              onClick={() => selectedTripId && fire('booking_change', {
+                event: 'booking_change',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, booking: 'Test Hotel', type: 'hotel', tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#8b5cf620', color: '#8b5cf6' }}>
-                <Send className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · trip</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedTripId && send('Navigate → Trip', {
-                type: 'navigate',
+            />
+            <Btn id="trip_reminder" label="trip_reminder" sub="navigate · trip" icon={Clock} color="#10b981"
+              onClick={() => selectedTripId && fire('trip_reminder', {
+                event: 'trip_reminder',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: `/trips/${selectedTripId}`,
+                targetId: selectedTripId,
+                params: { trip: tripTitle, tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · trip</p>
-              </div>
-            </button>
+            />
+            <Btn id="photos_shared" label="photos_shared" sub="navigate · trip" icon={Image} color="#f59e0b"
+              onClick={() => selectedTripId && fire('photos_shared', {
+                event: 'photos_shared',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, count: '5', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="collab_message" label="collab_message" sub="navigate · trip" icon={MessageSquare} color="#8b5cf6"
+              onClick={() => selectedTripId && fire('collab_message', {
+                event: 'collab_message',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, preview: 'This is a test message preview.', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="packing_tagged" label="packing_tagged" sub="navigate · trip" icon={Tag} color="#ec4899"
+              onClick={() => selectedTripId && fire('packing_tagged', {
+                event: 'packing_tagged',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, category: 'Clothing', tripId: String(selectedTripId) },
+              })}
+            />
           </div>
         </div>
       )}
 
-      {/* User-scoped notifications */}
+      {/* ── User-Scoped Events ───────────────────────────────────────────── */}
       {users.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>User-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedUserId ?? ''}
-              onChange={e => setSelectedUserId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {users.map(u => (
-                <option key={u.id} value={u.id}>{u.username} ({u.email})</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>User-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each user event to the selected recipient.
+          </p>
+          <UserSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedUserId && send(`Simple → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'simple',
+            <Btn
+              id={`trip_invite-${selectedUserId}`}
+              label="trip_invite"
+              sub="navigate · user"
+              icon={UserPlus}
+              color="#06b6d4"
+              onClick={() => selectedUserId && fire(`trip_invite-${selectedUserId}`, {
+                event: 'trip_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.title',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.text',
-                text_params: {},
+                targetId: selectedUserId,
+                params: { actor: username, trip: tripTitle, invitee: selectedUser?.email || '', tripId: String(selectedTripId ?? 0) },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#06b6d420', color: '#06b6d4' }}>
-                <User className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Boolean → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'boolean',
+            />
+            <Btn
+              id={`vacay_invite-${selectedUserId}`}
+              label="vacay_invite"
+              sub="navigate · user"
+              icon={MapPin}
+              color="#f97316"
+              onClick={() => selectedUserId && fire(`vacay_invite-${selectedUserId}`, {
+                event: 'vacay_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.booleanTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.booleanText',
-                text_params: {},
-                positive_text_key: 'notifications.test.accept',
-                negative_text_key: 'notifications.test.decline',
-                positive_callback: { action: 'test_approve', payload: {} },
-                negative_callback: { action: 'test_deny', payload: {} },
+                targetId: selectedUserId,
+                params: { actor: username, planId: '1' },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#10b98120', color: '#10b981' }}>
-                <CheckCircle className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Boolean → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>boolean · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Navigate → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'navigate',
-                scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.navigateTitle',
-                title_params: {},
-                text_key: 'notifications.test.navigateText',
-                text_params: {},
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: '/dashboard',
-              })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · user</p>
-              </div>
-            </button>
+            />
           </div>
         </div>
       )}
+
+      {/* ── Admin-Scoped Events ──────────────────────────────────────────── */}
+      <div>
+        <SectionTitle>Admin-Scoped Events</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Fires to all admin users.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <Btn id="version_available" label="version_available" sub="navigate · admin" icon={Download} color="#64748b"
+            onClick={() => fire('version_available', {
+              event: 'version_available',
+              scope: 'admin',
+              targetId: 0,
+              params: { version: '9.9.9-test' },
+            })}
+          />
+        </div>
+      </div>
     </div>
   )
 }

client/src/components/Admin/GitHubPanel.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react'
-import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee } from 'lucide-react'
+import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee, Bug, Lightbulb, BookOpen } from 'lucide-react'
 import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import apiClient from '../../api/client'
 
-const REPO = 'mauriceboe/NOMAD'
+const REPO = 'mauriceboe/TREK'
 const PER_PAGE = 10
 
 export default function GitHubPanel() {
@@ -176,6 +176,63 @@ export default function GitHubPanel() {
         </a>
       </div>
 
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        <a
+          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ef444415', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Bug size={20} style={{ color: '#ef4444' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.reportBug')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.reportBugHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f59e0b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Lightbulb size={20} style={{ color: '#f59e0b' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.featureRequest')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.featureRequestHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/wiki"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#6366f115', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <BookOpen size={20} style={{ color: '#6366f1' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Wiki</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.wikiHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+      </div>
+
       {/* Loading / Error / Releases */}
       {loading ? (
         <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>

client/src/components/Budget/BudgetPanel.tsx

@@ -633,7 +633,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                             <td style={td}>
-                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
+                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
                               {/* Mobile: larger chips under name since Persons column is hidden */}
                               {hasMultipleMembers && (
                                 <div className="sm:hidden" style={{ marginTop: 4 }}>

client/src/components/Collab/CollabNotes.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import DOM from 'react-dom'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2 } from 'lucide-react'
+import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2, Loader2 } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { getAuthUrl } from '../../api/authUrl'
 import { useCanDo } from '../../store/permissionsStore'
@@ -100,6 +100,7 @@ function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
   const [authUrl, setAuthUrl] = useState('')
   const rawUrl = file?.url || ''
   useEffect(() => {
+    setAuthUrl('')
     if (!rawUrl) return
     getAuthUrl(rawUrl, 'download').then(setAuthUrl)
   }, [rawUrl])
@@ -119,7 +120,10 @@ function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
       {isImage ? (
         /* Image lightbox — floating controls */
         <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
-          <img src={authUrl} alt={file.original_name} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} />
+          {authUrl
+            ? <img src={authUrl} alt={file.original_name} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} />
+            : <Loader2 size={32} className="animate-spin" style={{ color: 'rgba(255,255,255,0.5)' }} />
+          }
           <div style={{ position: 'absolute', top: -36, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
             <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{file.original_name}</span>
             <div style={{ display: 'flex', gap: 8 }}>
@@ -487,7 +491,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
                 const isImage = a.mime_type?.startsWith('image/')
                 return (
                   <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-                    {isImage && <img src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
+                    {isImage && <AuthedImg src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
                     {(a.original_name || '').length > 20 ? a.original_name.slice(0, 17) + '...' : a.original_name}
                     <button type="button" onClick={() => handleDeleteAttachment(a.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444', padding: 0, display: 'flex' }}>
                       <X size={10} />
@@ -1350,6 +1354,41 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
             </div>
             <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
               <Markdown remarkPlugins={[remarkGfm]}>{viewingNote.content || ''}</Markdown>
+              {(viewingNote.attachments || []).length > 0 && (
+                <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    {(viewingNote.attachments || []).map(a => {
+                      const isImage = a.mime_type?.startsWith('image/')
+                      const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                      return (
+                        <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
+                          {isImage ? (
+                            <AuthedImg src={a.url} alt={a.original_name}
+                              style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
+                              onClick={() => setPreviewFile(a)}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
+                          ) : (
+                            <div title={a.original_name} onClick={() => setPreviewFile(a)}
+                              style={{
+                                width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
+                                background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
+                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
+                                transition: 'transform 0.12s, box-shadow 0.12s',
+                              }}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
+                              <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                            </div>
+                          )}
+                          <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>,

client/src/components/Files/FileManager.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom'
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
@@ -37,49 +37,121 @@ function formatDateWithLocale(dateStr, locale) {
   } catch { return '' }
 }
 
-// Image lightbox
+// Image lightbox with gallery navigation
 interface ImageLightboxProps {
-  file: TripFile & { url: string }
+  files: (TripFile & { url: string })[]
+  initialIndex: number
   onClose: () => void
 }
 
-function ImageLightbox({ file, onClose }: ImageLightboxProps) {
+function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
   const { t } = useTranslation()
+  const [index, setIndex] = useState(initialIndex)
   const [imgSrc, setImgSrc] = useState('')
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const file = files[index]
+
   useEffect(() => {
-    getAuthUrl(file.url, 'download').then(setImgSrc)
-  }, [file.url])
+    setImgSrc('')
+    if (file) getAuthUrl(file.url, 'download').then(setImgSrc)
+  }, [file?.url])
+
+  const goPrev = () => setIndex(i => Math.max(0, i - 1))
+  const goNext = () => setIndex(i => Math.min(files.length - 1, i + 1))
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowLeft') goPrev()
+      if (e.key === 'ArrowRight') goNext()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  if (!file) return null
+
+  const hasPrev = index > 0
+  const hasNext = index < files.length - 1
+  const navBtn = (side: 'left' | 'right', onClick: () => void, show: boolean): React.ReactNode => show ? (
+    <button onClick={e => { e.stopPropagation(); onClick() }}
+      style={{
+        position: 'absolute', top: '50%', [side]: 12, transform: 'translateY(-50%)', zIndex: 10,
+        background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+        color: 'rgba(255,255,255,0.8)', transition: 'background 0.15s',
+      }}
+      onMouseEnter={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.75)')}
+      onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.5)')}>
+      {side === 'left' ? <ChevronLeft size={22} /> : <ChevronRight size={22} />}
+    </button>
+  ) : null
+
   return (
     <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column' }}
       onClick={onClose}
+      onTouchStart={e => setTouchStart(e.touches[0].clientX)}
+      onTouchEnd={e => {
+        if (touchStart === null) return
+        const diff = e.changedTouches[0].clientX - touchStart
+        if (diff > 60) goPrev()
+        else if (diff < -60) goNext()
+        setTouchStart(null)
+      }}
     >
-      <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
-        <img
-          src={imgSrc}
-          alt={file.original_name}
-          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }}
-        />
-        <div style={{ position: 'absolute', top: -40, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
-          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80%' }}>{file.original_name}</span>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button
-              onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}
-              title={t('files.openTab')}
-            >
-              <ExternalLink size={16} />
-            </button>
-            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}>
-              <X size={18} />
-            </button>
-          </div>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }} onClick={e => e.stopPropagation()}>
+        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+          {file.original_name}
+          <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
+        </span>
+        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+          <button
+            onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
+            title={t('files.openTab')}>
+            <ExternalLink size={16} />
+          </button>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}>
+            <X size={18} />
+          </button>
         </div>
       </div>
+
+      {/* Main image + nav */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', minHeight: 0 }}
+        onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+        {navBtn('left', goPrev, hasPrev)}
+        {imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />}
+        {navBtn('right', goNext, hasNext)}
+      </div>
+
+      {/* Thumbnail strip */}
+      {files.length > 1 && (
+        <div style={{ display: 'flex', gap: 4, justifyContent: 'center', padding: '10px 16px', flexShrink: 0, overflowX: 'auto' }} onClick={e => e.stopPropagation()}>
+          {files.map((f, i) => (
+            <ThumbImg key={f.id} file={f} active={i === index} onClick={() => setIndex(i)} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }
 
+function ThumbImg({ file, active, onClick }: { file: TripFile & { url: string }; active: boolean; onClick: () => void }) {
+  const [src, setSrc] = useState('')
+  useEffect(() => { getAuthUrl(file.url, 'download').then(setSrc) }, [file.url])
+  return (
+    <button onClick={onClick} style={{
+      width: 48, height: 48, borderRadius: 6, overflow: 'hidden', border: active ? '2px solid #fff' : '2px solid transparent',
+      opacity: active ? 1 : 0.5, cursor: 'pointer', padding: 0, background: '#111', flexShrink: 0, transition: 'opacity 0.15s',
+    }}>
+      {src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
+    </button>
+  )
+}
+
 // Authenticated image — fetches a short-lived download token and renders the image
 function AuthedImg({ src, style }: { src: string; style?: React.CSSProperties }) {
   const [authSrc, setAuthSrc] = useState('')
@@ -169,7 +241,7 @@ interface FileManagerProps {
 export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, days = [], assignments = {}, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
   const [uploading, setUploading] = useState(false)
   const [filterType, setFilterType] = useState('all')
-  const [lightboxFile, setLightboxFile] = useState(null)
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
   const [showTrash, setShowTrash] = useState(false)
   const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
   const [loadingTrash, setLoadingTrash] = useState(false)
@@ -324,9 +396,12 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
     }
   }
 
+  const imageFiles = filteredFiles.filter(f => isImage(f.mime_type))
+
   const openFile = (file) => {
     if (isImage(file.mime_type)) {
-      setLightboxFile(file)
+      const idx = imageFiles.findIndex(f => f.id === file.id)
+      setLightboxIndex(idx >= 0 ? idx : 0)
     } else {
       setPreviewFile(file)
     }
@@ -453,7 +528,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
   return (
     <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
       {/* Lightbox */}
-      {lightboxFile && <ImageLightbox file={lightboxFile} onClose={() => setLightboxFile(null)} />}
+      {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
 
       {/* Assign modal */}
       {assignFileId && ReactDOM.createPortal(

client/src/components/Layout/DemoBanner.tsx

@@ -118,6 +118,70 @@ const texts: Record<string, DemoTexts> = {
     selfHostLink: 'alójalo tú mismo',
     close: 'Entendido',
   },
+  zh: {
+    titleBefore: '欢迎来到 ',
+    titleAfter: '',
+    title: '欢迎来到 TREK 演示版',
+    description: '你可以查看、编辑和创建旅行。所有更改都会在每小时自动重置。',
+    resetIn: '下次重置将在',
+    minutes: '分钟后',
+    uploadNote: '演示模式下已禁用文件上传（照片、文档、封面）。',
+    fullVersionTitle: '完整版本还包括：',
+    features: [
+      '文件上传（照片、文档、封面）',
+      'API 密钥管理（Google Maps、天气）',
+      '用户和权限管理',
+      '自动备份',
+      '附加组件管理（启用/禁用）',
+      'OIDC / SSO 单点登录',
+    ],
+    addonsTitle: '模块化附加组件（完整版本可禁用）',
+    addons: [
+      ['Vacay', '带日历、节假日和用户融合的假期规划器'],
+      ['Atlas', '带已访问国家和旅行统计的世界地图'],
+      ['Packing', '按旅行管理清单'],
+      ['Budget', '支持分摊的费用追踪'],
+      ['Documents', '将文件附加到旅行'],
+      ['Widgets', '货币换算和时区工具'],
+    ],
+    whatIs: '什么是 TREK？',
+    whatIsDesc: '一个支持实时协作、交互式地图、OIDC 登录和深色模式的自托管旅行规划器。',
+    selfHost: '开源项目 - ',
+    selfHostLink: '自行部署',
+    close: '知道了',
+  },
+  'zh-TW': {
+    titleBefore: '歡迎來到 ',
+    titleAfter: '',
+    title: '歡迎來到 TREK 展示版',
+    description: '你可以檢視、編輯和建立行程。所有變更都會在每小時自動重設。',
+    resetIn: '下次重設將在',
+    minutes: '分鐘後',
+    uploadNote: '展示模式下已停用檔案上傳（照片、文件、封面）。',
+    fullVersionTitle: '完整版本還包含：',
+    features: [
+      '檔案上傳（照片、文件、封面）',
+      'API 金鑰管理（Google Maps、天氣）',
+      '使用者與權限管理',
+      '自動備份',
+      '附加元件管理（啟用/停用）',
+      'OIDC / SSO 單一登入',
+    ],
+    addonsTitle: '模組化附加元件（完整版本可停用）',
+    addons: [
+      ['Vacay', '具備日曆、假日與使用者融合的假期規劃器'],
+      ['Atlas', '顯示已造訪國家與旅行統計的世界地圖'],
+      ['Packing', '依行程管理的檢查清單'],
+      ['Budget', '支援分攤的費用追蹤'],
+      ['Documents', '將檔案附加到行程'],
+      ['Widgets', '貨幣換算與時區工具'],
+    ],
+    whatIs: 'TREK 是什麼？',
+    whatIsDesc: '一個支援即時協作、互動式地圖、OIDC 登入和深色模式的自架旅行規劃器。',
+    selfHost: '開源專案 - ',
+    selfHostLink: '自行架設',
+    close: '知道了',
+  },
   ar: {
     titleBefore: 'مرحبًا بك في ',
     titleAfter: '',

client/src/components/Layout/InAppNotificationBell.tsx

@@ -96,7 +96,7 @@ export default function InAppNotificationBell(): React.ReactElement {
                 {t('notifications.title')}
                 {unreadCount > 0 && (
                   <span className="ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium"
-                    style={{ background: '#6366f1', color: '#fff' }}>
+                    style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
                     {unreadCount}
                   </span>
                 )}
@@ -133,7 +133,7 @@ export default function InAppNotificationBell(): React.ReactElement {
             <div className="overflow-y-auto flex-1">
               {isLoading && notifications.length === 0 ? (
                 <div className="flex items-center justify-center py-10">
-                  <div className="w-5 h-5 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
+                  <div className="w-5 h-5 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
                 </div>
               ) : notifications.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-10 px-4 text-center gap-2">
@@ -154,7 +154,7 @@ export default function InAppNotificationBell(): React.ReactElement {
               className="w-full py-2.5 text-xs font-medium transition-colors flex-shrink-0"
               style={{
                 borderTop: '1px solid var(--border-secondary)',
-                color: '#6366f1',
+                color: 'var(--text-primary)',
                 background: 'transparent',
               }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}

client/src/components/Layout/Navbar.tsx

@@ -133,7 +133,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
-            <span className="text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
+            <span className="hidden sm:inline text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
               {tripTitle}
             </span>
           </>
@@ -155,17 +155,18 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         </button>
       )}
 
-      {/* Dark mode toggle (light ↔ dark, overrides auto) */}
+      {/* Dark mode toggle (light ↔ dark, overrides auto) — hidden on mobile */}
       <button onClick={toggleDarkMode} title={dark ? t('nav.lightMode') : t('nav.darkMode')}
-        className="p-2 rounded-lg transition-colors flex-shrink-0"
+        className="p-2 rounded-lg transition-colors flex-shrink-0 hidden sm:flex"
         style={{ color: 'var(--text-muted)' }}
         onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
         onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
         {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
       </button>
 
-      {/* Notification bell */}
-      {user && <InAppNotificationBell />}
+      {/* Notification bell — only in trip view on mobile, everywhere on desktop */}
+      {user && tripId && <InAppNotificationBell />}
+      {user && !tripId && <span className="hidden sm:block"><InAppNotificationBell /></span>}
 
       {/* User menu */}
       {user && (

client/src/components/Map/MapView.tsx

@@ -161,12 +161,13 @@ function MapController({ center, zoom }: MapControllerProps) {
 
 // Fit bounds when places change (fitKey triggers re-fit)
 interface BoundsControllerProps {
+  hasDayDetail?: boolean
   places: Place[]
   fitKey: number
   paddingOpts: Record<string, number>
 }
 
-function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps) {
+function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
   const map = useMap()
   const prevFitKey = useRef(-1)
 
@@ -176,9 +177,14 @@ function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps
     if (places.length === 0) return
     try {
       const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
-      if (bounds.isValid()) map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+      if (bounds.isValid()) {
+        map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+        if (hasDayDetail) {
+          setTimeout(() => map.panBy([0, 150], { animate: true }), 300)
+        }
+      }
     } catch {}
-  }, [fitKey, places, paddingOpts, map])
+  }, [fitKey, places, paddingOpts, map, hasDayDetail])
 
   return null
 }
@@ -377,17 +383,18 @@ export const MapView = memo(function MapView({
   leftWidth = 0,
   rightWidth = 0,
   hasInspector = false,
+  hasDayDetail = false,
 }) {
-  // Dynamic padding: account for sidebars + bottom inspector
+  // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   const paddingOpts = useMemo(() => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
     if (isMobile) return { padding: [40, 20] }
     const top = 60
-    const bottom = hasInspector ? 320 : 60
+    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
     const left = leftWidth + 40
     const right = rightWidth + 40
     return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
-  }, [leftWidth, rightWidth, hasInspector])
+  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
   // photoUrls: only base64 thumbs for smooth map zoom
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
@@ -509,7 +516,7 @@ export const MapView = memo(function MapView({
       />
 
       <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />

client/src/components/Memories/MemoriesPanel.tsx

@@ -1,16 +1,23 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen } from 'lucide-react'
-import apiClient from '../../api/client'
+import apiClient, { addonsApi } from '../../api/client'
+import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen, Info, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
-import { getAuthUrl, fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
+import { fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
 import { useToast } from '../shared/Toast'
 
-function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
+interface PhotoProvider {
+  id: string
+  name: string
+  icon?: string
+  config?: Record<string, unknown>
+}
+
+function ProviderImg({ baseUrl, provider, style, loading }: { baseUrl: string; provider: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
   const [src, setSrc] = useState('')
   useEffect(() => {
     let revoke = ''
-    fetchImageAsBlob(baseUrl).then(blobUrl => {
+    fetchImageAsBlob('/api' + baseUrl).then(blobUrl => {
       revoke = blobUrl
       setSrc(blobUrl)
     })
@@ -19,18 +26,22 @@ function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React
   return src ? <img src={src} alt="" loading={loading} style={style} /> : null
 }
 
+
 // ── Types ───────────────────────────────────────────────────────────────────
 
 interface TripPhoto {
-  immich_asset_id: string
+  asset_id: string
+  provider: string
   user_id: number
   username: string
   shared: number
   added_at: string
+  city?: string | null
 }
 
-interface ImmichAsset {
+interface Asset {
   id: string
+  provider: string
   takenAt: string
   city: string | null
   country: string | null
@@ -50,6 +61,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const currentUser = useAuthStore(s => s.user)
 
   const [connected, setConnected] = useState(false)
+  const [enabledProviders, setEnabledProviders] = useState<PhotoProvider[]>([])
+  const [availableProviders, setAvailableProviders] = useState<PhotoProvider[]>([])
+  const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [loading, setLoading] = useState(true)
 
   // Trip photos (saved selections)
@@ -57,7 +71,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // Photo picker
   const [showPicker, setShowPicker] = useState(false)
-  const [pickerPhotos, setPickerPhotos] = useState<ImmichAsset[]>([])
+  const [pickerPhotos, setPickerPhotos] = useState<Asset[]>([])
   const [pickerLoading, setPickerLoading] = useState(false)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
 
@@ -72,49 +86,102 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const [showAlbumPicker, setShowAlbumPicker] = useState(false)
   const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number }[]>([])
   const [albumsLoading, setAlbumsLoading] = useState(false)
-  const [albumLinks, setAlbumLinks] = useState<{ id: number; immich_album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
+  const [albumLinks, setAlbumLinks] = useState<{ id: number; provider: string; album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
   const [syncing, setSyncing] = useState<number | null>(null)
 
+
+  //helpers for building urls
+  const ADDON_PREFIX = "/integrations/memories"
+  
+  function buildUnifiedUrl(endpoint: string, lastParam?:string,): string {
+    return `${ADDON_PREFIX}/unified/trips/${tripId}/${endpoint}${lastParam ? `/${lastParam}` : ''}`;
+  }
+
+  function buildProviderUrl(provider: string, endpoint: string, item?: string): string {
+    if (endpoint === 'album-link-sync') {
+      endpoint = `trips/${tripId}/album-links/${item?.toString() || ''}/sync`
+    }
+    return `${ADDON_PREFIX}/${provider}/${endpoint}`;
+  }
+
+  function buildProviderAssetUrl(photo: TripPhoto, what: string): string {
+    return `${ADDON_PREFIX}/${photo.provider}/assets/${tripId}/${photo.asset_id}/${photo.user_id}/${what}`
+  }
+
+  function buildProviderAssetUrlFromAsset(asset: Asset, what: string, userId: number): string {
+    const photo: TripPhoto = {
+      asset_id: asset.id,
+      provider: asset.provider,
+      user_id: userId,
+      username: '',
+      shared: 0,
+      added_at: null
+    }
+    return buildProviderAssetUrl(photo, what)
+  }
+
+
   const loadAlbumLinks = async () => {
     try {
-      const res = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      const res = await apiClient.get(buildUnifiedUrl('album-links'))
       setAlbumLinks(res.data.links || [])
     } catch { setAlbumLinks([]) }
   }
 
-  const openAlbumPicker = async () => {
-    setShowAlbumPicker(true)
+  const loadAlbums = async (provider: string = selectedProvider) => {
+    if (!provider) return
     setAlbumsLoading(true)
     try {
-      const res = await apiClient.get('/integrations/immich/albums')
+      const res = await apiClient.get(buildProviderUrl(provider, 'albums'))
       setAlbums(res.data.albums || [])
-    } catch { setAlbums([]); toast.error(t('memories.error.loadAlbums')) }
-    finally { setAlbumsLoading(false) }
+    } catch {
+      setAlbums([])
+      toast.error(t('memories.error.loadAlbums'))
+    } finally {
+      setAlbumsLoading(false)
+    }
+  }
+
+  const openAlbumPicker = async () => {
+    setShowAlbumPicker(true)
+    await loadAlbums(selectedProvider)
   }
 
   const linkAlbum = async (albumId: string, albumName: string) => {
+    if (!selectedProvider) {
+      toast.error(t('memories.error.linkAlbum'))
+      return
+    }
+
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
+      await apiClient.post(buildUnifiedUrl('album-links'), {
+        album_id: albumId,
+        album_name: albumName,
+        provider: selectedProvider,
+      })
       setShowAlbumPicker(false)
       await loadAlbumLinks()
       // Auto-sync after linking
-      const linksRes = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
-      const newLink = (linksRes.data.links || []).find((l: any) => l.immich_album_id === albumId)
+      const linksRes = await apiClient.get(buildUnifiedUrl('album-links'))
+      const newLink = (linksRes.data.links || []).find((l: any) => l.album_id === albumId && l.provider === selectedProvider)
       if (newLink) await syncAlbum(newLink.id)
     } catch { toast.error(t('memories.error.linkAlbum')) }
   }
 
   const unlinkAlbum = async (linkId: number) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/album-links/${linkId}`)
-      loadAlbumLinks()
+      await apiClient.delete(buildUnifiedUrl('album-links', linkId.toString()))
+      await loadAlbumLinks()
+      await loadPhotos()
     } catch { toast.error(t('memories.error.unlinkAlbum')) }
   }
 
-  const syncAlbum = async (linkId: number) => {
+  const syncAlbum = async (linkId: number, provider?: string) => {
+    const targetProvider = provider || selectedProvider
+    if (!targetProvider) return
     setSyncing(linkId)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links/${linkId}/sync`)
+      await apiClient.post(buildProviderUrl(targetProvider, 'album-link-sync', linkId.toString()))
       await loadAlbumLinks()
       await loadPhotos()
     } catch { toast.error(t('memories.error.syncAlbum')) }
@@ -127,6 +194,14 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const [lightboxInfo, setLightboxInfo] = useState<any>(null)
   const [lightboxInfoLoading, setLightboxInfoLoading] = useState(false)
   const [lightboxOriginalSrc, setLightboxOriginalSrc] = useState('')
+  const [showMobileInfo, setShowMobileInfo] = useState(false)
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 768)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   // ── Init ──────────────────────────────────────────────────────────────────
 
@@ -143,7 +218,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   const loadPhotos = async () => {
     try {
-      const photosRes = await apiClient.get(`/integrations/immich/trips/${tripId}/photos`)
+      const photosRes = await apiClient.get(buildUnifiedUrl('photos'))
       setTripPhotos(photosRes.data.photos || [])
     } catch {
       setTripPhotos([])
@@ -153,9 +228,37 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const loadInitial = async () => {
     setLoading(true)
     try {
-      const statusRes = await apiClient.get('/integrations/immich/status')
-      setConnected(statusRes.data.connected)
+      const addonsRes = await addonsApi.enabled().catch(() => ({ addons: [] as any[] }))
+      const enabledAddons = addonsRes?.addons || []
+      const photoProviders = enabledAddons.filter((a: any) => a.type === 'photo_provider' && a.enabled)
+
+      setEnabledProviders(photoProviders.map((a: any) => ({ id: a.id, name: a.name, icon: a.icon, config: a.config })))
+
+      // Test connection status for each enabled provider
+      const statusResults = await Promise.all(
+        photoProviders.map(async (provider: any) => {
+          const statusUrl = (provider.config as Record<string, unknown>)?.status_get as string
+          if (!statusUrl) return { provider, connected: false }
+          try {
+            const res = await apiClient.get(statusUrl)
+            return { provider, connected: !!res.data?.connected }
+          } catch {
+            return { provider, connected: false }
+          }
+        })
+      )
+
+      const connectedProviders = statusResults
+        .filter(r => r.connected)
+        .map(r => ({ id: r.provider.id, name: r.provider.name, icon: r.provider.icon, config: r.provider.config }))
+      
+      setAvailableProviders(connectedProviders)
+      setConnected(connectedProviders.length > 0)
+      if (connectedProviders.length > 0 && !selectedProvider) {
+        setSelectedProvider(connectedProviders[0].id)
+      }
     } catch {
+      setAvailableProviders([])
       setConnected(false)
     }
     await loadPhotos()
@@ -175,14 +278,35 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
     await loadPickerPhotos(!!(startDate && endDate))
   }
 
+  useEffect(() => {
+    if (showPicker) {
+      loadPickerPhotos(pickerDateFilter)
+    }
+  }, [selectedProvider])
+
+  useEffect(() => {
+    loadAlbumLinks()
+  }, [tripId])
+
+  useEffect(() => {
+    if (showAlbumPicker) {
+      loadAlbums(selectedProvider)
+    }
+  }, [showAlbumPicker, selectedProvider, tripId])
+
   const loadPickerPhotos = async (useDate: boolean) => {
     setPickerLoading(true)
     try {
-      const res = await apiClient.post('/integrations/immich/search', {
+      const provider = availableProviders.find(p => p.id === selectedProvider)
+      if (!provider) {
+        setPickerPhotos([])
+        return
+      }
+      const res = await apiClient.post(buildProviderUrl(provider.id, 'search'), {
         from: useDate && startDate ? startDate : undefined,
         to: useDate && endDate ? endDate : undefined,
       })
-      setPickerPhotos(res.data.assets || [])
+      setPickerPhotos((res.data.assets || []).map((asset: Asset) => ({ ...asset, provider: provider.id })))
     } catch {
       setPickerPhotos([])
       toast.error(t('memories.error.loadPhotos'))
@@ -208,8 +332,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const executeAddPhotos = async () => {
     setShowConfirmShare(false)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/photos`, {
-        asset_ids: [...selectedIds],
+      const groupedByProvider = new Map<string, string[]>()
+      for (const key of selectedIds) {
+        const [provider, assetId] = key.split('::')
+        if (!provider || !assetId) continue
+        const list = groupedByProvider.get(provider) || []
+        list.push(assetId)
+        groupedByProvider.set(provider, list)
+      }
+
+      await apiClient.post(buildUnifiedUrl('photos'), {
+        selections: [...groupedByProvider.entries()].map(([provider, asset_ids]) => ({ provider, asset_ids })),
         shared: true,
       })
       setShowPicker(false)
@@ -220,28 +353,38 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Remove photo ──────────────────────────────────────────────────────────
 
-  const removePhoto = async (assetId: string) => {
+  const removePhoto = async (photo: TripPhoto) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/photos/${assetId}`)
-      setTripPhotos(prev => prev.filter(p => p.immich_asset_id !== assetId))
+      await apiClient.delete(buildUnifiedUrl('photos'), {
+        data: {
+          asset_id: photo.asset_id,
+          provider: photo.provider,
+        },
+      })
+      setTripPhotos(prev => prev.filter(p => !(p.provider === photo.provider && p.asset_id === photo.asset_id)))
     } catch { toast.error(t('memories.error.removePhoto')) }
   }
 
   // ── Toggle sharing ────────────────────────────────────────────────────────
 
-  const toggleSharing = async (assetId: string, shared: boolean) => {
+  const toggleSharing = async (photo: TripPhoto, shared: boolean) => {
     try {
-      await apiClient.put(`/integrations/immich/trips/${tripId}/photos/${assetId}/sharing`, { shared })
+      await apiClient.put(buildUnifiedUrl('photos', 'sharing'), {
+        shared,
+        asset_id: photo.asset_id,
+        provider: photo.provider,
+      })
       setTripPhotos(prev => prev.map(p =>
-        p.immich_asset_id === assetId ? { ...p, shared: shared ? 1 : 0 } : p
+        p.provider === photo.provider && p.asset_id === photo.asset_id ? { ...p, shared: shared ? 1 : 0 } : p
       ))
     } catch { toast.error(t('memories.error.toggleSharing')) }
   }
 
   // ── Helpers ───────────────────────────────────────────────────────────────
 
-  const thumbnailBaseUrl = (assetId: string, userId: number) =>
-    `/api/integrations/immich/assets/${assetId}/thumbnail?userId=${userId}`
+  
+
+  const makePickerKey = (provider: string, assetId: string): string => `${provider}::${assetId}`
 
   const ownPhotos = tripPhotos.filter(p => p.user_id === currentUser?.id)
   const othersPhotos = tripPhotos.filter(p => p.user_id !== currentUser?.id && p.shared)
@@ -281,10 +424,10 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 40, textAlign: 'center', ...font }}>
         <Camera size={40} style={{ color: 'var(--text-faint)', marginBottom: 12 }} />
         <h3 style={{ margin: '0 0 6px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
-          {t('memories.notConnected')}
+          {t('memories.notConnected', { provider_name: enabledProviders.length === 1 ? enabledProviders[0]?.name : 'Photo provider' })}
         </h3>
         <p style={{ margin: 0, fontSize: 13, color: 'var(--text-muted)', maxWidth: 300 }}>
-          {t('memories.notConnectedHint')}
+          {enabledProviders.length === 1 ? t('memories.notConnectedHint', { provider_name: enabledProviders[0]?.name }) : t('memories.notConnectedMultipleHint', { provider_names: enabledProviders.map(p => p.name).join(', ') })}
         </p>
       </div>
     )
@@ -292,22 +435,53 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
+  const ProviderTabs = () => {
+    if (availableProviders.length < 2) return null
+    return (
+      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
+        {availableProviders.map(provider => (
+          <button
+            key={provider.id}
+            onClick={() => setSelectedProvider(provider.id)}
+            style={{
+              padding: '6px 12px',
+              borderRadius: 99,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              border: '1px solid',
+              transition: 'all 0.15s',
+              background: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--bg-card)',
+              borderColor: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--border-primary)',
+              color: selectedProvider === provider.id ? 'var(--bg-primary)' : 'var(--text-muted)',
+              textTransform: 'capitalize',
+            }}
+          >
+            {provider.name}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
   // ── Album Picker Modal ──────────────────────────────────────────────────
 
   if (showAlbumPicker) {
-    const linkedIds = new Set(albumLinks.map(l => l.immich_album_id))
+    const linkedIds = new Set(albumLinks.map(l => l.album_id))
     return (
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectAlbum')}
+              {availableProviders.length > 1 ? t('memories.selectAlbumMultiple') : t('memories.selectAlbum', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <button onClick={() => setShowAlbumPicker(false)}
               style={{ padding: '7px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
               {t('common.cancel')}
             </button>
           </div>
+          <ProviderTabs />
         </div>
         <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
           {albumsLoading ? (
@@ -359,7 +533,11 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
   if (showPicker) {
-    const alreadyAdded = new Set(tripPhotos.filter(p => p.user_id === currentUser?.id).map(p => p.immich_asset_id))
+    const alreadyAdded = new Set(
+      tripPhotos
+        .filter(p => p.user_id === currentUser?.id)
+        .map(p => makePickerKey(p.provider, p.asset_id))
+    )
 
     return (
       <>
@@ -368,7 +546,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectPhotos')}
+              {availableProviders.length > 1 ? t('memories.selectPhotosMultiple') : t('memories.selectPhotos', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={() => { clearImageQueue(); setShowPicker(false) }}
@@ -386,6 +564,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
               </button>
             </div>
           </div>
+          <div style={{ marginBottom: 10 }}>
+            <ProviderTabs />
+          </div>
           {/* Filter tabs */}
           <div style={{ display: 'flex', gap: 6 }}>
             {startDate && endDate && (
@@ -429,10 +610,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             <div style={{ textAlign: 'center', padding: '60px 20px' }}>
               <Camera size={36} style={{ color: 'var(--text-faint)', margin: '0 auto 10px', display: 'block' }} />
               <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>{t('memories.noPhotos')}</p>
+              {
+                pickerDateFilter && (
+                  <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
+                    {t('memories.noPhotosHint', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
+                  </p>
+                )
+              } 
             </div>
           ) : (() => {
             // Group photos by month
-            const byMonth: Record<string, ImmichAsset[]> = {}
+            const byMonth: Record<string, Asset[]> = {}
             for (const asset of pickerPhotos) {
               const d = asset.takenAt ? new Date(asset.takenAt) : null
               const key = d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}` : 'unknown'
@@ -450,11 +638,12 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 </div>
                 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 4 }}>
                   {byMonth[month].map(asset => {
-                    const isSelected = selectedIds.has(asset.id)
-                    const isAlready = alreadyAdded.has(asset.id)
+                    const pickerKey = makePickerKey(asset.provider, asset.id)
+                    const isSelected = selectedIds.has(pickerKey)
+                    const isAlready = alreadyAdded.has(pickerKey)
                     return (
-                      <div key={asset.id}
-                        onClick={() => !isAlready && togglePickerSelect(asset.id)}
+                      <div key={pickerKey}
+                        onClick={() => !isAlready && togglePickerSelect(pickerKey)}
                         style={{
                           position: 'relative', aspectRatio: '1', borderRadius: 8, overflow: 'hidden',
                           cursor: isAlready ? 'default' : 'pointer',
@@ -462,7 +651,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                           outline: isSelected ? '3px solid var(--text-primary)' : 'none',
                           outlineOffset: -3,
                         }}>
-                        <ImmichImg baseUrl={thumbnailBaseUrl(asset.id, currentUser!.id)} loading="lazy"
+                        <ProviderImg baseUrl={buildProviderAssetUrlFromAsset(asset, 'thumbnail', currentUser!.id)} provider={asset.provider} loading="lazy"
                           style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                         {isSelected && (
                           <div style={{
@@ -570,7 +759,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 <FolderOpen size={11} />
                 <span style={{ fontWeight: 500 }}>{link.album_name}</span>
                 {link.username !== currentUser?.username && <span style={{ color: 'var(--text-faint)' }}>({link.username})</span>}
-                <button onClick={() => syncAlbum(link.id)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
+                <button onClick={() => syncAlbum(link.id, link.provider)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: 'var(--text-faint)' }}>
                   <RefreshCw size={11} style={{ animation: syncing === link.id ? 'spin 1s linear infinite' : 'none' }} />
                 </button>
@@ -616,12 +805,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         {allVisible.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
             <Camera size={40} style={{ color: 'var(--text-faint)', margin: '0 auto 12px', display: 'block' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 12px' }}>
               {t('memories.noPhotos')}
             </p>
-            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
-              {t('memories.noPhotosHint')}
-            </p>
             <button onClick={openPicker}
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 5, padding: '9px 18px', borderRadius: 10,
@@ -636,19 +822,19 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             {allVisible.map(photo => {
               const isOwn = photo.user_id === currentUser?.id
               return (
-                <div key={photo.immich_asset_id} className="group"
+                <div key={`${photo.provider}:${photo.asset_id}`} className="group"
                   style={{ position: 'relative', aspectRatio: '1', borderRadius: 10, overflow: 'visible', cursor: 'pointer' }}
                   onClick={() => {
-                    setLightboxId(photo.immich_asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
+                    setLightboxId(photo.asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
                     if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
                     setLightboxOriginalSrc('')
-                    fetchImageAsBlob(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`).then(setLightboxOriginalSrc)
+                    fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
                     setLightboxInfoLoading(true)
-                    apiClient.get(`/integrations/immich/assets/${photo.immich_asset_id}/info?userId=${photo.user_id}`)
+                    apiClient.get(buildProviderAssetUrl(photo, 'info'))
                       .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
                   }}>
 
-                  <ImmichImg baseUrl={thumbnailBaseUrl(photo.immich_asset_id, photo.user_id)} loading="lazy"
+                  <ProviderImg baseUrl={buildProviderAssetUrl(photo, 'thumbnail')} provider={photo.provider} loading="lazy"
                     style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} />
 
                   {/* Other user's avatar */}
@@ -679,7 +865,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                   {isOwn && (
                     <div className="opacity-0 group-hover:opacity-100"
                       style={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 3, transition: 'opacity 0.15s' }}>
-                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo.immich_asset_id, !photo.shared) }}
+                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo, !photo.shared) }}
                         title={photo.shared ? t('memories.stopSharing') : t('memories.sharePhotos')}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
@@ -688,7 +874,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                         }}>
                         {photo.shared ? <Eye size={12} color="white" /> : <EyeOff size={12} color="white" />}
                       </button>
-                      <button onClick={e => { e.stopPropagation(); removePhoto(photo.immich_asset_id) }}
+                      <button onClick={e => { e.stopPropagation(); removePhoto(photo) }}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
                           background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
@@ -749,117 +935,193 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
       )}
 
       {/* Lightbox */}
-      {lightboxId && lightboxUserId && (
-        <div onClick={() => { if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc); setLightboxOriginalSrc(''); setLightboxId(null); setLightboxUserId(null) }}
-          style={{
-            position: 'absolute', inset: 0, zIndex: 100,
-            background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}>
-          <button onClick={() => { if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc); setLightboxOriginalSrc(''); setLightboxId(null); setLightboxUserId(null) }}
-            style={{
-              position: 'absolute', top: 16, right: 16, width: 40, height: 40, borderRadius: '50%',
-              background: 'rgba(255,255,255,0.1)', border: 'none', cursor: 'pointer',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-            <X size={20} color="white" />
-          </button>
-          <div onClick={e => e.stopPropagation()} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
-            <img
-              src={lightboxOriginalSrc}
-              alt=""
-              style={{ maxWidth: lightboxInfo ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
-            />
+      {lightboxId && lightboxUserId && (() => {
+        const closeLightbox = () => {
+          if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
+          setLightboxOriginalSrc('')
+          setLightboxId(null)
+          setLightboxUserId(null)
+          setShowMobileInfo(false)
+        }
 
-            {/* Info panel — liquid glass */}
-            {lightboxInfo && (
-              <div style={{
-                width: 240, flexShrink: 0, borderRadius: 16, padding: 18,
-                background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
-                border: '1px solid rgba(255,255,255,0.12)', color: 'white',
-                display: 'flex', flexDirection: 'column', gap: 14, maxHeight: '100%', overflowY: 'auto',
-              }}>
-                {/* Date */}
-                {lightboxInfo.takenAt && (
+        const currentIdx = allVisible.findIndex(p => p.asset_id === lightboxId)
+        const hasPrev = currentIdx > 0
+        const hasNext = currentIdx < allVisible.length - 1
+        const navigateTo = (idx: number) => {
+          const photo = allVisible[idx]
+          if (!photo) return
+          if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
+          setLightboxOriginalSrc('')
+          setLightboxId(photo.asset_id)
+          setLightboxUserId(photo.user_id)
+          setLightboxInfo(null)
+          fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
+        }
+
+        const exifContent = lightboxInfo ? (
+          <>
+            {lightboxInfo.takenAt && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Date</div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>{new Date(lightboxInfo.takenAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })}</div>
+                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{new Date(lightboxInfo.takenAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+              </div>
+            )}
+            {(lightboxInfo.city || lightboxInfo.country) && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>
+                  <MapPin size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />Location
+                </div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>
+                  {[lightboxInfo.city, lightboxInfo.state, lightboxInfo.country].filter(Boolean).join(', ')}
+                </div>
+              </div>
+            )}
+            {lightboxInfo.camera && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Camera</div>
+                <div style={{ fontSize: 12, fontWeight: 500 }}>{lightboxInfo.camera}</div>
+                {lightboxInfo.lens && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{lightboxInfo.lens}</div>}
+              </div>
+            )}
+            {(lightboxInfo.focalLength || lightboxInfo.aperture || lightboxInfo.iso) && (
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                {lightboxInfo.focalLength && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Date</div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>{new Date(lightboxInfo.takenAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })}</div>
-                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{new Date(lightboxInfo.takenAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Focal</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.focalLength}</div>
                   </div>
                 )}
-
-                {/* Location */}
-                {(lightboxInfo.city || lightboxInfo.country) && (
+                {lightboxInfo.aperture && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>
-                      <MapPin size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />Location
-                    </div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>
-                      {[lightboxInfo.city, lightboxInfo.state, lightboxInfo.country].filter(Boolean).join(', ')}
-                    </div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Aperture</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.aperture}</div>
                   </div>
                 )}
-
-                {/* Camera */}
-                {lightboxInfo.camera && (
+                {lightboxInfo.shutter && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Camera</div>
-                    <div style={{ fontSize: 12, fontWeight: 500 }}>{lightboxInfo.camera}</div>
-                    {lightboxInfo.lens && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{lightboxInfo.lens}</div>}
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Shutter</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.shutter}</div>
                   </div>
                 )}
-
-                {/* Settings */}
-                {(lightboxInfo.focalLength || lightboxInfo.aperture || lightboxInfo.iso) && (
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-                    {lightboxInfo.focalLength && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Focal</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.focalLength}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.aperture && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Aperture</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.aperture}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.shutter && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Shutter</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.shutter}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.iso && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>ISO</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.iso}</div>
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {/* Resolution & File */}
-                {(lightboxInfo.width || lightboxInfo.fileName) && (
-                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 10 }}>
-                    {lightboxInfo.width && lightboxInfo.height && (
-                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{lightboxInfo.width} × {lightboxInfo.height}</div>
-                    )}
-                    {lightboxInfo.fileSize && (
-                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{(lightboxInfo.fileSize / 1024 / 1024).toFixed(1)} MB</div>
-                    )}
+                {lightboxInfo.iso && (
+                  <div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>ISO</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.iso}</div>
                   </div>
                 )}
               </div>
             )}
+            {(lightboxInfo.width || lightboxInfo.fileName) && (
+              <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 10 }}>
+                {lightboxInfo.width && lightboxInfo.height && (
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{lightboxInfo.width} × {lightboxInfo.height}</div>
+                )}
+                {lightboxInfo.fileSize && (
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{(lightboxInfo.fileSize / 1024 / 1024).toFixed(1)} MB</div>
+                )}
+              </div>
+            )}
+          </>
+        ) : null
 
-            {lightboxInfoLoading && (
-              <div style={{ width: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <div className="w-6 h-6 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(255,255,255,0.2)', borderTopColor: 'white' }} />
+        return (
+          <div onClick={closeLightbox}
+            onKeyDown={e => { if (e.key === 'ArrowLeft' && hasPrev) navigateTo(currentIdx - 1); if (e.key === 'ArrowRight' && hasNext) navigateTo(currentIdx + 1); if (e.key === 'Escape') closeLightbox() }}
+            tabIndex={0} ref={el => el?.focus()}
+            onTouchStart={e => (e.currentTarget as any)._touchX = e.touches[0].clientX}
+            onTouchEnd={e => { const start = (e.currentTarget as any)._touchX; if (start == null) return; const diff = e.changedTouches[0].clientX - start; if (diff > 60 && hasPrev) navigateTo(currentIdx - 1); else if (diff < -60 && hasNext) navigateTo(currentIdx + 1) }}
+            style={{
+              position: 'absolute', inset: 0, zIndex: 100, outline: 'none',
+              background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+            {/* Close button */}
+            <button onClick={closeLightbox}
+              style={{
+                position: 'absolute', top: 16, right: 16, zIndex: 10, width: 40, height: 40, borderRadius: '50%',
+                background: 'rgba(255,255,255,0.1)', border: 'none', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}>
+              <X size={20} color="white" />
+            </button>
+
+            {/* Counter */}
+            {allVisible.length > 1 && (
+              <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 10, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
+                {currentIdx + 1} / {allVisible.length}
+              </div>
+            )}
+
+            {/* Prev/Next buttons */}
+            {hasPrev && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx - 1) }}
+                style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronLeft size={22} />
+              </button>
+            )}
+            {hasNext && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx + 1) }}
+                style={{ position: 'absolute', right: isMobile ? 12 : 280, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronRight size={22} />
+              </button>
+            )}
+
+            {/* Mobile info toggle button */}
+            {isMobile && (lightboxInfo || lightboxInfoLoading) && (
+              <button onClick={e => { e.stopPropagation(); setShowMobileInfo(prev => !prev) }}
+                style={{
+                  position: 'absolute', top: 16, right: 68, zIndex: 10, width: 40, height: 40, borderRadius: '50%',
+                  background: showMobileInfo ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.1)',
+                  border: 'none', cursor: 'pointer',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                <Info size={20} color="white" />
+              </button>
+            )}
+
+            <div onClick={e => { if (e.target === e.currentTarget) closeLightbox() }} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
+              <img
+                src={lightboxOriginalSrc}
+                alt=""
+                onClick={e => e.stopPropagation()}
+                style={{ maxWidth: (!isMobile && lightboxInfo) ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
+              />
+
+              {/* Desktop info panel — liquid glass */}
+              {!isMobile && lightboxInfo && (
+                <div style={{
+                  width: 240, flexShrink: 0, borderRadius: 16, padding: 18,
+                  background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                  border: '1px solid rgba(255,255,255,0.12)', color: 'white',
+                  display: 'flex', flexDirection: 'column', gap: 14, maxHeight: '100%', overflowY: 'auto',
+                }}>
+                  {exifContent}
+                </div>
+              )}
+
+              {!isMobile && lightboxInfoLoading && (
+                <div style={{ width: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <div className="w-6 h-6 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(255,255,255,0.2)', borderTopColor: 'white' }} />
+                </div>
+              )}
+            </div>
+
+            {/* Mobile bottom sheet */}
+            {isMobile && showMobileInfo && lightboxInfo && (
+              <div onClick={e => e.stopPropagation()} style={{
+                position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 5,
+                maxHeight: '60vh', overflowY: 'auto',
+                borderRadius: '16px 16px 0 0', padding: 18,
+                background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                border: '1px solid rgba(255,255,255,0.12)', borderBottom: 'none',
+                color: 'white', display: 'flex', flexDirection: 'column', gap: 14,
+              }}>
+                {exifContent}
               </div>
             )}
           </div>
-        </div>
-      )}
+        )
+      })()}
     </div>
   )
 }

client/src/components/Notifications/InAppNotificationItem.tsx

@@ -59,10 +59,6 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
         borderBottom: '1px solid var(--border-secondary)',
       }}
     >
-      {/* Unread dot */}
-      {!notification.is_read && (
-        <div className="absolute left-2 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full" style={{ background: '#6366f1' }} />
-      )}
 
       <div className="flex gap-3 items-start">
         {/* Sender avatar */}
@@ -102,7 +98,7 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
                   title={t('notifications.markRead')}
                   className="p-1 rounded transition-colors"
                   style={{ color: 'var(--text-faint)' }}
-                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = '#6366f1' }}
+                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)' }}
                   onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}
                 >
                   <CheckCheck className="w-3.5 h-3.5" />
@@ -134,7 +130,7 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
                 className="flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors"
                 style={{
                   background: notification.response === 'positive'
-                    ? '#6366f1'
+                    ? 'var(--text-primary)'
                     : notification.response === 'negative'
                       ? (dark ? '#27272a' : '#f1f5f9')
                       : (dark ? '#27272a' : '#f1f5f9'),

client/src/components/PDF/TripPDF.tsx

@@ -1,22 +1,33 @@
 // Trip PDF via browser print window
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
-import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark } from 'lucide-react'
-import { mapsApi } from '../../api/client'
+import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, LucideIcon } from 'lucide-react'
+import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNotesMap } from '../../types'
 
+function renderLucideIcon(icon:LucideIcon, props = {}) {
+  if (!_renderToStaticMarkup) return ''
+  return _renderToStaticMarkup(
+    createElement(icon, props)
+  );
+}
+
 const NOTE_ICON_MAP = { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark }
 function noteIconSvg(iconId) {
-  if (!_renderToStaticMarkup) return ''
   const Icon = NOTE_ICON_MAP[iconId] || FileText
-  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' }))
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' })
 }
 
 const TRANSPORT_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
 function transportIconSvg(type) {
-  if (!_renderToStaticMarkup) return ''
   const Icon = TRANSPORT_ICON_MAP[type] || Ticket
-  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#3b82f6' }))
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#3b82f6' })
+}
+
+const ACCOMMODATION_ICON_MAP = { accommodation: Hotel, checkin: LogIn, checkout: LogOut, location: MapPin, note: FileText, confirmation: KeyRound }
+function accommodationIconSvg(type) {
+  const Icon = ACCOMMODATION_ICON_MAP[type] || BedDouble
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#03398f', className: 'accommodation-icon' })
 }
 
 // ── SVG inline icons (for chips) ─────────────────────────────────────────────
@@ -115,6 +126,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const sorted = [...(days || [])].sort((a, b) => a.day_number - b.day_number)
   const range = longDateRange(sorted, loc)
   const coverImg = safeImg(trip?.cover_image)
+  //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
+  const accommodations = await accommodationsApi.list(trip.id);
 
   // Pre-fetch place photos from Google
   const photoMap = await fetchPlacePhotos(assignments)
@@ -223,7 +236,41 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                 ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
               </div>
             </div>`
-        }).join('')
+      }).join('')
+
+    const accommodationsForDay = (accommodations.accommodations || []).filter(a =>
+      days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+    ).sort((a, b) => a.start_day_id - b.start_day_id)
+
+    const accommodationDetails = accommodationsForDay.map(item => {
+      const isCheckIn = day.id === item.start_day_id
+      const isCheckOut = day.id === item.end_day_id
+      const actionLabel = isCheckIn ? tr('reservations.meta.checkIn')
+        : isCheckOut ? tr('reservations.meta.checkOut')
+        : tr('reservations.meta.linkAccommodation')
+      const actionIcon = isCheckIn ? accommodationIconSvg('checkin')
+        : isCheckOut ? accommodationIconSvg('checkout')
+        : accommodationIconSvg('accommodation')
+      const timeStr = isCheckIn ? (item.check_in || '')
+        : isCheckOut ? (item.check_out || '')
+        : ''
+
+      return `
+        <div class="day-accommodation">
+          <div class="day-accommodation-title accommodation-center-icon">${actionIcon} ${escHtml(actionLabel)}</div>
+          ${timeStr ? `<div class="accommodation-center-icon">${accommodationIconSvg('checkin')} <b>${escHtml(timeStr)}</b></div>` : ''}
+          <div class="accommodation-center-icon">${accommodationIconSvg('accommodation')} ${escHtml(item.place_name)}</div>
+          ${item.place_address ? `<div class="accommodation-center-icon">${accommodationIconSvg('location')} ${escHtml(item.place_address)}</div>` : ''}
+          ${item.notes ? `<div class="accommodation-center-icon">${accommodationIconSvg('note')} ${escHtml(item.notes)}</div>` : ''}
+          ${isCheckIn && item.confirmation ? `<div class="accommodation-center-icon">${accommodationIconSvg('confirmation')} ${escHtml(item.confirmation)}</div>` : ''}
+        </div>`
+    }).join('')
+
+    const accommodationsHtml = accommodationsForDay.length > 0
+      ? `<div class="day-accommodations-overview">
+          <div class="day-accommodations ${accommodationsForDay.length === 1 ? 'single' : ''}">${accommodationDetails}</div>
+        </div>`
+      : ''
 
     return `
       <div class="day-section${di > 0 ? ' page-break' : ''}">
@@ -233,8 +280,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
           ${cost ? `<span class="day-cost">${cost}</span>` : ''}
         </div>
-        <div class="day-body">${itemsHtml}</div>
-      </div>`
+        <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
+      </div>`  
   }).join('')
 
   const html = `<!DOCTYPE html>
@@ -317,6 +364,22 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   .day-cost  { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
   .day-body  { padding: 12px 28px 6px; }
 
+  /* accommodation info */
+  .day-accommodations-overview { font-size: 12px; }
+  .day-accommodations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
+  .day-accommodations.single { justify-content: center; }
+  .day-accommodation {
+    flex: 1 1 45%; min-width: 200px; margin: 4px 0; padding: 10px;
+    border: 2px solid #e2e8f0; border-radius: 12px;
+    display: flex; flex-direction: column;
+  }
+  .day-accommodation-title {
+    font-size: 16px; font-weight: 600; text-align: center;
+    margin-bottom: 4px; align-self: center;
+  }
+  .accommodation-center-icon { display: flex; align-items: center; gap: 4px; }
+
+
   /* ── Place card ────────────────────────────────── */
   .place-card {
     display: flex; align-items: stretch;

client/src/components/Packing/PackingListPanel.tsx

@@ -67,7 +67,134 @@ function katColor(kat, allCategories) {
   return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
 }
 
-interface PackingBag { id: number; trip_id: number; name: string; color: string; weight_limit_grams: number | null }
+interface PackingBag { id: number; trip_id: number; name: string; color: string; weight_limit_grams: number | null; user_id?: number | null; assigned_username?: string | null }
+
+// ── Bag Card ──────────────────────────────────────────────────────────────
+
+interface BagCardProps {
+  bag: PackingBag; bagItems: PackingItem[]; totalWeight: number; pct: number; tripId: number
+  tripMembers: TripMember[]; canEdit: boolean; onDelete: () => void
+  onUpdate: (bagId: number, data: Record<string, any>) => void
+  onSetMembers: (bagId: number, userIds: number[]) => void; t: any; compact?: boolean
+}
+
+function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers, canEdit, onDelete, onUpdate, onSetMembers, t, compact }: BagCardProps) {
+  const [editingName, setEditingName] = useState(false)
+  const [nameVal, setNameVal] = useState(bag.name)
+  const [showUserPicker, setShowUserPicker] = useState(false)
+  useEffect(() => setNameVal(bag.name), [bag.name])
+
+  const saveName = () => {
+    if (nameVal.trim() && nameVal.trim() !== bag.name) onUpdate(bag.id, { name: nameVal.trim() })
+    setEditingName(false)
+  }
+
+  const memberIds = (bag.members || []).map(m => m.user_id)
+  const toggleMember = (userId: number) => {
+    const next = memberIds.includes(userId) ? memberIds.filter(id => id !== userId) : [...memberIds, userId]
+    onSetMembers(bag.id, next)
+  }
+
+  const sz = compact ? { dot: 10, name: 12, weight: 11, bar: 6, count: 10, gap: 6, mb: 14, icon: 11, avatar: 18 } : { dot: 12, name: 14, weight: 13, bar: 8, count: 11, gap: 8, mb: 16, icon: 13, avatar: 22 }
+
+  return (
+    <div style={{ marginBottom: sz.mb }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: sz.gap, marginBottom: 4 }}>
+        <span style={{ width: sz.dot, height: sz.dot, borderRadius: '50%', background: bag.color, flexShrink: 0 }} />
+        {editingName && canEdit ? (
+          <input autoFocus value={nameVal} onChange={e => setNameVal(e.target.value)}
+            onBlur={saveName} onKeyDown={e => { if (e.key === 'Enter') saveName(); if (e.key === 'Escape') { setEditingName(false); setNameVal(bag.name) } }}
+            style={{ flex: 1, fontSize: sz.name, fontWeight: 600, padding: '1px 4px', borderRadius: 4, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', color: 'var(--text-primary)', background: 'transparent' }} />
+        ) : (
+          <span onClick={() => canEdit && setEditingName(true)} style={{ flex: 1, fontSize: sz.name, fontWeight: 600, color: compact ? 'var(--text-secondary)' : 'var(--text-primary)', cursor: canEdit ? 'text' : 'default' }}>{bag.name}</span>
+        )}
+        <span style={{ fontSize: sz.weight, color: 'var(--text-faint)', fontWeight: 500 }}>
+          {totalWeight >= 1000 ? `${(totalWeight / 1000).toFixed(1)} kg` : `${totalWeight} g`}
+        </span>
+        {canEdit && <button onClick={onDelete} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)', display: 'flex' }}><X size={sz.icon} /></button>}
+      </div>
+      {/* Members */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4, flexWrap: 'wrap', position: 'relative' }}>
+        {(bag.members || []).map(m => (
+          <span key={m.user_id} title={m.username} onClick={() => canEdit && toggleMember(m.user_id)} style={{ cursor: canEdit ? 'pointer' : 'default', display: 'inline-flex' }}>
+            {m.avatar ? (
+              <img src={m.avatar} alt={m.username} style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', objectFit: 'cover', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }} />
+            ) : (
+              <span style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', background: bag.color + '25', color: bag.color, fontSize: sz.avatar * 0.45, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${bag.color}`, boxSizing: 'border-box' }}>
+                {m.username[0].toUpperCase()}
+              </span>
+            )}
+          </span>
+        ))}
+        {canEdit && (
+          <button onClick={() => setShowUserPicker(v => !v)} style={{ width: sz.avatar, height: sz.avatar, borderRadius: '50%', border: '1.5px dashed var(--border-primary)', background: 'none', color: 'var(--text-faint)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, boxSizing: 'border-box' }}>
+            <Plus size={sz.avatar * 0.5} />
+          </button>
+        )}
+        {showUserPicker && (
+          <div style={{ position: 'absolute', left: 0, top: '100%', marginTop: 4, zIndex: 50, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', padding: 4, minWidth: 160 }}>
+            {tripMembers.map(m => {
+              const isSelected = memberIds.includes(m.id)
+              return (
+                <button key={m.id} onClick={() => { toggleMember(m.id); }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', background: isSelected ? 'var(--bg-tertiary)' : 'transparent', cursor: 'pointer', fontSize: 11, color: 'var(--text-primary)', fontFamily: 'inherit' }}
+                  onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-secondary)' }}
+                  onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
+                  {m.avatar ? (
+                    <img src={m.avatar} alt="" style={{ width: 20, height: 20, borderRadius: '50%', objectFit: 'cover' }} />
+                  ) : (
+                    <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--bg-tertiary)', fontSize: 10, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-faint)' }}>
+                      {m.username[0].toUpperCase()}
+                    </span>
+                  )}
+                  <span style={{ flex: 1, fontWeight: isSelected ? 600 : 400 }}>{m.username}</span>
+                  {isSelected && <Check size={12} style={{ color: '#10b981' }} />}
+                </button>
+              )
+            })}
+            {tripMembers.length === 0 && <div style={{ padding: '8px 10px', fontSize: 11, color: 'var(--text-faint)' }}>{t('packing.noMembers')}</div>}
+            <div style={{ borderTop: '1px solid var(--border-secondary)', marginTop: 4, paddingTop: 4 }}>
+              <button onClick={() => setShowUserPicker(false)} style={{ width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 11, color: 'var(--text-faint)', fontFamily: 'inherit', textAlign: 'center' }}>
+                {t('common.close')}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      <div style={{ height: sz.bar, background: 'var(--bg-tertiary)', borderRadius: 99, overflow: 'hidden' }}>
+        <div style={{ height: '100%', borderRadius: 99, background: bag.color, width: `${pct}%`, transition: 'width 0.3s' }} />
+      </div>
+      <div style={{ fontSize: sz.count, color: 'var(--text-faint)', marginTop: 2 }}>{bagItems.length} {t('admin.packingTemplates.items')}</div>
+    </div>
+  )
+}
+
+// ── Quantity Input ─────────────────────────────────────────────────────────
+
+function QuantityInput({ value, onSave }: { value: number; onSave: (qty: number) => void }) {
+  const [local, setLocal] = useState(String(value))
+  useEffect(() => setLocal(String(value)), [value])
+
+  const commit = () => {
+    const qty = Math.max(1, Math.min(999, Number(local) || 1))
+    setLocal(String(qty))
+    if (qty !== value) onSave(qty)
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent', flexShrink: 0 }}>
+      <input
+        type="text" inputMode="numeric"
+        value={local}
+        onChange={e => setLocal(e.target.value.replace(/\D/g, ''))}
+        onBlur={commit}
+        onKeyDown={e => { if (e.key === 'Enter') { commit(); (e.target as HTMLInputElement).blur() } }}
+        style={{ width: 24, border: 'none', outline: 'none', background: 'transparent', fontSize: 12, textAlign: 'right', fontFamily: 'inherit', color: 'var(--text-secondary)', padding: 0 }}
+      />
+      <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 500 }}>x</span>
+    </div>
+  )
+}
 
 // ── Artikel-Zeile ──────────────────────────────────────────────────────────
 interface ArtikelZeileProps {
@@ -154,6 +281,9 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
         </span>
       )}
 
+      {/* Quantity */}
+      {canEdit && <QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />}
+
       {/* Weight + Bag (when enabled) */}
       {bagTrackingEnabled && (
         <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
@@ -738,10 +868,26 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     } catch { toast.error(t('packing.toast.deleteError')) }
   }
 
+  const handleUpdateBag = async (bagId: number, data: Record<string, any>) => {
+    try {
+      const result = await packingApi.updateBag(tripId, bagId, data)
+      setBags(prev => prev.map(b => b.id === bagId ? { ...b, ...result.bag } : b))
+    } catch { toast.error(t('common.error')) }
+  }
+
+  const handleSetBagMembers = async (bagId: number, userIds: number[]) => {
+    try {
+      const result = await packingApi.setBagMembers(tripId, bagId, userIds)
+      setBags(prev => prev.map(b => b.id === bagId ? { ...b, members: result.members } : b))
+    } catch { toast.error(t('common.error')) }
+  }
+
   // Templates
   const [availableTemplates, setAvailableTemplates] = useState<{ id: number; name: string; item_count: number }[]>([])
   const [showTemplateDropdown, setShowTemplateDropdown] = useState(false)
   const [applyingTemplate, setApplyingTemplate] = useState(false)
+  const [showSaveTemplate, setShowSaveTemplate] = useState(false)
+  const [saveTemplateName, setSaveTemplateName] = useState('')
   const [showImportModal, setShowImportModal] = useState(false)
   const [importText, setImportText] = useState('')
   const csvInputRef = useRef<HTMLInputElement>(null)
@@ -775,10 +921,38 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     }
   }
 
+  const handleSaveAsTemplate = async () => {
+    if (!saveTemplateName.trim()) return
+    try {
+      await packingApi.saveAsTemplate(tripId, saveTemplateName.trim())
+      toast.success(t('packing.templateSaved'))
+      setShowSaveTemplate(false)
+      setSaveTemplateName('')
+      adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+    } catch {
+      toast.error(t('common.error'))
+    }
+  }
+
+  // Parse CSV line respecting quoted values (e.g. "Shirt, blue" stays as one field)
+  const parseCsvLine = (line: string): string[] => {
+    const parts: string[] = []
+    let current = ''
+    let inQuotes = false
+    for (let i = 0; i < line.length; i++) {
+      const ch = line[i]
+      if (ch === '"') { inQuotes = !inQuotes; continue }
+      if (!inQuotes && (ch === ',' || ch === ';' || ch === '\t')) { parts.push(current.trim()); current = ''; continue }
+      current += ch
+    }
+    parts.push(current.trim())
+    return parts
+  }
+
   const parseImportLines = (text: string) => {
     return text.split('\n').map(line => line.trim()).filter(Boolean).map(line => {
       // Format: Category, Name, Weight (optional), Bag (optional), checked/unchecked (optional)
-      const parts = line.split(/[,;\t]/).map(s => s.trim())
+      const parts = parseCsvLine(line)
       if (parts.length >= 2) {
         const category = parts[0]
         const name = parts[1]
@@ -885,6 +1059,32 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
                 )}
               </div>
             )}
+            {canEdit && items.length > 0 && (
+              <div style={{ position: 'relative' }}>
+                {showSaveTemplate ? (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    <input
+                      type="text" autoFocus
+                      value={saveTemplateName}
+                      onChange={e => setSaveTemplateName(e.target.value)}
+                      onKeyDown={e => { if (e.key === 'Enter') handleSaveAsTemplate(); if (e.key === 'Escape') { setShowSaveTemplate(false); setSaveTemplateName('') } }}
+                      placeholder={t('packing.templateName')}
+                      style={{ fontSize: 12, padding: '5px 10px', borderRadius: 99, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', width: 140, background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                    />
+                    <button onClick={handleSaveAsTemplate} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#10b981' }}><Check size={14} /></button>
+                    <button onClick={() => { setShowSaveTemplate(false); setSaveTemplateName('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}><X size={14} /></button>
+                  </div>
+                ) : (
+                  <button onClick={() => setShowSaveTemplate(true)} style={{
+                    display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
+                    border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
+                    background: 'var(--bg-card)', color: 'var(--text-muted)',
+                  }}>
+                    <FolderPlus size={12} /> <span className="hidden sm:inline">{t('packing.saveAsTemplate')}</span>
+                  </button>
+                )}
+              </div>
+            )}
             {bagTrackingEnabled && (
               <button onClick={() => setShowBagModal(true)} className="xl:!hidden"
                 style={{
@@ -1008,25 +1208,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
             const maxWeight = bag.weight_limit_grams || Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + (i.weight_grams || 0), 0)), 1)
             const pct = Math.min(100, Math.round((totalWeight / maxWeight) * 100))
             return (
-              <div key={bag.id} style={{ marginBottom: 14 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: bag.color, flexShrink: 0 }} />
-                  <span style={{ flex: 1, fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)' }}>{bag.name}</span>
-                  <span style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 500 }}>
-                    {totalWeight >= 1000 ? `${(totalWeight / 1000).toFixed(1)} kg` : `${totalWeight} g`}
-                  </span>
-                  {canEdit && (
-                  <button onClick={() => handleDeleteBag(bag.id)}
-                    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)', display: 'flex' }}>
-                    <X size={11} />
-                  </button>
-                  )}
-                </div>
-                <div style={{ height: 6, background: 'var(--bg-tertiary)', borderRadius: 99, overflow: 'hidden' }}>
-                  <div style={{ height: '100%', borderRadius: 99, background: bag.color, width: `${pct}%`, transition: 'width 0.3s' }} />
-                </div>
-                <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 2 }}>{bagItems.length} {t('admin.packingTemplates.items')}</div>
-              </div>
+              <BagCard key={bag.id} bag={bag} bagItems={bagItems} totalWeight={totalWeight} pct={pct} tripId={tripId} tripMembers={tripMembers} canEdit={canEdit} onDelete={() => handleDeleteBag(bag.id)} onUpdate={handleUpdateBag} onSetMembers={handleSetBagMembers} t={t} compact />
             )
           })}
 
@@ -1095,25 +1277,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
               const maxWeight = Math.max(...bags.map(b => items.filter(i => i.bag_id === b.id).reduce((s, i) => s + (i.weight_grams || 0), 0)), 1)
               const pct = Math.min(100, Math.round((totalWeight / maxWeight) * 100))
               return (
-                <div key={bag.id} style={{ marginBottom: 16 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-                    <span style={{ width: 12, height: 12, borderRadius: '50%', background: bag.color, flexShrink: 0 }} />
-                    <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{bag.name}</span>
-                    <span style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 500 }}>
-                      {totalWeight >= 1000 ? `${(totalWeight / 1000).toFixed(1)} kg` : `${totalWeight} g`}
-                    </span>
-                    {canEdit && (
-                    <button onClick={() => handleDeleteBag(bag.id)}
-                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)', display: 'flex' }}>
-                      <Trash2 size={13} />
-                    </button>
-                    )}
-                  </div>
-                  <div style={{ height: 8, background: 'var(--bg-tertiary)', borderRadius: 99, overflow: 'hidden' }}>
-                    <div style={{ height: '100%', borderRadius: 99, background: bag.color, width: `${pct}%`, transition: 'width 0.3s' }} />
-                  </div>
-                  <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 3 }}>{bagItems.length} {t('admin.packingTemplates.items')}</div>
-                </div>
+                <BagCard key={bag.id} bag={bag} bagItems={bagItems} totalWeight={totalWeight} pct={pct} tripId={tripId} tripMembers={tripMembers} canEdit={canEdit} onDelete={() => handleDeleteBag(bag.id)} onUpdate={handleUpdateBag} onSetMembers={handleSetBagMembers} t={t} />
               )
             })}
 
@@ -1187,18 +1351,29 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
           }} onClick={e => e.stopPropagation()}>
             <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
             <div style={{ fontSize: 12, color: 'var(--text-faint)', lineHeight: 1.5 }}>{t('packing.importHint')}</div>
-            <textarea
-              value={importText}
-              onChange={e => setImportText(e.target.value)}
-              rows={10}
-              placeholder={t('packing.importPlaceholder')}
-              style={{
-                width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
-                padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
-                outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
-                background: 'var(--bg-input)', resize: 'vertical', lineHeight: 1.5,
-              }}
-            />
+            <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
+              <div style={{
+                padding: '10px 0', fontSize: 13, fontFamily: 'monospace', lineHeight: 1.5,
+                color: 'var(--text-faint)', textAlign: 'right', userSelect: 'none',
+                background: 'var(--bg-hover)', borderRight: '1px solid var(--border-faint)',
+                minWidth: 32, flexShrink: 0,
+              }}>
+                {(importText || ' ').split('\n').map((_, i) => (
+                  <div key={i} style={{ padding: '0 6px' }}>{i + 1}</div>
+                ))}
+              </div>
+              <textarea
+                value={importText}
+                onChange={e => setImportText(e.target.value)}
+                rows={10}
+                placeholder={t('packing.importPlaceholder')}
+                style={{
+                  flex: 1, border: 'none', padding: '10px 12px', fontSize: 13, fontFamily: 'monospace',
+                  outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
+                  background: 'transparent', resize: 'vertical', lineHeight: 1.5,
+                }}
+              />
+            </div>
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
               <div>
                 <input ref={csvInputRef} type="file" accept=".csv,.txt" style={{ display: 'none' }} onChange={handleCsvFile} />

client/src/components/Planner/DayPlanSidebar.tsx

@@ -136,6 +136,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const [dragOverDayId, setDragOverDayId] = useState(null)
   const [hoveredId, setHoveredId] = useState(null)
   const [transportDetail, setTransportDetail] = useState(null)
+  const [transportPosVersion, setTransportPosVersion] = useState(0)
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
@@ -211,13 +212,67 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
   const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
 
+  // Determine if a reservation's end_time represents a different date (multi-day)
+  const getEndDate = (r: Reservation) => {
+    const endStr = r.reservation_end_time || ''
+    return endStr.includes('T') ? endStr.split('T')[0] : null
+  }
+
+  // Get span phase: how a reservation relates to a specific day's date
+  const getSpanPhase = (r: Reservation, dayDate: string): 'single' | 'start' | 'middle' | 'end' => {
+    if (!r.reservation_time) return 'single'
+    const startDate = r.reservation_time.split('T')[0]
+    const endDate = getEndDate(r) || startDate
+    if (startDate === endDate) return 'single'
+    if (dayDate === startDate) return 'start'
+    if (dayDate === endDate) return 'end'
+    return 'middle'
+  }
+
+  // Get the appropriate display time for a reservation on a specific day
+  const getDisplayTimeForDay = (r: Reservation, dayDate: string): string | null => {
+    const phase = getSpanPhase(r, dayDate)
+    if (phase === 'end') return r.reservation_end_time || null
+    if (phase === 'middle') return null
+    return r.reservation_time || null
+  }
+
+  // Get phase label for multi-day badge
+  const getSpanLabel = (r: Reservation, phase: string): string | null => {
+    if (phase === 'single') return null
+    if (r.type === 'flight') return t(`reservations.span.${phase === 'start' ? 'departure' : phase === 'end' ? 'arrival' : 'inTransit'}`)
+    if (r.type === 'car') return t(`reservations.span.${phase === 'start' ? 'pickup' : phase === 'end' ? 'return' : 'active'}`)
+    return t(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
+  }
+
   const getTransportForDay = (dayId: number) => {
     const day = days.find(d => d.id === dayId)
     if (!day?.date) return []
     return reservations.filter(r => {
-      if (!r.reservation_time || !TRANSPORT_TYPES.has(r.type)) return false
-      const resDate = r.reservation_time.split('T')[0]
-      return resDate === day.date
+      if (!r.reservation_time || r.type === 'hotel') return false
+      const startDate = r.reservation_time.split('T')[0]
+      const endDate = getEndDate(r)
+
+      if (endDate && endDate !== startDate) {
+        // Multi-day: show on any day in range (car middle handled elsewhere)
+        return day.date >= startDate && day.date <= endDate
+      } else {
+        // Single-day: show all non-hotel reservations that match this day's date
+        return startDate === day.date
+      }
+    })
+  }
+
+  // Get car rentals that are in "active" (middle) phase for a day — shown in day header, not timeline
+  const getActiveRentalsForDay = (dayId: number) => {
+    const day = days.find(d => d.id === dayId)
+    if (!day?.date) return []
+    return reservations.filter(r => {
+      if (r.type !== 'car' || !r.reservation_time) return false
+      const startDate = r.reservation_time.split('T')[0]
+      const endDate = getEndDate(r)
+      if (!endDate || endDate === startDate) return false
+      return day.date > startDate && day.date < endDate
     })
   }
 
@@ -279,47 +334,45 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     const da = getDayAssignments(dayId)
     const dn = (dayNotes[String(dayId)] || []).slice().sort((a, b) => a.sort_order - b.sort_order)
     const transport = getTransportForDay(dayId)
+    const dayDate = days.find(d => d.id === dayId)?.date || ''
 
     // Initialize positions for transports that don't have one yet
     if (transport.some(r => r.day_plan_position == null)) {
       initTransportPositions(dayId)
     }
 
-    // Build base list: untimed places + notes sorted by order_index/sort_order
-    const timedPlaces = da.filter(a => parseTimeToMinutes(a.place?.place_time) !== null)
-    const freePlaces = da.filter(a => parseTimeToMinutes(a.place?.place_time) === null)
-
+    // Build base list: ALL places (timed and untimed) + notes sorted by order_index/sort_order
+    // Places keep their order_index ordering — only transports are inserted based on time.
     const baseItems = [
-      ...freePlaces.map(a => ({ type: 'place' as const, sortKey: a.order_index, data: a })),
+      ...da.map(a => ({ type: 'place' as const, sortKey: a.order_index, data: a })),
       ...dn.map(n => ({ type: 'note' as const, sortKey: n.sort_order, data: n })),
     ].sort((a, b) => a.sortKey - b.sortKey)
 
-    // Timed places + transports: compute sortKeys based on time, inserted among base items
-    const allTimed = [
-      ...timedPlaces.map(a => ({ type: 'place' as const, data: a, minutes: parseTimeToMinutes(a.place?.place_time)! })),
-      ...transport.map(r => ({ type: 'transport' as const, data: r, minutes: parseTimeToMinutes(r.reservation_time) ?? 0 })),
-    ].sort((a, b) => a.minutes - b.minutes)
+    // Only transports are inserted among base items based on time/position
+    const timedTransports = transport.map(r => ({
+      type: 'transport' as const,
+      data: r,
+      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayDate)) ?? 0,
+    })).sort((a, b) => a.minutes - b.minutes)
 
-    if (allTimed.length === 0) return baseItems
+    if (timedTransports.length === 0) return baseItems
     if (baseItems.length === 0) {
-      return allTimed.map((item, i) => ({ ...item, sortKey: i }))
+      return timedTransports.map((item, i) => ({ ...item, sortKey: i }))
     }
 
-    // Insert timed items among base items using time-to-position mapping.
-    // Each timed item finds the last base place whose order_index corresponds
-    // to a reasonable position, then gets a fractional sortKey after it.
+    // Insert transports among base items using persisted position or time-to-position mapping.
     const result = [...baseItems]
-    for (let ti = 0; ti < allTimed.length; ti++) {
-      const timed = allTimed[ti]
+    for (let ti = 0; ti < timedTransports.length; ti++) {
+      const timed = timedTransports[ti]
       const minutes = timed.minutes
 
-      // For transports, use persisted position if available
-      if (timed.type === 'transport' && timed.data.day_plan_position != null) {
+      // Use persisted position if available
+      if (timed.data.day_plan_position != null) {
         result.push({ type: timed.type, sortKey: timed.data.day_plan_position, data: timed.data })
         continue
       }
 
-      // Find insertion position: after the last base item with time <= this item's time
+      // Find insertion position: after the last base item with time <= this transport's time
       let insertAfterKey = -Infinity
       for (const item of result) {
         if (item.type === 'place') {
@@ -350,7 +403,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     return map
   // getMergedItems is redefined each render but captures assignments/dayNotes/reservations/days via closure
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [days, assignments, dayNotes, reservations])
+  }, [days, assignments, dayNotes, reservations, transportPosVersion])
 
   const openAddNote = (dayId, e) => {
     e?.stopPropagation()
@@ -449,6 +502,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
           const res = reservations.find(r => r.id === tu.id)
           if (res) res.day_plan_position = tu.day_plan_position
         }
+        setTransportPosVersion(v => v + 1)
         await reservationsApi.updatePositions(tripId, transportUpdates)
       }
       if (prevAssignmentIds.length) {
@@ -968,6 +1022,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           )
                         })
                       })()}
+                      {/* Active rental car badges */}
+                      {(() => {
+                        const activeRentals = getActiveRentalsForDay(day.id)
+                        if (activeRentals.length === 0) return null
+                        return activeRentals.map(r => (
+                          <span key={`rental-${r.id}`} onClick={e => { e.stopPropagation(); setTransportDetail(r) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 5, background: 'rgba(59,130,246,0.08)', border: '1px solid rgba(59,130,246,0.2)', flexShrink: 1, minWidth: 0, maxWidth: '40%', cursor: 'pointer' }}>
+                            <Car size={8} style={{ color: '#3b82f6', flexShrink: 0 }} />
+                            <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+                          </span>
+                        ))
+                      })()}
                     </div>
                   )}
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2, flexWrap: 'wrap' }}>
@@ -1010,18 +1075,20 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                     const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
                     // Drop on transport card (detected via dropTargetRef for sync accuracy)
                     if (dropTargetRef.current?.startsWith('transport-')) {
-                      const transportId = Number(dropTargetRef.current.replace('transport-', ''))
+                      const isAfter = dropTargetRef.current.startsWith('transport-after-')
+                      const parts = dropTargetRef.current.replace('transport-after-', '').replace('transport-', '').split('-')
+                      const transportId = Number(parts[0])
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
                       } else if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : 'Unknown error'))
                       } else if (assignmentId) {
-                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId)
+                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter)
                       } else if (noteId && fromDayId !== day.id) {
                         tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : 'Unknown error'))
                       } else if (noteId) {
-                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId)
+                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter)
                       }
                       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                       return
@@ -1062,8 +1129,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                     </div>
                   ) : (
                     merged.map((item, idx) => {
-                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
+                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
                       const showDropLine = (!!draggingId || !!dropTargetKey) && dropTargetKey === itemKey
+                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}-${day.id}`
 
                       if (item.type === 'place') {
                         const assignment = item.data
@@ -1291,6 +1359,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       // Transport booking (flight, train, bus, car, cruise)
                       if (item.type === 'transport') {
                         const res = item.data
+                        const spanPhase = getSpanPhase(res, day.date)
+
+                        // Car "active" (middle) days are shown in the day header, skip here
+                        if (res.type === 'car' && spanPhase === 'middle') return null
+
                         const TransportIcon = RES_ICONS[res.type] || Ticket
                         const color = '#3b82f6'
                         const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
@@ -1307,25 +1380,37 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
                         }
 
+                        // Multi-day span phase
+                        const spanLabel = getSpanLabel(res, spanPhase)
+                        const displayTime = getDisplayTimeForDay(res, day.date)
+
                         return (
-                          <React.Fragment key={`transport-${res.id}`}>
+                          <React.Fragment key={`transport-${res.id}-${day.id}`}>
                           {showDropLine && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           <div
                             onClick={() => setTransportDetail(res)}
-                            onDragOver={e => { e.preventDefault(); e.stopPropagation(); setDropTargetKey(`transport-${res.id}`) }}
+                            onDragOver={e => {
+                              e.preventDefault(); e.stopPropagation()
+                              const rect = e.currentTarget.getBoundingClientRect()
+                              const inBottom = e.clientY > rect.top + rect.height / 2
+                              const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
+                              if (dropTargetRef.current !== key) setDropTargetKey(key)
+                            }}
                             onDrop={e => {
                               e.preventDefault(); e.stopPropagation()
+                              const rect = e.currentTarget.getBoundingClientRect()
+                              const insertAfter = e.clientY > rect.top + rect.height / 2
                               const { placeId, assignmentId: fromAssignmentId, noteId, fromDayId } = getDragData(e)
                               if (placeId) {
                                 onAssignToDay?.(parseInt(placeId), day.id)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : 'Unknown error'))
                               } else if (fromAssignmentId) {
-                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id)
+                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter)
                               } else if (noteId && fromDayId !== day.id) {
                                 tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : 'Unknown error'))
                               } else if (noteId) {
-                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id)
+                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter)
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
@@ -1340,6 +1425,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               background: isTransportHovered ? `${color}12` : `${color}08`,
                               cursor: 'pointer', userSelect: 'none',
                               transition: 'background 0.1s',
+                              opacity: spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
                             <div style={{
@@ -1350,14 +1436,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             </div>
                             <div style={{ flex: 1, minWidth: 0 }}>
                               <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                                {spanLabel && (
+                                  <span style={{
+                                    fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4, flexShrink: 0,
+                                    background: `${color}20`, color: color, textTransform: 'uppercase', letterSpacing: '0.03em',
+                                  }}>
+                                    {spanLabel}
+                                  </span>
+                                )}
                                 <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                   {res.title}
                                 </span>
-                                {res.reservation_time?.includes('T') && (
+                                {displayTime?.includes('T') && (
                                   <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 10, color: 'var(--text-faint)', fontWeight: 400, marginLeft: 6 }}>
                                     <Clock size={9} strokeWidth={2} />
-                                    {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
-                                    {res.reservation_end_time?.includes('T') && ` – ${new Date(res.reservation_end_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}`}
+                                    {new Date(displayTime).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                                    {spanPhase === 'single' && res.reservation_end_time && (() => {
+                                      const endStr = res.reservation_end_time.includes('T') ? res.reservation_end_time : (displayTime.split('T')[0] + 'T' + res.reservation_end_time)
+                                      return ` – ${new Date(endStr).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}`
+                                    })()}
+                                    {meta.departure_timezone && spanPhase === 'start' && ` ${meta.departure_timezone}`}
+                                    {meta.arrival_timezone && spanPhase === 'end' && ` ${meta.arrival_timezone}`}
                                   </span>
                                 )}
                               </div>
@@ -1368,6 +1467,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               )}
                             </div>
                           </div>
+                          {showDropLineAfter && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           </React.Fragment>
                         )
                       }

client/src/components/Planner/ReservationModal.tsx

@@ -71,11 +71,20 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const { t, locale } = useTranslation()
   const fileInputRef = useRef(null)
 
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const budgetCategories = useMemo(() => {
+    const cats = new Set<string>()
+    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [budgetItems])
+
   const [form, setForm] = useState({
     title: '', type: 'other', status: 'pending',
-    reservation_time: '', reservation_end_time: '', location: '', confirmation_number: '',
+    reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
     notes: '', assignment_id: '', accommodation_id: '',
+    price: '', budget_category: '',
     meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
+    meta_departure_timezone: '', meta_arrival_timezone: '',
     meta_train_number: '', meta_platform: '', meta_seat: '',
     meta_check_in_time: '', meta_check_out_time: '',
     hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
@@ -95,12 +104,21 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   useEffect(() => {
     if (reservation) {
       const meta = typeof reservation.metadata === 'string' ? JSON.parse(reservation.metadata || '{}') : (reservation.metadata || {})
+      // Parse end_date from reservation_end_time if it's a full ISO datetime
+      const rawEnd = reservation.reservation_end_time || ''
+      let endDate = ''
+      let endTime = rawEnd
+      if (rawEnd.includes('T')) {
+        endDate = rawEnd.split('T')[0]
+        endTime = rawEnd.split('T')[1]?.slice(0, 5) || ''
+      }
       setForm({
         title: reservation.title || '',
         type: reservation.type || 'other',
         status: reservation.status || 'pending',
         reservation_time: reservation.reservation_time ? reservation.reservation_time.slice(0, 16) : '',
-        reservation_end_time: reservation.reservation_end_time || '',
+        reservation_end_time: endTime,
+        end_date: endDate,
         location: reservation.location || '',
         confirmation_number: reservation.confirmation_number || '',
         notes: reservation.notes || '',
@@ -110,6 +128,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         meta_flight_number: meta.flight_number || '',
         meta_departure_airport: meta.departure_airport || '',
         meta_arrival_airport: meta.arrival_airport || '',
+        meta_departure_timezone: meta.departure_timezone || '',
+        meta_arrival_timezone: meta.arrival_timezone || '',
         meta_train_number: meta.train_number || '',
         meta_platform: meta.platform || '',
         meta_seat: meta.seat || '',
@@ -118,13 +138,17 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
         hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
         hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
+        price: meta.price || '',
+        budget_category: meta.budget_category || '',
       })
     } else {
       setForm({
         title: '', type: 'other', status: 'pending',
-        reservation_time: '', reservation_end_time: '', location: '', confirmation_number: '',
+        reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
         notes: '', assignment_id: '', accommodation_id: '',
+        price: '', budget_category: '',
         meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
+        meta_departure_timezone: '', meta_arrival_timezone: '',
         meta_train_number: '', meta_platform: '', meta_seat: '',
         meta_check_in_time: '', meta_check_out_time: '',
       })
@@ -134,9 +158,21 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
   const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
 
+  // Validate that end datetime is after start datetime
+  const isEndBeforeStart = (() => {
+    if (!form.end_date || !form.reservation_time) return false
+    const startDate = form.reservation_time.split('T')[0]
+    const startTime = form.reservation_time.split('T')[1] || '00:00'
+    const endTime = form.reservation_end_time || '00:00'
+    const startFull = `${startDate}T${startTime}`
+    const endFull = `${form.end_date}T${endTime}`
+    return endFull <= startFull
+  })()
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     if (!form.title.trim()) return
+    if (isEndBeforeStart) { toast.error(t('reservations.validation.endBeforeStart')); return }
     setIsSaving(true)
     try {
       const metadata: Record<string, string> = {}
@@ -145,6 +181,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
         if (form.meta_departure_airport) metadata.departure_airport = form.meta_departure_airport
         if (form.meta_arrival_airport) metadata.arrival_airport = form.meta_arrival_airport
+        if (form.meta_departure_timezone) metadata.departure_timezone = form.meta_departure_timezone
+        if (form.meta_arrival_timezone) metadata.arrival_timezone = form.meta_arrival_timezone
       } else if (form.type === 'hotel') {
         if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
         if (form.meta_check_out_time) metadata.check_out_time = form.meta_check_out_time
@@ -153,15 +191,26 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         if (form.meta_platform) metadata.platform = form.meta_platform
         if (form.meta_seat) metadata.seat = form.meta_seat
       }
+      // Combine end_date + end_time into reservation_end_time
+      let combinedEndTime = form.reservation_end_time
+      if (form.end_date) {
+        combinedEndTime = form.reservation_end_time ? `${form.end_date}T${form.reservation_end_time}` : form.end_date
+      }
+      if (form.price) metadata.price = form.price
+      if (form.budget_category) metadata.budget_category = form.budget_category
       const saveData: Record<string, any> = {
         title: form.title, type: form.type, status: form.status,
-        reservation_time: form.reservation_time, reservation_end_time: form.reservation_end_time,
+        reservation_time: form.reservation_time, reservation_end_time: combinedEndTime,
         location: form.location, confirmation_number: form.confirmation_number,
         notes: form.notes,
         assignment_id: form.assignment_id || null,
         accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
         metadata: Object.keys(metadata).length > 0 ? metadata : null,
       }
+      // Auto-create/update budget entry if price is set, or signal removal if cleared
+      saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
+        ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
+        : { total_price: 0 }
       // If hotel with place + days, pass hotel data for auto-creation or update
       if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
         saveData.create_accommodation = {
@@ -257,10 +306,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
             placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
         </div>
 
-        {/* Assignment Picker + Date (hidden for hotels) */}
-        {form.type !== 'hotel' && (
-        <div style={{ display: 'flex', gap: 8 }}>
-          {assignmentOptions.length > 0 && (
+        {/* Assignment Picker (hidden for hotels) */}
+        {form.type !== 'hotel' && assignmentOptions.length > 0 && (
+        <div>
             <div style={{ flex: 1, minWidth: 0 }}>
               <label style={labelStyle}>
                 <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
@@ -287,54 +335,81 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 size="sm"
               />
             </div>
-          )}
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>{t('reservations.date')}</label>
-            <CustomDatePicker
-              value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
-              onChange={d => {
-                const [, t] = (form.reservation_time || '').split('T')
-                set('reservation_time', d ? (t ? `${d}T${t}` : d) : '')
-              }}
-            />
-          </div>
         </div>
         )}
 
-        {/* Start Time + End Time + Status */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          {form.type !== 'hotel' && (
-            <>
+        {/* Start Date/Time + End Date/Time + Status (hidden for hotels) */}
+        {form.type !== 'hotel' && (
+        <>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
+              <CustomDatePicker
+                value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
+                onChange={d => {
+                  const [, t] = (form.reservation_time || '').split('T')
+                  set('reservation_time', d ? (t ? `${d}T${t}` : d) : '')
+                }}
+              />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
+              <CustomTimePicker
+                value={(() => { const [, t] = (form.reservation_time || '').split('T'); return t || '' })()}
+                onChange={t => {
+                  const [d] = (form.reservation_time || '').split('T')
+                  const date = d || new Date().toISOString().split('T')[0]
+                  set('reservation_time', t ? `${date}T${t}` : date)
+                }}
+              />
+            </div>
+            {form.type === 'flight' && (
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.startTime')}</label>
-                <CustomTimePicker
-                  value={(() => { const [, t] = (form.reservation_time || '').split('T'); return t || '' })()}
-                  onChange={t => {
-                    const [d] = (form.reservation_time || '').split('T')
-                    const date = d || new Date().toISOString().split('T')[0]
-                    set('reservation_time', t ? `${date}T${t}` : date)
-                  }}
-                />
+                <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
+                <input type="text" value={form.meta_departure_timezone} onChange={e => set('meta_departure_timezone', e.target.value)}
+                  placeholder="e.g. CET, UTC+1" style={inputStyle} />
               </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.endTime')}</label>
-                <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
-              </div>
-            </>
-          )}
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>{t('reservations.status')}</label>
-            <CustomSelect
-              value={form.status}
-              onChange={value => set('status', value)}
-              options={[
-                { value: 'pending', label: t('reservations.pending') },
-                { value: 'confirmed', label: t('reservations.confirmed') },
-              ]}
-              size="sm"
-            />
+            )}
           </div>
-        </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
+              <CustomDatePicker
+                value={form.end_date}
+                onChange={d => set('end_date', d || '')}
+              />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
+              <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
+            </div>
+            {form.type === 'flight' && (
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
+                <input type="text" value={form.meta_arrival_timezone} onChange={e => set('meta_arrival_timezone', e.target.value)}
+                  placeholder="e.g. JST, UTC+9" style={inputStyle} />
+              </div>
+            )}
+          </div>
+          {isEndBeforeStart && (
+            <div style={{ fontSize: 11, color: '#ef4444', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
+          )}
+          <div style={{ display: 'flex', gap: 8 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{t('reservations.status')}</label>
+              <CustomSelect
+                value={form.status}
+                onChange={value => set('status', value)}
+                options={[
+                  { value: 'pending', label: t('reservations.pending') },
+                  { value: 'confirmed', label: t('reservations.confirmed') },
+                ]}
+                size="sm"
+              />
+            </div>
+          </div>
+        </>
+        )}
 
         {/* Location + Booking Code */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -422,8 +497,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
             </div>
-            {/* Check-in/out times */}
-            <div className="grid grid-cols-2 gap-3">
+            {/* Check-in/out times + Status */}
+            <div className="grid grid-cols-3 gap-3">
               <div>
                 <label style={labelStyle}>{t('reservations.meta.checkIn')}</label>
                 <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
@@ -432,6 +507,18 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <label style={labelStyle}>{t('reservations.meta.checkOut')}</label>
                 <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
               </div>
+              <div>
+                <label style={labelStyle}>{t('reservations.status')}</label>
+                <CustomSelect
+                  value={form.status}
+                  onChange={value => set('status', value)}
+                  options={[
+                    { value: 'pending', label: t('reservations.pending') },
+                    { value: 'confirmed', label: t('reservations.confirmed') },
+                  ]}
+                  size="sm"
+                />
+              </div>
             </div>
           </>
         )}
@@ -556,12 +643,41 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </div>
         </div>
 
+        {/* Price + Budget Category */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.price')}</label>
+            <input type="text" inputMode="decimal" value={form.price}
+              onChange={e => { const v = e.target.value; if (v === '' || /^\d*\.?\d{0,2}$/.test(v)) set('price', v) }}
+              placeholder="0.00"
+              style={inputStyle} />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+            <CustomSelect
+              value={form.budget_category}
+              onChange={v => set('budget_category', v)}
+              options={[
+                { value: '', label: t('reservations.budgetCategoryAuto') },
+                ...budgetCategories.map(c => ({ value: c, label: c })),
+              ]}
+              placeholder={t('reservations.budgetCategoryAuto')}
+              size="sm"
+            />
+          </div>
+        </div>
+        {form.price && parseFloat(form.price) > 0 && (
+          <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+            {t('reservations.budgetHint')}
+          </div>
+        )}
+
         {/* Actions */}
         <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
           <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
             {t('common.cancel')}
           </button>
-          <button type="submit" disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
             {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
           </button>
         </div>

client/src/components/Planner/ReservationsPanel.tsx

@@ -136,7 +136,12 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
               {r.reservation_time && (
                 <div style={{ flex: 1, padding: '5px 10px', textAlign: 'center', borderRight: '1px solid var(--border-faint)' }}>
                   <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{t('reservations.date')}</div>
-                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>{fmtDate(r.reservation_time)}</div>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', marginTop: 1 }}>
+                    {fmtDate(r.reservation_time)}
+                    {r.reservation_end_time?.includes('T') && r.reservation_end_time.split('T')[0] !== r.reservation_time.split('T')[0] && (
+                      <> – {fmtDate(r.reservation_end_time)}</>
+                    )}
+                  </div>
                 </div>
               )}
               {r.reservation_time?.includes('T') && (
@@ -179,8 +184,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
             if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
             if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
-            if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: meta.check_in_time })
-            if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: meta.check_out_time })
+            if (meta.check_in_time) cells.push({ label: t('reservations.meta.checkIn'), value: fmtTime('2000-01-01T' + meta.check_in_time) })
+            if (meta.check_out_time) cells.push({ label: t('reservations.meta.checkOut'), value: fmtTime('2000-01-01T' + meta.check_out_time) })
             if (cells.length === 0) return null
             return (
               <div style={{ display: 'flex', gap: 0, borderRadius: 8, overflow: 'hidden', background: 'var(--bg-secondary)', boxShadow: '0 1px 6px rgba(0,0,0,0.08)' }}>

client/src/components/Settings/AboutTab.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import Section from './Section'
+
+interface Props {
+  appVersion: string
+}
+
+export default function AboutTab({ appVersion }: Props): React.ReactElement {
+  const { t } = useTranslation()
+
+  return (
+    <Section title={t('settings.about')} icon={Info}>
+      <style>{`
+        @keyframes heartPulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.15); }
+        }
+      `}</style>
+      <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', marginBottom: 6, marginTop: -4 }}>
+        {t('settings.about.description')}
+      </p>
+      <p style={{ fontSize: 12, lineHeight: 1.6, color: 'var(--text-faint)', marginBottom: 16 }}>
+        {t('settings.about.madeWith')}{' '}
+        <Heart size={11} fill="#991b1b" stroke="#991b1b" style={{ display: 'inline-block', verticalAlign: '-1px', animation: 'heartPulse 1.5s ease-in-out infinite' }} />
+        {' '}{t('settings.about.madeBy')}{' '}
+        <span style={{ display: 'inline-flex', alignItems: 'center', background: 'var(--bg-tertiary)', borderRadius: 99, padding: '1px 7px', fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', verticalAlign: '1px' }}>v{appVersion}</span>
+      </p>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        <a
+          href="https://ko-fi.com/mauriceboe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ff5e5b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Coffee size={20} style={{ color: '#ff5e5b' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Ko-fi</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://buymeacoffee.com/mauriceboe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ffdd0015', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Heart size={20} style={{ color: '#ffdd00' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Buy Me a Coffee</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('admin.github.support')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://discord.gg/nSdKaXgN"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#5865F215', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Discord</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>Join the community</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
+        <a
+          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ef444415', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Bug size={20} style={{ color: '#ef4444' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.reportBug')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.reportBugHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f59e0b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Lightbulb size={20} style={{ color: '#f59e0b' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.featureRequest')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.featureRequestHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/wiki"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#6366f115', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <BookOpen size={20} style={{ color: '#6366f1' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Wiki</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.wikiHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+      </div>
+    </Section>
+  )
+}

client/src/components/Settings/AccountTab.tsx

@@ -0,0 +1,598 @@
+import React, { useState, useEffect } from 'react'
+import { User, Save, Lock, KeyRound, AlertTriangle, Shield, Camera, Trash2, Copy, Download, Printer } from 'lucide-react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useTranslation } from '../../i18n'
+import { useAuthStore } from '../../store/authStore'
+import { useToast } from '../shared/Toast'
+import { authApi, adminApi } from '../../api/client'
+import { getApiErrorMessage } from '../../types'
+import type { UserWithOidc } from '../../types'
+import Section from './Section'
+
+const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
+
+export default function AccountTab(): React.ReactElement {
+  const { user, updateProfile, uploadAvatar, deleteAvatar, logout, loadUser, demoMode, appRequireMfa } = useAuthStore()
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const toast = useToast()
+  const avatarInputRef = React.useRef<HTMLInputElement>(null)
+
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean | 'blocked'>(false)
+
+  // Profile
+  const [username, setUsername] = useState<string>(user?.username || '')
+  const [email, setEmail] = useState<string>(user?.email || '')
+
+  useEffect(() => {
+    setUsername(user?.username || '')
+    setEmail(user?.email || '')
+  }, [user])
+
+  // Password
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [oidcOnlyMode, setOidcOnlyMode] = useState(false)
+
+  useEffect(() => {
+    authApi.getAppConfig?.().then(config => {
+      if (config?.oidc_only_mode) setOidcOnlyMode(true)
+    }).catch(() => {})
+  }, [])
+
+  // MFA
+  const [mfaQr, setMfaQr] = useState<string | null>(null)
+  const [mfaSecret, setMfaSecret] = useState<string | null>(null)
+  const [mfaSetupCode, setMfaSetupCode] = useState('')
+  const [mfaDisablePwd, setMfaDisablePwd] = useState('')
+  const [mfaDisableCode, setMfaDisableCode] = useState('')
+  const [mfaLoading, setMfaLoading] = useState(false)
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null)
+
+  const mfaRequiredByPolicy =
+    !demoMode &&
+    !user?.mfa_enabled &&
+    (searchParams.get('mfa') === 'required' || appRequireMfa)
+
+  const backupCodesText = backupCodes?.join('\n') || ''
+
+  useEffect(() => {
+    if (!user?.mfa_enabled || backupCodes) return
+    try {
+      const raw = sessionStorage.getItem(MFA_BACKUP_SESSION_KEY)
+      if (!raw) return
+      const parsed = JSON.parse(raw) as unknown
+      if (Array.isArray(parsed) && parsed.length > 0 && parsed.every(x => typeof x === 'string')) {
+        setBackupCodes(parsed)
+      }
+    } catch {
+      sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    }
+  }, [user?.mfa_enabled, backupCodes])
+
+  const dismissBackupCodes = () => {
+    sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+    setBackupCodes(null)
+  }
+
+  const copyBackupCodes = async () => {
+    if (!backupCodesText) return
+    try {
+      await navigator.clipboard.writeText(backupCodesText)
+      toast.success(t('settings.mfa.backupCopied'))
+    } catch {
+      toast.error(t('common.error'))
+    }
+  }
+
+  const downloadBackupCodes = () => {
+    if (!backupCodesText) return
+    const blob = new Blob([backupCodesText + '\n'], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'trek-mfa-backup-codes.txt'
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const printBackupCodes = () => {
+    if (!backupCodesText) return
+    const html = `<!doctype html><html><head><meta charset="utf-8"/><title>TREK MFA Backup Codes</title>
+      <style>body{font-family:Arial,sans-serif;padding:32px}h1{font-size:20px}pre{font-size:16px;line-height:1.6}</style>
+      </head><body><h1>TREK MFA Backup Codes</h1><p>${new Date().toLocaleString()}</p><pre>${backupCodesText}</pre></body></html>`
+    const w = window.open('', '_blank', 'width=900,height=700')
+    if (!w) return
+    w.document.open()
+    w.document.write(html)
+    w.document.close()
+    w.focus()
+    w.print()
+  }
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    try {
+      await uploadAvatar(file)
+      toast.success(t('settings.avatarUploaded'))
+    } catch {
+      toast.error(t('settings.avatarError'))
+    }
+    if (avatarInputRef.current) avatarInputRef.current.value = ''
+  }
+
+  const handleAvatarRemove = async () => {
+    try {
+      await deleteAvatar()
+      toast.success(t('settings.avatarRemoved'))
+    } catch {
+      toast.error(t('settings.avatarError'))
+    }
+  }
+
+  const saveProfile = async () => {
+    setSaving(true)
+    try {
+      await updateProfile({ username, email })
+      toast.success(t('settings.toast.profileSaved'))
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <>
+      <Section title={t('settings.account')} icon={User}>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.username')}</label>
+          <input
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.email')}</label>
+          <input
+            type="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+        </div>
+
+        {/* Change Password */}
+        {!oidcOnlyMode && (
+          <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
+            <label className="block text-sm font-medium text-slate-700 mb-3">{t('settings.changePassword')}</label>
+            <div className="space-y-3">
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={e => setCurrentPassword(e.target.value)}
+                placeholder={t('settings.currentPassword')}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+              <input
+                type="password"
+                value={newPassword}
+                onChange={e => setNewPassword(e.target.value)}
+                placeholder={t('settings.newPassword')}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+                placeholder={t('settings.confirmPassword')}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+              <button
+                onClick={async () => {
+                  if (!currentPassword) return toast.error(t('settings.currentPasswordRequired'))
+                  if (!newPassword) return toast.error(t('settings.passwordRequired'))
+                  if (newPassword.length < 8) return toast.error(t('settings.passwordTooShort'))
+                  if (newPassword !== confirmPassword) return toast.error(t('settings.passwordMismatch'))
+                  try {
+                    await authApi.changePassword({ current_password: currentPassword, new_password: newPassword })
+                    toast.success(t('settings.passwordChanged'))
+                    setCurrentPassword(''); setNewPassword(''); setConfirmPassword('')
+                    await loadUser({ silent: true })
+                  } catch (err: unknown) {
+                    toast.error(getApiErrorMessage(err, t('common.error')))
+                  }
+                }}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)' }}
+                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
+              >
+                <Lock size={14} />
+                {t('settings.updatePassword')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* MFA */}
+        <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border-secondary)' }}>
+          <div className="flex items-center gap-2 mb-3">
+            <KeyRound className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+            <h3 className="font-semibold text-base m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.title')}</h3>
+          </div>
+          <div className="space-y-3">
+            {mfaRequiredByPolicy && (
+              <div className="flex gap-3 p-3 rounded-lg border text-sm"
+                style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                <AlertTriangle className="w-5 h-5 flex-shrink-0 text-amber-600" />
+                <p className="m-0 leading-relaxed">{t('settings.mfa.requiredByPolicy')}</p>
+              </div>
+            )}
+            <p className="text-sm m-0" style={{ color: 'var(--text-muted)', lineHeight: 1.5 }}>{t('settings.mfa.description')}</p>
+            {demoMode ? (
+              <p className="text-sm text-amber-700 m-0">{t('settings.mfa.demoBlocked')}</p>
+            ) : (
+              <>
+                <p className="text-sm font-medium m-0" style={{ color: 'var(--text-secondary)' }}>
+                  {user?.mfa_enabled ? t('settings.mfa.enabled') : t('settings.mfa.disabled')}
+                </p>
+
+                {!user?.mfa_enabled && !mfaQr && (
+                  <button
+                    type="button"
+                    disabled={mfaLoading}
+                    onClick={async () => {
+                      setMfaLoading(true)
+                      try {
+                        const data = await authApi.mfaSetup() as { qr_svg: string; secret: string }
+                        setMfaQr(data.qr_svg)
+                        setMfaSecret(data.secret)
+                        setMfaSetupCode('')
+                      } catch (err: unknown) {
+                        toast.error(getApiErrorMessage(err, t('common.error')))
+                      } finally {
+                        setMfaLoading(false)
+                      }
+                    }}
+                    className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                    style={{ border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                  >
+                    {mfaLoading ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" /> : <KeyRound size={14} />}
+                    {t('settings.mfa.setup')}
+                  </button>
+                )}
+
+                {!user?.mfa_enabled && mfaQr && (
+                  <div className="space-y-3">
+                    <p className="text-sm" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.scanQr')}</p>
+                    <div className="rounded-lg border mx-auto block overflow-hidden" style={{ width: 'fit-content', borderColor: 'var(--border-primary)' }} dangerouslySetInnerHTML={{ __html: mfaQr! }} />
+                    <div>
+                      <label className="block text-xs font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.secretLabel')}</label>
+                      <code className="block text-xs p-2 rounded break-all" style={{ background: 'var(--bg-hover)', color: 'var(--text-primary)' }}>{mfaSecret}</code>
+                    </div>
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      value={mfaSetupCode}
+                      onChange={e => setMfaSetupCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                      placeholder={t('settings.mfa.codePlaceholder')}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                    />
+                    <div className="flex flex-wrap gap-2">
+                      <button
+                        type="button"
+                        disabled={mfaLoading || mfaSetupCode.length < 6}
+                        onClick={async () => {
+                          setMfaLoading(true)
+                          try {
+                            const resp = await authApi.mfaEnable({ code: mfaSetupCode }) as { backup_codes?: string[] }
+                            toast.success(t('settings.mfa.toastEnabled'))
+                            setMfaQr(null)
+                            setMfaSecret(null)
+                            setMfaSetupCode('')
+                            const codes = resp.backup_codes || null
+                            if (codes?.length) {
+                              try { sessionStorage.setItem(MFA_BACKUP_SESSION_KEY, JSON.stringify(codes)) } catch { /* ignore */ }
+                            }
+                            setBackupCodes(codes)
+                            await loadUser({ silent: true })
+                          } catch (err: unknown) {
+                            toast.error(getApiErrorMessage(err, t('common.error')))
+                          } finally {
+                            setMfaLoading(false)
+                          }
+                        }}
+                        className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
+                      >
+                        {t('settings.mfa.enable')}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => { setMfaQr(null); setMfaSecret(null); setMfaSetupCode('') }}
+                        className="px-4 py-2 rounded-lg text-sm border"
+                        style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}
+                      >
+                        {t('settings.mfa.cancelSetup')}
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {user?.mfa_enabled && (
+                  <div className="space-y-3">
+                    <p className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mfa.disableTitle')}</p>
+                    <p className="text-xs" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.disableHint')}</p>
+                    <input
+                      type="password"
+                      value={mfaDisablePwd}
+                      onChange={e => setMfaDisablePwd(e.target.value)}
+                      placeholder={t('settings.currentPassword')}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                    />
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      value={mfaDisableCode}
+                      onChange={e => setMfaDisableCode(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                      placeholder={t('settings.mfa.codePlaceholder')}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+                    />
+                    <button
+                      type="button"
+                      disabled={mfaLoading || !mfaDisablePwd || mfaDisableCode.length < 6}
+                      onClick={async () => {
+                        setMfaLoading(true)
+                        try {
+                          await authApi.mfaDisable({ password: mfaDisablePwd, code: mfaDisableCode })
+                          toast.success(t('settings.mfa.toastDisabled'))
+                          setMfaDisablePwd('')
+                          setMfaDisableCode('')
+                          sessionStorage.removeItem(MFA_BACKUP_SESSION_KEY)
+                          setBackupCodes(null)
+                          await loadUser({ silent: true })
+                        } catch (err: unknown) {
+                          toast.error(getApiErrorMessage(err, t('common.error')))
+                        } finally {
+                          setMfaLoading(false)
+                        }
+                      }}
+                      className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
+                    >
+                      {t('settings.mfa.disable')}
+                    </button>
+                  </div>
+                )}
+
+                {backupCodes && backupCodes.length > 0 && (
+                  <div className="space-y-3 p-3 rounded-lg border" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-hover)' }}>
+                    <p className="text-sm font-semibold m-0" style={{ color: 'var(--text-primary)' }}>{t('settings.mfa.backupTitle')}</p>
+                    <p className="text-xs m-0" style={{ color: 'var(--text-muted)' }}>{t('settings.mfa.backupDescription')}</p>
+                    <pre className="text-xs m-0 p-2 rounded border overflow-auto" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', maxHeight: 220 }}>{backupCodesText}</pre>
+                    <p className="text-xs m-0" style={{ color: '#b45309' }}>{t('settings.mfa.backupWarning')}</p>
+                    <div className="flex flex-wrap gap-2">
+                      <button type="button" onClick={copyBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        <Copy size={13} /> {t('settings.mfa.backupCopy')}
+                      </button>
+                      <button type="button" onClick={downloadBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        <Download size={13} /> {t('settings.mfa.backupDownload')}
+                      </button>
+                      <button type="button" onClick={printBackupCodes} className="px-3 py-2 rounded-lg text-xs border flex items-center gap-1.5" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        <Printer size={13} /> {t('settings.mfa.backupPrint')}
+                      </button>
+                      <button type="button" onClick={dismissBackupCodes} className="px-3 py-2 rounded-lg text-xs border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        {t('common.ok')}
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Avatar */}
+        <div className="flex items-center gap-4">
+          <div style={{ position: 'relative', flexShrink: 0 }}>
+            {user?.avatar_url ? (
+              <img src={user.avatar_url} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover' }} />
+            ) : (
+              <div style={{
+                width: 64, height: 64, borderRadius: '50%',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 24, fontWeight: 700,
+                background: 'var(--bg-hover)', color: 'var(--text-secondary)',
+              }}>
+                {user?.username?.charAt(0).toUpperCase()}
+              </div>
+            )}
+            <input ref={avatarInputRef} type="file" accept="image/*" onChange={handleAvatarUpload} style={{ display: 'none' }} />
+            <button
+              onClick={() => avatarInputRef.current?.click()}
+              style={{
+                position: 'absolute', bottom: -3, right: -3,
+                width: 28, height: 28, borderRadius: '50%',
+                background: 'var(--text-primary)', color: 'var(--bg-card)',
+                border: '2px solid var(--bg-card)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'pointer', padding: 0, transition: 'transform 0.15s, opacity 0.15s',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.15)'; e.currentTarget.style.opacity = '0.85' }}
+              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.opacity = '1' }}
+            >
+              <Camera size={14} />
+            </button>
+            {user?.avatar_url && (
+              <button
+                onClick={handleAvatarRemove}
+                style={{
+                  position: 'absolute', top: -2, right: -2,
+                  width: 20, height: 20, borderRadius: '50%',
+                  background: '#ef4444', color: 'white',
+                  border: '2px solid var(--bg-card)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  cursor: 'pointer', padding: 0,
+                }}
+              >
+                <Trash2 size={10} />
+              </button>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <div className="text-sm" style={{ color: 'var(--text-muted)' }}>
+              <span className="font-medium" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--text-secondary)' }}>
+                {user?.role === 'admin' ? <><Shield size={13} /> {t('settings.roleAdmin')}</> : t('settings.roleUser')}
+              </span>
+              {(user as UserWithOidc)?.oidc_issuer && (
+                <span style={{
+                  display: 'inline-flex', alignItems: 'center', gap: 4,
+                  fontSize: 10, fontWeight: 500, padding: '1px 8px', borderRadius: 99,
+                  background: '#dbeafe', color: '#1d4ed8', marginLeft: 6,
+                }}>
+                  SSO
+                </span>
+              )}
+            </div>
+            {(user as UserWithOidc)?.oidc_issuer && (
+              <p style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -2 }}>
+                {t('settings.oidcLinked')} {(user as UserWithOidc).oidc_issuer!.replace('https://', '').replace(/\/+$/, '')}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
+          <button
+            onClick={saveProfile}
+            disabled={saving}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+          >
+            {saving ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
+            <span className="hidden sm:inline">{t('settings.saveProfile')}</span>
+            <span className="sm:hidden">{t('common.save')}</span>
+          </button>
+          <button
+            onClick={async () => {
+              if (user?.role === 'admin') {
+                try {
+                  await adminApi.stats()
+                  const adminUsers = (await adminApi.users()).users.filter((u: { role: string }) => u.role === 'admin')
+                  if (adminUsers.length <= 1) {
+                    setShowDeleteConfirm('blocked')
+                    return
+                  }
+                } catch {}
+              }
+              setShowDeleteConfirm(true)
+            }}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-red-500 hover:bg-red-50"
+            style={{ border: '1px solid #fecaca' }}
+          >
+            <Trash2 size={14} />
+            <span className="hidden sm:inline">{t('settings.deleteAccount')}</span>
+            <span className="sm:hidden">{t('common.delete')}</span>
+          </button>
+        </div>
+      </Section>
+
+      {/* Delete Account Blocked */}
+      {showDeleteConfirm === 'blocked' && (
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 9999,
+          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
+        }} onClick={() => setShowDeleteConfirm(false)}>
+          <div style={{
+            background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
+            maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
+              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef3c7', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Shield size={18} style={{ color: '#d97706' }} />
+              </div>
+              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteBlockedTitle')}</h3>
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
+              {t('settings.deleteBlockedMessage')}
+            </p>
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => setShowDeleteConfirm(false)}
+                style={{
+                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+                  border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
+                  cursor: 'pointer', fontFamily: 'inherit',
+                }}
+              >
+                {t('common.ok') || 'OK'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Account Confirm */}
+      {showDeleteConfirm === true && (
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 9999,
+          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
+        }} onClick={() => setShowDeleteConfirm(false)}>
+          <div style={{
+            background: 'var(--bg-card)', borderRadius: 16, padding: '28px 24px',
+            maxWidth: 400, width: '100%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          }} onClick={e => e.stopPropagation()}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
+              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Trash2 size={18} style={{ color: '#ef4444' }} />
+              </div>
+              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{t('settings.deleteAccountTitle')}</h3>
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>
+              {t('settings.deleteAccountWarning')}
+            </p>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+              <button
+                onClick={() => setShowDeleteConfirm(false)}
+                style={{
+                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+                  border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-secondary)',
+                  cursor: 'pointer', fontFamily: 'inherit',
+                }}
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={async () => {
+                  try {
+                    await authApi.deleteOwnAccount()
+                    logout()
+                    navigate('/login')
+                  } catch (err: unknown) {
+                    toast.error(getApiErrorMessage(err, t('common.error')))
+                    setShowDeleteConfirm(false)
+                  }
+                }}
+                style={{
+                  padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600,
+                  border: 'none', background: '#ef4444', color: 'white',
+                  cursor: 'pointer', fontFamily: 'inherit',
+                }}
+              >
+                {t('settings.deleteAccountConfirm')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react'
+import { Palette, Sun, Moon, Monitor } from 'lucide-react'
+import { SUPPORTED_LANGUAGES, useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useToast } from '../shared/Toast'
+import Section from './Section'
+
+export default function DisplaySettingsTab(): React.ReactElement {
+  const { settings, updateSetting } = useSettingsStore()
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
+
+  useEffect(() => {
+    setTempUnit(settings.temperature_unit || 'celsius')
+  }, [settings.temperature_unit])
+
+  return (
+    <Section title={t('settings.display')} icon={Palette}>
+      {/* Color Mode */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.colorMode')}</label>
+        <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
+          {[
+            { value: 'light', label: t('settings.light'), icon: Sun },
+            { value: 'dark', label: t('settings.dark'), icon: Moon },
+            { value: 'auto', label: t('settings.auto'), icon: Monitor },
+          ].map(opt => {
+            const current = settings.dark_mode
+            const isActive = current === opt.value || (opt.value === 'light' && current === false) || (opt.value === 'dark' && current === true)
+            return (
+              <button
+                key={opt.value}
+                onClick={async () => {
+                  try {
+                    await updateSetting('dark_mode', opt.value)
+                  } catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+                }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 6,
+                  padding: '10px 14px', borderRadius: 10, cursor: 'pointer', flex: '1 1 0', justifyContent: 'center', minWidth: 0,
+                  fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                  border: isActive ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                  background: isActive ? 'var(--bg-hover)' : 'var(--bg-card)',
+                  color: 'var(--text-primary)',
+                  transition: 'all 0.15s',
+                }}
+              >
+                <opt.icon size={16} />
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Language */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
+        <div className="flex flex-wrap gap-3">
+          {SUPPORTED_LANGUAGES.map(opt => (
+            <button
+              key={opt.value}
+              onClick={async () => {
+                try { await updateSetting('language', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: settings.language === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: settings.language === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Temperature */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.temperature')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: 'celsius', label: '°C Celsius' },
+            { value: 'fahrenheit', label: '°F Fahrenheit' },
+          ].map(opt => (
+            <button
+              key={opt.value}
+              onClick={async () => {
+                setTempUnit(opt.value)
+                try { await updateSetting('temperature_unit', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: tempUnit === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: tempUnit === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Time Format */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: '24h', label: '24h (14:30)' },
+            { value: '12h', label: '12h (2:30 PM)' },
+          ].map(opt => (
+            <button
+              key={opt.value}
+              onClick={async () => {
+                try { await updateSetting('time_format', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: settings.time_format === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: settings.time_format === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Route Calculation */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.routeCalculation')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('route_calculation', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.route_calculation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.route_calculation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Blur Booking Codes */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('blur_booking_codes', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : 'Error') }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (!!settings.blur_booking_codes) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (!!settings.blur_booking_codes) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </Section>
+  )
+}

client/src/components/Settings/IntegrationsTab.tsx

@@ -0,0 +1,253 @@
+import Section from './Section'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { Trash2, Copy, Terminal, Plus, Check } from 'lucide-react'
+import { authApi } from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
+import PhotoProvidersSection from './PhotoProvidersSection'
+
+
+interface McpToken {
+  id: number
+  name: string
+  token_prefix: string
+  created_at: string
+  last_used_at: string | null
+}
+
+export default function IntegrationsTab(): React.ReactElement {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
+  const mcpEnabled = addonEnabled('mcp')
+
+  useEffect(() => {
+    loadAddons()
+  }, [loadAddons])
+
+  // MCP state
+  const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
+  const [mcpModalOpen, setMcpModalOpen] = useState(false)
+  const [mcpNewName, setMcpNewName] = useState('')
+  const [mcpCreatedToken, setMcpCreatedToken] = useState<string | null>(null)
+  const [mcpCreating, setMcpCreating] = useState(false)
+  const [mcpDeleteId, setMcpDeleteId] = useState<number | null>(null)
+  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+
+  const mcpEndpoint = `${window.location.origin}/mcp`
+  const mcpJsonConfig = `{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpEndpoint}",
+        "--header",
+        "Authorization: Bearer <your_token>"
+      ]
+    }
+  }
+}`
+
+  useEffect(() => {
+    if (mcpEnabled) {
+      authApi.mcpTokens.list().then(d => setMcpTokens(d.tokens || [])).catch(() => {})
+    }
+  }, [mcpEnabled])
+
+  const handleCreateMcpToken = async () => {
+    if (!mcpNewName.trim()) return
+    setMcpCreating(true)
+    try {
+      const d = await authApi.mcpTokens.create(mcpNewName.trim())
+      setMcpCreatedToken(d.token.raw_token)
+      setMcpNewName('')
+      setMcpTokens(prev => [{ id: d.token.id, name: d.token.name, token_prefix: d.token.token_prefix, created_at: d.token.created_at, last_used_at: null }, ...prev])
+    } catch {
+      toast.error(t('settings.mcp.toast.createError'))
+    } finally {
+      setMcpCreating(false)
+    }
+  }
+
+  const handleDeleteMcpToken = async (id: number) => {
+    try {
+      await authApi.mcpTokens.delete(id)
+      setMcpTokens(prev => prev.filter(tk => tk.id !== id))
+      setMcpDeleteId(null)
+      toast.success(t('settings.mcp.toast.deleted'))
+    } catch {
+      toast.error(t('settings.mcp.toast.deleteError'))
+    }
+  }
+
+  const handleCopy = (text: string, key: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedKey(key)
+      setTimeout(() => setCopiedKey(null), 2000)
+    })
+  }
+
+  return (
+    <>
+      <PhotoProvidersSection />
+      {mcpEnabled && (
+        <Section title={t('settings.mcp.title')} icon={Terminal}>
+          {/* Endpoint URL */}
+          <div>
+            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.endpoint')}</label>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 px-3 py-2 rounded-lg text-sm font-mono border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                {mcpEndpoint}
+              </code>
+              <button onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
+                className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                style={{ borderColor: 'var(--border-primary)' }} title={t('settings.mcp.copy')}>
+                {copiedKey === 'endpoint' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />}
+              </button>
+            </div>
+          </div>
+
+          {/* JSON config box */}
+          <div>
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="block text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</label>
+              <button onClick={() => handleCopy(mcpJsonConfig, 'json')}
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                {copiedKey === 'json' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                {copiedKey === 'json' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
+              </button>
+            </div>
+            <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+              {mcpJsonConfig}
+            </pre>
+            <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
+          </div>
+
+          {/* Token list */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.apiTokens')}</label>
+              <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                style={{ background: 'var(--accent-primary, #4f46e5)', color: '#fff' }}>
+                <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
+              </button>
+            </div>
+
+            {mcpTokens.length === 0 ? (
+              <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
+                {t('settings.mcp.noTokens')}
+              </p>
+            ) : (
+              <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                {mcpTokens.map((token, i) => (
+                  <div key={token.id} className="flex items-center gap-3 px-4 py-3"
+                    style={{ borderBottom: i < mcpTokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
+                      <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                        {token.token_prefix}...
+                        <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(token.created_at).toLocaleDateString(locale)}</span>
+                        {token.last_used_at && (
+                          <span className="ml-2">· {t('settings.mcp.tokenUsedAt')} {new Date(token.last_used_at).toLocaleDateString(locale)}</span>
+                        )}
+                      </p>
+                    </div>
+                    <button onClick={() => setMcpDeleteId(token.id)}
+                      className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                      style={{ color: 'var(--text-tertiary)' }} title={t('settings.mcp.deleteTokenTitle')}>
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {/* Create MCP Token modal */}
+      {mcpModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+          onClick={e => { if (e.target === e.currentTarget && !mcpCreatedToken) setMcpModalOpen(false) }}>
+          <div className="rounded-xl shadow-xl w-full max-w-md p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+            {!mcpCreatedToken ? (
+              <>
+                <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createTitle')}</h3>
+                <div>
+                  <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.tokenName')}</label>
+                  <input type="text" value={mcpNewName} onChange={e => setMcpNewName(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && handleCreateMcpToken()}
+                    placeholder={t('settings.mcp.modal.tokenNamePlaceholder')}
+                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
+                    autoFocus />
+                </div>
+                <div className="flex gap-2 justify-end pt-1">
+                  <button onClick={() => setMcpModalOpen(false)}
+                    className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
+                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    {mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
+                  </button>
+                </div>
+              </>
+            ) : (
+              <>
+                <h3 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.modal.createdTitle')}</h3>
+                <div className="flex items-start gap-2 p-3 rounded-lg border border-amber-200" style={{ background: 'rgba(251,191,36,0.1)' }}>
+                  <span className="text-amber-500 mt-0.5">⚠</span>
+                  <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.modal.createdWarning')}</p>
+                </div>
+                <div className="relative">
+                  <pre className="p-3 pr-10 rounded-lg text-xs font-mono break-all border whitespace-pre-wrap" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                    {mcpCreatedToken}
+                  </pre>
+                  <button onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
+                    className="absolute top-2 right-2 p-1.5 rounded transition-colors hover:bg-slate-200 dark:hover:bg-slate-600"
+                    style={{ color: 'var(--text-secondary)' }} title={t('settings.mcp.copy')}>
+                    {copiedKey === 'new-token' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                  </button>
+                </div>
+                <div className="flex justify-end">
+                  <button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white"
+                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    {t('settings.mcp.modal.done')}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Delete MCP Token confirm */}
+      {mcpDeleteId !== null && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+          onClick={e => { if (e.target === e.currentTarget) setMcpDeleteId(null) }}>
+          <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.mcp.deleteTokenTitle')}</h3>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.deleteTokenMessage')}</p>
+            <div className="flex gap-2 justify-end">
+              <button onClick={() => setMcpDeleteId(null)}
+                className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={() => handleDeleteMcpToken(mcpDeleteId)}
+                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
+                {t('settings.mcp.deleteTokenTitle')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

client/src/components/Settings/MapSettingsTab.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import { Map, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import { MapView } from '../Map/MapView'
+import Section from './Section'
+import type { Place } from '../../types'
+
+interface MapPreset {
+  name: string
+  url: string
+}
+
+const MAP_PRESETS: MapPreset[] = [
+  { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
+  { name: 'OpenStreetMap DE', url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png' },
+  { name: 'CartoDB Light', url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png' },
+  { name: 'CartoDB Dark', url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' },
+  { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
+]
+
+export default function MapSettingsTab(): React.ReactElement {
+  const { settings, updateSettings } = useSettingsStore()
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [saving, setSaving] = useState(false)
+  const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
+  const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
+  const [defaultLng, setDefaultLng] = useState<number | string>(settings.default_lng || 2.3522)
+  const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
+
+  useEffect(() => {
+    setMapTileUrl(settings.map_tile_url || '')
+    setDefaultLat(settings.default_lat || 48.8566)
+    setDefaultLng(settings.default_lng || 2.3522)
+    setDefaultZoom(settings.default_zoom || 10)
+  }, [settings])
+
+  const handleMapClick = useCallback((mapInfo) => {
+    setDefaultLat(mapInfo.latlng.lat)
+    setDefaultLng(mapInfo.latlng.lng)
+  }, [])
+
+  const mapPlaces = useMemo((): Place[] => [{
+    id: 1,
+    trip_id: 1,
+    name: 'Default map center',
+    description: '',
+    lat: defaultLat as number,
+    lng: defaultLng as number,
+    address: '',
+    category_id: 0,
+    icon: null,
+    price: null,
+    image_url: null,
+    google_place_id: null,
+    osm_id: null,
+    route_geometry: null,
+    place_time: null,
+    end_time: null,
+    created_at: Date(),
+  }], [defaultLat, defaultLng])
+
+  const saveMapSettings = async (): Promise<void> => {
+    setSaving(true)
+    try {
+      await updateSettings({
+        map_tile_url: mapTileUrl,
+        default_lat: parseFloat(String(defaultLat)),
+        default_lng: parseFloat(String(defaultLng)),
+        default_zoom: parseInt(String(defaultZoom)),
+      })
+      toast.success(t('settings.toast.mapSaved'))
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Section title={t('settings.map')} icon={Map}>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
+        <CustomSelect
+          value={mapTileUrl}
+          onChange={(value: string) => { if (value) setMapTileUrl(value) }}
+          placeholder={t('settings.mapTemplatePlaceholder.select')}
+          options={MAP_PRESETS.map(p => ({ value: p.url, label: p.name }))}
+          size="sm"
+          style={{ marginBottom: 8 }}
+        />
+        <input
+          type="text"
+          value={mapTileUrl}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapTileUrl(e.target.value)}
+          placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+        />
+        <p className="text-xs text-slate-400 mt-1">{t('settings.mapDefaultHint')}</p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.latitude')}</label>
+          <input
+            type="number"
+            step="any"
+            value={defaultLat}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLat(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.longitude')}</label>
+          <input
+            type="number"
+            step="any"
+            value={defaultLng}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLng(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          {React.createElement(MapView as any, {
+            places: mapPlaces,
+            dayPlaces: [],
+            route: null,
+            routeSegments: null,
+            selectedPlaceId: null,
+            onMarkerClick: null,
+            onMapClick: handleMapClick,
+            onMapContextMenu: null,
+            center: [settings.default_lat, settings.default_lng],
+            zoom: defaultZoom,
+            tileUrl: mapTileUrl,
+            fitKey: null,
+            dayOrderMap: [],
+            leftWidth: 0,
+            rightWidth: 0,
+            hasInspector: false,
+          })}
+        </div>
+      </div>
+
+      <button
+        onClick={saveMapSettings}
+        disabled={saving}
+        className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+      >
+        {saving ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : <Save className="w-4 h-4" />}
+        {t('settings.saveMap')}
+      </button>
+    </Section>
+  )
+}

client/src/components/Settings/NotificationsTab.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from 'react'
+import { Lock } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { notificationsApi, settingsApi } from '../../api/client'
+import { useToast } from '../shared/Toast'
+import ToggleSwitch from './ToggleSwitch'
+import Section from './Section'
+
+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',
+}
+
+export default function NotificationsTab(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [matrix, setMatrix] = useState<PreferencesMatrix | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [webhookUrl, setWebhookUrl] = useState('')
+  const [webhookIsSet, setWebhookIsSet] = useState(false)
+  const [webhookSaving, setWebhookSaving] = useState(false)
+  const [webhookTesting, setWebhookTesting] = useState(false)
+
+  useEffect(() => {
+    notificationsApi.getPreferences().then((data: PreferencesMatrix) => setMatrix(data)).catch(() => {})
+    settingsApi.get().then((data: { settings: Record<string, unknown> }) => {
+      const val = (data.settings?.webhook_url as string) || ''
+      if (val === '••••••••') {
+        setWebhookIsSet(true)
+        setWebhookUrl('')
+      } else {
+        setWebhookUrl(val)
+      }
+    }).catch(() => {})
+  }, [])
+
+  const visibleChannels = matrix
+    ? (['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))
+      })
+    : []
+
+  const toggle = async (eventType: string, channel: string) => {
+    if (!matrix) return
+    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 {
+      setMatrix(m => m ? { ...m, preferences: matrix.preferences } : m)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const saveWebhookUrl = async () => {
+    setWebhookSaving(true)
+    try {
+      await settingsApi.set('webhook_url', webhookUrl)
+      if (webhookUrl) setWebhookIsSet(true)
+      else setWebhookIsSet(false)
+      toast.success(t('settings.webhookUrl.saved'))
+    } catch {
+      toast.error(t('common.error'))
+    } finally {
+      setWebhookSaving(false)
+    }
+  }
+
+  const testWebhookUrl = async () => {
+    if (!webhookUrl && !webhookIsSet) return
+    setWebhookTesting(true)
+    try {
+      const result = await notificationsApi.testWebhook(webhookUrl || undefined)
+      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)
+    }
+  }
+
+  const renderContent = () => {
+    if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>Loading…</p>
+
+    if (visibleChannels.length === 0) {
+      return (
+        <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic' }}>
+          {t('settings.notificationPreferences.noChannels')}
+        </p>
+      )
+    }
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+        {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
+        {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={webhookIsSet ? '••••••••' : 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 && !webhookIsSet) || webhookTesting}
+                style={{ fontSize: 12, padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: ((!webhookUrl && !webhookIsSet) || webhookTesting) ? 'not-allowed' : 'pointer', opacity: ((!webhookUrl && !webhookIsSet) || 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>
+        {/* 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>
+    )
+  }
+
+  return (
+    <Section title={t('settings.notifications')} icon={Lock}>
+      {renderContent()}
+    </Section>
+  )
+}

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { Camera, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../../components/shared/Toast'
+import apiClient from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
+import Section from './Section'
+
+interface ProviderField {
+  key: string
+  label: string
+  input_type: string
+  placeholder?: string | null
+  required: boolean
+  secret: boolean
+  settings_key?: string | null
+  payload_key?: string | null
+  sort_order: number
+}
+
+interface PhotoProviderAddon {
+  id: string
+  name: string
+  type: string
+  enabled: boolean
+  config?: Record<string, unknown>
+  fields?: ProviderField[]
+}
+
+interface ProviderConfig {
+  settings_get?: string
+  settings_put?: string
+  status_get?: string
+  test_get?: string
+  test_post?: string
+}
+
+const getProviderConfig = (provider: PhotoProviderAddon): ProviderConfig => {
+  const raw = provider.config || {}
+  return {
+    settings_get: typeof raw.settings_get === 'string' ? raw.settings_get : undefined,
+    settings_put: typeof raw.settings_put === 'string' ? raw.settings_put : undefined,
+    status_get: typeof raw.status_get === 'string' ? raw.status_get : undefined,
+    test_get: typeof raw.test_get === 'string' ? raw.test_get : undefined,
+    test_post: typeof raw.test_post === 'string' ? raw.test_post : undefined,
+  }
+}
+
+const getProviderFields = (provider: PhotoProviderAddon): ProviderField[] => {
+  return [...(provider.fields || [])].sort((a, b) => a.sort_order - b.sort_order)
+}
+
+export default function PhotoProvidersSection(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const { isEnabled: addonEnabled, addons } = useAddonStore()
+  const memoriesEnabled = addonEnabled('memories')
+
+  const [saving, setSaving] = useState<Record<string, boolean>>({})
+  const [providerValues, setProviderValues] = useState<Record<string, Record<string, string>>>({})
+  const [providerConnected, setProviderConnected] = useState<Record<string, boolean>>({})
+  const [providerTesting, setProviderTesting] = useState<Record<string, boolean>>({})
+
+  const activePhotoProviders = useMemo(
+    () => addons.filter(a => a.type === 'photo_provider' && a.enabled) as PhotoProviderAddon[],
+    [addons],
+  )
+
+  const buildProviderPayload = (provider: PhotoProviderAddon): Record<string, unknown> => {
+    const values = providerValues[provider.id] || {}
+    const payload: Record<string, unknown> = {}
+    for (const field of getProviderFields(provider)) {
+      const payloadKey = field.payload_key || field.settings_key || field.key
+      const value = (values[field.key] || '').trim()
+      if (field.secret && !value) continue
+      payload[payloadKey] = value
+    }
+    return payload
+  }
+
+  const refreshProviderConnection = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    const statusPath = cfg.status_get
+    if (!statusPath) return
+    try {
+      const res = await apiClient.get(statusPath)
+      setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data?.connected }))
+    } catch {
+      setProviderConnected(prev => ({ ...prev, [provider.id]: false }))
+    }
+  }
+
+  const activeProviderSignature = useMemo(
+    () => activePhotoProviders.map(provider => provider.id).join('|'),
+    [activePhotoProviders],
+  )
+
+  useEffect(() => {
+    let isCancelled = false
+
+    for (const provider of activePhotoProviders) {
+      const cfg = getProviderConfig(provider)
+      const fields = getProviderFields(provider)
+
+      if (cfg.settings_get) {
+        apiClient.get(cfg.settings_get).then(res => {
+          if (isCancelled) return
+
+          const nextValues: Record<string, string> = {}
+          for (const field of fields) {
+            // Do not prefill secret fields; user can overwrite only when needed.
+            if (field.secret) continue
+            const sourceKey = field.settings_key || field.payload_key || field.key
+            const rawValue = (res.data as Record<string, unknown>)[sourceKey]
+            nextValues[field.key] = typeof rawValue === 'string' ? rawValue : rawValue != null ? String(rawValue) : ''
+          }
+          setProviderValues(prev => ({
+            ...prev,
+            [provider.id]: { ...(prev[provider.id] || {}), ...nextValues },
+          }))
+          if (typeof res.data?.connected === 'boolean') {
+            setProviderConnected(prev => ({ ...prev, [provider.id]: !!res.data.connected }))
+          }
+        }).catch(() => { })
+      }
+
+      refreshProviderConnection(provider).catch(() => { })
+    }
+
+    return () => {
+      isCancelled = true
+    }
+  }, [activePhotoProviders, activeProviderSignature])
+
+  const handleProviderFieldChange = (providerId: string, key: string, value: string) => {
+    setProviderValues(prev => ({
+      ...prev,
+      [providerId]: { ...(prev[providerId] || {}), [key]: value },
+    }))
+  }
+
+  const isProviderSaveDisabled = (provider: PhotoProviderAddon): boolean => {
+    const values = providerValues[provider.id] || {}
+    return getProviderFields(provider).some(field => {
+      if (!field.required) return false
+      return !(values[field.key] || '').trim()
+    })
+  }
+
+  const handleSaveProvider = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    if (!cfg.settings_put) return
+    setSaving(s => ({ ...s, [provider.id]: true }))
+    try {
+      await apiClient.put(cfg.settings_put, buildProviderPayload(provider))
+      await refreshProviderConnection(provider)
+      toast.success(t('memories.saved', { provider_name: provider.name }))
+    } catch {
+      toast.error(t('memories.saveError', { provider_name: provider.name }))
+    } finally {
+      setSaving(s => ({ ...s, [provider.id]: false }))
+    }
+  }
+
+  const handleTestProvider = async (provider: PhotoProviderAddon) => {
+    const cfg = getProviderConfig(provider)
+    const testPath = cfg.test_post || cfg.test_get || cfg.status_get
+    if (!testPath) return
+    setProviderTesting(prev => ({ ...prev, [provider.id]: true }))
+    try {
+      const payload = buildProviderPayload(provider)
+      const res = cfg.test_post ? await apiClient.post(testPath, payload) : await apiClient.get(testPath)
+      const ok = !!res.data?.connected
+      setProviderConnected(prev => ({ ...prev, [provider.id]: ok }))
+      if (ok) {
+        toast.success(t('memories.connectionSuccess', { provider_name: provider.name }))
+      } else {
+        toast.error(`${t('memories.connectionError', { provider_name: provider.name })} ${res.data?.error ? `: ${String(res.data.error)}` : ''}`)
+      }
+    } catch {
+      toast.error(t('memories.connectionError', { provider_name: provider.name }))
+    } finally {
+      setProviderTesting(prev => ({ ...prev, [provider.id]: false }))
+    }
+  }
+
+  const renderPhotoProviderSection = (provider: PhotoProviderAddon): React.ReactElement => {
+    const fields = getProviderFields(provider)
+    const cfg = getProviderConfig(provider)
+    const values = providerValues[provider.id] || {}
+    const connected = !!providerConnected[provider.id]
+    const testing = !!providerTesting[provider.id]
+    const canSave = !!cfg.settings_put
+    const canTest = !!(cfg.test_post || cfg.test_get || cfg.status_get)
+
+    return (
+      <Section key={provider.id} title={provider.name || provider.id} icon={Camera}>
+        <div className="space-y-3">
+          {fields.map(field => (
+            <div key={`${provider.id}-${field.key}`}>
+              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
+              <input
+                type={field.input_type || 'text'}
+                value={values[field.key] || ''}
+                onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.value)}
+                placeholder={field.secret && connected && !(values[field.key] || '') ? '••••••••' : (field.placeholder || '')}
+                className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+              />
+            </div>
+          ))}
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => handleSaveProvider(provider)}
+              disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
+              className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+              title={!canSave ? 'Save route is not configured for this provider' : isProviderSaveDisabled(provider) ? 'Please fill all required fields' : ''}
+            >
+              <Save className="w-4 h-4" /> {t('common.save')}
+            </button>
+            <button
+              onClick={() => handleTestProvider(provider)}
+              disabled={!canTest || testing}
+              className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
+              title={!canTest ? 'Test route is not configured for this provider' : ''}
+            >
+              {testing
+                ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
+                : <Camera className="w-4 h-4" />}
+              {t('memories.testConnection')}
+            </button>
+            {connected && (
+              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+                <span className="w-2 h-2 bg-green-500 rounded-full" />
+                {t('memories.connected')}
+              </span>
+            )}
+          </div>
+        </div>
+      </Section>
+    )
+  }
+
+  if (!memoriesEnabled) {
+    return <></>
+  }
+
+  return <>{activePhotoProviders.map(provider => renderPhotoProviderSection(provider))}</>
+}

client/src/components/Settings/Section.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+interface SectionProps {
+  title: string
+  icon: LucideIcon
+  children: React.ReactNode
+}
+
+export default function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
+  return (
+    <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', marginBottom: 24 }}>
+      <div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
+        <Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
+        <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
+      </div>
+      <div className="p-6 space-y-4">
+        {children}
+      </div>
+    </div>
+  )
+}

client/src/components/Settings/ToggleSwitch.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
+  return (
+    <button onClick={onToggle}
+      style={{
+        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
+        transition: 'background 0.2s',
+      }}>
+      <span style={{
+        position: 'absolute', top: 2, left: on ? 22 : 2,
+        width: 20, height: 20, borderRadius: '50%', background: 'white',
+        transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+      }} />
+    </button>
+  )
+}

client/src/components/Todo/TodoListPanel.tsx

@@ -0,0 +1,778 @@
+import { useState, useMemo, useEffect } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { tripsApi } from '../../api/client'
+import apiClient from '../../api/client'
+import CustomSelect from '../shared/CustomSelect'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import { formatDate as fmtDate } from '../../utils/formatters'
+import {
+  CheckSquare, Square, Plus, ChevronRight, Flag,
+  X, Check, Calendar, User, FolderPlus, AlertCircle, ListChecks, Inbox, CheckCheck, Trash2,
+} from 'lucide-react'
+import type { TodoItem } from '../../types'
+
+const KAT_COLORS = [
+  '#3b82f6', '#a855f7', '#ec4899', '#22c55e', '#f97316',
+  '#06b6d4', '#ef4444', '#eab308', '#8b5cf6', '#14b8a6',
+]
+
+const PRIO_CONFIG: Record<number, { label: string; color: string }> = {
+  1: { label: 'P1', color: '#ef4444' },
+  2: { label: 'P2', color: '#f59e0b' },
+  3: { label: 'P3', color: '#3b82f6' },
+}
+
+function katColor(kat: string, allCategories: string[]) {
+  const idx = allCategories.indexOf(kat)
+  if (idx >= 0) return KAT_COLORS[idx % KAT_COLORS.length]
+  let h = 0
+  for (let i = 0; i < kat.length; i++) h = ((h << 5) - h + kat.charCodeAt(i)) | 0
+  return KAT_COLORS[Math.abs(h) % KAT_COLORS.length]
+}
+
+type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
+
+interface Member { id: number; username: string; avatar: string | null }
+
+export default function TodoListPanel({ tripId, items }: { tripId: number; items: TodoItem[] }) {
+  const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
+  const canEdit = useCanDo('packing_edit')
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const formatDate = (d: string) => fmtDate(d, locale) || d
+
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)')
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  const [filter, setFilter] = useState<FilterType>('all')
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [isAddingNew, setIsAddingNew] = useState(false)
+  const [sortByPrio, setSortByPrio] = useState(false)
+  const [addingCategory, setAddingCategory] = useState(false)
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [members, setMembers] = useState<Member[]>([])
+  const [currentUserId, setCurrentUserId] = useState<number | null>(null)
+
+  useEffect(() => {
+    apiClient.get(`/trips/${tripId}/members`).then(r => {
+      const owner = r.data?.owner
+      const mems = r.data?.members || []
+      const all = owner ? [owner, ...mems] : mems
+      setMembers(all)
+      setCurrentUserId(r.data?.current_user_id || null)
+    }).catch(() => {})
+  }, [tripId])
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>()
+    items.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [items])
+
+  const today = new Date().toISOString().split('T')[0]
+
+  const filtered = useMemo(() => {
+    let result: TodoItem[]
+    if (filter === 'all') result = items.filter(i => !i.checked)
+    else if (filter === 'done') result = items.filter(i => !!i.checked)
+    else if (filter === 'my') result = items.filter(i => !i.checked && i.assigned_user_id === currentUserId)
+    else if (filter === 'overdue') result = items.filter(i => !i.checked && i.due_date && i.due_date < today)
+    else result = items.filter(i => i.category === filter)
+    if (sortByPrio) result = [...result].sort((a, b) => {
+      const ap = a.priority || 99
+      const bp = b.priority || 99
+      return ap - bp
+    })
+    return result
+  }, [items, filter, currentUserId, today, sortByPrio])
+
+  const selectedItem = items.find(i => i.id === selectedId) || null
+  const totalCount = items.length
+  const doneCount = items.filter(i => !!i.checked).length
+  const overdueCount = items.filter(i => !i.checked && i.due_date && i.due_date < today).length
+  const myCount = currentUserId ? items.filter(i => !i.checked && i.assigned_user_id === currentUserId).length : 0
+
+  const addCategory = () => {
+    const name = newCategoryName.trim()
+    if (!name || categories.includes(name)) { setAddingCategory(false); setNewCategoryName(''); return }
+    addTodoItem(tripId, { name: t('todo.newItem'), category: name } as any)
+      .then(() => { setAddingCategory(false); setNewCategoryName(''); setFilter(name) })
+      .catch(err => toast.error(err instanceof Error ? err.message : 'Error'))
+  }
+
+  // Get category count (non-done items)
+  const catCount = (cat: string) => items.filter(i => i.category === cat && !i.checked).length
+
+  // Sidebar filter item
+  const SidebarItem = ({ id, icon: Icon, label, count, color }: { id: string; icon: any; label: string; count: number; color?: string }) => (
+    <button onClick={() => setFilter(id as FilterType)}
+      title={isMobile ? label : undefined}
+      style={{
+        display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
+        gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
+        border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13,
+        background: filter === id ? 'var(--bg-hover)' : 'transparent',
+        color: filter === id ? 'var(--text-primary)' : 'var(--text-secondary)',
+        fontWeight: filter === id ? 600 : 400, transition: 'all 0.1s',
+        position: 'relative',
+      }}
+      onMouseEnter={e => { if (filter !== id) e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { if (filter !== id) e.currentTarget.style.background = 'transparent' }}>
+      {color ? (
+        <span style={{ width: isMobile ? 12 : 10, height: isMobile ? 12 : 10, borderRadius: '50%', background: color, flexShrink: 0 }} />
+      ) : (
+        <Icon size={isMobile ? 18 : 15} style={{ flexShrink: 0, opacity: 0.7 }} />
+      )}
+      {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{label}</span>}
+      {!isMobile && count > 0 && (
+        <span style={{ fontSize: 11, color: 'var(--text-faint)', background: 'var(--bg-hover)', borderRadius: 10, padding: '1px 7px', minWidth: 20, textAlign: 'center' }}>
+          {count}
+        </span>
+      )}
+      {isMobile && count > 0 && (
+        <span style={{ position: 'absolute', top: 2, right: 2, fontSize: 8, fontWeight: 700, color: 'var(--bg-primary)', background: 'var(--text-faint)', borderRadius: '50%', width: 14, height: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {count}
+        </span>
+      )}
+    </button>
+  )
+
+  // Filter title
+  const filterTitle = (() => {
+    if (filter === 'all') return t('todo.filter.all')
+    if (filter === 'done') return t('todo.filter.done')
+    if (filter === 'my') return t('todo.filter.my')
+    if (filter === 'overdue') return t('todo.filter.overdue')
+    return filter
+  })()
+
+  return (
+    <div style={{ display: 'flex', height: 'calc(100vh - 180px)', minHeight: 400 }}>
+
+      {/* ── Left Sidebar ── */}
+      <div style={{
+        width: isMobile ? 52 : 220, flexShrink: 0, borderRight: '1px solid var(--border-faint)',
+        padding: isMobile ? '12px 6px' : '16px 10px', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto',
+        transition: 'width 0.2s',
+      }}>
+        {/* Progress Card */}
+        {!isMobile && <div style={{
+          margin: '0 6px 12px', padding: '14px 14px 12px', borderRadius: 14,
+          background: 'var(--bg-hover)',
+          border: '1px solid var(--border-primary)',
+          boxShadow: '0 1px 2px rgba(0,0,0,0.02)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
+            <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1, letterSpacing: '-0.02em' }}>
+              {totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0}%
+            </span>
+          </div>
+          <div style={{ height: 4, background: 'var(--border-faint)', borderRadius: 2, overflow: 'hidden', marginBottom: 6 }}>
+            <div style={{ height: '100%', width: totalCount > 0 ? `${Math.round((doneCount / totalCount) * 100)}%` : '0%', background: '#22c55e', borderRadius: 2, transition: 'width 0.3s' }} />
+          </div>
+          <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+            {doneCount} / {totalCount} {t('todo.completed')}
+          </div>
+        </div>}
+
+        {/* Smart filters */}
+        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          {t('todo.sidebar.tasks')}
+        </div>}
+        <SidebarItem id="all" icon={Inbox} label={t('todo.filter.all')} count={items.filter(i => !i.checked).length} />
+        <SidebarItem id="my" icon={User} label={t('todo.filter.my')} count={myCount} />
+        <SidebarItem id="overdue" icon={AlertCircle} label={t('todo.filter.overdue')} count={overdueCount} />
+        <SidebarItem id="done" icon={CheckCheck} label={t('todo.filter.done')} count={doneCount} />
+
+        {/* Sort by priority */}
+        <button onClick={() => setSortByPrio(v => !v)}
+          title={isMobile ? t('todo.sortByPrio') : undefined}
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
+            gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
+            border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13,
+            background: sortByPrio ? '#f59e0b12' : 'transparent',
+            color: sortByPrio ? '#f59e0b' : 'var(--text-secondary)',
+            fontWeight: sortByPrio ? 600 : 400, transition: 'all 0.1s',
+          }}
+          onMouseEnter={e => { if (!sortByPrio) e.currentTarget.style.background = 'var(--bg-hover)' }}
+          onMouseLeave={e => { if (!sortByPrio) e.currentTarget.style.background = 'transparent' }}>
+          <Flag size={isMobile ? 18 : 15} style={{ flexShrink: 0, opacity: 0.7 }} />
+          {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{t('todo.sortByPrio')}</span>}
+        </button>
+
+        {/* Categories */}
+        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '16px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          {t('todo.sidebar.categories')}
+        </div>}
+        {isMobile && <div style={{ height: 1, background: 'var(--border-faint)', margin: '8px 4px' }} />}
+        {categories.map(cat => (
+          <SidebarItem key={cat} id={cat} icon={null} label={cat} count={catCount(cat)} color={katColor(cat, categories)} />
+        ))}
+
+        {canEdit && (
+          addingCategory && !isMobile ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 12px' }}>
+              <input autoFocus value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') addCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCategoryName('') } }}
+                placeholder={t('todo.newCategory')}
+                style={{ flex: 1, fontSize: 12, padding: '4px 6px', border: '1px solid var(--border-primary)', borderRadius: 5, background: 'var(--bg-hover)', color: 'var(--text-primary)', fontFamily: 'inherit', minWidth: 0 }} />
+              <button onClick={addCategory} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#22c55e', padding: 2 }}><Check size={13} /></button>
+            </div>
+          ) : (
+            <button onClick={() => setAddingCategory(true)}
+              title={isMobile ? t('todo.addCategory') : undefined}
+              style={{ display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start', gap: isMobile ? 0 : 6, padding: isMobile ? '8px 0' : '7px 12px', fontSize: 12, color: 'var(--text-faint)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit', width: '100%', textAlign: 'left' }}>
+              <Plus size={isMobile ? 18 : 13} /> {!isMobile && t('todo.addCategory')}
+            </button>
+          )
+        )}
+      </div>
+
+      {/* ── Middle: Task List ── */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        {/* Header */}
+        <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>
+              {filterTitle}
+            </h2>
+            <span style={{ fontSize: 13, color: 'var(--text-faint)', background: 'var(--bg-hover)', borderRadius: 6, padding: '2px 8px', fontWeight: 600 }}>
+              {filtered.length}
+            </span>
+          </div>
+        </div>
+
+        {/* Add task */}
+        {canEdit && (
+          <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border-faint)' }}>
+            <button
+              onClick={() => { setSelectedId(null); setIsAddingNew(true) }}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+                width: '100%', padding: '9px 16px', borderRadius: 8,
+                background: isAddingNew ? 'var(--text-primary)' : 'var(--bg-hover)',
+                color: isAddingNew ? 'var(--bg-primary)' : 'var(--text-primary)',
+                border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
+                fontSize: 13, fontWeight: 600, transition: 'all 0.15s',
+              }}
+              onMouseEnter={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--text-primary)'; e.currentTarget.style.color = 'var(--bg-primary)'; e.currentTarget.style.borderColor = 'var(--text-primary)' } }}
+              onMouseLeave={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.borderColor = 'var(--border-primary)' } }}>
+              <Plus size={14} />
+              {t('todo.addItem')}
+            </button>
+          </div>
+        )}
+
+        {/* Task list */}
+        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
+          {filtered.length === 0 ? null : (
+            filtered.map(item => {
+              const done = !!item.checked
+              const assignedUser = members.find(m => m.id === item.assigned_user_id)
+              const isOverdue = item.due_date && !done && item.due_date < today
+              const isSelected = selectedId === item.id
+              const catColor = item.category ? katColor(item.category, categories) : null
+
+              return (
+                <div key={item.id}
+                  onClick={() => { setSelectedId(isSelected ? null : item.id); setIsAddingNew(false) }}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 20px',
+                    borderBottom: '1px solid var(--border-faint)', cursor: 'pointer',
+                    background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                    transition: 'background 0.1s',
+                  }}
+                  onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'rgba(0,0,0,0.02)' }}
+                  onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}>
+
+                  {/* Checkbox */}
+                  <button onClick={e => { e.stopPropagation(); canEdit && toggleTodoItem(tripId, item.id, !done) }}
+                    style={{ background: 'none', border: 'none', cursor: canEdit ? 'pointer' : 'default', padding: 0, flexShrink: 0,
+                      color: done ? '#22c55e' : 'var(--border-primary)' }}>
+                    {done ? <CheckSquare size={18} /> : <Square size={18} />}
+                  </button>
+
+                  {/* Content */}
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{
+                      fontSize: 14, color: done ? 'var(--text-faint)' : 'var(--text-primary)',
+                      textDecoration: done ? 'line-through' : 'none', lineHeight: 1.4,
+                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                    }}>
+                      {item.name}
+                    </div>
+                    {/* Description preview */}
+                    {item.description && (
+                      <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4 }}>
+                        {item.description}
+                      </div>
+                    )}
+                    {/* Inline badges */}
+                    {(item.priority || item.due_date || catColor || assignedUser) && (
+                    <div style={{ display: 'flex', gap: 5, marginTop: 5, flexWrap: 'wrap' }}>
+                      {item.priority > 0 && PRIO_CONFIG[item.priority] && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 600,
+                          color: PRIO_CONFIG[item.priority].color,
+                          background: `${PRIO_CONFIG[item.priority].color}10`,
+                          border: `1px solid ${PRIO_CONFIG[item.priority].color}25`,
+                        }}>
+                          <Flag size={9} />{PRIO_CONFIG[item.priority].label}
+                        </span>
+                      )}
+                      {item.due_date && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 3,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: isOverdue ? '#ef4444' : 'var(--text-secondary)',
+                          background: isOverdue ? 'rgba(239,68,68,0.08)' : 'var(--bg-hover)',
+                          border: `1px solid ${isOverdue ? 'rgba(239,68,68,0.15)' : 'var(--border-faint)'}`,
+                        }}>
+                          <Calendar size={9} />{formatDate(item.due_date)}
+                        </span>
+                      )}
+                      {catColor && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+                          border: '1px solid var(--border-faint)',
+                        }}>
+                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: catColor, flexShrink: 0 }} />
+                          {item.category}
+                        </span>
+                      )}
+                      {assignedUser && (
+                        <span style={{
+                          fontSize: 10, display: 'inline-flex', alignItems: 'center', gap: 4,
+                          padding: '2px 7px', borderRadius: 5, fontWeight: 500,
+                          color: 'var(--text-secondary)', background: 'var(--bg-hover)',
+                          border: '1px solid var(--border-faint)',
+                        }}>
+                          {assignedUser.avatar ? (
+                            <img src={`/uploads/avatars/${assignedUser.avatar}`} style={{ width: 13, height: 13, borderRadius: '50%', objectFit: 'cover' }} alt="" />
+                          ) : (
+                            <span style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: 'var(--text-faint)', fontWeight: 700 }}>
+                              {assignedUser.username.charAt(0).toUpperCase()}
+                            </span>
+                          )}
+                          {assignedUser.username}
+                        </span>
+                      )}
+                    </div>
+                    )}
+                  </div>
+
+                  {/* Chevron */}
+                  <ChevronRight size={16} color="var(--text-faint)" style={{ flexShrink: 0, opacity: 0.4 }} />
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+
+      {/* ── Right: Detail Pane ── */}
+      {selectedItem && !isAddingNew && !isMobile && (
+        <DetailPane
+          item={selectedItem}
+          tripId={tripId}
+          categories={categories}
+          members={members}
+          onClose={() => setSelectedId(null)}
+        />
+      )}
+      {selectedItem && !isAddingNew && isMobile && (
+        <div onClick={e => { if (e.target === e.currentTarget) setSelectedId(null) }}
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
+          <div style={{ width: '100%', maxHeight: '85vh', borderRadius: '16px 16px 0 0', overflow: 'auto' }}
+            ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px 16px 0 0' } } }}>
+            <DetailPane
+              item={selectedItem}
+              tripId={tripId}
+              categories={categories}
+              members={members}
+              onClose={() => setSelectedId(null)}
+            />
+          </div>
+        </div>
+      )}
+      {isAddingNew && !selectedItem && !isMobile && (
+        <NewTaskPane
+          tripId={tripId}
+          categories={categories}
+          members={members}
+          defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
+          onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
+          onClose={() => setIsAddingNew(false)}
+        />
+      )}
+      {isAddingNew && !selectedItem && isMobile && (
+        <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
+          <div style={{ width: '100%', maxHeight: '85vh', borderRadius: '16px 16px 0 0', overflow: 'auto' }}
+            ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px 16px 0 0' } } }}>
+            <NewTaskPane
+              tripId={tripId}
+              categories={categories}
+              members={members}
+              defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
+              onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
+              onClose={() => setIsAddingNew(false)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Detail Pane (right side) ──────────────────────────────────────────────
+
+function DetailPane({ item, tripId, categories, members, onClose }: {
+  item: TodoItem; tripId: number; categories: string[]; members: Member[];
+  onClose: () => void;
+}) {
+  const { updateTodoItem, deleteTodoItem } = useTripStore()
+  const canEdit = useCanDo('packing_edit')
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const [name, setName] = useState(item.name)
+  const [desc, setDesc] = useState(item.description || '')
+  const [dueDate, setDueDate] = useState(item.due_date || '')
+  const [category, setCategory] = useState(item.category || '')
+  const [assignedUserId, setAssignedUserId] = useState<number | null>(item.assigned_user_id)
+  const [priority, setPriority] = useState(item.priority || 0)
+  const [saving, setSaving] = useState(false)
+
+  // Sync when selected item changes
+  useEffect(() => {
+    setName(item.name)
+    setDesc(item.description || '')
+    setDueDate(item.due_date || '')
+    setCategory(item.category || '')
+    setAssignedUserId(item.assigned_user_id)
+    setPriority(item.priority || 0)
+  }, [item.id, item.name, item.description, item.due_date, item.category, item.assigned_user_id, item.priority])
+
+  const hasChanges = name !== item.name || desc !== (item.description || '') ||
+    dueDate !== (item.due_date || '') || category !== (item.category || '') ||
+    assignedUserId !== item.assigned_user_id || priority !== (item.priority || 0)
+
+  const save = async () => {
+    if (!name.trim() || !hasChanges) return
+    setSaving(true)
+    try {
+      await updateTodoItem(tripId, item.id, {
+        name: name.trim(), description: desc || null,
+        due_date: dueDate || null, category: category || null,
+        assigned_user_id: assignedUserId, priority,
+      } as any)
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
+    setSaving(false)
+  }
+
+  const handleDelete = async () => {
+    try {
+      await deleteTodoItem(tripId, item.id)
+      onClose()
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
+  }
+
+  const labelStyle: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 4, display: 'block' }
+  const inputStyle: React.CSSProperties = {
+    width: '100%', fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)',
+    borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit',
+  }
+
+  return (
+    <div style={{
+      width: 320, flexShrink: 0, borderLeft: '1px solid var(--border-faint)',
+      display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)',
+    }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{t('todo.detail.title')}</span>
+        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4 }}>
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Form */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+        {/* Name */}
+        <div>
+          <input value={name} onChange={e => setName(e.target.value)} disabled={!canEdit}
+            style={{ ...inputStyle, fontSize: 15, fontWeight: 600, border: 'none', padding: '4px 0', background: 'transparent' }}
+            placeholder={t('todo.namePlaceholder')} />
+        </div>
+
+        {/* Description */}
+        <div>
+          <label style={labelStyle}>{t('todo.detail.description')}</label>
+          <textarea value={desc} onChange={e => setDesc(e.target.value)} disabled={!canEdit} rows={4}
+            placeholder={t('todo.descriptionPlaceholder')}
+            style={{ ...inputStyle, resize: 'vertical', minHeight: 80 }} />
+        </div>
+
+        {/* Priority */}
+        <div>
+          <label style={labelStyle}>{t('todo.detail.priority')}</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {[0, 1, 2, 3].map(p => {
+              const cfg = PRIO_CONFIG[p]
+              const isActive = priority === p
+              return (
+                <button key={p} onClick={() => canEdit && setPriority(p)}
+                  style={{
+                    flex: 1, padding: '6px 0', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: canEdit ? 'pointer' : 'default',
+                    fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
+                    border: `1px solid ${isActive && cfg ? cfg.color + '40' : 'var(--border-primary)'}`,
+                    background: isActive && cfg ? cfg.color + '12' : 'transparent',
+                    color: isActive && cfg ? cfg.color : isActive ? 'var(--text-primary)' : 'var(--text-faint)',
+                    transition: 'all 0.1s',
+                  }}>
+                  {cfg ? <><Flag size={10} />{cfg.label}</> : t('todo.detail.noPriority')}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Category */}
+        <div>
+          <label style={labelStyle}>{t('todo.detail.category')}</label>
+          <CustomSelect
+            value={category}
+            onChange={v => setCategory(v)}
+            options={[
+              { value: '', label: t('todo.noCategory') },
+              ...categories.map(c => ({
+                value: c,
+                label: c,
+                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+              })),
+            ]}
+            placeholder={t('todo.noCategory')}
+            size="sm"
+            disabled={!canEdit}
+          />
+        </div>
+
+        {/* Due date */}
+        <div>
+          <label style={labelStyle}>{t('todo.detail.dueDate')}</label>
+          <CustomDatePicker
+            value={dueDate}
+            onChange={v => setDueDate(v)}
+          />
+        </div>
+
+        {/* Assigned to */}
+        <div>
+          <label style={labelStyle}>{t('todo.detail.assignedTo')}</label>
+          <CustomSelect
+            value={String(assignedUserId ?? '')}
+            onChange={v => setAssignedUserId(v ? Number(v) : null)}
+            options={[
+              { value: '', label: t('todo.unassigned'), icon: <User size={14} style={{ color: 'var(--text-faint)' }} /> },
+              ...members.map(m => ({
+                value: String(m.id),
+                label: m.username,
+                icon: m.avatar ? (
+                  <img src={`/uploads/avatars/${m.avatar}`} style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' as const }} alt="" />
+                ) : (
+                  <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--text-faint)', fontWeight: 600 }}>
+                    {m.username.charAt(0).toUpperCase()}
+                  </span>
+                ),
+              })),
+            ]}
+            placeholder={t('todo.unassigned')}
+            size="sm"
+            disabled={!canEdit}
+          />
+        </div>
+      </div>
+
+      {/* Footer actions */}
+      {canEdit && (
+        <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border-faint)', display: 'flex', gap: 8 }}>
+          <button onClick={handleDelete}
+            style={{
+              flex: 1, padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
+              border: '1px solid var(--border-primary)', background: 'transparent', color: 'var(--text-secondary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+            }}>
+            <Trash2 size={13} />
+            {t('todo.detail.delete')}
+          </button>
+          <button onClick={save} disabled={!hasChanges || saving}
+            style={{
+              flex: 1, padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: hasChanges ? 'pointer' : 'default', fontFamily: 'inherit',
+              border: 'none', background: hasChanges ? 'var(--text-primary)' : 'var(--border-faint)',
+              color: hasChanges ? 'var(--bg-primary)' : 'var(--text-faint)',
+              transition: 'all 0.15s',
+            }}>
+            {saving ? '...' : t('todo.detail.save')}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── New Task Pane (right side, for creating) ──────────────────────────────
+
+function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated, onClose }: {
+  tripId: number; categories: string[]; members: Member[]; defaultCategory: string | null;
+  onCreated: (id: number) => void; onClose: () => void;
+}) {
+  const { addTodoItem } = useTripStore()
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  const [name, setName] = useState('')
+  const [desc, setDesc] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [category, setCategory] = useState(defaultCategory || '')
+  const [assignedUserId, setAssignedUserId] = useState<number | null>(null)
+  const [priority, setPriority] = useState(0)
+  const [saving, setSaving] = useState(false)
+
+  const labelStyle: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 4, display: 'block' }
+
+  const create = async () => {
+    if (!name.trim()) return
+    setSaving(true)
+    try {
+      const item = await addTodoItem(tripId, {
+        name: name.trim(), description: desc || null, priority,
+        due_date: dueDate || null, category: category || null,
+        assigned_user_id: assignedUserId,
+      } as any)
+      if (item?.id) onCreated(item.id)
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : 'Error') }
+    setSaving(false)
+  }
+
+  return (
+    <div style={{
+      width: 320, flexShrink: 0, borderLeft: '1px solid var(--border-faint)',
+      display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px 12px', borderBottom: '1px solid var(--border-faint)' }}>
+        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{t('todo.newItem')}</span>
+        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4 }}>
+          <X size={16} />
+        </button>
+      </div>
+
+      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div>
+          <input autoFocus value={name} onChange={e => setName(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter' && name.trim()) create() }}
+            style={{ width: '100%', fontSize: 15, fontWeight: 600, border: 'none', padding: '4px 0', background: 'transparent', color: 'var(--text-primary)', outline: 'none', fontFamily: 'inherit' }}
+            placeholder={t('todo.namePlaceholder')} />
+        </div>
+
+        <div>
+          <label style={labelStyle}>{t('todo.detail.description')}</label>
+          <textarea value={desc} onChange={e => setDesc(e.target.value)} rows={4}
+            placeholder={t('todo.descriptionPlaceholder')}
+            style={{ width: '100%', fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', resize: 'vertical', minHeight: 80 }} />
+        </div>
+
+        <div>
+          <label style={labelStyle}>{t('todo.detail.category')}</label>
+          <CustomSelect
+            value={category}
+            onChange={v => setCategory(v)}
+            options={[
+              { value: '', label: t('todo.noCategory') },
+              ...categories.map(c => ({
+                value: c, label: c,
+                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+              })),
+            ]}
+            placeholder={t('todo.noCategory')}
+            size="sm"
+          />
+        </div>
+
+        <div>
+          <label style={labelStyle}>{t('todo.detail.priority')}</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {[0, 1, 2, 3].map(p => {
+              const cfg = PRIO_CONFIG[p]
+              const isActive = priority === p
+              return (
+                <button key={p} onClick={() => setPriority(p)}
+                  style={{
+                    flex: 1, padding: '6px 0', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer',
+                    fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
+                    border: `1px solid ${isActive && cfg ? cfg.color + '40' : 'var(--border-primary)'}`,
+                    background: isActive && cfg ? cfg.color + '12' : 'transparent',
+                    color: isActive && cfg ? cfg.color : isActive ? 'var(--text-primary)' : 'var(--text-faint)',
+                    transition: 'all 0.1s',
+                  }}>
+                  {cfg ? <><Flag size={10} />{cfg.label}</> : t('todo.detail.noPriority')}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <div>
+          <label style={labelStyle}>{t('todo.detail.dueDate')}</label>
+          <CustomDatePicker value={dueDate} onChange={v => setDueDate(v)} />
+        </div>
+
+        <div>
+          <label style={labelStyle}>{t('todo.detail.assignedTo')}</label>
+          <CustomSelect
+            value={String(assignedUserId ?? '')}
+            onChange={v => setAssignedUserId(v ? Number(v) : null)}
+            options={[
+              { value: '', label: t('todo.unassigned'), icon: <User size={14} style={{ color: 'var(--text-faint)' }} /> },
+              ...members.map(m => ({
+                value: String(m.id), label: m.username,
+                icon: m.avatar ? (
+                  <img src={`/uploads/avatars/${m.avatar}`} style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' as const }} alt="" />
+                ) : (
+                  <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--border-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'var(--text-faint)', fontWeight: 600 }}>
+                    {m.username.charAt(0).toUpperCase()}
+                  </span>
+                ),
+              })),
+            ]}
+            placeholder={t('todo.unassigned')}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div style={{ padding: '12px 20px', borderTop: '1px solid var(--border-faint)' }}>
+        <button onClick={create} disabled={!name.trim() || saving}
+          style={{
+            width: '100%', padding: '9px 16px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: name.trim() ? 'pointer' : 'default', fontFamily: 'inherit',
+            border: 'none', background: name.trim() ? 'var(--text-primary)' : 'var(--border-faint)',
+            color: name.trim() ? 'var(--bg-primary)' : 'var(--text-faint)', transition: 'all 0.15s',
+          }}>
+          {saving ? '...' : t('todo.detail.create')}
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Trips/TripFormModal.tsx

@@ -36,6 +36,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
     start_date: '',
     end_date: '',
     reminder_days: 0 as number,
+    day_count: 7,
   })
   const [customReminder, setCustomReminder] = useState(false)
   const [error, setError] = useState('')
@@ -56,11 +57,12 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
         start_date: trip.start_date || '',
         end_date: trip.end_date || '',
         reminder_days: rd,
+        day_count: trip.day_count || 7,
       })
       setCustomReminder(![0, 1, 3, 9].includes(rd))
       setCoverPreview(trip.cover_image || null)
     } else {
-      setFormData({ title: '', description: '', start_date: '', end_date: '', reminder_days: tripRemindersEnabled ? 3 : 0 })
+      setFormData({ title: '', description: '', start_date: '', end_date: '', reminder_days: tripRemindersEnabled ? 3 : 0, day_count: 7 })
       setCustomReminder(false)
       setCoverPreview(null)
     }
@@ -98,6 +100,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
         start_date: formData.start_date || null,
         end_date: formData.end_date || null,
         reminder_days: formData.reminder_days,
+        ...(!formData.start_date && !formData.end_date ? { day_count: formData.day_count } : {}),
       })
       // Add selected members for newly created trips
       if (selectedMembers.length > 0 && result?.trip?.id) {
@@ -297,6 +300,18 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
           </div>
         </div>
 
+        {!formData.start_date && !formData.end_date && (
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              {t('dashboard.dayCount')}
+            </label>
+            <input type="number" min={1} max={365} value={formData.day_count}
+              onChange={e => update('day_count', Math.max(1, Math.min(365, Number(e.target.value) || 1)))}
+              className={inputCls} />
+            <p className="text-xs text-slate-400 mt-1.5">{t('dashboard.dayCountHint')}</p>
+          </div>
+        )}
+
         {/* Reminder — only visible to owner (or when creating) */}
         {(!isEditing || trip?.user_id === currentUser?.id || currentUser?.role === 'admin') && (
         <div className={!tripRemindersEnabled ? 'opacity-50' : ''}>

client/src/i18n/TranslationContext.tsx

@@ -8,6 +8,7 @@ import hu from './translations/hu'
 import it from './translations/it'
 import ru from './translations/ru'
 import zh from './translations/zh'
+import zhTw from './translations/zhTw'
 import nl from './translations/nl'
 import ar from './translations/ar'
 import br from './translations/br'
@@ -27,13 +28,14 @@ export const SUPPORTED_LANGUAGES = [
   { value: 'cs', label: 'Česky' },
   { value: 'pl', label: 'Polski' },
   { value: 'ru', label: 'Русский' },
-  { value: 'zh', label: '中文' },
+  { value: 'zh', label: '简体中文' },
+  { value: 'zh-TW', label: '繁體中文' },
   { value: 'it', label: 'Italiano' },
   { value: 'ar', label: 'العربية' },
 ] as const
 
-const translations: Record<string, TranslationStrings> = { de, en, es, fr, hu, it, ru, zh, nl, ar, br, cs, pl }
-const LOCALES: Record<string, string> = { de: 'de-DE', en: 'en-US', es: 'es-ES', fr: 'fr-FR', hu: 'hu-HU', it: 'it-IT', ru: 'ru-RU', zh: 'zh-CN', nl: 'nl-NL', ar: 'ar-SA', br: 'pt-BR', cs: 'cs-CZ', pl: 'pl-PL' }
+const translations: Record<string, TranslationStrings> = { de, en, es, fr, hu, it, ru, zh, 'zh-TW': zhTw, nl, ar, br, cs, pl }
+const LOCALES: Record<string, string> = { de: 'de-DE', en: 'en-US', es: 'es-ES', fr: 'fr-FR', hu: 'hu-HU', it: 'it-IT', ru: 'ru-RU', zh: 'zh-CN', 'zh-TW': 'zh-TW', nl: 'nl-NL', ar: 'ar-SA', br: 'pt-BR', cs: 'cs-CZ', pl: 'pl-PL' }
 const RTL_LANGUAGES = new Set(['ar'])
 
 export function getLocaleForLanguage(language: string): string {
@@ -42,7 +44,7 @@ export function getLocaleForLanguage(language: string): string {
 
 export function getIntlLanguage(language: string): string {
   if (language === 'br') return 'pt-BR'
-  return ['de', 'es', 'fr', 'hu', 'it', 'ru', 'zh', 'nl', 'ar', 'cs', 'pl'].includes(language) ? language : 'en'
+  return ['de', 'es', 'fr', 'hu', 'it', 'ru', 'zh', 'zh-TW', 'nl', 'ar', 'cs', 'pl'].includes(language) ? language : 'en'
 }
 
 export function isRtlLanguage(language: string): boolean {

client/src/i18n/translations/en.ts

@@ -113,6 +113,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'dashboard.tripDescriptionPlaceholder': 'What is this trip about?',
   'dashboard.startDate': 'Start Date',
   'dashboard.endDate': 'End Date',
+  'dashboard.dayCount': 'Number of Days',
+  'dashboard.dayCountHint': 'How many days to plan for when no travel dates are set.',
   'dashboard.noDateHint': 'No date set — 7 default days will be created. You can change this anytime.',
   'dashboard.coverImage': 'Cover Image',
   'dashboard.addCoverImage': 'Add cover image (or drag & drop)',
@@ -127,6 +129,12 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   // Settings
   'settings.title': 'Settings',
   'settings.subtitle': 'Configure your personal settings',
+  'settings.tabs.display': 'Display',
+  'settings.tabs.map': 'Map',
+  'settings.tabs.notifications': 'Notifications',
+  'settings.tabs.integrations': 'Integrations',
+  'settings.tabs.account': 'Account',
+  'settings.tabs.about': 'About',
   'settings.map': 'Map',
   'settings.mapTemplate': 'Map Template',
   'settings.mapTemplatePlaceholder.select': 'Select template...',
@@ -163,23 +171,44 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyCollabMessage': 'Chat messages (Collab)',
   'settings.notifyPackingTagged': 'Packing list: assignments',
   'settings.notifyWebhook': 'Webhook notifications',
+  'settings.notifyVersionAvailable': 'New version available',
+  'settings.notificationPreferences.email': 'Email',
+  'settings.notificationPreferences.webhook': 'Webhook',
+  'settings.notificationPreferences.inapp': 'In-App',
+  'settings.notificationPreferences.noChannels': 'No notification channels are configured. Ask an admin to set up email or webhook notifications.',
+  'settings.webhookUrl.label': 'Webhook URL',
+  'settings.webhookUrl.placeholder': 'https://discord.com/api/webhooks/...',
+  'settings.webhookUrl.hint': 'Enter your Discord, Slack, or custom webhook URL to receive notifications.',
+  'settings.webhookUrl.save': 'Save',
+  'settings.webhookUrl.saved': 'Webhook URL saved',
+  'settings.webhookUrl.test': 'Test',
+  'settings.webhookUrl.testSuccess': 'Test webhook sent successfully',
+  'settings.webhookUrl.testFailed': 'Test webhook failed',
   'admin.notifications.title': 'Notifications',
   'admin.notifications.hint': 'Choose one notification channel. Only one can be active at a time.',
   'admin.notifications.none': 'Disabled',
   'admin.notifications.email': 'Email (SMTP)',
   'admin.notifications.webhook': 'Webhook',
-  'admin.notifications.events': 'Notification Events',
-  'admin.notifications.eventsHint': 'Choose which events trigger notifications for all users.',
-  'admin.notifications.configureFirst': 'Configure the SMTP or webhook settings below first, then enable events.',
   'admin.notifications.save': 'Save notification settings',
   'admin.notifications.saved': 'Notification settings saved',
   'admin.notifications.testWebhook': 'Send test webhook',
   'admin.notifications.testWebhookSuccess': 'Test webhook sent successfully',
   'admin.notifications.testWebhookFailed': 'Test webhook failed',
+  'admin.notifications.emailPanel.title': 'Email (SMTP)',
+  'admin.notifications.webhookPanel.title': 'Webhook',
+  'admin.notifications.inappPanel.title': 'In-App',
+  'admin.notifications.inappPanel.hint': 'In-app notifications are always active and cannot be disabled globally.',
+  'admin.notifications.adminWebhookPanel.title': 'Admin Webhook',
+  'admin.notifications.adminWebhookPanel.hint': 'This webhook is used exclusively for admin notifications (e.g. version alerts). It is separate from per-user webhooks and always fires when set.',
+  'admin.notifications.adminWebhookPanel.saved': 'Admin webhook URL saved',
+  'admin.notifications.adminWebhookPanel.testSuccess': 'Test webhook sent successfully',
+  'admin.notifications.adminWebhookPanel.testFailed': 'Test webhook failed',
+  'admin.notifications.adminWebhookPanel.alwaysOnHint': 'Admin webhook always fires when a URL is configured',
+  'admin.notifications.adminNotificationsHint': 'Configure which channels deliver admin-only notifications (e.g. version alerts).',
   'admin.smtp.title': 'Email & Notifications',
   'admin.smtp.hint': 'SMTP configuration for sending email notifications.',
   'admin.smtp.testButton': 'Send test email',
-  'admin.webhook.hint': 'Send notifications to an external webhook (Discord, Slack, etc.).',
+  'admin.webhook.hint': 'Allow users to configure their own webhook URLs for notifications (Discord, Slack, etc.).',
   'admin.smtp.testSuccess': 'Test email sent successfully',
   'admin.smtp.testFailed': 'Test email failed',
   'settings.notificationsDisabled': 'Notifications are not configured. Ask an admin to enable email or webhook notifications.',
@@ -243,6 +272,14 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.mcp.toast.deleteError': 'Failed to delete token',
   'settings.account': 'Account',
   'settings.about': 'About',
+  'settings.about.reportBug': 'Report a Bug',
+  'settings.about.reportBugHint': 'Found an issue? Let us know',
+  'settings.about.featureRequest': 'Feature Request',
+  'settings.about.featureRequestHint': 'Suggest a new feature',
+  'settings.about.wikiHint': 'Documentation & guides',
+  'settings.about.description': 'TREK is a self-hosted travel planner that helps you organize your trips from the first idea to the last memory. Day planning, budget, packing lists, photos and much more — all in one place, on your own server.',
+  'settings.about.madeWith': 'Made with',
+  'settings.about.madeBy': 'by Maurice and a growing open-source community.',
   'settings.username': 'Username',
   'settings.email': 'Email',
   'settings.role': 'Role',
@@ -383,7 +420,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.users': 'Users',
   'admin.tabs.categories': 'Categories',
   'admin.tabs.backup': 'Backup',
-  'admin.tabs.audit': 'Audit log',
+  'admin.tabs.notifications': 'Notifications',
+  'admin.tabs.audit': 'Audit',
   'admin.stats.users': 'Users',
   'admin.stats.trips': 'Trips',
   'admin.stats.places': 'Places',
@@ -465,7 +503,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   // Packing Templates & Bag Tracking
   'admin.bagTracking.title': 'Bag Tracking',
   'admin.bagTracking.subtitle': 'Enable weight and bag assignment for packing items',
-  'admin.tabs.config': 'Configuration',
+  'admin.tabs.config': 'Personalization',
   'admin.tabs.templates': 'Packing Templates',
   'admin.packingTemplates.title': 'Packing Templates',
   'admin.packingTemplates.subtitle': 'Create reusable packing lists for your trips',
@@ -489,8 +527,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.addons': 'Addons',
   'admin.addons.title': 'Addons',
   'admin.addons.subtitle': 'Enable or disable features to customize your TREK experience.',
-  'admin.addons.catalog.packing.name': 'Packing',
-  'admin.addons.catalog.packing.description': 'Checklists to prepare your luggage for each trip',
+  'admin.addons.catalog.packing.name': 'Lists',
+  'admin.addons.catalog.packing.description': 'Packing lists and to-do tasks for your trips',
   'admin.addons.catalog.budget.name': 'Budget',
   'admin.addons.catalog.budget.description': 'Track expenses and plan your trip budget',
   'admin.addons.catalog.documents.name': 'Documents',
@@ -685,8 +723,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'atlas.unmark': 'Remove',
   'atlas.confirmMark': 'Mark this country as visited?',
   'atlas.confirmUnmark': 'Remove this country from your visited list?',
+  'atlas.confirmUnmarkRegion': 'Remove this region from your visited list?',
   'atlas.markVisited': 'Mark as visited',
   'atlas.markVisitedHint': 'Add this country to your visited list',
+  'atlas.markRegionVisitedHint': 'Add this region to your visited list',
   'atlas.addToBucket': 'Add to bucket list',
   'atlas.addPoi': 'Add place',
   'atlas.searchCountry': 'Search a country...',
@@ -736,6 +776,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'trip.tabs.reservationsShort': 'Book',
   'trip.tabs.packing': 'Packing List',
   'trip.tabs.packingShort': 'Packing',
+  'trip.tabs.lists': 'Lists',
+  'trip.tabs.listsShort': 'Lists',
   'trip.tabs.budget': 'Budget',
   'trip.tabs.files': 'Files',
   'trip.loading': 'Loading trip...',
@@ -930,6 +972,32 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.linkAssignment': 'Link to day assignment',
   'reservations.pickAssignment': 'Select an assignment from your plan...',
   'reservations.noAssignment': 'No link (standalone)',
+  'reservations.price': 'Price',
+  'reservations.budgetCategory': 'Budget category',
+  'reservations.budgetCategoryPlaceholder': 'e.g. Transport, Accommodation',
+  'reservations.budgetCategoryAuto': 'Auto (from booking type)',
+  'reservations.budgetHint': 'A budget entry will be created automatically when saving.',
+  'reservations.departureDate': 'Departure',
+  'reservations.arrivalDate': 'Arrival',
+  'reservations.departureTime': 'Dep. time',
+  'reservations.arrivalTime': 'Arr. time',
+  'reservations.pickupDate': 'Pickup',
+  'reservations.returnDate': 'Return',
+  'reservations.pickupTime': 'Pickup time',
+  'reservations.returnTime': 'Return time',
+  'reservations.endDate': 'End date',
+  'reservations.meta.departureTimezone': 'Dep. TZ',
+  'reservations.meta.arrivalTimezone': 'Arr. TZ',
+  'reservations.span.departure': 'Departure',
+  'reservations.span.arrival': 'Arrival',
+  'reservations.span.inTransit': 'In transit',
+  'reservations.span.pickup': 'Pickup',
+  'reservations.span.return': 'Return',
+  'reservations.span.active': 'Active',
+  'reservations.span.start': 'Start',
+  'reservations.span.end': 'End',
+  'reservations.span.ongoing': 'Ongoing',
+  'reservations.validation.endBeforeStart': 'End date/time must be after start date/time',
 
   // Budget
   'budget.title': 'Budget',
@@ -956,6 +1024,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'budget.totalBudget': 'Total Budget',
   'budget.byCategory': 'By Category',
   'budget.editTooltip': 'Click to edit',
+  'budget.linkedToReservation': 'Linked to a reservation — edit the name there',
   'budget.confirm.deleteCategory': 'Are you sure you want to delete the category "{name}" with {count} entries?',
   'budget.deleteCategory': 'Delete Category',
   'budget.perPerson': 'Per Person',
@@ -1056,6 +1125,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'packing.template': 'Template',
   'packing.templateApplied': '{count} items added from template',
   'packing.templateError': 'Failed to apply template',
+  'packing.saveAsTemplate': 'Save as template',
+  'packing.templateName': 'Template name',
+  'packing.templateSaved': 'Packing list saved as template',
+  'packing.assignUser': 'Assign user',
   'packing.bags': 'Bags',
   'packing.noBag': 'Unassigned',
   'packing.totalWeight': 'Total weight',
@@ -1327,11 +1400,12 @@ const en: Record<string, string | { name: string; category: string }[]> = {
 
   // Photos / Immich
   'memories.title': 'Photos',
-  'memories.notConnected': 'Immich not connected',
-  'memories.notConnectedHint': 'Connect your Immich instance in Settings to see your trip photos here.',
+  'memories.notConnected': '{provider_name} not connected',
+  'memories.notConnectedHint': 'Connect your {provider_name} instance in Settings to be able add photos to this trip.',
+  'memories.notConnectedMultipleHint': 'Connect any of these photo providers: {provider_names} in Settings to be able add photos to this trip.',
   'memories.noDates': 'Add dates to your trip to load photos.',
   'memories.noPhotos': 'No photos found',
-  'memories.noPhotosHint': 'No photos found in Immich for this trip\'s date range.',
+  'memories.noPhotosHint': 'No photos found in {provider_name} for this trip\'s date range.',
   'memories.photosFound': 'photos',
   'memories.fromOthers': 'from others',
   'memories.sharePhotos': 'Share photos',
@@ -1339,23 +1413,31 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'memories.reviewTitle': 'Review your photos',
   'memories.reviewHint': 'Click photos to exclude them from sharing.',
   'memories.shareCount': 'Share {count} photos',
-  'memories.immichUrl': 'Immich Server URL',
-  'memories.immichApiKey': 'API Key',
+  //-------------------------
+  //todo section
+  'memories.providerUrl': 'Server URL',
+  'memories.providerApiKey': 'API Key',
+  'memories.providerUsername': 'Username',
+  'memories.providerPassword': 'Password',
   'memories.testConnection': 'Test connection',
   'memories.testFirst': 'Test connection first',
   'memories.connected': 'Connected',
   'memories.disconnected': 'Not connected',
-  'memories.connectionSuccess': 'Connected to Immich',
-  'memories.connectionError': 'Could not connect to Immich',
-  'memories.saved': 'Immich settings saved',
+  'memories.connectionSuccess': 'Connected to {provider_name}',
+  'memories.connectionError': 'Could not connect to {provider_name}',
+  'memories.saved': '{provider_name} settings saved',
+  'memories.saveError': 'Could not save {provider_name} settings',
+  //------------------------  
   'memories.addPhotos': 'Add photos',
   'memories.linkAlbum': 'Link Album',
-  'memories.selectAlbum': 'Select Immich Album',
+  'memories.selectAlbum': 'Select {provider_name} Album',
+  'memories.selectAlbumMultiple': 'Select Album',
   'memories.noAlbums': 'No albums found',
   'memories.syncAlbum': 'Sync album',
   'memories.unlinkAlbum': 'Unlink album',
   'memories.photos': 'photos',
-  'memories.selectPhotos': 'Select photos from Immich',
+  'memories.selectPhotos': 'Select photos from {provider_name}',
+  'memories.selectPhotosMultiple': 'Select Photos',
   'memories.selectHint': 'Tap photos to select them.',
   'memories.selected': 'selected',
   'memories.addSelected': 'Add {count} photos',
@@ -1528,6 +1610,9 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'notifications.system': 'System',
 
   // Notification test keys (dev only)
+  'notifications.versionAvailable.title': 'Update Available',
+  'notifications.versionAvailable.text': 'TREK {version} is now available.',
+  'notifications.versionAvailable.button': 'View Details',
   'notifications.test.title': 'Test notification from {actor}',
   'notifications.test.text': 'This is a simple test notification.',
   'notifications.test.booleanTitle': '{actor} asks for your approval',
@@ -1541,6 +1626,77 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'notifications.test.adminText': '{actor} sent a test notification to all admins.',
   'notifications.test.tripTitle': '{actor} posted in your trip',
   'notifications.test.tripText': 'Test notification for trip "{trip}".',
+
+  // Todo
+  'todo.subtab.packing': 'Packing List',
+  'todo.subtab.todo': 'To-Do',
+  'todo.completed': 'completed',
+  'todo.filter.all': 'All',
+  'todo.filter.open': 'Open',
+  'todo.filter.done': 'Done',
+  'todo.uncategorized': 'Uncategorized',
+  'todo.namePlaceholder': 'Task name',
+  'todo.descriptionPlaceholder': 'Description (optional)',
+  'todo.unassigned': 'Unassigned',
+  'todo.noCategory': 'No category',
+  'todo.hasDescription': 'Has description',
+  'todo.addItem': 'Add new task...',
+  'todo.newCategory': 'Category name',
+  'todo.addCategory': 'Add category',
+  'todo.newItem': 'New task',
+  'todo.empty': 'No tasks yet. Add a task to get started!',
+  'todo.filter.my': 'My Tasks',
+  'todo.filter.overdue': 'Overdue',
+  'todo.sidebar.tasks': 'Tasks',
+  'todo.sidebar.categories': 'Categories',
+  'todo.detail.title': 'Task',
+  'todo.detail.description': 'Description',
+  'todo.detail.category': 'Category',
+  'todo.detail.dueDate': 'Due date',
+  'todo.detail.assignedTo': 'Assigned to',
+  'todo.detail.delete': 'Delete',
+  'todo.detail.save': 'Save changes',
+  'todo.sortByPrio': 'Priority',
+  'todo.detail.priority': 'Priority',
+  'todo.detail.noPriority': 'None',
+  'todo.detail.create': 'Create task',
+
+  // Notifications — dev test events
+  'notif.test.title': '[Test] Notification',
+  'notif.test.simple.text': 'This is a simple test notification.',
+  'notif.test.boolean.text': 'Do you accept this test notification?',
+  'notif.test.navigate.text': 'Click below to navigate to the dashboard.',
+
+  // Notifications
+  'notif.trip_invite.title': 'Trip Invitation',
+  'notif.trip_invite.text': '{actor} invited you to {trip}',
+  'notif.booking_change.title': 'Booking Updated',
+  'notif.booking_change.text': '{actor} updated a booking in {trip}',
+  'notif.trip_reminder.title': 'Trip Reminder',
+  'notif.trip_reminder.text': 'Your trip {trip} is coming up soon!',
+  'notif.vacay_invite.title': 'Vacay Fusion Invite',
+  'notif.vacay_invite.text': '{actor} invited you to fuse vacation plans',
+  'notif.photos_shared.title': 'Photos Shared',
+  'notif.photos_shared.text': '{actor} shared {count} photo(s) in {trip}',
+  'notif.collab_message.title': 'New Message',
+  'notif.collab_message.text': '{actor} sent a message in {trip}',
+  'notif.packing_tagged.title': 'Packing Assignment',
+  'notif.packing_tagged.text': '{actor} assigned you to {category} in {trip}',
+  'notif.version_available.title': 'New Version Available',
+  'notif.version_available.text': 'TREK {version} is now available',
+  'notif.action.view_trip': 'View Trip',
+  'notif.action.view_collab': 'View Messages',
+  'notif.action.view_packing': 'View Packing',
+  'notif.action.view_photos': 'View Photos',
+  'notif.action.view_vacay': 'View Vacay',
+  'notif.action.view_admin': 'Go to Admin',
+  'notif.action.view': 'View',
+  'notif.action.accept': 'Accept',
+  'notif.action.decline': 'Decline',
+  'notif.generic.title': 'Notification',
+  'notif.generic.text': 'You have a new notification',
+  'notif.dev.unknown_event.title': '[DEV] Unknown Event',
+  'notif.dev.unknown_event.text': 'Event type "{event}" is not registered in EVENT_NOTIFICATION_CONFIG',
 }
 
 export default en

client/src/i18n/translations/pl.ts

@@ -99,6 +99,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'dashboard.tripDescriptionPlaceholder': 'Opisz swoją podróż',
   'dashboard.startDate': 'Data rozpoczęcia',
   'dashboard.endDate': 'Data zakończenia',
+  'dashboard.dayCount': 'Liczba dni',
+  'dashboard.dayCountHint': 'Ile dni zaplanować, gdy nie ustawiono dat podróży.',
   'dashboard.noDateHint': 'Nie ustawiono daty — zostanie utworzonych 7 domyślnych dni. Możesz to zmienić w dowolnym momencie.',
   'dashboard.coverImage': 'Okładka',
   'dashboard.addCoverImage': 'Dodaj okładkę (lub przeciągnij i upuść)',
@@ -113,6 +115,12 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   // Settings
   'settings.title': 'Ustawienia',
   'settings.subtitle': 'Skonfiguruj swoje ustawienia',
+  'settings.tabs.display': 'Wygląd',
+  'settings.tabs.map': 'Mapa',
+  'settings.tabs.notifications': 'Powiadomienia',
+  'settings.tabs.integrations': 'Integracje',
+  'settings.tabs.account': 'Konto',
+  'settings.tabs.about': 'O aplikacji',
   'settings.map': 'Mapa',
   'settings.mapTemplate': 'Szablon mapy',
   'settings.mapTemplatePlaceholder.select': 'Wybierz szablon...',
@@ -149,6 +157,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyCollabMessage': 'Wiadomości czatu (Collab)',
   'settings.notifyPackingTagged': 'Lista pakowania: przypisania',
   'settings.notifyWebhook': 'Powiadomienia Webhook',
+  'settings.notifyVersionAvailable': 'Nowa wersja dostępna',
   'admin.smtp.title': 'E-maile i powiadomienia',
   'admin.smtp.hint': 'Konfiguracja SMTP dla powiadomień e-mail. Opcjonalnie: URL Webhooka dla Discorda, Slacka, itp.',
   'admin.smtp.testButton': 'Wyślij testowego e-maila',
@@ -212,6 +221,14 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'settings.mcp.toast.deleteError': 'Nie udało się usunąć tokenu',
   'settings.account': 'Konto',
   'settings.about': 'O aplikacji',
+  'settings.about.reportBug': 'Zgłoś błąd',
+  'settings.about.reportBugHint': 'Znalazłeś problem? Daj nam znać',
+  'settings.about.featureRequest': 'Zaproponuj funkcję',
+  'settings.about.featureRequestHint': 'Zaproponuj nową funkcję',
+  'settings.about.wikiHint': 'Dokumentacja i poradniki',
+  'settings.about.description': 'TREK to samodzielnie hostowany planer podróży, który pomaga organizować wyprawy od pierwszego pomysłu po ostatnie wspomnienie. Planowanie dzienne, budżet, listy pakowania, zdjęcia i wiele więcej — wszystko w jednym miejscu, na własnym serwerze.',
+  'settings.about.madeWith': 'Stworzone z',
+  'settings.about.madeBy': 'przez Maurice\'a i rosnącą społeczność open-source.',
   'settings.username': 'Nazwa użytkownika',
   'settings.email': 'E-mail',
   'settings.role': 'Rola',
@@ -349,7 +366,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.users': 'Użytkownicy',
   'admin.tabs.categories': 'Kategorie',
   'admin.tabs.backup': 'Backupy',
-  'admin.tabs.audit': 'Aktywność',
+  'admin.tabs.notifications': 'Powiadomienia',
+  'admin.tabs.audit': 'Audit',
   'admin.stats.users': 'Użytkownicy',
   'admin.stats.trips': 'Podróże',
   'admin.stats.places': 'Miejsca',
@@ -431,7 +449,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   // Packing Templates & Bag Tracking
   'admin.bagTracking.title': 'Kontrola bagażu',
   'admin.bagTracking.subtitle': 'Włącz wagę i przypisywanie do toreb dla przedmiotów do pakowania',
-  'admin.tabs.config': 'Konfiguracja',
+  'admin.tabs.config': 'Personalizacja',
   'admin.tabs.templates': 'Szablony pakowania',
   'admin.packingTemplates.title': 'Szablony pakowania',
   'admin.packingTemplates.subtitle': 'Twórz szablony list pakowania do wielokrotnego użycia dla swoich podróży',
@@ -455,8 +473,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.tabs.addons': 'Dodatki',
   'admin.addons.title': 'Dodatki',
   'admin.addons.subtitle': 'Włączaj lub wyłączaj funkcje, aby dostosować swoje doświadczenie w TREK.',
-  'admin.addons.catalog.packing.name': 'Pakowanie',
-  'admin.addons.catalog.packing.description': 'Listy do przygotowania bagażu na każdą podróż',
+  'admin.addons.catalog.packing.name': 'Listy',
+  'admin.addons.catalog.packing.description': 'Listy pakowania i zadania do wykonania dla Twoich podróży',
   'admin.addons.catalog.budget.name': 'Budżet',
   'admin.addons.catalog.budget.description': 'Śledź wydatki i planuj budżet podróży',
   'admin.addons.catalog.documents.name': 'Dokumenty',
@@ -472,7 +490,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.addons.catalog.mcp.name': 'MCP',
   'admin.addons.catalog.mcp.description': 'Model Context Protocol dla integracji asystenta AI',
   'admin.addons.subtitleBefore': 'Włączaj lub wyłączaj funkcje, aby dostosować swoje doświadczenie w ',
-  'admin.addons.subtitleAfter': '',
+  'admin.addons.subtitleAfter': '.',
   'admin.addons.enabled': 'Włączone',
   'admin.addons.disabled': 'Wyłączone',
   'admin.addons.type.trip': 'Podróż',
@@ -651,8 +669,10 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'atlas.unmark': 'Usuń',
   'atlas.confirmMark': 'Oznaczyć ten kraj jako odwiedzony?',
   'atlas.confirmUnmark': 'Usunąć ten kraj z listy odwiedzonych?',
+  'atlas.confirmUnmarkRegion': 'Usunąć ten region z listy odwiedzonych?',
   'atlas.markVisited': 'Oznacz jako odwiedzony',
   'atlas.markVisitedHint': 'Dodaj ten kraj do listy odwiedzonych',
+  'atlas.markRegionVisitedHint': 'Dodaj ten region do listy odwiedzonych',
   'atlas.addToBucket': 'Dodaj do listy marzeń',
   'atlas.addPoi': 'Dodaj miejsce',
   'atlas.bucketNamePlaceholder': 'Nazwa (kraj, miasto, miejsce...)',
@@ -701,6 +721,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'trip.tabs.reservationsShort': 'Rezerwacje',
   'trip.tabs.packing': 'Lista pakowania',
   'trip.tabs.packingShort': 'Pakowanie',
+  'trip.tabs.lists': 'Listy',
+  'trip.tabs.listsShort': 'Listy',
   'trip.tabs.budget': 'Budżet',
   'trip.tabs.files': 'Pliki',
   'trip.loading': 'Ładowanie podróży...',
@@ -888,6 +910,32 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'reservations.linkAssignment': 'Przypisz do miejsca',
   'reservations.pickAssignment': 'Wybierz miejsce z planu...',
   'reservations.noAssignment': 'Brak przypisania (samodzielna)',
+  'reservations.price': 'Cena',
+  'reservations.budgetCategory': 'Kategoria budżetu',
+  'reservations.budgetCategoryPlaceholder': 'np. Transport, Zakwaterowanie',
+  'reservations.budgetCategoryAuto': 'Auto (na podstawie typu rezerwacji)',
+  'reservations.budgetHint': 'Wpis budżetowy zostanie automatycznie utworzony podczas zapisywania.',
+  'reservations.departureDate': 'Wylot',
+  'reservations.arrivalDate': 'Przylot',
+  'reservations.departureTime': 'Godz. wylotu',
+  'reservations.arrivalTime': 'Godz. przylotu',
+  'reservations.pickupDate': 'Odbiór',
+  'reservations.returnDate': 'Zwrot',
+  'reservations.pickupTime': 'Godz. odbioru',
+  'reservations.returnTime': 'Godz. zwrotu',
+  'reservations.endDate': 'Data końca',
+  'reservations.meta.departureTimezone': 'TZ wylotu',
+  'reservations.meta.arrivalTimezone': 'TZ przylotu',
+  'reservations.span.departure': 'Wylot',
+  'reservations.span.arrival': 'Przylot',
+  'reservations.span.inTransit': 'W tranzycie',
+  'reservations.span.pickup': 'Odbiór',
+  'reservations.span.return': 'Zwrot',
+  'reservations.span.active': 'Aktywny',
+  'reservations.span.start': 'Start',
+  'reservations.span.end': 'Koniec',
+  'reservations.span.ongoing': 'W trakcie',
+  'reservations.validation.endBeforeStart': 'Data/godzina zakończenia musi być późniejsza niż data/godzina rozpoczęcia',
 
   // Budget
   'budget.title': 'Budżet',
@@ -1415,8 +1463,31 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.testWebhook': 'Wyślij testowy webhook',
   'admin.notifications.testWebhookSuccess': 'Testowy webhook wysłany pomyślnie',
   'admin.notifications.testWebhookFailed': 'Testowy webhook nie powiódł się',
-  'admin.webhook.hint': 'Wysyłaj powiadomienia do zewnętrznego webhooka.',
+  'admin.notifications.emailPanel.title': 'Email (SMTP)',
+  'admin.notifications.webhookPanel.title': 'Webhook',
+  'admin.notifications.inappPanel.title': 'In-App',
+  'admin.notifications.inappPanel.hint': 'Powiadomienia w aplikacji są zawsze aktywne i nie można ich globalnie wyłączyć.',
+  'admin.notifications.adminWebhookPanel.title': 'Webhook admina',
+  'admin.notifications.adminWebhookPanel.hint': 'Ten webhook służy wyłącznie do powiadomień admina (np. alertów o nowych wersjach). Jest niezależny od webhooków użytkowników i wysyła automatycznie, gdy URL jest skonfigurowany.',
+  'admin.notifications.adminWebhookPanel.saved': 'URL webhooka admina zapisany',
+  'admin.notifications.adminWebhookPanel.testSuccess': 'Testowy webhook wysłany pomyślnie',
+  'admin.notifications.adminWebhookPanel.testFailed': 'Wysyłanie testowego webhooka nie powiodło się',
+  'admin.notifications.adminWebhookPanel.alwaysOnHint': 'Webhook admina wysyła automatycznie, gdy URL jest skonfigurowany',
+  'admin.notifications.adminNotificationsHint': 'Skonfiguruj, które kanały dostarczają powiadomienia admina (np. alerty o wersjach). Webhook wysyła automatycznie, gdy ustawiony jest URL webhooka admina.',
+  'admin.webhook.hint': 'Pozwól użytkownikom konfigurować własne adresy URL webhooka dla powiadomień (Discord, Slack itp.).',
   'settings.notificationsDisabled': 'Powiadomienia nie są skonfigurowane.',
+  'settings.notificationPreferences.noChannels': 'Brak skonfigurowanych kanałów powiadomień. Poproś administratora o skonfigurowanie powiadomień e-mail lub webhook.',
+  'settings.webhookUrl.label': 'URL webhooka',
+  'settings.webhookUrl.placeholder': 'https://discord.com/api/webhooks/...',
+  'settings.webhookUrl.hint': 'Wprowadź adres URL webhooka Discord, Slack lub własnego, aby otrzymywać powiadomienia.',
+  'settings.webhookUrl.save': 'Zapisz',
+  'settings.webhookUrl.saved': 'URL webhooka zapisany',
+  'settings.webhookUrl.test': 'Test',
+  'settings.webhookUrl.testSuccess': 'Testowy webhook wysłany pomyślnie',
+  'settings.webhookUrl.testFailed': 'Wysyłanie testowego webhooka nie powiodło się',
+  'settings.notificationPreferences.inapp': 'In-App',
+  'settings.notificationPreferences.webhook': 'Webhook',
+  'settings.notificationPreferences.email': 'Email',
   'settings.notificationsActive': 'Aktywny kanał',
   'settings.notificationsManagedByAdmin': 'Zdarzenia konfigurowane przez administratora.',
   'settings.mustChangePassword': 'Musisz zmienić hasło przed kontynuowaniem.',
@@ -1513,13 +1584,16 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'notifications.deleteAll': 'Usuń wszystkie',
   'notifications.showAll': 'Pokaż wszystkie',
   'notifications.empty': 'Brak powiadomień',
-  'notifications.emptyDescription': "You're all caught up!",
+  'notifications.emptyDescription': 'Jesteś na bieżąco!',
   'notifications.all': 'Wszystkie',
   'notifications.unreadOnly': 'Nieprzeczytane',
   'notifications.markRead': 'Oznacz jako przeczytane',
   'notifications.markUnread': 'Oznacz jako nieprzeczytane',
   'notifications.delete': 'Usuń',
   'notifications.system': 'System',
+  'notifications.versionAvailable.title': 'Dostępna aktualizacja',
+  'notifications.versionAvailable.text': 'TREK {version} jest już dostępny.',
+  'notifications.versionAvailable.button': 'Zobacz szczegóły',
   'notifications.test.title': 'Testowe powiadomienie od {actor}',
   'notifications.test.text': 'To jest powiadomienie testowe.',
   'notifications.test.booleanTitle': '{actor} prosi o akceptację',
@@ -1533,6 +1607,77 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'notifications.test.adminText': '{actor} wysłał testowe powiadomienie.',
   'notifications.test.tripTitle': '{actor} opublikował w Twojej podróży',
   'notifications.test.tripText': 'Testowe powiadomienie dla podróży "{trip}".',
+
+  // Todo
+  'todo.subtab.packing': 'Lista pakowania',
+  'todo.subtab.todo': 'Do zrobienia',
+  'todo.completed': 'ukończono',
+  'todo.filter.all': 'Wszystkie',
+  'todo.filter.open': 'Otwarte',
+  'todo.filter.done': 'Gotowe',
+  'todo.uncategorized': 'Bez kategorii',
+  'todo.namePlaceholder': 'Nazwa zadania',
+  'todo.descriptionPlaceholder': 'Opis (opcjonalnie)',
+  'todo.unassigned': 'Nieprzypisane',
+  'todo.noCategory': 'Brak kategorii',
+  'todo.hasDescription': 'Ma opis',
+  'todo.addItem': 'Dodaj nowe zadanie...',
+  'todo.newCategory': 'Nazwa kategorii',
+  'todo.addCategory': 'Dodaj kategorię',
+  'todo.newItem': 'Nowe zadanie',
+  'todo.empty': 'Brak zadań. Dodaj zadanie, aby zacząć!',
+  'todo.filter.my': 'Moje zadania',
+  'todo.filter.overdue': 'Przeterminowane',
+  'todo.sidebar.tasks': 'Zadania',
+  'todo.sidebar.categories': 'Kategorie',
+  'todo.detail.title': 'Zadanie',
+  'todo.detail.description': 'Opis',
+  'todo.detail.category': 'Kategoria',
+  'todo.detail.dueDate': 'Termin',
+  'todo.detail.assignedTo': 'Przypisano do',
+  'todo.detail.delete': 'Usuń',
+  'todo.detail.save': 'Zapisz zmiany',
+  'todo.detail.create': 'Utwórz zadanie',
+  'todo.detail.priority': 'Priorytet',
+  'todo.detail.noPriority': 'Brak',
+  'todo.sortByPrio': 'Priorytet',
+
+  // Notifications — dev test events
+  'notif.test.title': '[Test] Powiadomienie',
+  'notif.test.simple.text': 'To jest proste powiadomienie testowe.',
+  'notif.test.boolean.text': 'Czy akceptujesz to powiadomienie testowe?',
+  'notif.test.navigate.text': 'Kliknij poniżej, aby przejść do pulpitu.',
+
+  // Notifications
+  'notif.trip_invite.title': 'Zaproszenie do podróży',
+  'notif.trip_invite.text': '{actor} zaprosił Cię do {trip}',
+  'notif.booking_change.title': 'Rezerwacja zaktualizowana',
+  'notif.booking_change.text': '{actor} zaktualizował rezerwację w {trip}',
+  'notif.trip_reminder.title': 'Przypomnienie o podróży',
+  'notif.trip_reminder.text': 'Twoja podróż {trip} zbliża się!',
+  'notif.vacay_invite.title': 'Zaproszenie Vacay Fusion',
+  'notif.vacay_invite.text': '{actor} zaprosił Cię do połączenia planów urlopowych',
+  'notif.photos_shared.title': 'Zdjęcia udostępnione',
+  'notif.photos_shared.text': '{actor} udostępnił {count} zdjęcie/zdjęcia w {trip}',
+  'notif.collab_message.title': 'Nowa wiadomość',
+  'notif.collab_message.text': '{actor} wysłał wiadomość w {trip}',
+  'notif.packing_tagged.title': 'Zadanie pakowania',
+  'notif.packing_tagged.text': '{actor} przypisał Cię do {category} w {trip}',
+  'notif.version_available.title': 'Nowa wersja dostępna',
+  'notif.version_available.text': 'TREK {version} jest teraz dostępny',
+  'notif.action.view_trip': 'Zobacz podróż',
+  'notif.action.view_collab': 'Zobacz wiadomości',
+  'notif.action.view_packing': 'Zobacz pakowanie',
+  'notif.action.view_photos': 'Zobacz zdjęcia',
+  'notif.action.view_vacay': 'Zobacz Vacay',
+  'notif.action.view_admin': 'Przejdź do admina',
+  'notif.action.view': 'Zobacz',
+  'notif.action.accept': 'Akceptuj',
+  'notif.action.decline': 'Odrzuć',
+  'notif.generic.title': 'Powiadomienie',
+  'notif.generic.text': 'Masz nowe powiadomienie',
+  'notif.dev.unknown_event.title': '[DEV] Nieznane zdarzenie',
+  'notif.dev.unknown_event.text': 'Typ zdarzenia "{event}" nie jest zarejestrowany w EVENT_NOTIFICATION_CONFIG',
 }
 
 export default pl

client/src/pages/AdminPage.tsx

@@ -57,6 +57,107 @@ interface UpdateInfo {
   is_docker?: boolean
 }
 
+const ADMIN_EVENT_LABEL_KEYS: Record<string, string> = {
+  version_available: 'settings.notifyVersionAvailable',
+}
+
+const ADMIN_CHANNEL_LABEL_KEYS: Record<string, string> = {
+  inapp: 'settings.notificationPreferences.inapp',
+  email: 'settings.notificationPreferences.email',
+  webhook: 'settings.notificationPreferences.webhook',
+}
+
+function AdminNotificationsPanel({ t, toast }: { t: (k: string) => string; toast: ReturnType<typeof useToast> }) {
+  const [matrix, setMatrix] = useState<any>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    adminApi.getNotificationPreferences().then((data: any) => setMatrix(data)).catch(() => {})
+  }, [])
+
+  if (!matrix) return <p style={{ fontSize: 12, color: 'var(--text-faint)', fontStyle: 'italic', padding: 16 }}>Loading…</p>
+
+  const visibleChannels = (['inapp', 'email', 'webhook'] as const).filter(ch => {
+    if (!matrix.available_channels[ch]) return false
+    return matrix.event_types.some((evt: string) => matrix.implemented_combos[evt]?.includes(ch))
+  })
+
+  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: any) => m ? { ...m, preferences: updated } : m)
+    setSaving(true)
+    try {
+      await adminApi.updateNotificationPreferences(updated)
+    } catch {
+      setMatrix((m: any) => m ? { ...m, preferences: matrix.preferences } : m)
+      toast.error(t('common.error'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (matrix.event_types.length === 0) {
+    return (
+      <div className="bg-white rounded-xl border border-slate-200 p-6">
+        <p style={{ fontSize: 13, color: 'var(--text-faint)' }}>{t('settings.notificationPreferences.noChannels')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100">
+          <h2 className="font-semibold text-slate-900">{t('admin.tabs.notifications')}</h2>
+          <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.adminNotificationsHint')}</p>
+        </div>
+        <div className="p-6">
+          {saving && <p style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 8 }}>Saving…</p>}
+          {/* Header row */}
+          <div style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '80px').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(ADMIN_CHANNEL_LABEL_KEYS[ch]) || ch}
+              </span>
+            ))}
+          </div>
+          {/* Event rows */}
+          {matrix.event_types.map((eventType: string) => {
+            const implementedForEvent = matrix.implemented_combos[eventType] ?? []
+            return (
+              <div key={eventType} style={{ display: 'grid', gridTemplateColumns: `1fr ${visibleChannels.map(() => '80px').join(' ')}`, gap: 4, alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border-primary)' }}>
+                <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
+                  {t(ADMIN_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' }}>
+                      <button
+                        onClick={() => toggle(eventType, ch)}
+                        className="relative inline-flex h-5 w-9 items-center rounded-full transition-colors flex-shrink-0"
+                        style={{ background: isOn ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                      >
+                        <span className="absolute left-0.5 h-4 w-4 rounded-full bg-white transition-transform duration-200"
+                          style={{ transform: isOn ? 'translateX(16px)' : 'translateX(0)' }} />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function AdminPage(): React.ReactElement {
   const { demoMode, serverTimezone } = useAuthStore()
   const { t, locale } = useTranslation()
@@ -68,6 +169,7 @@ export default function AdminPage(): React.ReactElement {
     { id: 'config', label: t('admin.tabs.config') },
     { id: 'addons', label: t('admin.tabs.addons') },
     { id: 'settings', label: t('admin.tabs.settings') },
+    { id: 'notifications', label: t('admin.tabs.notifications') },
     { id: 'backup', label: t('admin.tabs.backup') },
     { id: 'audit', label: t('admin.tabs.audit') },
     ...(mcpEnabled ? [{ id: 'mcp-tokens', label: t('admin.tabs.mcpTokens') }] : []),
@@ -969,189 +1071,6 @@ export default function AdminPage(): React.ReactElement {
                   </button>
                 </div>
               </div>
-              {/* Notifications — exclusive channel selector */}
-              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                <div className="px-6 py-4 border-b border-slate-100">
-                  <h2 className="font-semibold text-slate-900">{t('admin.notifications.title')}</h2>
-                  <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.hint')}</p>
-                </div>
-                <div className="p-6 space-y-4">
-                  {/* Channel selector */}
-                  <div className="flex gap-2">
-                    {(['none', 'email', 'webhook'] as const).map(ch => {
-                      const active = (smtpValues.notification_channel || 'none') === ch
-                      const labels: Record<string, string> = { none: t('admin.notifications.none'), email: t('admin.notifications.email'), webhook: t('admin.notifications.webhook') }
-                      return (
-                        <button
-                          key={ch}
-                          onClick={() => setSmtpValues(prev => ({ ...prev, notification_channel: ch }))}
-                          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors border ${active ? 'bg-slate-900 text-white border-slate-900' : 'bg-white text-slate-600 border-slate-300 hover:bg-slate-50'}`}
-                        >
-                          {labels[ch]}
-                        </button>
-                      )
-                    })}
-                  </div>
-
-                  {/* Notification event toggles — shown when any channel is active */}
-                  {(smtpValues.notification_channel || 'none') !== 'none' && (() => {
-                    const ch = smtpValues.notification_channel || 'none'
-                    const configValid = ch === 'email' ? !!(smtpValues.smtp_host?.trim()) : ch === 'webhook' ? !!(smtpValues.notification_webhook_url?.trim()) : false
-                    return (
-                    <div className={`space-y-2 pt-2 border-t border-slate-100 ${!configValid ? 'opacity-50 pointer-events-none' : ''}`}>
-                      <p className="text-xs font-medium text-slate-500 uppercase tracking-wider mb-2">{t('admin.notifications.events')}</p>
-                      {!configValid && (
-                        <p className="text-[10px] text-amber-600 mb-3">{t('admin.notifications.configureFirst')}</p>
-                      )}
-                      <p className="text-[10px] text-slate-400 mb-3">{t('admin.notifications.eventsHint')}</p>
-                      {[
-                        { key: 'notify_trip_invite', label: t('settings.notifyTripInvite') },
-                        { key: 'notify_booking_change', label: t('settings.notifyBookingChange') },
-                        { key: 'notify_trip_reminder', label: t('settings.notifyTripReminder') },
-                        { key: 'notify_vacay_invite', label: t('settings.notifyVacayInvite') },
-                        { key: 'notify_photos_shared', label: t('settings.notifyPhotosShared') },
-                        { key: 'notify_collab_message', label: t('settings.notifyCollabMessage') },
-                        { key: 'notify_packing_tagged', label: t('settings.notifyPackingTagged') },
-                      ].map(opt => {
-                        const isOn = (smtpValues[opt.key] ?? 'true') !== 'false'
-                        return (
-                          <div key={opt.key} className="flex items-center justify-between py-1">
-                            <span className="text-sm text-slate-700">{opt.label}</span>
-                            <button
-                              onClick={() => {
-                                const newVal = isOn ? 'false' : 'true'
-                                setSmtpValues(prev => ({ ...prev, [opt.key]: newVal }))
-                              }}
-                              className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                              style={{ background: isOn ? 'var(--text-primary)' : 'var(--border-primary)' }}
-                            >
-                              <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                                style={{ transform: isOn ? 'translateX(20px)' : 'translateX(0)' }} />
-                            </button>
-                          </div>
-                        )
-                      })}
-                    </div>
-                    )
-                  })()}
-
-                  {/* Email (SMTP) settings — shown when email channel is active */}
-                  {(smtpValues.notification_channel || 'none') === 'email' && (
-                    <div className="space-y-3 pt-2 border-t border-slate-100">
-                      <p className="text-xs text-slate-400">{t('admin.smtp.hint')}</p>
-                      {smtpLoaded && [
-                        { key: 'smtp_host', label: 'SMTP Host', placeholder: 'mail.example.com' },
-                        { key: 'smtp_port', label: 'SMTP Port', placeholder: '587' },
-                        { key: 'smtp_user', label: 'SMTP User', placeholder: 'trek@example.com' },
-                        { key: 'smtp_pass', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
-                        { key: 'smtp_from', label: 'From Address', placeholder: 'trek@example.com' },
-                      ].map(field => (
-                        <div key={field.key}>
-                          <label className="block text-xs font-medium text-slate-500 mb-1">{field.label}</label>
-                          <input
-                            type={field.type || 'text'}
-                            value={smtpValues[field.key] || ''}
-                            onChange={e => setSmtpValues(prev => ({ ...prev, [field.key]: e.target.value }))}
-                            placeholder={field.placeholder}
-                            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                          />
-                        </div>
-                      ))}
-                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0' }}>
-                        <div>
-                          <span className="text-xs font-medium text-slate-500">Skip TLS certificate check</span>
-                          <p className="text-[10px] text-slate-400 mt-0.5">Enable for self-signed certificates on local mail servers</p>
-                        </div>
-                        <button onClick={() => {
-                          const newVal = smtpValues.smtp_skip_tls_verify === 'true' ? 'false' : 'true'
-                          setSmtpValues(prev => ({ ...prev, smtp_skip_tls_verify: newVal }))
-                        }}
-                          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-                          style={{ background: smtpValues.smtp_skip_tls_verify === 'true' ? 'var(--text-primary)' : 'var(--border-primary)' }}>
-                          <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
-                            style={{ transform: smtpValues.smtp_skip_tls_verify === 'true' ? 'translateX(20px)' : 'translateX(0)' }} />
-                        </button>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Webhook settings — shown when webhook channel is active */}
-                  {(smtpValues.notification_channel || 'none') === 'webhook' && (
-                    <div className="space-y-3 pt-2 border-t border-slate-100">
-                      <p className="text-xs text-slate-400">{t('admin.webhook.hint')}</p>
-                      <div>
-                        <label className="block text-xs font-medium text-slate-500 mb-1">Webhook URL</label>
-                        <input
-                          type="text"
-                          value={smtpValues.notification_webhook_url || ''}
-                          onChange={e => setSmtpValues(prev => ({ ...prev, notification_webhook_url: e.target.value }))}
-                          placeholder="https://discord.com/api/webhooks/..."
-                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-                        />
-                        <p className="text-[10px] text-slate-400 mt-1">TREK will POST JSON with event, title, body, and timestamp to this URL.</p>
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Save + Test buttons */}
-                  <div className="flex items-center gap-2 pt-2 border-t border-slate-100">
-                    <button
-                      onClick={async () => {
-                        const notifKeys = ['notification_channel', 'notification_webhook_url', 'smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify', 'notify_trip_invite', 'notify_booking_change', 'notify_trip_reminder', 'notify_vacay_invite', 'notify_photos_shared', 'notify_collab_message', 'notify_packing_tagged']
-                        const payload: Record<string, string> = {}
-                        for (const k of notifKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
-                        try {
-                          await authApi.updateAppSettings(payload)
-                          toast.success(t('admin.notifications.saved'))
-                          authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
-                            if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
-                          }).catch(() => {})
-                        } catch { toast.error(t('common.error')) }
-                      }}
-                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors"
-                    >
-                      <Save className="w-4 h-4" />
-                      {t('common.save')}
-                    </button>
-                    {(smtpValues.notification_channel || 'none') === 'email' && (
-                      <button
-                        onClick={async () => {
-                          const smtpKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
-                          const payload: Record<string, string> = {}
-                          for (const k of smtpKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
-                          await authApi.updateAppSettings(payload).catch(() => {})
-                          try {
-                            const result = await notificationsApi.testSmtp()
-                            if (result.success) toast.success(t('admin.smtp.testSuccess'))
-                            else toast.error(result.error || t('admin.smtp.testFailed'))
-                          } catch { toast.error(t('admin.smtp.testFailed')) }
-                        }}
-                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
-                      >
-                        {t('admin.smtp.testButton')}
-                      </button>
-                    )}
-                    {(smtpValues.notification_channel || 'none') === 'webhook' && (
-                      <button
-                        onClick={async () => {
-                          if (smtpValues.notification_webhook_url) {
-                            await authApi.updateAppSettings({ notification_webhook_url: smtpValues.notification_webhook_url }).catch(() => {})
-                          }
-                          try {
-                            const result = await notificationsApi.testWebhook()
-                            if (result.success) toast.success(t('admin.notifications.testWebhookSuccess'))
-                            else toast.error(result.error || t('admin.notifications.testWebhookFailed'))
-                          } catch { toast.error(t('admin.notifications.testWebhookFailed')) }
-                        }}
-                        className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
-                      >
-                        {t('admin.notifications.testWebhook')}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </div>
-
               {/* Danger Zone */}
               <div className="bg-white rounded-xl border border-red-200 overflow-hidden">
                 <div className="px-6 py-4 border-b border-red-100 bg-red-50">
@@ -1179,6 +1098,210 @@ export default function AdminPage(): React.ReactElement {
             </div>
           )}
 
+          {activeTab === 'notifications' && (() => {
+            // Derive active channels from smtpValues.notification_channels (plural)
+            // with fallback to notification_channel (singular) for existing installs
+            const rawChannels = smtpValues.notification_channels ?? smtpValues.notification_channel ?? 'none'
+            const activeChans = rawChannels === 'none' ? [] : rawChannels.split(',').map((c: string) => c.trim())
+            const emailActive = activeChans.includes('email')
+            const webhookActive = activeChans.includes('webhook')
+
+            const setChannels = async (email: boolean, webhook: boolean) => {
+              const chans = [email && 'email', webhook && 'webhook'].filter(Boolean).join(',') || 'none'
+              setSmtpValues(prev => ({ ...prev, notification_channels: chans }))
+              try {
+                await authApi.updateAppSettings({ notification_channels: chans })
+              } catch {
+                // Revert state on failure
+                const reverted = [emailActive && 'email', webhookActive && 'webhook'].filter(Boolean).join(',') || 'none'
+                setSmtpValues(prev => ({ ...prev, notification_channels: reverted }))
+                toast.error(t('common.error'))
+              }
+            }
+
+            const smtpConfigured = !!(smtpValues.smtp_host?.trim())
+            const saveNotifications = async () => {
+              // Saves credentials only — channel activation is auto-saved by the toggle
+              const notifKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
+              const payload: Record<string, string> = {}
+              for (const k of notifKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+              try {
+                await authApi.updateAppSettings(payload)
+                toast.success(t('admin.notifications.saved'))
+                authApi.getAppConfig().then((c: { trip_reminders_enabled?: boolean }) => {
+                  if (c?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(c.trip_reminders_enabled)
+                }).catch(() => {})
+              } catch { toast.error(t('common.error')) }
+            }
+
+            return (<>
+              <div className="space-y-4">
+                {/* Email Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.emailPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.smtp.hint')}</p>
+                    </div>
+                    <button
+                      onClick={() => setChannels(!emailActive, webhookActive)}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0"
+                      style={{ background: emailActive ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: emailActive ? 'translateX(20px)' : 'translateX(0)' }} />
+                    </button>
+                  </div>
+                  <div className={`p-6 space-y-3 ${!emailActive ? 'opacity-50 pointer-events-none' : ''}`}>
+                    {smtpLoaded && [
+                      { key: 'smtp_host', label: 'SMTP Host', placeholder: 'mail.example.com' },
+                      { key: 'smtp_port', label: 'SMTP Port', placeholder: '587' },
+                      { key: 'smtp_user', label: 'SMTP User', placeholder: 'trek@example.com' },
+                      { key: 'smtp_pass', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
+                      { key: 'smtp_from', label: 'From Address', placeholder: 'trek@example.com' },
+                    ].map(field => (
+                      <div key={field.key}>
+                        <label className="block text-xs font-medium text-slate-500 mb-1">{field.label}</label>
+                        <input
+                          type={field.type || 'text'}
+                          value={smtpValues[field.key] || ''}
+                          onChange={e => setSmtpValues(prev => ({ ...prev, [field.key]: e.target.value }))}
+                          placeholder={field.placeholder}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                        />
+                      </div>
+                    ))}
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0' }}>
+                      <div>
+                        <span className="text-xs font-medium text-slate-500">Skip TLS certificate check</span>
+                        <p className="text-[10px] text-slate-400 mt-0.5">Enable for self-signed certificates on local mail servers</p>
+                      </div>
+                      <button onClick={() => {
+                        const newVal = smtpValues.smtp_skip_tls_verify === 'true' ? 'false' : 'true'
+                        setSmtpValues(prev => ({ ...prev, smtp_skip_tls_verify: newVal }))
+                      }}
+                        className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                        style={{ background: smtpValues.smtp_skip_tls_verify === 'true' ? 'var(--text-primary)' : 'var(--border-primary)' }}>
+                        <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                          style={{ transform: smtpValues.smtp_skip_tls_verify === 'true' ? 'translateX(20px)' : 'translateX(0)' }} />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="px-6 pb-4 flex items-center gap-2 border-t border-slate-100 pt-4">
+                    <button onClick={saveNotifications}
+                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors">
+                      <Save className="w-4 h-4" />{t('common.save')}
+                    </button>
+                    <button
+                      onClick={async () => {
+                        const smtpKeys = ['smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify']
+                        const payload: Record<string, string> = {}
+                        for (const k of smtpKeys) { if (smtpValues[k] !== undefined) payload[k] = smtpValues[k] }
+                        await authApi.updateAppSettings(payload).catch(() => {})
+                        try {
+                          const result = await notificationsApi.testSmtp()
+                          if (result.success) toast.success(t('admin.smtp.testSuccess'))
+                          else toast.error(result.error || t('admin.smtp.testFailed'))
+                        } catch { toast.error(t('admin.smtp.testFailed')) }
+                      }}
+                      disabled={!smtpConfigured}
+                      className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors disabled:opacity-40"
+                    >
+                      {t('admin.smtp.testButton')}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Webhook Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.webhookPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.webhook.hint')}</p>
+                    </div>
+                    <button
+                      onClick={() => setChannels(emailActive, !webhookActive)}
+                      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0"
+                      style={{ background: webhookActive ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                    >
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: webhookActive ? 'translateX(20px)' : 'translateX(0)' }} />
+                    </button>
+                  </div>
+                </div>
+
+                {/* In-App Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
+                    <div>
+                      <h2 className="font-semibold text-slate-900">{t('admin.notifications.inappPanel.title')}</h2>
+                      <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.inappPanel.hint')}</p>
+                    </div>
+                    <div className="relative inline-flex h-6 w-11 items-center rounded-full flex-shrink-0"
+                      style={{ background: 'var(--text-primary)', opacity: 0.5, cursor: 'not-allowed' }}>
+                      <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                        style={{ transform: 'translateX(20px)' }} />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Admin Webhook Panel */}
+                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="px-6 py-4 border-b border-slate-100">
+                    <h2 className="font-semibold text-slate-900">{t('admin.notifications.adminWebhookPanel.title')}</h2>
+                    <p className="text-xs text-slate-400 mt-1">{t('admin.notifications.adminWebhookPanel.hint')}</p>
+                  </div>
+                  <div className="p-6 space-y-3">
+                    {smtpLoaded && (
+                      <div>
+                        <label className="block text-xs font-medium text-slate-500 mb-1">{t('admin.notifications.adminWebhookPanel.title')}</label>
+                        <input
+                          type="text"
+                          value={smtpValues.admin_webhook_url === '••••••••' ? '' : smtpValues.admin_webhook_url || ''}
+                          onChange={e => setSmtpValues(prev => ({ ...prev, admin_webhook_url: e.target.value }))}
+                          placeholder={smtpValues.admin_webhook_url === '••••••••' ? '••••••••' : 'https://discord.com/api/webhooks/...'}
+                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <div className="px-6 pb-4 flex items-center gap-2 border-t border-slate-100 pt-4">
+                    <button
+                      onClick={async () => {
+                        try {
+                          await authApi.updateAppSettings({ admin_webhook_url: smtpValues.admin_webhook_url || '' })
+                          toast.success(t('admin.notifications.adminWebhookPanel.saved'))
+                        } catch { toast.error(t('common.error')) }
+                      }}
+                      className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium hover:bg-slate-800 transition-colors">
+                      <Save className="w-4 h-4" />{t('common.save')}
+                    </button>
+                    <button
+                      onClick={async () => {
+                        const url = smtpValues.admin_webhook_url === '••••••••' ? undefined : smtpValues.admin_webhook_url
+                        if (!url && smtpValues.admin_webhook_url !== '••••••••') return
+                        try {
+                          if (url) await authApi.updateAppSettings({ admin_webhook_url: url }).catch(() => {})
+                          const result = await notificationsApi.testWebhook(url)
+                          if (result.success) toast.success(t('admin.notifications.adminWebhookPanel.testSuccess'))
+                          else toast.error(result.error || t('admin.notifications.adminWebhookPanel.testFailed'))
+                        } catch { toast.error(t('admin.notifications.adminWebhookPanel.testFailed')) }
+                      }}
+                      disabled={!smtpValues.admin_webhook_url?.trim()}
+                      className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors disabled:opacity-40"
+                    >
+                      {t('admin.smtp.testButton')}
+                    </button>
+                  </div>
+                </div>
+
+              </div>
+              <div className="mt-6">
+                <AdminNotificationsPanel t={t} toast={toast} />
+              </div>
+            </>)
+          })()}
+
           {activeTab === 'backup' && <BackupPanel />}
 
           {activeTab === 'audit' && <AuditLogPanel serverTimezone={serverTimezone} />}

client/src/pages/AtlasPage.tsx

@@ -154,7 +154,16 @@ export default function AtlasPage(): React.ReactElement {
   const [selectedCountry, setSelectedCountry] = useState<string | null>(null)
   const [countryDetail, setCountryDetail] = useState<CountryDetail | null>(null)
   const [geoData, setGeoData] = useState<GeoJsonFeatureCollection | null>(null)
-  const [confirmAction, setConfirmAction] = useState<{ type: 'mark' | 'unmark' | 'choose' | 'bucket'; code: string; name: string } | null>(null)
+  const [visitedRegions, setVisitedRegions] = useState<Record<string, { code: string; name: string; placeCount: number; manuallyMarked?: boolean }[]>>({})
+  const regionLayerRef = useRef<L.GeoJSON | null>(null)
+  const regionGeoCache = useRef<Record<string, GeoJsonFeatureCollection>>({})
+  const [showRegions, setShowRegions] = useState(false)
+  const [regionGeoLoaded, setRegionGeoLoaded] = useState(0)
+  const regionTooltipRef = useRef<HTMLDivElement>(null)
+  const loadCountryDetailRef = useRef<(code: string) => void>(() => {})
+  const handleMarkCountryRef = useRef<(code: string, name: string) => void>(() => {})
+  const setConfirmActionRef = useRef<typeof setConfirmAction>(() => {})
+  const [confirmAction, setConfirmAction] = useState<{ type: 'mark' | 'unmark' | 'choose' | 'bucket' | 'choose-region' | 'unmark-region'; code: string; name: string; regionCode?: string; countryName?: string } | null>(null)
   const [bucketMonth, setBucketMonth] = useState(0)
   const [bucketYear, setBucketYear] = useState(0)
 
@@ -221,6 +230,41 @@ export default function AtlasPage(): React.ReactElement {
       .catch(() => {})
   }, [])
 
+  // Load visited regions (geocoded from places/trips) — once on mount
+  useEffect(() => {
+    apiClient.get(`/addons/atlas/regions?_t=${Date.now()}`)
+      .then(r => setVisitedRegions(r.data?.regions || {}))
+      .catch(() => {})
+  }, [])
+
+  // Load admin-1 GeoJSON for countries visible in the current viewport
+  const loadRegionsForViewportRef = useRef<() => void>(() => {})
+  const loadRegionsForViewport = (): void => {
+    if (!mapInstance.current) return
+    const bounds = mapInstance.current.getBounds()
+    const toLoad: string[] = []
+    for (const [code, layer] of Object.entries(country_layer_by_a2_ref.current)) {
+      if (regionGeoCache.current[code]) continue
+      try {
+        if (bounds.intersects((layer as any).getBounds())) toLoad.push(code)
+      } catch {}
+    }
+    if (!toLoad.length) return
+    apiClient.get(`/addons/atlas/regions/geo?countries=${toLoad.join(',')}`)
+      .then(geoRes => {
+        const geo = geoRes.data
+        if (!geo?.features) return
+        let added = false
+        for (const c of toLoad) {
+          const features = geo.features.filter((f: any) => f.properties?.iso_a2?.toUpperCase() === c)
+          if (features.length > 0) { regionGeoCache.current[c] = { type: 'FeatureCollection', features }; added = true }
+        }
+        if (added) setRegionGeoLoaded(v => v + 1)
+      })
+      .catch(() => {})
+  }
+  loadRegionsForViewportRef.current = loadRegionsForViewport
+
   // Initialize map — runs after loading is done and mapRef is available
   useEffect(() => {
     if (loading || !mapRef.current) return
@@ -230,7 +274,7 @@ export default function AtlasPage(): React.ReactElement {
       center: [25, 0],
       zoom: 3,
       minZoom: 3,
-      maxZoom: 7,
+      maxZoom: 10,
       zoomControl: false,
       attributionControl: false,
       maxBounds: [[-90, -220], [90, 220]],
@@ -246,7 +290,7 @@ export default function AtlasPage(): React.ReactElement {
       : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png'
 
     L.tileLayer(tileUrl, {
-      maxZoom: 8,
+      maxZoom: 10,
       keepBuffer: 25,
       updateWhenZooming: true,
       updateWhenIdle: false,
@@ -257,14 +301,49 @@ export default function AtlasPage(): React.ReactElement {
 
     // Preload adjacent zoom level tiles
     L.tileLayer(tileUrl, {
-      maxZoom: 8,
+      maxZoom: 10,
       keepBuffer: 10,
       opacity: 0,
       tileSize: 256,
       crossOrigin: true,
     }).addTo(map)
 
+    // Custom pane for region layer — above overlay (z-index 400)
+    map.createPane('regionPane')
+    map.getPane('regionPane')!.style.zIndex = '401'
+
     mapInstance.current = map
+
+    // Zoom-based region switching
+    map.on('zoomend', () => {
+      const z = map.getZoom()
+      const shouldShow = z >= 5
+      setShowRegions(shouldShow)
+      const overlayPane = map.getPane('overlayPane')
+      if (overlayPane) {
+        overlayPane.style.opacity = shouldShow ? '0.35' : '1'
+        overlayPane.style.pointerEvents = shouldShow ? 'none' : 'auto'
+      }
+      if (shouldShow) {
+        // Re-add region layer if it was removed while zoomed out
+        if (regionLayerRef.current && !map.hasLayer(regionLayerRef.current)) {
+          regionLayerRef.current.addTo(map)
+        }
+        loadRegionsForViewportRef.current()
+      } else {
+        // Physically remove region layer so its SVG paths can't intercept events
+        if (regionTooltipRef.current) regionTooltipRef.current.style.display = 'none'
+        if (regionLayerRef.current && map.hasLayer(regionLayerRef.current)) {
+          regionLayerRef.current.resetStyle()
+          regionLayerRef.current.removeFrom(map)
+        }
+      }
+    })
+
+    map.on('moveend', () => {
+      if (map.getZoom() >= 6) loadRegionsForViewportRef.current()
+    })
+
     return () => { map.remove(); mapInstance.current = null }
   }, [dark, loading])
 
@@ -339,10 +418,7 @@ export default function AtlasPage(): React.ReactElement {
           })
           layer.on('click', () => {
             if (c.placeCount === 0 && c.tripCount === 0) {
-              // Manually marked only — show unmark popup
               handleUnmarkCountry(c.code)
-            } else {
-              loadCountryDetail(c.code)
             }
           })
           layer.on('mouseover', (e) => {
@@ -379,9 +455,153 @@ export default function AtlasPage(): React.ReactElement {
     mapInstance.current.setView(currentCenter, currentZoom, { animate: false })
   }, [geoData, data, dark])
 
+  // Render sub-national region layer (zoom >= 5)
+  useEffect(() => {
+    if (!mapInstance.current) return
+
+    // Remove existing region layer
+    if (regionLayerRef.current) {
+      mapInstance.current.removeLayer(regionLayerRef.current)
+      regionLayerRef.current = null
+    }
+
+    if (Object.keys(regionGeoCache.current).length === 0) return
+
+    // Build set of visited region codes first
+    const visitedRegionCodes = new Set<string>()
+    const visitedRegionNames = new Set<string>()
+    const regionPlaceCounts: Record<string, number> = {}
+    for (const [, regions] of Object.entries(visitedRegions)) {
+      for (const r of regions) {
+        visitedRegionCodes.add(r.code)
+        visitedRegionNames.add(r.name.toLowerCase())
+        regionPlaceCounts[r.code] = r.placeCount
+        regionPlaceCounts[r.name.toLowerCase()] = r.placeCount
+      }
+    }
+
+    // Match feature by ISO code OR region name
+    const isVisitedFeature = (f: any) => {
+      if (visitedRegionCodes.has(f.properties?.iso_3166_2)) return true
+      const name = (f.properties?.name || '').toLowerCase()
+      if (visitedRegionNames.has(name)) return true
+      // Fuzzy: check if any visited name is contained in feature name or vice versa
+      for (const vn of visitedRegionNames) {
+        if (name.includes(vn) || vn.includes(name)) return true
+      }
+      return false
+    }
+
+    // Include ALL region features — visited ones get colored fill, unvisited get outline only
+    const allFeatures: any[] = []
+    for (const geo of Object.values(regionGeoCache.current)) {
+      for (const f of geo.features) {
+        allFeatures.push(f)
+      }
+    }
+    if (allFeatures.length === 0) return
+
+    // Use same colors as country layer
+    const VISITED_COLORS = ['#6366f1','#ec4899','#14b8a6','#f97316','#8b5cf6','#ef4444','#3b82f6','#22c55e','#06b6d4','#f43f5e','#a855f7','#10b981','#0ea5e9','#e11d48','#0d9488','#7c3aed','#2563eb','#dc2626','#059669','#d946ef']
+    const countryA3Set = data ? data.countries.map(c => A2_TO_A3[c.code]).filter(Boolean) : []
+    const countryColorMap: Record<string, string> = {}
+    countryA3Set.forEach((a3, i) => { countryColorMap[a3] = VISITED_COLORS[i % VISITED_COLORS.length] })
+    // Map country A2 code to country color
+    const a2ColorMap: Record<string, string> = {}
+    if (data) data.countries.forEach(c => { if (A2_TO_A3[c.code] && countryColorMap[A2_TO_A3[c.code]]) a2ColorMap[c.code] = countryColorMap[A2_TO_A3[c.code]] })
+
+    const mergedGeo = { type: 'FeatureCollection', features: allFeatures }
+
+    const svgRenderer = L.svg({ pane: 'regionPane' })
+
+    regionLayerRef.current = L.geoJSON(mergedGeo as any, {
+      renderer: svgRenderer,
+      interactive: true,
+      pane: 'regionPane',
+      style: (feature) => {
+        const countryA2 = (feature?.properties?.iso_a2 || '').toUpperCase()
+        const visited = isVisitedFeature(feature)
+        return visited ? {
+          fillColor: a2ColorMap[countryA2] || '#6366f1',
+          fillOpacity: 0.85,
+          color: dark ? '#888' : '#64748b',
+          weight: 1.2,
+        } : {
+          fillColor: dark ? '#ffffff' : '#000000',
+          fillOpacity: 0.03,
+          color: dark ? '#555' : '#94a3b8',
+          weight: 1,
+        }
+      },
+      onEachFeature: (feature, layer) => {
+        const regionName = feature?.properties?.name || ''
+        const countryName = feature?.properties?.admin || ''
+        const regionCode = feature?.properties?.iso_3166_2 || ''
+        const countryA2 = (feature?.properties?.iso_a2 || '').toUpperCase()
+        const visited = isVisitedFeature(feature)
+        const count = regionPlaceCounts[regionCode] || regionPlaceCounts[regionName.toLowerCase()] || 0
+        layer.on('click', () => {
+          if (!countryA2) return
+          if (visited) {
+            const regionEntry = visitedRegions[countryA2]?.find(r => r.code === regionCode)
+            if (regionEntry?.manuallyMarked) {
+              setConfirmActionRef.current({
+                type: 'unmark-region',
+                code: countryA2,
+                name: regionName,
+                regionCode,
+                countryName,
+              })
+            } else {
+              loadCountryDetailRef.current(countryA2)
+            }
+          } else {
+            setConfirmActionRef.current({
+              type: 'choose-region',
+              code: countryA2,       // country A2 code — used for flag display
+              name: regionName,      // region name — shown as heading
+              regionCode,
+              countryName,
+            })
+          }
+        })
+        layer.on('mouseover', (e: any) => {
+          e.target.setStyle(visited
+            ? { fillOpacity: 0.95, weight: 2, color: dark ? '#818cf8' : '#4f46e5' }
+            : { fillOpacity: 0.15, fillColor: dark ? '#818cf8' : '#4f46e5', weight: 1.5, color: dark ? '#818cf8' : '#4f46e5' }
+          )
+          const tt = regionTooltipRef.current
+          if (tt) {
+            tt.style.display = 'block'
+            tt.style.left = e.originalEvent.clientX + 12 + 'px'
+            tt.style.top = e.originalEvent.clientY - 10 + 'px'
+            tt.innerHTML = visited
+              ? `<div style="font-weight:600;margin-bottom:3px">${regionName}</div><div style="opacity:0.5;font-size:10px">${countryName}</div><div style="margin-top:5px;font-size:11px"><b>${count}</b> ${count === 1 ? 'place' : 'places'}</div>`
+              : `<div style="font-weight:600;margin-bottom:3px">${regionName}</div><div style="opacity:0.5;font-size:10px">${countryName}</div>`
+          }
+        })
+        layer.on('mousemove', (e: any) => {
+          const tt = regionTooltipRef.current
+          if (tt) { tt.style.left = e.originalEvent.clientX + 12 + 'px'; tt.style.top = e.originalEvent.clientY - 10 + 'px' }
+        })
+        layer.on('mouseout', (e: any) => {
+          regionLayerRef.current?.resetStyle(e.target)
+          const tt = regionTooltipRef.current
+          if (tt) tt.style.display = 'none'
+        })
+      },
+    })
+    // Only add to map if currently in region mode — otherwise hold it ready for when user zooms in
+    if (mapInstance.current.getZoom() >= 6) {
+      regionLayerRef.current.addTo(mapInstance.current)
+    }
+  }, [regionGeoLoaded, visitedRegions, dark, t])
+
   const handleMarkCountry = (code: string, name: string): void => {
     setConfirmAction({ type: 'choose', code, name })
   }
+  handleMarkCountryRef.current = handleMarkCountry
+  setConfirmActionRef.current = setConfirmAction
 
   const handleUnmarkCountry = (code: string): void => {
     const country = data?.countries.find(c => c.code === code)
@@ -435,6 +655,12 @@ export default function AtlasPage(): React.ReactElement {
           stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
         }
       })
+      setVisitedRegions(prev => {
+        if (!prev[code]) return prev
+        const next = { ...prev }
+        delete next[code]
+        return next
+      })
     }
   }
 
@@ -512,6 +738,7 @@ export default function AtlasPage(): React.ReactElement {
       setCountryDetail(r.data)
     } catch { /* */ }
   }
+  loadCountryDetailRef.current = loadCountryDetail
 
   const stats = data?.stats || { totalTrips: 0, totalPlaces: 0, totalCountries: 0, totalDays: 0 }
   const countries = data?.countries || []
@@ -533,6 +760,18 @@ export default function AtlasPage(): React.ReactElement {
       <div style={{ position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, bottom: 0 }}>
         {/* Map */}
         <div ref={mapRef} style={{ position: 'absolute', inset: 0, zIndex: 1, background: dark ? '#1a1a2e' : '#f0f0f0' }} />
+
+        {/* Region tooltip (custom, always on top, ref-controlled to avoid re-renders) */}
+        <div ref={regionTooltipRef} style={{
+          position: 'fixed', display: 'none',
+          zIndex: 9999, pointerEvents: 'none',
+          background: dark ? 'rgba(15,15,20,0.92)' : 'rgba(255,255,255,0.96)',
+          color: dark ? '#fff' : '#111',
+          borderRadius: 10, padding: '10px 14px',
+          boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
+          border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)'}`,
+          fontSize: 12, minWidth: 120,
+        }} />
         <div
           className="absolute z-20 flex justify-center"
           style={{ top: 14, left: 0, right: 0, pointerEvents: 'none' }}
@@ -769,6 +1008,50 @@ export default function AtlasPage(): React.ReactElement {
               </div>
             )}
 
+            {confirmAction.type === 'choose-region' && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {confirmAction.countryName && (
+                  <p style={{ margin: '-8px 0 8px', fontSize: 12, color: 'var(--text-muted)' }}>{confirmAction.countryName}</p>
+                )}
+                <button onClick={async () => {
+                  const { code: countryCode, name: rName, regionCode: rCode } = confirmAction
+                  if (!rCode) return
+                  try {
+                    await apiClient.post(`/addons/atlas/region/${rCode}/mark`, { name: rName, country_code: countryCode })
+                    setVisitedRegions(prev => {
+                      const existing = prev[countryCode] || []
+                      if (existing.find(r => r.code === rCode)) return prev
+                      return { ...prev, [countryCode]: [...existing, { code: rCode, name: rName, placeCount: 0, manuallyMarked: true }] }
+                    })
+                    setData(prev => {
+                      if (!prev || prev.countries.find(c => c.code === countryCode)) return prev
+                      return { ...prev, countries: [...prev.countries, { code: countryCode, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                    })
+                  } catch {}
+                  setConfirmAction(null)
+                }}
+                  style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '12px 16px', borderRadius: 12, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', transition: 'background 0.12s' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                  <MapPin size={18} style={{ color: 'var(--text-primary)', flexShrink: 0 }} />
+                  <div>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('atlas.markVisited')}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>{t('atlas.markRegionVisitedHint')}</div>
+                  </div>
+                </button>
+                <button onClick={() => setConfirmAction({ ...confirmAction, type: 'bucket' })}
+                  style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '12px 16px', borderRadius: 12, border: '1px solid var(--border-primary)', background: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', transition: 'background 0.12s' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'none'}>
+                  <Star size={18} style={{ color: '#fbbf24', flexShrink: 0 }} />
+                  <div>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{t('atlas.addToBucket')}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 1 }}>{t('atlas.addToBucketHint')}</div>
+                  </div>
+                </button>
+              </div>
+            )}
+
             {confirmAction.type === 'unmark' && (
               <>
                 <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.confirmUnmark')}</p>
@@ -785,6 +1068,51 @@ export default function AtlasPage(): React.ReactElement {
               </>
             )}
 
+            {confirmAction.type === 'unmark-region' && (
+              <>
+                {confirmAction.countryName && (
+                  <p style={{ margin: '-8px 0 8px', fontSize: 12, color: 'var(--text-muted)' }}>{confirmAction.countryName}</p>
+                )}
+                <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.confirmUnmarkRegion')}</p>
+                <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
+                  <button onClick={() => setConfirmAction(null)}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+                    {t('common.cancel')}
+                  </button>
+                  <button onClick={async () => {
+                    const { code: countryCode, regionCode: rCode } = confirmAction
+                    if (!rCode) return
+                    try {
+                      await apiClient.delete(`/addons/atlas/region/${rCode}/mark`)
+                      setVisitedRegions(prev => {
+                        const remaining = (prev[countryCode] || []).filter(r => r.code !== rCode)
+                        const next = { ...prev, [countryCode]: remaining }
+                        if (remaining.length === 0) delete next[countryCode]
+                        return next
+                      })
+                      // If no manually-marked regions remain, also remove country if it has no trips/places
+                      setData(prev => {
+                        if (!prev) return prev
+                        const c = prev.countries.find(c => c.code === countryCode)
+                        if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
+                        const remainingRegions = (visitedRegions[countryCode] || []).filter(r => r.code !== rCode && r.manuallyMarked)
+                        if (remainingRegions.length > 0) return prev
+                        return {
+                          ...prev,
+                          countries: prev.countries.filter(c => c.code !== countryCode),
+                          stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+                        }
+                      })
+                    } catch {}
+                    setConfirmAction(null)
+                  }}
+                    style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', background: '#ef4444', color: 'white' }}>
+                    {t('atlas.unmark')}
+                  </button>
+                </div>
+              </>
+            )}
+
             {confirmAction.type === 'bucket' && (
               <>
                 <p style={{ margin: '0 0 14px', fontSize: 13, color: 'var(--text-muted)' }}>{t('atlas.bucketWhen')}</p>
@@ -815,7 +1143,7 @@ export default function AtlasPage(): React.ReactElement {
                   </div>
                 </div>
                 <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
-                  <button onClick={() => setConfirmAction({ ...confirmAction, type: 'choose' })}
+                  <button onClick={() => setConfirmAction({ ...confirmAction, type: confirmAction.regionCode ? 'choose-region' : 'choose' })}
                     style={{ padding: '8px 20px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
                     {t('common.back')}
                   </button>

client/src/pages/InAppNotificationsPage.tsx

@@ -54,8 +54,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
                 {t('notifications.title')}
                 {unreadCount > 0 && (
-                  <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium"
-                    style={{ background: '#6366f1', color: '#fff' }}>
+                  <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium align-middle inline-flex items-center justify-center"
+                    style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
                     {unreadCount}
                   </span>
                 )}
@@ -97,8 +97,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               onClick={() => setUnreadOnly(false)}
               className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
               style={{
-                background: !unreadOnly ? '#6366f1' : 'var(--bg-hover)',
-                color: !unreadOnly ? '#fff' : 'var(--text-secondary)',
+                background: !unreadOnly ? 'var(--text-primary)' : 'var(--bg-hover)',
+                color: !unreadOnly ? 'var(--bg-primary)' : 'var(--text-secondary)',
               }}
             >
               {t('notifications.all')}
@@ -107,8 +107,8 @@ export default function InAppNotificationsPage(): React.ReactElement {
               onClick={() => setUnreadOnly(true)}
               className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
               style={{
-                background: unreadOnly ? '#6366f1' : 'var(--bg-hover)',
-                color: unreadOnly ? '#fff' : 'var(--text-secondary)',
+                background: unreadOnly ? 'var(--text-primary)' : 'var(--bg-hover)',
+                color: unreadOnly ? 'var(--bg-primary)' : 'var(--text-secondary)',
               }}
             >
               {t('notifications.unreadOnly')}
@@ -122,7 +122,7 @@ export default function InAppNotificationsPage(): React.ReactElement {
           >
             {isLoading && displayed.length === 0 ? (
               <div className="flex items-center justify-center py-16">
-                <div className="w-6 h-6 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
+                <div className="w-6 h-6 border-2 border-slate-200 border-t-current rounded-full animate-spin" />
               </div>
             ) : displayed.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-16 px-4 text-center gap-3">
@@ -139,7 +139,7 @@ export default function InAppNotificationsPage(): React.ReactElement {
             {/* Infinite scroll trigger */}
             {hasMore && (
               <div ref={loaderRef} className="flex items-center justify-center py-4">
-                {isLoading && <div className="w-5 h-5 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />}
+                {isLoading && <div className="w-5 h-5 border-2 border-slate-200 border-t-current rounded-full animate-spin" />}
               </div>
             )}
           </div>

client/src/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuthStore } from '../store/authStore'
 import { useSettingsStore } from '../store/settingsStore'
@@ -34,6 +34,16 @@ export default function LoginPage(): React.ReactElement {
   const { setLanguageLocal } = useSettingsStore()
   const navigate = useNavigate()
 
+  const redirectTarget = useMemo(() => {
+    const params = new URLSearchParams(window.location.search)
+    const redirect = params.get('redirect')
+    // Only allow relative paths starting with / to prevent open redirect attacks
+    if (redirect && redirect.startsWith('/') && !redirect.startsWith('//') && !redirect.startsWith('/\\')) {
+      return redirect
+    }
+    return '/dashboard'
+  }, [])
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
 
@@ -99,7 +109,7 @@ export default function LoginPage(): React.ReactElement {
     try {
       await demoLogin()
       setShowTakeoff(true)
-      setTimeout(() => navigate('/dashboard'), 2600)
+      setTimeout(() => navigate(redirectTarget), 2600)
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : t('login.demoFailed'))
     } finally {
@@ -128,7 +138,7 @@ export default function LoginPage(): React.ReactElement {
         await authApi.changePassword({ current_password: savedLoginPassword, new_password: newPassword })
         await loadUser({ silent: true })
         setShowTakeoff(true)
-        setTimeout(() => navigate('/dashboard'), 2600)
+        setTimeout(() => navigate(redirectTarget), 2600)
         return
       }
       if (mode === 'login' && mfaStep) {
@@ -145,7 +155,7 @@ export default function LoginPage(): React.ReactElement {
           return
         }
         setShowTakeoff(true)
-        setTimeout(() => navigate('/dashboard'), 2600)
+        setTimeout(() => navigate(redirectTarget), 2600)
         return
       }
       if (mode === 'register') {
@@ -169,7 +179,7 @@ export default function LoginPage(): React.ReactElement {
         }
       }
       setShowTakeoff(true)
-      setTimeout(() => navigate('/dashboard'), 2600)
+      setTimeout(() => navigate(redirectTarget), 2600)
     } catch (err: unknown) {
       setError(getApiErrorMessage(err, t('login.error')))
       setIsLoading(false)

client/src/pages/TripPlannerPage.tsx

@@ -17,6 +17,7 @@ import { ReservationModal } from '../components/Planner/ReservationModal'
 import MemoriesPanel from '../components/Memories/MemoriesPanel'
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
+import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
 import BudgetPanel from '../components/Budget/BudgetPanel'
 import CollabPanel from '../components/Collab/CollabPanel'
@@ -31,7 +32,40 @@ import { useTripWebSocket } from '../hooks/useTripWebSocket'
 import { useRouteCalculation } from '../hooks/useRouteCalculation'
 import { usePlaceSelection } from '../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../hooks/usePlannerHistory'
-import type { Accommodation, TripMember, Day, Place, Reservation } from '../types'
+import type { Accommodation, TripMember, Day, Place, Reservation, PackingItem, TodoItem } from '../types'
+import { ListTodo } from 'lucide-react'
+
+function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; packingItems: PackingItem[]; todoItems: TodoItem[] }) {
+  const [subTab, setSubTab] = useState<'packing' | 'todo'>(() => {
+    return (sessionStorage.getItem(`trip-lists-subtab-${tripId}`) as 'packing' | 'todo') || 'packing'
+  })
+  const setSubTabPersist = (tab: 'packing' | 'todo') => { setSubTab(tab); sessionStorage.setItem(`trip-lists-subtab-${tripId}`, tab) }
+  const { t } = useTranslation()
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 4, padding: '4px 16px 0', borderBottom: '1px solid var(--border-faint)', marginBottom: 8 }}>
+        {([
+          { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck },
+          { id: 'todo' as const, label: t('todo.subtab.todo'), icon: ListTodo },
+        ]).map(tab => (
+          <button key={tab.id} onClick={() => setSubTabPersist(tab.id)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 500, padding: '8px 14px',
+              border: 'none', cursor: 'pointer', fontFamily: 'inherit', background: 'none',
+              color: subTab === tab.id ? 'var(--text-primary)' : 'var(--text-faint)',
+              borderBottom: subTab === tab.id ? '2px solid var(--text-primary)' : '2px solid transparent',
+              marginBottom: -1, transition: 'color 0.15s',
+            }}>
+            <tab.icon size={14} />
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {subTab === 'packing' && <PackingListPanel tripId={tripId} items={packingItems} />}
+      {subTab === 'todo' && <TodoListPanel tripId={tripId} items={todoItems} />}
+    </div>
+  )
+}
 
 export default function TripPlannerPage(): React.ReactElement | null {
   const { id: tripId } = useParams<{ id: string }>()
@@ -44,6 +78,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const places = useTripStore(s => s.places)
   const assignments = useTripStore(s => s.assignments)
   const packingItems = useTripStore(s => s.packingItems)
+  const todoItems = useTripStore(s => s.todoItems)
   const categories = useTripStore(s => s.categories)
   const reservations = useTripStore(s => s.reservations)
   const budgetItems = useTripStore(s => s.budgetItems)
@@ -78,7 +113,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
     addonsApi.enabled().then(data => {
       const map = {}
       data.addons.forEach(a => { map[a.id] = true })
-      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: !!map.memories })
+      // Check if any photo provider is enabled (for memories tab to show)
+      const hasPhotoProviders = data.addons.some(a => a.type === 'photo_provider')
+      setEnabledAddons({ packing: !!map.packing, budget: !!map.budget, documents: !!map.documents, collab: !!map.collab, memories: hasPhotoProviders })
     }).catch(() => {})
     authApi.getAppConfig().then(config => {
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
@@ -88,7 +125,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan'), icon: Map },
     { id: 'buchungen', label: t('trip.tabs.reservations'), shortLabel: t('trip.tabs.reservationsShort'), icon: Ticket },
-    ...(enabledAddons.packing ? [{ id: 'packliste', label: t('trip.tabs.packing'), shortLabel: t('trip.tabs.packingShort'), icon: PackageCheck }] : []),
+    ...(enabledAddons.packing ? [{ id: 'listen', label: t('trip.tabs.lists'), shortLabel: t('trip.tabs.listsShort'), icon: PackageCheck }] : []),
     ...(enabledAddons.budget ? [{ id: 'finanzplan', label: t('trip.tabs.budget'), icon: Wallet }] : []),
     ...(enabledAddons.documents ? [{ id: 'dateien', label: t('trip.tabs.files'), icon: FolderOpen }] : []),
     ...(enabledAddons.memories ? [{ id: 'memories', label: t('memories.title'), icon: Camera }] : []),
@@ -461,10 +498,6 @@ export default function TripPlannerPage(): React.ReactElement | null {
         background: 'var(--bg-primary)', ...fontStyle,
       }}>
         <style>{`
-          @keyframes planeFloat {
-            0%, 100% { transform: translateY(0px) rotate(-2deg); }
-            50% { transform: translateY(-12px) rotate(2deg); }
-          }
           @keyframes dotPulse {
             0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
             40% { opacity: 1; transform: scale(1); }
@@ -474,10 +507,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
             to { opacity: 1; transform: translateY(0); }
           }
         `}</style>
-        <div style={{ animation: 'planeFloat 2.5s ease-in-out infinite', marginBottom: 28 }}>
-          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--text-primary)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.8 }}>
-            <path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z" />
-          </svg>
+        <div style={{ marginBottom: 28 }}>
+          <img
+            src={document.documentElement.classList.contains('dark') ? '/icons/trek-loading-light.gif' : '/icons/trek-loading-dark.gif'}
+            alt="Loading"
+            width={64}
+            height={64}
+          />
         </div>
         <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: '-0.3px', marginBottom: 6, animation: 'fadeInUp 0.5s ease-out' }}>
           {trip?.title || 'TREK'}
@@ -563,6 +599,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
               leftWidth={leftCollapsed ? 0 : leftWidth}
               rightWidth={rightCollapsed ? 0 : rightWidth}
               hasInspector={!!selectedPlace}
+              hasDayDetail={!!showDayDetail && !selectedPlace}
             />
 
 
@@ -861,9 +898,9 @@ export default function TripPlannerPage(): React.ReactElement | null {
           </div>
         )}
 
-        {activeTab === 'packliste' && (
-          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '8px 0' }}>
-            <PackingListPanel tripId={tripId} items={packingItems} />
+        {activeTab === 'listen' && (
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1800, margin: '0 auto', width: '100%', padding: '8px 0' }}>
+            <ListsContainer tripId={tripId} packingItems={packingItems} todoItems={todoItems} />
           </div>
         )}
 

client/src/store/addonStore.ts

@@ -4,9 +4,22 @@ import { addonsApi } from '../api/client'
 interface Addon {
   id: string
   name: string
+  description?: string
   type: string
   icon: string
   enabled: boolean
+  config?: Record<string, unknown>
+  fields?: Array<{
+    key: string
+    label: string
+    input_type: string
+    placeholder?: string | null
+    required: boolean
+    secret: boolean
+    settings_key?: string | null
+    payload_key?: string | null
+    sort_order: number
+  }>
 }
 
 interface AddonState {
@@ -30,6 +43,9 @@ export const useAddonStore = create<AddonState>((set, get) => ({
   },
 
   isEnabled: (id: string) => {
+    if (id === 'memories') {
+      return get().addons.some(a => a.type === 'photo_provider' && a.enabled)
+    }
     return get().addons.some(a => a.id === id && a.enabled)
   },
 }))

client/src/store/slices/budgetSlice.ts

@@ -42,6 +42,9 @@ export const createBudgetSlice = (set: SetState, get: GetState): BudgetSlice =>
       set(state => ({
         budgetItems: state.budgetItems.map(item => item.id === id ? result.item : item)
       }))
+      if (result.item.reservation_id && data.total_price !== undefined) {
+        get().loadReservations(tripId)
+      }
       return result.item
     } catch (err: unknown) {
       throw new Error(getApiErrorMessage(err, 'Error updating budget item'))

client/src/store/slices/remoteEventHandler.ts

@@ -1,6 +1,6 @@
 import type { StoreApi } from 'zustand'
 import type { TripStoreState } from '../tripStore'
-import type { Assignment, Place, Day, DayNote, PackingItem, BudgetItem, BudgetMember, Reservation, Trip, TripFile, WebSocketEvent } from '../../types'
+import type { Assignment, Place, Day, DayNote, PackingItem, TodoItem, BudgetItem, BudgetMember, Reservation, Trip, TripFile, WebSocketEvent } from '../../types'
 
 type SetState = StoreApi<TripStoreState>['setState']
 
@@ -175,6 +175,19 @@ export function handleRemoteEvent(set: SetState, event: WebSocketEvent): void {
           packingItems: state.packingItems.filter(i => i.id !== payload.itemId),
         }
 
+      // Todo
+      case 'todo:created':
+        if (state.todoItems.some(i => i.id === (payload.item as TodoItem).id)) return {}
+        return { todoItems: [...state.todoItems, payload.item as TodoItem] }
+      case 'todo:updated':
+        return {
+          todoItems: state.todoItems.map(i => i.id === (payload.item as TodoItem).id ? payload.item as TodoItem : i),
+        }
+      case 'todo:deleted':
+        return {
+          todoItems: state.todoItems.filter(i => i.id !== payload.itemId),
+        }
+
       // Budget
       case 'budget:created':
         if (state.budgetItems.some(i => i.id === (payload.item as BudgetItem).id)) return {}

client/src/store/slices/todoSlice.ts

@@ -0,0 +1,67 @@
+import { todoApi } from '../../api/client'
+import type { StoreApi } from 'zustand'
+import type { TripStoreState } from '../tripStore'
+import type { TodoItem } from '../../types'
+import { getApiErrorMessage } from '../../types'
+
+type SetState = StoreApi<TripStoreState>['setState']
+type GetState = StoreApi<TripStoreState>['getState']
+
+export interface TodoSlice {
+  addTodoItem: (tripId: number | string, data: Partial<TodoItem>) => Promise<TodoItem>
+  updateTodoItem: (tripId: number | string, id: number, data: Partial<TodoItem>) => Promise<TodoItem>
+  deleteTodoItem: (tripId: number | string, id: number) => Promise<void>
+  toggleTodoItem: (tripId: number | string, id: number, checked: boolean) => Promise<void>
+}
+
+export const createTodoSlice = (set: SetState, get: GetState): TodoSlice => ({
+  addTodoItem: async (tripId, data) => {
+    try {
+      const result = await todoApi.create(tripId, data)
+      set(state => ({ todoItems: [...state.todoItems, result.item] }))
+      return result.item
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error adding todo'))
+    }
+  },
+
+  updateTodoItem: async (tripId, id, data) => {
+    try {
+      const result = await todoApi.update(tripId, id, data)
+      set(state => ({
+        todoItems: state.todoItems.map(item => item.id === id ? result.item : item)
+      }))
+      return result.item
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error updating todo'))
+    }
+  },
+
+  deleteTodoItem: async (tripId, id) => {
+    const prev = get().todoItems
+    set(state => ({ todoItems: state.todoItems.filter(item => item.id !== id) }))
+    try {
+      await todoApi.delete(tripId, id)
+    } catch (err: unknown) {
+      set({ todoItems: prev })
+      throw new Error(getApiErrorMessage(err, 'Error deleting todo'))
+    }
+  },
+
+  toggleTodoItem: async (tripId, id, checked) => {
+    set(state => ({
+      todoItems: state.todoItems.map(item =>
+        item.id === id ? { ...item, checked: checked ? 1 : 0 } : item
+      )
+    }))
+    try {
+      await todoApi.update(tripId, id, { checked })
+    } catch {
+      set(state => ({
+        todoItems: state.todoItems.map(item =>
+          item.id === id ? { ...item, checked: checked ? 0 : 1 } : item
+        )
+      }))
+    }
+  },
+})

client/src/store/tripStore.ts

@@ -1,16 +1,17 @@
 import { create } from 'zustand'
 import type { StoreApi } from 'zustand'
-import { tripsApi, daysApi, placesApi, packingApi, tagsApi, categoriesApi } from '../api/client'
+import { tripsApi, daysApi, placesApi, packingApi, todoApi, tagsApi, categoriesApi } from '../api/client'
 import { createPlacesSlice } from './slices/placesSlice'
 import { createAssignmentsSlice } from './slices/assignmentsSlice'
 import { createDayNotesSlice } from './slices/dayNotesSlice'
 import { createPackingSlice } from './slices/packingSlice'
+import { createTodoSlice } from './slices/todoSlice'
 import { createBudgetSlice } from './slices/budgetSlice'
 import { createReservationsSlice } from './slices/reservationsSlice'
 import { createFilesSlice } from './slices/filesSlice'
 import { handleRemoteEvent } from './slices/remoteEventHandler'
 import type {
-  Trip, Day, Place, Assignment, DayNote, PackingItem,
+  Trip, Day, Place, Assignment, DayNote, PackingItem, TodoItem,
   Tag, Category, BudgetItem, TripFile, Reservation,
   AssignmentsMap, DayNotesMap, WebSocketEvent,
 } from '../types'
@@ -19,6 +20,7 @@ import type { PlacesSlice } from './slices/placesSlice'
 import type { AssignmentsSlice } from './slices/assignmentsSlice'
 import type { DayNotesSlice } from './slices/dayNotesSlice'
 import type { PackingSlice } from './slices/packingSlice'
+import type { TodoSlice } from './slices/todoSlice'
 import type { BudgetSlice } from './slices/budgetSlice'
 import type { ReservationsSlice } from './slices/reservationsSlice'
 import type { FilesSlice } from './slices/filesSlice'
@@ -28,6 +30,7 @@ export interface TripStoreState
     AssignmentsSlice,
     DayNotesSlice,
     PackingSlice,
+    TodoSlice,
     BudgetSlice,
     ReservationsSlice,
     FilesSlice {
@@ -37,6 +40,7 @@ export interface TripStoreState
   assignments: AssignmentsMap
   dayNotes: DayNotesMap
   packingItems: PackingItem[]
+  todoItems: TodoItem[]
   tags: Tag[]
   categories: Category[]
   budgetItems: BudgetItem[]
@@ -62,6 +66,7 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
   assignments: {},
   dayNotes: {},
   packingItems: [],
+  todoItems: [],
   tags: [],
   categories: [],
   budgetItems: [],
@@ -78,11 +83,12 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
   loadTrip: async (tripId: number | string) => {
     set({ isLoading: true, error: null })
     try {
-      const [tripData, daysData, placesData, packingData, tagsData, categoriesData] = await Promise.all([
+      const [tripData, daysData, placesData, packingData, todoData, tagsData, categoriesData] = await Promise.all([
         tripsApi.get(tripId),
         daysApi.list(tripId),
         placesApi.list(tripId),
         packingApi.list(tripId),
+        todoApi.list(tripId),
         tagsApi.list(),
         categoriesApi.list(),
       ])
@@ -101,6 +107,7 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
         assignments: assignmentsMap,
         dayNotes: dayNotesMap,
         packingItems: packingData.items,
+        todoItems: todoData.items,
         tags: tagsData.tags,
         categories: categoriesData.categories,
         isLoading: false,
@@ -169,6 +176,7 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
   ...createAssignmentsSlice(set, get),
   ...createDayNotesSlice(set, get),
   ...createPackingSlice(set, get),
+  ...createTodoSlice(set, get),
   ...createBudgetSlice(set, get),
   ...createReservationsSlice(set, get),
   ...createFilesSlice(set, get),

client/src/types.ts

@@ -86,6 +86,19 @@ export interface PackingItem {
   quantity: number
 }
 
+export interface TodoItem {
+  id: number
+  trip_id: number
+  name: string
+  category: string | null
+  checked: number
+  sort_order: number
+  due_date: string | null
+  description: string | null
+  assigned_user_id: number | null
+  priority: number
+}
+
 export interface Tag {
   id: number
   name: string

server/package-lock.json

@@ -16,16 +16,17 @@
         "cors": "^2.8.5",
         "dotenv": "^16.4.1",
         "express": "^4.18.3",
+        "fast-xml-parser": "^5.5.10",
         "helmet": "^8.1.0",
         "jsonwebtoken": "^9.0.2",
         "multer": "^2.1.1",
         "node-cron": "^4.2.1",
-        "node-fetch": "^2.7.0",
         "nodemailer": "^8.0.4",
         "otplib": "^12.0.1",
         "qrcode": "^1.5.4",
         "tsx": "^4.21.0",
         "typescript": "^6.0.2",
+        "undici": "^7.0.0",
         "unzipper": "^0.12.3",
         "uuid": "^9.0.0",
         "ws": "^8.19.0",
@@ -1224,9 +1225,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1241,9 +1239,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1258,9 +1253,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1275,9 +1267,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1292,9 +1281,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1309,9 +1295,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1326,9 +1309,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1343,9 +1323,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1360,9 +1337,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1377,9 +1351,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1394,9 +1365,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1411,9 +1379,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1428,9 +1393,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3290,6 +3252,41 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fast-xml-builder": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.4.tgz",
+      "integrity": "sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "path-expression-matcher": "^1.1.3"
+      }
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.5.10",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.10.tgz",
+      "integrity": "sha512-go2J2xODMc32hT+4Xr/bBGXMaIoiCwrwp2mMtAvKyvEFW6S/v5Gn2pBmE4nvbwNjGhpcAiOwEv7R6/GZ6XRa9w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "fast-xml-builder": "^1.1.4",
+        "path-expression-matcher": "^1.2.1",
+        "strnum": "^2.2.2"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -4412,26 +4409,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -4624,6 +4601,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.2.1.tgz",
+      "integrity": "sha512-d7gQQmLvAKXKXE2GeP9apIGbMYKz88zWdsn/BN2HRWVQsDFdUY36WSLTY0Jvd4HWi7Fb30gQ62oAOzdgJA6fZw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -5476,6 +5468,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/strnum": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.2.tgz",
+      "integrity": "sha512-DnR90I+jtXNSTXWdwrEy9FakW7UX+qUZg28gj5fk2vxxl7uS/3bpI4fjFYVmdK9etptYBPNkpahuQnEwhwECqA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/superagent": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/superagent/-/superagent-10.3.0.tgz",
@@ -5833,12 +5837,6 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "license": "MIT"
-    },
     "node_modules/tsx": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
@@ -5909,6 +5907,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.7.tgz",
+      "integrity": "sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.18.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
@@ -6249,22 +6256,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

server/package.json

@@ -21,11 +21,12 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.1",
     "express": "^4.18.3",
+    "fast-xml-parser": "^5.5.10",
     "helmet": "^8.1.0",
     "jsonwebtoken": "^9.0.2",
     "multer": "^2.1.1",
     "node-cron": "^4.2.1",
-    "node-fetch": "^2.7.0",
+    "undici": "^7.0.0",
     "nodemailer": "^8.0.4",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.4",

server/public/index.html

@@ -1,33 +1,33 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>TREK</title>
-
-    <!-- PWA / iOS -->
-    <meta name="theme-color" content="#09090b" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="TREK" />
-    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
-
-    <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
-
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-
-    <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin="" />
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>TREK</title>
+
+    <!-- PWA / iOS -->
+    <meta name="theme-color" content="#09090b" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="TREK" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
+
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin="" />
     <script type="module" crossorigin src="/assets/index-BBkAKwut.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CR224PtB.css">
-  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
-  <body>
-    <div id="root"></div>
-
-  </body>
+  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

server/src/app.ts

@@ -18,6 +18,7 @@ import daysRoutes, { accommodationsRouter as accommodationsRoutes } from './rout
 import placesRoutes from './routes/places';
 import assignmentsRoutes from './routes/assignments';
 import packingRoutes from './routes/packing';
+import todoRoutes from './routes/todo';
 import tagsRoutes from './routes/tags';
 import categoriesRoutes from './routes/categories';
 import adminRoutes from './routes/admin';
@@ -33,11 +34,12 @@ import backupRoutes from './routes/backup';
 import oidcRoutes from './routes/oidc';
 import vacayRoutes from './routes/vacay';
 import atlasRoutes from './routes/atlas';
-import immichRoutes from './routes/immich';
+import memoriesRoutes from './routes/memories/unified';
 import notificationRoutes from './routes/notifications';
 import shareRoutes from './routes/share';
 import { mcpHandler } from './mcp';
 import { Addon } from './types';
+import { getPhotoProviderConfig } from './services/memories/helpersService';
 
 export function createApp(): express.Application {
   const app = express();
@@ -81,7 +83,8 @@ export function createApp(): express.Application {
           "https://*.basemaps.cartocdn.com", "https://*.tile.openstreetmap.org",
           "https://unpkg.com", "https://open-meteo.com", "https://api.open-meteo.com",
           "https://geocoding-api.open-meteo.com", "https://api.exchangerate-api.com",
-          "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson"
+          "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson",
+          "https://router.project-osrm.org/route/v1"
         ],
         fontSrc: ["'self'", "https://fonts.gstatic.com", "data:"],
         objectSrc: ["'none'"],
@@ -179,6 +182,7 @@ export function createApp(): express.Application {
   app.use('/api/trips/:tripId/accommodations', accommodationsRoutes);
   app.use('/api/trips/:tripId/places', placesRoutes);
   app.use('/api/trips/:tripId/packing', packingRoutes);
+  app.use('/api/trips/:tripId/todo', todoRoutes);
   app.use('/api/trips/:tripId/files', filesRoutes);
   app.use('/api/trips/:tripId/budget', budgetRoutes);
   app.use('/api/trips/:tripId/collab', collabRoutes);
@@ -193,13 +197,66 @@ export function createApp(): express.Application {
   // Addons list endpoint
   app.get('/api/addons', authenticate, (_req: Request, res: Response) => {
     const addons = db.prepare('SELECT id, name, type, icon, enabled FROM addons WHERE enabled = 1 ORDER BY sort_order').all() as Pick<Addon, 'id' | 'name' | 'type' | 'icon' | 'enabled'>[];
-    res.json({ addons: addons.map(a => ({ ...a, enabled: !!a.enabled })) });
+    const providers = db.prepare(`
+      SELECT id, name, icon, enabled, sort_order
+      FROM photo_providers
+      WHERE enabled = 1
+      ORDER BY sort_order, id
+    `).all() as Array<{ id: string; name: string; icon: string; enabled: number; sort_order: number }>;
+    const fields = db.prepare(`
+      SELECT provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order
+      FROM photo_provider_fields
+      ORDER BY sort_order, id
+    `).all() as Array<{
+      provider_id: string;
+      field_key: string;
+      label: string;
+      input_type: string;
+      placeholder?: string | null;
+      required: number;
+      secret: number;
+      settings_key?: string | null;
+      payload_key?: string | null;
+      sort_order: number;
+    }>;
+
+    const fieldsByProvider = new Map<string, typeof fields>();
+    for (const field of fields) {
+      const arr = fieldsByProvider.get(field.provider_id) || [];
+      arr.push(field);
+      fieldsByProvider.set(field.provider_id, arr);
+    }
+
+    res.json({
+      addons: [
+        ...addons.map(a => ({ ...a, enabled: !!a.enabled })),
+        ...providers.map(p => ({
+          id: p.id,
+          name: p.name,
+          type: 'photo_provider',
+          icon: p.icon,
+          enabled: !!p.enabled,
+          config: getPhotoProviderConfig(p.id),
+          fields: (fieldsByProvider.get(p.id) || []).map(f => ({
+            key: f.field_key,
+            label: f.label,
+            input_type: f.input_type,
+            placeholder: f.placeholder || '',
+            required: !!f.required,
+            secret: !!f.secret,
+            settings_key: f.settings_key || null,
+            payload_key: f.payload_key || null,
+            sort_order: f.sort_order,
+          })),
+        })),
+      ],
+    });
   });
 
   // Addon routes
   app.use('/api/addons/vacay', vacayRoutes);
   app.use('/api/addons/atlas', atlasRoutes);
-  app.use('/api/integrations/immich', immichRoutes);
+  app.use('/api/integrations/memories', memoriesRoutes);
   app.use('/api/maps', mapsRoutes);
   app.use('/api/weather', weatherRoutes);
   app.use('/api/settings', settingsRoutes);

server/src/db/migrations.ts

@@ -518,6 +518,331 @@ function runMigrations(db: Database.Database): void {
         CREATE INDEX IF NOT EXISTS idx_notifications_recipient_created ON notifications(recipient_id, created_at DESC);
       `);
     },
+    () => {
+      // Normalize trip_photos to provider-based schema used by current routes
+      const tripPhotosExists = db.prepare("SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'trip_photos'").get();
+      if (!tripPhotosExists) {
+        db.exec(`
+          CREATE TABLE trip_photos (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            asset_id TEXT NOT NULL,
+            provider TEXT NOT NULL DEFAULT 'immich',
+            shared INTEGER NOT NULL DEFAULT 1,
+            added_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            UNIQUE(trip_id, user_id, asset_id, provider)
+          );
+          CREATE INDEX IF NOT EXISTS idx_trip_photos_trip ON trip_photos(trip_id);
+        `);
+      } else {
+        const columns = db.prepare("PRAGMA table_info('trip_photos')").all() as Array<{ name: string }>;
+        const names = new Set(columns.map(c => c.name));
+        const assetSource = names.has('asset_id') ? 'asset_id' : (names.has('immich_asset_id') ? 'immich_asset_id' : null);
+        if (assetSource) {
+          const providerExpr = names.has('provider')
+            ? "CASE WHEN provider IS NULL OR provider = '' THEN 'immich' ELSE provider END"
+            : "'immich'";
+          const sharedExpr = names.has('shared') ? 'COALESCE(shared, 1)' : '1';
+          const addedAtExpr = names.has('added_at') ? 'COALESCE(added_at, CURRENT_TIMESTAMP)' : 'CURRENT_TIMESTAMP';
+
+          db.exec(`
+            CREATE TABLE trip_photos_new (
+              id INTEGER PRIMARY KEY AUTOINCREMENT,
+              trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+              user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+              asset_id TEXT NOT NULL,
+              provider TEXT NOT NULL DEFAULT 'immich',
+              shared INTEGER NOT NULL DEFAULT 1,
+              added_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+              UNIQUE(trip_id, user_id, asset_id, provider)
+            );
+          `);
+
+          db.exec(`
+            INSERT OR IGNORE INTO trip_photos_new (trip_id, user_id, asset_id, provider, shared, added_at)
+            SELECT trip_id, user_id, ${assetSource}, ${providerExpr}, ${sharedExpr}, ${addedAtExpr}
+            FROM trip_photos
+            WHERE ${assetSource} IS NOT NULL AND TRIM(${assetSource}) != ''
+          `);
+
+          db.exec('DROP TABLE trip_photos');
+          db.exec('ALTER TABLE trip_photos_new RENAME TO trip_photos');
+          db.exec('CREATE INDEX IF NOT EXISTS idx_trip_photos_trip ON trip_photos(trip_id)');
+        }
+      }
+    },
+    () => {
+      // Normalize trip_album_links to provider + album_id schema used by current routes
+      const linksExists = db.prepare("SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = 'trip_album_links'").get();
+      if (!linksExists) {
+        db.exec(`
+          CREATE TABLE trip_album_links (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            provider TEXT NOT NULL,
+            album_id TEXT NOT NULL,
+            album_name TEXT NOT NULL DEFAULT '',
+            sync_enabled INTEGER NOT NULL DEFAULT 1,
+            last_synced_at DATETIME,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+            UNIQUE(trip_id, user_id, provider, album_id)
+          );
+          CREATE INDEX IF NOT EXISTS idx_trip_album_links_trip ON trip_album_links(trip_id);
+        `);
+      } else {
+        const columns = db.prepare("PRAGMA table_info('trip_album_links')").all() as Array<{ name: string }>;
+        const names = new Set(columns.map(c => c.name));
+        const albumIdSource = names.has('album_id') ? 'album_id' : (names.has('immich_album_id') ? 'immich_album_id' : null);
+        if (albumIdSource) {
+          const providerExpr = names.has('provider')
+            ? "CASE WHEN provider IS NULL OR provider = '' THEN 'immich' ELSE provider END"
+            : "'immich'";
+          const albumNameExpr = names.has('album_name') ? "COALESCE(album_name, '')" : "''";
+          const syncEnabledExpr = names.has('sync_enabled') ? 'COALESCE(sync_enabled, 1)' : '1';
+          const lastSyncedExpr = names.has('last_synced_at') ? 'last_synced_at' : 'NULL';
+          const createdAtExpr = names.has('created_at') ? 'COALESCE(created_at, CURRENT_TIMESTAMP)' : 'CURRENT_TIMESTAMP';
+
+          db.exec(`
+            CREATE TABLE trip_album_links_new (
+              id INTEGER PRIMARY KEY AUTOINCREMENT,
+              trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+              user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+              provider TEXT NOT NULL,
+              album_id TEXT NOT NULL,
+              album_name TEXT NOT NULL DEFAULT '',
+              sync_enabled INTEGER NOT NULL DEFAULT 1,
+              last_synced_at DATETIME,
+              created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+              UNIQUE(trip_id, user_id, provider, album_id)
+            );
+          `);
+
+          db.exec(`
+            INSERT OR IGNORE INTO trip_album_links_new (trip_id, user_id, provider, album_id, album_name, sync_enabled, last_synced_at, created_at)
+            SELECT trip_id, user_id, ${providerExpr}, ${albumIdSource}, ${albumNameExpr}, ${syncEnabledExpr}, ${lastSyncedExpr}, ${createdAtExpr}
+            FROM trip_album_links
+            WHERE ${albumIdSource} IS NOT NULL AND TRIM(${albumIdSource}) != ''
+          `);
+
+          db.exec('DROP TABLE trip_album_links');
+          db.exec('ALTER TABLE trip_album_links_new RENAME TO trip_album_links');
+          db.exec('CREATE INDEX IF NOT EXISTS idx_trip_album_links_trip ON trip_album_links(trip_id)');
+        }
+      }
+    },
+    () => {
+      // Add Synology credential columns for existing databases
+      try { db.exec('ALTER TABLE users ADD COLUMN synology_url TEXT'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec('ALTER TABLE users ADD COLUMN synology_username TEXT'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec('ALTER TABLE users ADD COLUMN synology_password TEXT'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec('ALTER TABLE users ADD COLUMN synology_sid TEXT'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+    },
+    () => {
+      // Seed Synology Photos provider and fields in existing databases
+      try {
+        db.prepare(`
+          INSERT INTO photo_providers (id, name, description, icon, enabled, sort_order)
+          VALUES (?, ?, ?, ?, ?, ?)
+          ON CONFLICT(id) DO UPDATE SET
+            name = excluded.name,
+            description = excluded.description,
+            icon = excluded.icon,
+            enabled = excluded.enabled,
+            sort_order = excluded.sort_order
+        `).run(
+          'synologyphotos',
+          'Synology Photos',
+          'Synology Photos integration with separate account settings',
+          'Image',
+          0,
+          1,
+        );
+      } catch (err: any) {
+        if (!err.message?.includes('no such table')) throw err;
+      }
+      try {
+        const insertField = db.prepare(`
+          INSERT INTO photo_provider_fields
+          (provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          ON CONFLICT(provider_id, field_key) DO UPDATE SET
+            label = excluded.label,
+            input_type = excluded.input_type,
+            placeholder = excluded.placeholder,
+            required = excluded.required,
+            secret = excluded.secret,
+            settings_key = excluded.settings_key,
+            payload_key = excluded.payload_key,
+            sort_order = excluded.sort_order
+        `);
+        insertField.run('synologyphotos', 'synology_url', 'providerUrl', 'url', 'https://synology.example.com', 1, 0, 'synology_url', 'synology_url', 0);
+        insertField.run('synologyphotos', 'synology_username', 'providerUsername', 'text', 'Username', 1, 0, 'synology_username', 'synology_username', 1);
+        insertField.run('synologyphotos', 'synology_password', 'providerPassword', 'password', 'Password', 1, 1, null, 'synology_password', 2);
+      } catch (err: any) {
+        if (!err.message?.includes('no such table')) throw err;
+      }
+    },
+    () => {
+      // Remove the stored config column from photo_providers now that it is generated from provider id.
+      const columns = db.prepare("PRAGMA table_info('photo_providers')").all() as Array<{ name: string }>;
+      const names = new Set(columns.map(c => c.name));
+      if (!names.has('config')) return;
+
+      db.exec('ALTER TABLE photo_providers DROP COLUMN config');
+    },
+    () => {
+      const columns = db.prepare("PRAGMA table_info('trip_photos')").all() as Array<{ name: string }>;
+      const names = new Set(columns.map(c => c.name));
+      if (names.has('asset_id') && !names.has('immich_asset_id')) return;
+      db.exec('ALTER TABLE `trip_photos` RENAME COLUMN immich_asset_id TO asset_id');
+      db.exec('ALTER TABLE `trip_photos` ADD COLUMN provider TEXT NOT NULL DEFAULT "immich"');
+      db.exec('ALTER TABLE `trip_album_links` ADD COLUMN provider TEXT NOT NULL DEFAULT "immich"');
+      db.exec('ALTER TABLE `trip_album_links` RENAME COLUMN immich_album_id TO album_id');
+    },
+    () => {
+      // Track which album link each photo was synced from
+      try { db.exec("ALTER TABLE trip_photos ADD COLUMN album_link_id INTEGER REFERENCES trip_album_links(id) ON DELETE SET NULL DEFAULT NULL"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      db.exec('CREATE INDEX IF NOT EXISTS idx_trip_photos_album_link ON trip_photos(album_link_id)');
+    },
+    // Migration 68: Todo items
+    () => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS todo_items (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+          name TEXT NOT NULL,
+          checked INTEGER DEFAULT 0,
+          category TEXT,
+          sort_order INTEGER DEFAULT 0,
+          due_date TEXT,
+          description TEXT,
+          assigned_user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
+          priority INTEGER DEFAULT 0,
+          created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+        );
+        CREATE INDEX IF NOT EXISTS idx_todo_items_trip_id ON todo_items(trip_id);
+
+        CREATE TABLE IF NOT EXISTS todo_category_assignees (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
+          category_name TEXT NOT NULL,
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          UNIQUE(trip_id, category_name, user_id)
+        );
+      `);
+    },
+    () => {
+      try {db.exec("UPDATE addons SET enabled = 0 WHERE id = 'memories'");} catch (err) {}
+    },
+    // Migration 69: Place region cache for sub-national Atlas regions
+    () => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS place_regions (
+          place_id INTEGER PRIMARY KEY REFERENCES places(id) ON DELETE CASCADE,
+          country_code TEXT NOT NULL,
+          region_code TEXT NOT NULL,
+          region_name TEXT NOT NULL
+        );
+        CREATE INDEX IF NOT EXISTS idx_place_regions_country ON place_regions(country_code);
+        CREATE INDEX IF NOT EXISTS idx_place_regions_region ON place_regions(region_code);
+      `);
+    },
+    () => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS visited_regions (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          region_code TEXT NOT NULL,
+          region_name TEXT NOT NULL,
+          country_code TEXT NOT NULL,
+          created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+          UNIQUE(user_id, region_code)
+        );
+        CREATE INDEX IF NOT EXISTS idx_visited_regions_country ON visited_regions(country_code);
+      `);
+    },
+    // Migration 71: Normalized per-user per-channel notification preferences
+    () => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS notification_channel_preferences (
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          event_type TEXT NOT NULL,
+          channel TEXT NOT NULL,
+          enabled INTEGER NOT NULL DEFAULT 1,
+          PRIMARY KEY (user_id, event_type, channel)
+        );
+        CREATE INDEX IF NOT EXISTS idx_ncp_user ON notification_channel_preferences(user_id);
+      `);
+
+      // Migrate data from old notification_preferences table (may not exist on fresh installs)
+      const tableExists = (db.prepare("SELECT name FROM sqlite_master WHERE type='table' AND name='notification_preferences'").get() as { name: string } | undefined) != null;
+      const oldPrefs: Array<Record<string, number>> = tableExists
+        ? db.prepare('SELECT * FROM notification_preferences').all() as Array<Record<string, number>>
+        : [];
+      const eventCols: Record<string, string> = {
+        trip_invite: 'notify_trip_invite',
+        booking_change: 'notify_booking_change',
+        trip_reminder: 'notify_trip_reminder',
+        vacay_invite: 'notify_vacay_invite',
+        photos_shared: 'notify_photos_shared',
+        collab_message: 'notify_collab_message',
+        packing_tagged: 'notify_packing_tagged',
+      };
+      const insert = db.prepare(
+        'INSERT OR IGNORE INTO notification_channel_preferences (user_id, event_type, channel, enabled) VALUES (?, ?, ?, ?)'
+      );
+      const insertMany = db.transaction((rows: Array<[number, string, string, number]>) => {
+        for (const [userId, eventType, channel, enabled] of rows) {
+          insert.run(userId, eventType, channel, enabled);
+        }
+      });
+
+      for (const row of oldPrefs) {
+        const userId = row.user_id as number;
+        const webhookEnabled = (row.notify_webhook as number) ?? 0;
+        const rows: Array<[number, string, string, number]> = [];
+        for (const [eventType, col] of Object.entries(eventCols)) {
+          const emailEnabled = (row[col] as number) ?? 1;
+          // Only insert if disabled (no row = enabled is our default)
+          if (!emailEnabled) rows.push([userId, eventType, 'email', 0]);
+          if (!webhookEnabled) rows.push([userId, eventType, 'webhook', 0]);
+        }
+        if (rows.length > 0) insertMany(rows);
+      }
+
+      // Copy existing single-channel setting to new plural key
+      db.exec(`
+        INSERT OR IGNORE INTO app_settings (key, value)
+          SELECT 'notification_channels', value FROM app_settings WHERE key = 'notification_channel';
+      `);
+    },
+    // Migration 72: Drop the old notification_preferences table (data migrated to notification_channel_preferences in migration 71)
+    () => {
+      db.exec('DROP TABLE IF EXISTS notification_preferences;');
+    },
+    // Migration 73: Add reservation_id to budget_items for linking budget entries to reservations
+    () => {
+      try { db.exec('ALTER TABLE budget_items ADD COLUMN reservation_id INTEGER REFERENCES reservations(id) ON DELETE SET NULL DEFAULT NULL'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+    },
+    // Migration 74: Add quantity to packing_items + user_id to packing_bags + bag_members table
+    () => {
+      try { db.exec('ALTER TABLE packing_items ADD COLUMN quantity INTEGER NOT NULL DEFAULT 1'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec('ALTER TABLE packing_bags ADD COLUMN user_id INTEGER REFERENCES users(id) ON DELETE SET NULL DEFAULT NULL'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS packing_bag_members (
+          bag_id INTEGER NOT NULL REFERENCES packing_bags(id) ON DELETE CASCADE,
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          PRIMARY KEY (bag_id, user_id)
+        );
+        CREATE INDEX IF NOT EXISTS idx_packing_bag_members_bag ON packing_bag_members(bag_id);
+      `);
+      // Migrate existing single user_id to bag_members
+      const bagsWithUser = db.prepare('SELECT id, user_id FROM packing_bags WHERE user_id IS NOT NULL').all() as { id: number; user_id: number }[];
+      const ins = db.prepare('INSERT OR IGNORE INTO packing_bag_members (bag_id, user_id) VALUES (?, ?)');
+      for (const b of bagsWithUser) ins.run(b.id, b.user_id);
+    },
   ];
 
   if (currentVersion < migrations.length) {

server/src/db/schema.ts

@@ -18,6 +18,12 @@ function createTables(db: Database.Database): void {
       mfa_enabled INTEGER DEFAULT 0,
       mfa_secret TEXT,
       mfa_backup_codes TEXT,
+      immich_url TEXT,
+      immich_access_token TEXT,
+      synology_url TEXT,
+      synology_username TEXT,
+      synology_password TEXT,
+      synology_sid TEXT,
       must_change_password INTEGER DEFAULT 0,
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
       updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
@@ -162,6 +168,7 @@ function createTables(db: Database.Database): void {
       place_id INTEGER REFERENCES places(id) ON DELETE SET NULL,
       assignment_id INTEGER REFERENCES day_assignments(id) ON DELETE SET NULL,
       title TEXT NOT NULL,
+      accommodation_id TEXT,
       reservation_time TEXT,
       reservation_end_time TEXT,
       location TEXT,
@@ -222,6 +229,30 @@ function createTables(db: Database.Database): void {
       sort_order INTEGER DEFAULT 0
     );
 
+    CREATE TABLE IF NOT EXISTS photo_providers (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      description TEXT,
+      icon TEXT DEFAULT 'Image',
+      enabled INTEGER DEFAULT 0,
+      sort_order INTEGER DEFAULT 0
+    );
+
+    CREATE TABLE IF NOT EXISTS photo_provider_fields (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      provider_id TEXT NOT NULL REFERENCES photo_providers(id) ON DELETE CASCADE,
+      field_key TEXT NOT NULL,
+      label TEXT NOT NULL,
+      input_type TEXT NOT NULL DEFAULT 'text',
+      placeholder TEXT,
+      required INTEGER DEFAULT 0,
+      secret INTEGER DEFAULT 0,
+      settings_key TEXT,
+      payload_key TEXT,
+      sort_order INTEGER DEFAULT 0,
+      UNIQUE(provider_id, field_key)
+    );
+
     -- Vacay addon tables
     CREATE TABLE IF NOT EXISTS vacay_plans (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -418,6 +449,15 @@ function createTables(db: Database.Database): void {
     );
     CREATE INDEX IF NOT EXISTS idx_notifications_recipient ON notifications(recipient_id, is_read, created_at DESC);
     CREATE INDEX IF NOT EXISTS idx_notifications_recipient_created ON notifications(recipient_id, created_at DESC);
+
+    CREATE TABLE IF NOT EXISTS notification_channel_preferences (
+      user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      event_type TEXT NOT NULL,
+      channel TEXT NOT NULL,
+      enabled INTEGER NOT NULL DEFAULT 1,
+      PRIMARY KEY (user_id, event_type, channel)
+    );
+    CREATE INDEX IF NOT EXISTS idx_ncp_user ON notification_channel_preferences(user_id);
   `);
 }
 

server/src/db/seeds.ts

@@ -82,7 +82,7 @@ function seedCategories(db: Database.Database): void {
 function seedAddons(db: Database.Database): void {
   try {
     const defaultAddons = [
-      { id: 'packing', name: 'Packing List', description: 'Pack your bags with checklists per trip', type: 'trip', icon: 'ListChecks', enabled: 1, sort_order: 0 },
+      { id: 'packing', name: 'Lists', description: 'Packing lists and to-do tasks for your trips', type: 'trip', icon: 'ListChecks', enabled: 1, sort_order: 0 },
       { id: 'budget', name: 'Budget Planner', description: 'Track expenses and plan your travel budget', type: 'trip', icon: 'Wallet', enabled: 1, sort_order: 1 },
       { id: 'documents', name: 'Documents', description: 'Store and manage travel documents', type: 'trip', icon: 'FileText', enabled: 1, sort_order: 2 },
       { id: 'vacay', name: 'Vacay', description: 'Personal vacation day planner with calendar view', type: 'global', icon: 'CalendarDays', enabled: 1, sort_order: 10 },
@@ -92,6 +92,39 @@ function seedAddons(db: Database.Database): void {
     ];
     const insertAddon = db.prepare('INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)');
     for (const a of defaultAddons) insertAddon.run(a.id, a.name, a.description, a.type, a.icon, a.enabled, a.sort_order);
+
+    const providerRows = [
+      {
+        id: 'immich',
+        name: 'Immich',
+        description: 'Immich photo provider',
+        icon: 'Image',
+        enabled: 0,
+        sort_order: 0,
+      },
+      {
+        id: 'synologyphotos',
+        name: 'Synology Photos',
+        description: 'Synology Photos integration with separate account settings',
+        icon: 'Image',
+        enabled: 0,
+        sort_order: 1,
+      },
+    ];
+    const insertProvider = db.prepare('INSERT OR IGNORE INTO photo_providers (id, name, description, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?)');
+    for (const p of providerRows) insertProvider.run(p.id, p.name, p.description, p.icon, p.enabled, p.sort_order);
+
+    const providerFields = [
+      { provider_id: 'immich', field_key: 'immich_url', label: 'providerUrl', input_type: 'url', placeholder: 'https://immich.example.com', required: 1, secret: 0, settings_key: 'immich_url', payload_key: 'immich_url', sort_order: 0 },
+      { provider_id: 'immich', field_key: 'immich_api_key', label: 'providerApiKey', input_type: 'password', placeholder: 'API Key', required: 1, secret: 1, settings_key: null, payload_key: 'immich_api_key', sort_order: 1 },
+      { provider_id: 'synologyphotos', field_key: 'synology_url', label: 'providerUrl', input_type: 'url', placeholder: 'https://synology.example.com', required: 1, secret: 0, settings_key: 'synology_url', payload_key: 'synology_url', sort_order: 0 },
+      { provider_id: 'synologyphotos', field_key: 'synology_username', label: 'providerUsername', input_type: 'text', placeholder: 'Username', required: 1, secret: 0, settings_key: 'synology_username', payload_key: 'synology_username', sort_order: 1 },
+      { provider_id: 'synologyphotos', field_key: 'synology_password', label: 'providerPassword', input_type: 'password', placeholder: 'Password', required: 1, secret: 1, settings_key: null, payload_key: 'synology_password', sort_order: 2 },
+    ];
+    const insertProviderField = db.prepare('INSERT OR IGNORE INTO photo_provider_fields (provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)');
+    for (const f of providerFields) {
+      insertProviderField.run(f.provider_id, f.field_key, f.label, f.input_type, f.placeholder, f.required, f.secret, f.settings_key, f.payload_key, f.sort_order);
+    }
     console.log('Default addons seeded');
   } catch (err: unknown) {
     console.error('Error seeding addons:', err instanceof Error ? err.message : err);

server/src/index.ts

@@ -46,6 +46,7 @@ const server = app.listen(PORT, () => {
   }
   scheduler.start();
   scheduler.startTripReminders();
+  scheduler.startVersionCheck();
   scheduler.startDemoReset();
   const { startTokenCleanup } = require('./services/ephemeralTokens');
   startTokenCleanup();

server/src/mcp/index.ts

@@ -1,11 +1,10 @@
 import { Request, Response } from 'express';
-import { randomUUID, createHash } from 'crypto';
-import jwt from 'jsonwebtoken';
+import { randomUUID } from 'crypto';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp';
 import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp';
-import { JWT_SECRET } from '../config';
-import { db } from '../db/database';
 import { User } from '../types';
+import { verifyMcpToken, verifyJwtToken } from '../services/authService';
+import { isAddonEnabled } from '../services/adminService';
 import { registerResources } from './resources';
 import { registerTools } from './tools';
 
@@ -74,36 +73,15 @@ function verifyToken(authHeader: string | undefined): User | null {
 
   // Long-lived MCP API token (trek_...)
   if (token.startsWith('trek_')) {
-    const hash = createHash('sha256').update(token).digest('hex');
-    const row = db.prepare(`
-      SELECT u.id, u.username, u.email, u.role
-      FROM mcp_tokens mt
-      JOIN users u ON mt.user_id = u.id
-      WHERE mt.token_hash = ?
-    `).get(hash) as User | undefined;
-    if (row) {
-      // Update last_used_at (fire-and-forget, non-blocking)
-      db.prepare('UPDATE mcp_tokens SET last_used_at = CURRENT_TIMESTAMP WHERE token_hash = ?').run(hash);
-      return row;
-    }
-    return null;
+    return verifyMcpToken(token);
   }
 
   // Short-lived JWT
-  try {
-    const decoded = jwt.verify(token, JWT_SECRET, { algorithms: ['HS256'] }) as { id: number };
-    const user = db.prepare(
-      'SELECT id, username, email, role FROM users WHERE id = ?'
-    ).get(decoded.id) as User | undefined;
-    return user || null;
-  } catch {
-    return null;
-  }
+  return verifyJwtToken(token);
 }
 
 export async function mcpHandler(req: Request, res: Response): Promise<void> {
-  const mcpAddon = db.prepare("SELECT enabled FROM addons WHERE id = 'mcp'").get() as { enabled: number } | undefined;
-  if (!mcpAddon || !mcpAddon.enabled) {
+  if (!isAddonEnabled('mcp')) {
     res.status(403).json({ error: 'MCP is not enabled' });
     return;
   }

server/src/mcp/resources.ts

@@ -1,16 +1,15 @@
 import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp';
-import { db, canAccessTrip } from '../db/database';
-
-const TRIP_SELECT = `
-  SELECT t.*,
-    (SELECT COUNT(*) FROM days d WHERE d.trip_id = t.id) as day_count,
-    (SELECT COUNT(*) FROM places p WHERE p.trip_id = t.id) as place_count,
-    CASE WHEN t.user_id = :userId THEN 1 ELSE 0 END as is_owner,
-    u.username as owner_username,
-    (SELECT COUNT(*) FROM trip_members tm WHERE tm.trip_id = t.id) as shared_count
-  FROM trips t
-  JOIN users u ON u.id = t.user_id
-`;
+import { canAccessTrip } from '../db/database';
+import { listTrips, getTrip, getTripOwner, listMembers } from '../services/tripService';
+import { listDays, listAccommodations } from '../services/dayService';
+import { listPlaces } from '../services/placeService';
+import { listBudgetItems } from '../services/budgetService';
+import { listItems as listPackingItems } from '../services/packingService';
+import { listReservations } from '../services/reservationService';
+import { listNotes as listDayNotes } from '../services/dayNoteService';
+import { listNotes as listCollabNotes } from '../services/collabService';
+import { listCategories } from '../services/categoryService';
+import { listBucketList, listVisitedCountries } from '../services/atlasService';
 
 function parseId(value: string | string[]): number | null {
   const n = Number(Array.isArray(value) ? value[0] : value);
@@ -44,12 +43,7 @@ export function registerResources(server: McpServer, userId: number): void {
     'trek://trips',
     { description: 'All trips the user owns or is a member of' },
     async (uri) => {
-      const trips = db.prepare(`
-        ${TRIP_SELECT}
-        LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = :userId
-        WHERE (t.user_id = :userId OR m.user_id IS NOT NULL) AND t.is_archived = 0
-        ORDER BY t.created_at DESC
-      `).all({ userId });
+      const trips = listTrips(userId, 0);
       return jsonContent(uri.href, trips);
     }
   );
@@ -62,11 +56,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const trip = db.prepare(`
-        ${TRIP_SELECT}
-        LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = :userId
-        WHERE t.id = :tripId AND (t.user_id = :userId OR m.user_id IS NOT NULL)
-      `).get({ userId, tripId: id });
+      const trip = getTrip(id, userId);
       return jsonContent(uri.href, trip);
     }
   );
@@ -80,35 +70,8 @@ export function registerResources(server: McpServer, userId: number): void {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
 
-      const days = db.prepare(
-        'SELECT * FROM days WHERE trip_id = ? ORDER BY day_number ASC'
-      ).all(id) as { id: number; day_number: number; date: string | null; title: string | null; notes: string | null }[];
-
-      const dayIds = days.map(d => d.id);
-      const assignmentsByDay: Record<number, unknown[]> = {};
-
-      if (dayIds.length > 0) {
-        const placeholders = dayIds.map(() => '?').join(',');
-        const assignments = db.prepare(`
-          SELECT da.id, da.day_id, da.order_index, da.notes as assignment_notes,
-            p.id as place_id, p.name, p.address, p.lat, p.lng, p.category_id,
-            COALESCE(da.assignment_time, p.place_time) as place_time,
-            c.name as category_name, c.color as category_color, c.icon as category_icon
-          FROM day_assignments da
-          JOIN places p ON da.place_id = p.id
-          LEFT JOIN categories c ON p.category_id = c.id
-          WHERE da.day_id IN (${placeholders})
-          ORDER BY da.order_index ASC, da.created_at ASC
-        `).all(...dayIds) as (Record<string, unknown> & { day_id: number })[];
-
-        for (const a of assignments) {
-          if (!assignmentsByDay[a.day_id]) assignmentsByDay[a.day_id] = [];
-          assignmentsByDay[a.day_id].push(a);
-        }
-      }
-
-      const result = days.map(d => ({ ...d, assignments: assignmentsByDay[d.id] || [] }));
-      return jsonContent(uri.href, result);
+      const { days } = listDays(id);
+      return jsonContent(uri.href, days);
     }
   );
 
@@ -120,13 +83,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const places = db.prepare(`
-        SELECT p.*, c.name as category_name, c.color as category_color, c.icon as category_icon
-        FROM places p
-        LEFT JOIN categories c ON p.category_id = c.id
-        WHERE p.trip_id = ?
-        ORDER BY p.created_at DESC
-      `).all(id);
+      const places = listPlaces(String(id), {});
       return jsonContent(uri.href, places);
     }
   );
@@ -139,9 +96,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const items = db.prepare(
-        'SELECT * FROM budget_items WHERE trip_id = ? ORDER BY category ASC, created_at ASC'
-      ).all(id);
+      const items = listBudgetItems(id);
       return jsonContent(uri.href, items);
     }
   );
@@ -154,9 +109,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const items = db.prepare(
-        'SELECT * FROM packing_items WHERE trip_id = ? ORDER BY sort_order ASC, created_at ASC'
-      ).all(id);
+      const items = listPackingItems(id);
       return jsonContent(uri.href, items);
     }
   );
@@ -169,14 +122,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const reservations = db.prepare(`
-        SELECT r.*, d.day_number, p.name as place_name
-        FROM reservations r
-        LEFT JOIN days d ON r.day_id = d.id
-        LEFT JOIN places p ON r.place_id = p.id
-        WHERE r.trip_id = ?
-        ORDER BY r.reservation_time ASC, r.created_at ASC
-      `).all(id);
+      const reservations = listReservations(id);
       return jsonContent(uri.href, reservations);
     }
   );
@@ -190,9 +136,7 @@ export function registerResources(server: McpServer, userId: number): void {
       const tId = parseId(tripId);
       const dId = parseId(dayId);
       if (tId === null || dId === null || !canAccessTrip(tId, userId)) return accessDenied(uri.href);
-      const notes = db.prepare(
-        'SELECT * FROM day_notes WHERE day_id = ? AND trip_id = ? ORDER BY sort_order ASC, created_at ASC'
-      ).all(dId, tId);
+      const notes = listDayNotes(dId, tId);
       return jsonContent(uri.href, notes);
     }
   );
@@ -205,16 +149,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const accommodations = db.prepare(`
-        SELECT da.*, p.name as place_name, p.address as place_address, p.lat, p.lng,
-          ds.day_number as start_day_number, de.day_number as end_day_number
-        FROM day_accommodations da
-        JOIN places p ON da.place_id = p.id
-        LEFT JOIN days ds ON da.start_day_id = ds.id
-        LEFT JOIN days de ON da.end_day_id = de.id
-        WHERE da.trip_id = ?
-        ORDER BY ds.day_number ASC
-      `).all(id);
+      const accommodations = listAccommodations(id);
       return jsonContent(uri.href, accommodations);
     }
   );
@@ -227,20 +162,10 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const trip = db.prepare('SELECT user_id FROM trips WHERE id = ?').get(id) as { user_id: number } | undefined;
-      if (!trip) return accessDenied(uri.href);
-      const owner = db.prepare('SELECT id, username, avatar FROM users WHERE id = ?').get(trip.user_id) as Record<string, unknown> | undefined;
-      const members = db.prepare(`
-        SELECT u.id, u.username, u.avatar, tm.added_at
-        FROM trip_members tm
-        JOIN users u ON tm.user_id = u.id
-        WHERE tm.trip_id = ?
-        ORDER BY tm.added_at ASC
-      `).all(id);
-      return jsonContent(uri.href, {
-        owner: owner ? { ...owner, role: 'owner' } : null,
-        members,
-      });
+      const ownerRow = getTripOwner(id);
+      if (!ownerRow) return accessDenied(uri.href);
+      const { owner, members } = listMembers(id, ownerRow.user_id);
+      return jsonContent(uri.href, { owner, members });
     }
   );
 
@@ -252,13 +177,7 @@ export function registerResources(server: McpServer, userId: number): void {
     async (uri, { tripId }) => {
       const id = parseId(tripId);
       if (id === null || !canAccessTrip(id, userId)) return accessDenied(uri.href);
-      const notes = db.prepare(`
-        SELECT cn.*, u.username
-        FROM collab_notes cn
-        JOIN users u ON cn.user_id = u.id
-        WHERE cn.trip_id = ?
-        ORDER BY cn.pinned DESC, cn.updated_at DESC
-      `).all(id);
+      const notes = listCollabNotes(id);
       return jsonContent(uri.href, notes);
     }
   );
@@ -269,9 +188,7 @@ export function registerResources(server: McpServer, userId: number): void {
     'trek://categories',
     { description: 'All available place categories (id, name, color, icon) for use when creating places' },
     async (uri) => {
-      const categories = db.prepare(
-        'SELECT id, name, color, icon FROM categories ORDER BY name ASC'
-      ).all();
+      const categories = listCategories();
       return jsonContent(uri.href, categories);
     }
   );
@@ -282,9 +199,7 @@ export function registerResources(server: McpServer, userId: number): void {
     'trek://bucket-list',
     { description: 'Your personal travel bucket list' },
     async (uri) => {
-      const items = db.prepare(
-        'SELECT * FROM bucket_list WHERE user_id = ? ORDER BY created_at DESC'
-      ).all(userId);
+      const items = listBucketList(userId);
       return jsonContent(uri.href, items);
     }
   );
@@ -295,9 +210,7 @@ export function registerResources(server: McpServer, userId: number): void {
     'trek://visited-countries',
     { description: 'Countries you have marked as visited in Atlas' },
     async (uri) => {
-      const countries = db.prepare(
-        'SELECT country_code, created_at FROM visited_countries WHERE user_id = ? ORDER BY created_at DESC'
-      ).all(userId);
+      const countries = listVisitedCountries(userId);
       return jsonContent(uri.href, countries);
     }
   );

server/src/mcp/tools.ts

@@ -1,18 +1,30 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp';
 import { z } from 'zod';
-import path from 'path';
-import fs from 'fs';
-import { db, canAccessTrip, isOwner } from '../db/database';
+import { canAccessTrip } from '../db/database';
 import { broadcast } from '../websocket';
+import { isDemoUser } from '../services/authService';
+import {
+  listTrips, createTrip, updateTrip, deleteTrip, getTripSummary,
+  isOwner, verifyTripAccess,
+} from '../services/tripService';
+import { listPlaces, createPlace, updatePlace, deletePlace } from '../services/placeService';
+import { listCategories } from '../services/categoryService';
+import {
+  dayExists, placeExists, createAssignment, assignmentExistsInDay,
+  deleteAssignment, reorderAssignments, getAssignmentForTrip, updateTime,
+} from '../services/assignmentService';
+import { createBudgetItem, updateBudgetItem, deleteBudgetItem } from '../services/budgetService';
+import { createItem as createPackingItem, updateItem as updatePackingItem, deleteItem as deletePackingItem } from '../services/packingService';
+import { createReservation, getReservation, updateReservation, deleteReservation } from '../services/reservationService';
+import { getDay, updateDay, validateAccommodationRefs } from '../services/dayService';
+import { createNote as createDayNote, getNote as getDayNote, updateNote as updateDayNote, deleteNote as deleteDayNote, dayExists as dayNoteExists } from '../services/dayNoteService';
+import { createNote as createCollabNote, updateNote as updateCollabNote, deleteNote as deleteCollabNote } from '../services/collabService';
+import {
+  markCountryVisited, unmarkCountryVisited, createBucketItem, deleteBucketItem,
+} from '../services/atlasService';
+import { searchPlaces } from '../services/mapsService';
 
-const MS_PER_DAY = 86400000;
-const MAX_TRIP_DAYS = 90;
-
-function isDemoUser(userId: number): boolean {
-  if (process.env.DEMO_MODE !== 'true') return false;
-  const user = db.prepare('SELECT email FROM users WHERE id = ?').get(userId) as { email: string } | undefined;
-  return user?.email === 'demo@nomad.app';
-}
+const MAX_MCP_TRIP_DAYS = 90;
 
 function demoDenied() {
   return { content: [{ type: 'text' as const, text: 'Write operations are disabled in demo mode.' }], isError: true };
@@ -26,25 +38,6 @@ function ok(data: unknown) {
   return { content: [{ type: 'text' as const, text: JSON.stringify(data, null, 2) }] };
 }
 
-/** Create days for a newly created trip (fresh insert, no existing days). */
-function createDaysForNewTrip(tripId: number | bigint, startDate: string | null, endDate: string | null): void {
-  const insert = db.prepare('INSERT INTO days (trip_id, day_number, date) VALUES (?, ?, ?)');
-  if (startDate && endDate) {
-    const [sy, sm, sd] = startDate.split('-').map(Number);
-    const [ey, em, ed] = endDate.split('-').map(Number);
-    const startMs = Date.UTC(sy, sm - 1, sd);
-    const endMs = Date.UTC(ey, em - 1, ed);
-    const numDays = Math.min(Math.floor((endMs - startMs) / MS_PER_DAY) + 1, MAX_TRIP_DAYS);
-    for (let i = 0; i < numDays; i++) {
-      const d = new Date(startMs + i * MS_PER_DAY);
-      const date = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
-      insert.run(tripId, i + 1, date);
-    }
-  } else {
-    for (let i = 0; i < 7; i++) insert.run(tripId, i + 1, null);
-  }
-}
-
 export function registerTools(server: McpServer, userId: number): void {
   // --- TRIPS ---
 
@@ -75,14 +68,7 @@ export function registerTools(server: McpServer, userId: number): void {
       if (start_date && end_date && new Date(end_date) < new Date(start_date)) {
         return { content: [{ type: 'text' as const, text: 'End date must be after start date.' }], isError: true };
       }
-      const trip = db.transaction(() => {
-        const result = db.prepare(
-          'INSERT INTO trips (user_id, title, description, start_date, end_date, currency) VALUES (?, ?, ?, ?, ?, ?)'
-        ).run(userId, title, description || null, start_date || null, end_date || null, currency || 'EUR');
-        const tripId = result.lastInsertRowid as number;
-        createDaysForNewTrip(tripId, start_date || null, end_date || null);
-        return db.prepare('SELECT * FROM trips WHERE id = ?').get(tripId);
-      })();
+      const { trip } = createTrip(userId, { title, description, start_date, end_date, currency }, MAX_MCP_TRIP_DAYS);
       return ok({ trip });
     }
   );
@@ -113,21 +99,9 @@ export function registerTools(server: McpServer, userId: number): void {
         if (isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== end_date)
           return { content: [{ type: 'text' as const, text: 'end_date is not a valid calendar date.' }], isError: true };
       }
-      const existing = db.prepare('SELECT * FROM trips WHERE id = ?').get(tripId) as Record<string, unknown> & { title: string; description: string; start_date: string; end_date: string; currency: string } | undefined;
-      if (!existing) return noAccess();
-      db.prepare(
-        'UPDATE trips SET title = ?, description = ?, start_date = ?, end_date = ?, currency = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?'
-      ).run(
-        title ?? existing.title,
-        description !== undefined ? description : existing.description,
-        start_date !== undefined ? start_date : existing.start_date,
-        end_date !== undefined ? end_date : existing.end_date,
-        currency ?? existing.currency,
-        tripId
-      );
-      const updated = db.prepare('SELECT * FROM trips WHERE id = ?').get(tripId);
-      broadcast(tripId, 'trip:updated', { trip: updated });
-      return ok({ trip: updated });
+      const { updatedTrip } = updateTrip(tripId, userId, { title, description, start_date, end_date, currency }, 'user');
+      broadcast(tripId, 'trip:updated', { trip: updatedTrip });
+      return ok({ trip: updatedTrip });
     }
   );
 
@@ -142,7 +116,7 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!isOwner(tripId, userId)) return noAccess();
-      db.prepare('DELETE FROM trips WHERE id = ?').run(tripId);
+      deleteTrip(tripId, userId, 'user');
       return ok({ success: true, tripId });
     }
   );
@@ -156,18 +130,7 @@ export function registerTools(server: McpServer, userId: number): void {
       },
     },
     async ({ include_archived }) => {
-      const trips = db.prepare(`
-        SELECT t.*, u.username as owner_username,
-          (SELECT COUNT(*) FROM days d WHERE d.trip_id = t.id) as day_count,
-          (SELECT COUNT(*) FROM places p WHERE p.trip_id = t.id) as place_count,
-          CASE WHEN t.user_id = ? THEN 1 ELSE 0 END as is_owner
-        FROM trips t
-        JOIN users u ON u.id = t.user_id
-        LEFT JOIN trip_members tm ON tm.trip_id = t.id AND tm.user_id = ?
-        WHERE (t.user_id = ? OR tm.user_id IS NOT NULL)
-          AND (? = 1 OR t.is_archived = 0)
-        ORDER BY t.updated_at DESC
-      `).all(userId, userId, userId, include_archived ? 1 : 0);
+      const trips = listTrips(userId, include_archived ? null : 0);
       return ok({ trips });
     }
   );
@@ -196,11 +159,7 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, name, description, lat, lng, address, category_id, google_place_id, osm_id, notes, website, phone }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const result = db.prepare(`
-        INSERT INTO places (trip_id, name, description, lat, lng, address, category_id, google_place_id, osm_id, notes, website, phone, transport_mode)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-      `).run(tripId, name, description || null, lat ?? null, lng ?? null, address || null, category_id || null, google_place_id || null, osm_id || null, notes || null, website || null, phone || null, 'walking');
-      const place = db.prepare('SELECT * FROM places WHERE id = ?').get(result.lastInsertRowid);
+      const place = createPlace(String(tripId), { name, description, lat, lng, address, category_id, google_place_id, osm_id, notes, website, phone });
       broadcast(tripId, 'place:created', { place });
       return ok({ place });
     }
@@ -226,25 +185,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, placeId, name, description, lat, lng, address, notes, website, phone }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM places WHERE id = ? AND trip_id = ?').get(placeId, tripId) as Record<string, unknown> | undefined;
-      if (!existing) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
-      db.prepare(`
-        UPDATE places SET
-          name = ?, description = ?, lat = ?, lng = ?, address = ?, notes = ?, website = ?, phone = ?,
-          updated_at = CURRENT_TIMESTAMP
-        WHERE id = ?
-      `).run(
-        name ?? existing.name,
-        description !== undefined ? description : existing.description,
-        lat !== undefined ? lat : existing.lat,
-        lng !== undefined ? lng : existing.lng,
-        address !== undefined ? address : existing.address,
-        notes !== undefined ? notes : existing.notes,
-        website !== undefined ? website : existing.website,
-        phone !== undefined ? phone : existing.phone,
-        placeId
-      );
-      const place = db.prepare('SELECT * FROM places WHERE id = ?').get(placeId);
+      const place = updatePlace(String(tripId), String(placeId), { name, description, lat, lng, address, notes, website, phone });
+      if (!place) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
       broadcast(tripId, 'place:updated', { place });
       return ok({ place });
     }
@@ -262,9 +204,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, placeId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const place = db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?').get(placeId, tripId);
-      if (!place) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
-      db.prepare('DELETE FROM places WHERE id = ?').run(placeId);
+      const deleted = deletePlace(String(tripId), String(placeId));
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
       broadcast(tripId, 'place:deleted', { placeId });
       return ok({ success: true });
     }
@@ -279,7 +220,7 @@ export function registerTools(server: McpServer, userId: number): void {
       inputSchema: {},
     },
     async () => {
-      const categories = db.prepare('SELECT id, name, color, icon FROM categories ORDER BY name ASC').all();
+      const categories = listCategories();
       return ok({ categories });
     }
   );
@@ -295,25 +236,12 @@ export function registerTools(server: McpServer, userId: number): void {
       },
     },
     async ({ query }) => {
-      // Use Nominatim (no API key needed, always available)
-      const params = new URLSearchParams({
-        q: query, format: 'json', addressdetails: '1', limit: '5', 'accept-language': 'en',
-      });
-      const response = await fetch(`https://nominatim.openstreetmap.org/search?${params}`, {
-        headers: { 'User-Agent': 'TREK Travel Planner' },
-      });
-      if (!response.ok) {
-        return { content: [{ type: 'text' as const, text: 'Search failed — Nominatim API error.' }], isError: true };
+      try {
+        const result = await searchPlaces(userId, query);
+        return ok(result);
+      } catch {
+        return { content: [{ type: 'text' as const, text: 'Place search failed.' }], isError: true };
       }
-      const data = await response.json() as { osm_type: string; osm_id: number; name: string; display_name: string; lat: string; lon: string }[];
-      const places = data.map(item => ({
-        osm_id: `${item.osm_type}:${item.osm_id}`,
-        name: item.name || item.display_name?.split(',')[0] || '',
-        address: item.display_name || '',
-        lat: parseFloat(item.lat) || null,
-        lng: parseFloat(item.lon) || null,
-      }));
-      return ok({ places });
     }
   );
 
@@ -333,20 +261,9 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, placeId, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const day = db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(dayId, tripId);
-      if (!day) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
-      const place = db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?').get(placeId, tripId);
-      if (!place) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
-      const maxOrder = db.prepare('SELECT MAX(order_index) as max FROM day_assignments WHERE day_id = ?').get(dayId) as { max: number | null };
-      const orderIndex = (maxOrder.max !== null ? maxOrder.max : -1) + 1;
-      const result = db.prepare(
-        'INSERT INTO day_assignments (day_id, place_id, order_index, notes) VALUES (?, ?, ?, ?)'
-      ).run(dayId, placeId, orderIndex, notes || null);
-      const assignment = db.prepare(`
-        SELECT da.*, p.name as place_name, p.address, p.lat, p.lng
-        FROM day_assignments da JOIN places p ON da.place_id = p.id
-        WHERE da.id = ?
-      `).get(result.lastInsertRowid);
+      if (!dayExists(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
+      if (!placeExists(placeId, tripId)) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
+      const assignment = createAssignment(dayId, placeId, notes || null);
       broadcast(tripId, 'assignment:created', { assignment });
       return ok({ assignment });
     }
@@ -365,11 +282,9 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, assignmentId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const assignment = db.prepare(
-        'SELECT da.id FROM day_assignments da JOIN days d ON da.day_id = d.id WHERE da.id = ? AND da.day_id = ? AND d.trip_id = ?'
-      ).get(assignmentId, dayId, tripId);
-      if (!assignment) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
-      db.prepare('DELETE FROM day_assignments WHERE id = ?').run(assignmentId);
+      if (!assignmentExistsInDay(assignmentId, dayId, tripId))
+        return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
+      deleteAssignment(assignmentId);
       broadcast(tripId, 'assignment:deleted', { assignmentId, dayId });
       return ok({ success: true });
     }
@@ -392,12 +307,7 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, name, category, total_price, note }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const maxOrder = db.prepare('SELECT MAX(sort_order) as max FROM budget_items WHERE trip_id = ?').get(tripId) as { max: number | null };
-      const sortOrder = (maxOrder.max !== null ? maxOrder.max : -1) + 1;
-      const result = db.prepare(
-        'INSERT INTO budget_items (trip_id, category, name, total_price, note, sort_order) VALUES (?, ?, ?, ?, ?, ?)'
-      ).run(tripId, category || 'Other', name, total_price, note || null, sortOrder);
-      const item = db.prepare('SELECT * FROM budget_items WHERE id = ?').get(result.lastInsertRowid);
+      const item = createBudgetItem(tripId, { category, name, total_price, note });
       broadcast(tripId, 'budget:created', { item });
       return ok({ item });
     }
@@ -415,9 +325,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const item = db.prepare('SELECT id FROM budget_items WHERE id = ? AND trip_id = ?').get(itemId, tripId);
-      if (!item) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
-      db.prepare('DELETE FROM budget_items WHERE id = ?').run(itemId);
+      const deleted = deleteBudgetItem(itemId, tripId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
       broadcast(tripId, 'budget:deleted', { itemId });
       return ok({ success: true });
     }
@@ -438,12 +347,7 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, name, category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const maxOrder = db.prepare('SELECT MAX(sort_order) as max FROM packing_items WHERE trip_id = ?').get(tripId) as { max: number | null };
-      const sortOrder = (maxOrder.max !== null ? maxOrder.max : -1) + 1;
-      const result = db.prepare(
-        'INSERT INTO packing_items (trip_id, name, checked, category, sort_order) VALUES (?, ?, ?, ?, ?)'
-      ).run(tripId, name, 0, category || 'General', sortOrder);
-      const item = db.prepare('SELECT * FROM packing_items WHERE id = ?').get(result.lastInsertRowid);
+      const item = createPackingItem(tripId, { name, category: category || 'General' });
       broadcast(tripId, 'packing:created', { item });
       return ok({ item });
     }
@@ -462,12 +366,10 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, itemId, checked }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const item = db.prepare('SELECT id FROM packing_items WHERE id = ? AND trip_id = ?').get(itemId, tripId);
+      const item = updatePackingItem(tripId, itemId, { checked: checked ? 1 : 0 }, ['checked']);
       if (!item) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
-      db.prepare('UPDATE packing_items SET checked = ? WHERE id = ?').run(checked ? 1 : 0, itemId);
-      const updated = db.prepare('SELECT * FROM packing_items WHERE id = ?').get(itemId);
-      broadcast(tripId, 'packing:updated', { item: updated });
-      return ok({ item: updated });
+      broadcast(tripId, 'packing:updated', { item });
+      return ok({ item });
     }
   );
 
@@ -483,9 +385,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const item = db.prepare('SELECT id FROM packing_items WHERE id = ? AND trip_id = ?').get(itemId, tripId);
-      if (!item) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
-      db.prepare('DELETE FROM packing_items WHERE id = ?').run(itemId);
+      const deleted = deletePackingItem(tripId, itemId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
       broadcast(tripId, 'packing:deleted', { itemId });
       return ok({ success: true });
     }
@@ -509,51 +410,38 @@ export function registerTools(server: McpServer, userId: number): void {
         place_id: z.number().int().positive().optional().describe('Hotel place to link (hotel type only)'),
         start_day_id: z.number().int().positive().optional().describe('Check-in day (hotel type only; requires place_id and end_day_id)'),
         end_day_id: z.number().int().positive().optional().describe('Check-out day (hotel type only; requires place_id and start_day_id)'),
+        check_in: z.string().max(10).optional().describe('Check-in time (e.g. "15:00", hotel type only)'),
+        check_out: z.string().max(10).optional().describe('Check-out time (e.g. "11:00", hotel type only)'),
         assignment_id: z.number().int().positive().optional().describe('Link to a day assignment (restaurant, train, car, cruise, event, tour, activity, other)'),
       },
     },
-    async ({ tripId, title, type, reservation_time, location, confirmation_number, notes, day_id, place_id, start_day_id, end_day_id, assignment_id }) => {
+    async ({ tripId, title, type, reservation_time, location, confirmation_number, notes, day_id, place_id, start_day_id, end_day_id, check_in, check_out, assignment_id }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
 
       // Validate that all referenced IDs belong to this trip
-      if (day_id) {
-        if (!db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(day_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'day_id does not belong to this trip.' }], isError: true };
-      }
-      if (place_id) {
-        if (!db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?').get(place_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'place_id does not belong to this trip.' }], isError: true };
-      }
-      if (start_day_id) {
-        if (!db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(start_day_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'start_day_id does not belong to this trip.' }], isError: true };
-      }
-      if (end_day_id) {
-        if (!db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(end_day_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'end_day_id does not belong to this trip.' }], isError: true };
-      }
-      if (assignment_id) {
-        if (!db.prepare('SELECT da.id FROM day_assignments da JOIN days d ON da.day_id = d.id WHERE da.id = ? AND d.trip_id = ?').get(assignment_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'assignment_id does not belong to this trip.' }], isError: true };
-      }
+      if (day_id && !getDay(day_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'day_id does not belong to this trip.' }], isError: true };
+      if (place_id && !placeExists(place_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'place_id does not belong to this trip.' }], isError: true };
+      if (start_day_id && !getDay(start_day_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'start_day_id does not belong to this trip.' }], isError: true };
+      if (end_day_id && !getDay(end_day_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'end_day_id does not belong to this trip.' }], isError: true };
+      if (assignment_id && !getAssignmentForTrip(assignment_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'assignment_id does not belong to this trip.' }], isError: true };
 
-      const reservation = db.transaction(() => {
-        let accommodationId: number | null = null;
-        if (type === 'hotel' && place_id && start_day_id && end_day_id) {
-          const accResult = db.prepare(
-            'INSERT INTO day_accommodations (trip_id, place_id, start_day_id, end_day_id, confirmation) VALUES (?, ?, ?, ?, ?)'
-          ).run(tripId, place_id, start_day_id, end_day_id, confirmation_number || null);
-          accommodationId = accResult.lastInsertRowid as number;
-        }
-        const result = db.prepare(`
-          INSERT INTO reservations (trip_id, title, type, reservation_time, location, confirmation_number, notes, day_id, place_id, assignment_id, accommodation_id, status)
-          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-        `).run(tripId, title, type, reservation_time || null, location || null, confirmation_number || null, notes || null, day_id || null, place_id || null, assignment_id || null, accommodationId, 'pending');
-        return db.prepare('SELECT * FROM reservations WHERE id = ?').get(result.lastInsertRowid);
-      })();
+      const createAccommodation = (type === 'hotel' && place_id && start_day_id && end_day_id)
+        ? { place_id, start_day_id, end_day_id, check_in: check_in || undefined, check_out: check_out || undefined, confirmation: confirmation_number || undefined }
+        : undefined;
 
-      if (type === 'hotel' && place_id && start_day_id && end_day_id) {
+      const { reservation, accommodationCreated } = createReservation(tripId, {
+        title, type, reservation_time, location, confirmation_number,
+        notes, day_id, place_id, assignment_id,
+        create_accommodation: createAccommodation,
+      });
+
+      if (accommodationCreated) {
         broadcast(tripId, 'accommodation:created', {});
       }
       broadcast(tripId, 'reservation:created', { reservation });
@@ -573,16 +461,10 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, reservationId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const reservation = db.prepare('SELECT id, accommodation_id FROM reservations WHERE id = ? AND trip_id = ?').get(reservationId, tripId) as { id: number; accommodation_id: number | null } | undefined;
-      if (!reservation) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
-      db.transaction(() => {
-        if (reservation.accommodation_id) {
-          db.prepare('DELETE FROM day_accommodations WHERE id = ?').run(reservation.accommodation_id);
-        }
-        db.prepare('DELETE FROM reservations WHERE id = ?').run(reservationId);
-      })();
-      if (reservation.accommodation_id) {
-        broadcast(tripId, 'accommodation:deleted', { accommodationId: reservation.accommodation_id });
+      const { deleted, accommodationDeleted } = deleteReservation(reservationId, tripId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
+      if (accommodationDeleted) {
+        broadcast(tripId, 'accommodation:deleted', { accommodationId: deleted.accommodation_id });
       }
       broadcast(tripId, 'reservation:deleted', { reservationId });
       return ok({ success: true });
@@ -599,41 +481,35 @@ export function registerTools(server: McpServer, userId: number): void {
         place_id: z.number().int().positive().describe('The hotel place to link'),
         start_day_id: z.number().int().positive().describe('Check-in day ID'),
         end_day_id: z.number().int().positive().describe('Check-out day ID'),
+        check_in: z.string().max(10).optional().describe('Check-in time (e.g. "15:00")'),
+        check_out: z.string().max(10).optional().describe('Check-out time (e.g. "11:00")'),
       },
     },
-    async ({ tripId, reservationId, place_id, start_day_id, end_day_id }) => {
+    async ({ tripId, reservationId, place_id, start_day_id, end_day_id, check_in, check_out }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const reservation = db.prepare('SELECT * FROM reservations WHERE id = ? AND trip_id = ?').get(reservationId, tripId) as Record<string, unknown> | undefined;
-      if (!reservation) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
-      if (reservation.type !== 'hotel') return { content: [{ type: 'text' as const, text: 'Reservation is not of type hotel.' }], isError: true };
+      const current = getReservation(reservationId, tripId);
+      if (!current) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
+      if (current.type !== 'hotel') return { content: [{ type: 'text' as const, text: 'Reservation is not of type hotel.' }], isError: true };
 
-      if (!db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?').get(place_id, tripId))
+      if (!placeExists(place_id, tripId))
         return { content: [{ type: 'text' as const, text: 'place_id does not belong to this trip.' }], isError: true };
-      if (!db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(start_day_id, tripId))
+      if (!getDay(start_day_id, tripId))
         return { content: [{ type: 'text' as const, text: 'start_day_id does not belong to this trip.' }], isError: true };
-      if (!db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(end_day_id, tripId))
+      if (!getDay(end_day_id, tripId))
         return { content: [{ type: 'text' as const, text: 'end_day_id does not belong to this trip.' }], isError: true };
 
-      let accommodationId = reservation.accommodation_id as number | null;
-      const isNewAccommodation = !accommodationId;
-      db.transaction(() => {
-        if (accommodationId) {
-          db.prepare('UPDATE day_accommodations SET place_id = ?, start_day_id = ?, end_day_id = ? WHERE id = ?')
-            .run(place_id, start_day_id, end_day_id, accommodationId);
-        } else {
-          const accResult = db.prepare(
-            'INSERT INTO day_accommodations (trip_id, place_id, start_day_id, end_day_id, confirmation) VALUES (?, ?, ?, ?, ?)'
-          ).run(tripId, place_id, start_day_id, end_day_id, reservation.confirmation_number || null);
-          accommodationId = accResult.lastInsertRowid as number;
-        }
-        db.prepare('UPDATE reservations SET place_id = ?, accommodation_id = ? WHERE id = ?')
-          .run(place_id, accommodationId, reservationId);
-      })();
+      const isNewAccommodation = !current.accommodation_id;
+      const { reservation } = updateReservation(reservationId, tripId, {
+        place_id,
+        type: current.type,
+        status: current.status as string,
+        create_accommodation: { place_id, start_day_id, end_day_id, check_in: check_in || undefined, check_out: check_out || undefined },
+      }, current);
+
       broadcast(tripId, isNewAccommodation ? 'accommodation:created' : 'accommodation:updated', {});
-      const updated = db.prepare('SELECT * FROM reservations WHERE id = ?').get(reservationId);
-      broadcast(tripId, 'reservation:updated', { reservation: updated });
-      return ok({ reservation: updated, accommodation_id: accommodationId });
+      broadcast(tripId, 'reservation:updated', { reservation });
+      return ok({ reservation, accommodation_id: (reservation as any).accommodation_id });
     }
   );
 
@@ -653,28 +529,15 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, assignmentId, place_time, end_time }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const assignment = db.prepare(`
-        SELECT da.* FROM day_assignments da
-        JOIN days d ON da.day_id = d.id
-        WHERE da.id = ? AND d.trip_id = ?
-      `).get(assignmentId, tripId) as Record<string, unknown> | undefined;
-      if (!assignment) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
-      db.prepare('UPDATE day_assignments SET assignment_time = ?, assignment_end_time = ? WHERE id = ?')
-        .run(
-          place_time !== undefined ? place_time : assignment.assignment_time,
-          end_time !== undefined ? end_time : assignment.assignment_end_time,
-          assignmentId
-        );
-      const updated = db.prepare(`
-        SELECT da.id, da.day_id, da.order_index, da.notes as assignment_notes,
-          da.assignment_time, da.assignment_end_time,
-          p.id as place_id, p.name, p.address
-        FROM day_assignments da
-        JOIN places p ON da.place_id = p.id
-        WHERE da.id = ?
-      `).get(assignmentId);
-      broadcast(tripId, 'assignment:updated', { assignment: updated });
-      return ok({ assignment: updated });
+      const existing = getAssignmentForTrip(assignmentId, tripId);
+      if (!existing) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
+      const assignment = updateTime(
+        assignmentId,
+        place_time !== undefined ? place_time : (existing as any).assignment_time,
+        end_time !== undefined ? end_time : (existing as any).assignment_end_time
+      );
+      broadcast(tripId, 'assignment:updated', { assignment });
+      return ok({ assignment });
     }
   );
 
@@ -691,10 +554,9 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, title }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const day = db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(dayId, tripId);
-      if (!day) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
-      db.prepare('UPDATE days SET title = ? WHERE id = ?').run(title, dayId);
-      const updated = db.prepare('SELECT * FROM days WHERE id = ?').get(dayId);
+      const current = getDay(dayId, tripId);
+      if (!current) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
+      const updated = updateDay(dayId, current, title !== undefined ? { title } : {});
       broadcast(tripId, 'day:updated', { day: updated });
       return ok({ day: updated });
     }
@@ -723,39 +585,21 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, reservationId, title, type, reservation_time, location, confirmation_number, notes, status, place_id, assignment_id }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM reservations WHERE id = ? AND trip_id = ?').get(reservationId, tripId) as Record<string, unknown> | undefined;
+      const existing = getReservation(reservationId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
 
-      if (place_id != null) {
-        if (!db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?').get(place_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'place_id does not belong to this trip.' }], isError: true };
-      }
-      if (assignment_id != null) {
-        if (!db.prepare('SELECT da.id FROM day_assignments da JOIN days d ON da.day_id = d.id WHERE da.id = ? AND d.trip_id = ?').get(assignment_id, tripId))
-          return { content: [{ type: 'text' as const, text: 'assignment_id does not belong to this trip.' }], isError: true };
-      }
+      if (place_id != null && !placeExists(place_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'place_id does not belong to this trip.' }], isError: true };
+      if (assignment_id != null && !getAssignmentForTrip(assignment_id, tripId))
+        return { content: [{ type: 'text' as const, text: 'assignment_id does not belong to this trip.' }], isError: true };
 
-      db.prepare(`
-        UPDATE reservations SET
-          title = ?, type = ?, reservation_time = ?, location = ?,
-          confirmation_number = ?, notes = ?, status = ?,
-          place_id = ?, assignment_id = ?
-        WHERE id = ?
-      `).run(
-        title ?? existing.title,
-        type ?? existing.type,
-        reservation_time !== undefined ? reservation_time : existing.reservation_time,
-        location !== undefined ? location : existing.location,
-        confirmation_number !== undefined ? confirmation_number : existing.confirmation_number,
-        notes !== undefined ? notes : existing.notes,
-        status ?? existing.status,
-        place_id !== undefined ? place_id : existing.place_id,
-        assignment_id !== undefined ? assignment_id : existing.assignment_id,
-        reservationId
-      );
-      const updated = db.prepare('SELECT * FROM reservations WHERE id = ?').get(reservationId);
-      broadcast(tripId, 'reservation:updated', { reservation: updated });
-      return ok({ reservation: updated });
+      const { reservation } = updateReservation(reservationId, tripId, {
+        title, type, reservation_time, location, confirmation_number, notes, status,
+        place_id: place_id !== undefined ? place_id ?? undefined : undefined,
+        assignment_id: assignment_id !== undefined ? assignment_id ?? undefined : undefined,
+      }, existing);
+      broadcast(tripId, 'reservation:updated', { reservation });
+      return ok({ reservation });
     }
   );
 
@@ -779,24 +623,10 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, itemId, name, category, total_price, persons, days, note }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM budget_items WHERE id = ? AND trip_id = ?').get(itemId, tripId) as Record<string, unknown> | undefined;
-      if (!existing) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
-      db.prepare(`
-        UPDATE budget_items SET
-          name = ?, category = ?, total_price = ?, persons = ?, days = ?, note = ?
-        WHERE id = ?
-      `).run(
-        name ?? existing.name,
-        category ?? existing.category,
-        total_price !== undefined ? total_price : existing.total_price,
-        persons !== undefined ? persons : existing.persons,
-        days !== undefined ? days : existing.days,
-        note !== undefined ? note : existing.note,
-        itemId
-      );
-      const updated = db.prepare('SELECT * FROM budget_items WHERE id = ?').get(itemId);
-      broadcast(tripId, 'budget:updated', { item: updated });
-      return ok({ item: updated });
+      const item = updateBudgetItem(itemId, tripId, { name, category, total_price, persons, days, note });
+      if (!item) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
+      broadcast(tripId, 'budget:updated', { item });
+      return ok({ item });
     }
   );
 
@@ -816,16 +646,11 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, itemId, name, category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM packing_items WHERE id = ? AND trip_id = ?').get(itemId, tripId) as Record<string, unknown> | undefined;
-      if (!existing) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
-      db.prepare('UPDATE packing_items SET name = ?, category = ? WHERE id = ?').run(
-        name ?? existing.name,
-        category ?? existing.category,
-        itemId
-      );
-      const updated = db.prepare('SELECT * FROM packing_items WHERE id = ?').get(itemId);
-      broadcast(tripId, 'packing:updated', { item: updated });
-      return ok({ item: updated });
+      const bodyKeys = ['name', 'category'].filter(k => k === 'name' ? name !== undefined : category !== undefined);
+      const item = updatePackingItem(tripId, itemId, { name, category }, bodyKeys);
+      if (!item) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
+      broadcast(tripId, 'packing:updated', { item });
+      return ok({ item });
     }
   );
 
@@ -844,13 +669,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, assignmentIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const day = db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(dayId, tripId);
-      if (!day) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
-      const update = db.prepare('UPDATE day_assignments SET order_index = ? WHERE id = ? AND day_id = ?');
-      const updateMany = db.transaction((ids: number[]) => {
-        ids.forEach((id, index) => update.run(index, id, dayId));
-      });
-      updateMany(assignmentIds);
+      if (!getDay(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
+      reorderAssignments(dayId, assignmentIds);
       broadcast(tripId, 'assignment:reordered', { dayId, assignmentIds });
       return ok({ success: true, dayId, order: assignmentIds });
     }
@@ -868,106 +688,9 @@ export function registerTools(server: McpServer, userId: number): void {
     },
     async ({ tripId }) => {
       if (!canAccessTrip(tripId, userId)) return noAccess();
-
-      const trip = db.prepare('SELECT * FROM trips WHERE id = ?').get(tripId) as Record<string, unknown> | undefined;
-      if (!trip) return noAccess();
-
-      // Members
-      const owner = db.prepare('SELECT id, username, avatar FROM users WHERE id = ?').get(trip.user_id as number);
-      const members = db.prepare(`
-        SELECT u.id, u.username, u.avatar, tm.added_at
-        FROM trip_members tm JOIN users u ON tm.user_id = u.id
-        WHERE tm.trip_id = ?
-      `).all(tripId);
-
-      // Days with assignments
-      const days = db.prepare('SELECT * FROM days WHERE trip_id = ? ORDER BY day_number ASC').all(tripId) as (Record<string, unknown> & { id: number })[];
-      const dayIds = days.map(d => d.id);
-      const assignmentsByDay: Record<number, unknown[]> = {};
-      if (dayIds.length > 0) {
-        const placeholders = dayIds.map(() => '?').join(',');
-        const assignments = db.prepare(`
-          SELECT da.id, da.day_id, da.order_index, da.notes as assignment_notes,
-            p.id as place_id, p.name, p.address, p.lat, p.lng,
-            COALESCE(da.assignment_time, p.place_time) as place_time,
-            c.name as category_name, c.icon as category_icon
-          FROM day_assignments da
-          JOIN places p ON da.place_id = p.id
-          LEFT JOIN categories c ON p.category_id = c.id
-          WHERE da.day_id IN (${placeholders})
-          ORDER BY da.order_index ASC
-        `).all(...dayIds) as (Record<string, unknown> & { day_id: number })[];
-        for (const a of assignments) {
-          if (!assignmentsByDay[a.day_id]) assignmentsByDay[a.day_id] = [];
-          assignmentsByDay[a.day_id].push(a);
-        }
-      }
-      // Day notes
-      const dayNotesByDay: Record<number, unknown[]> = {};
-      if (dayIds.length > 0) {
-        const placeholders = dayIds.map(() => '?').join(',');
-        const dayNotes = db.prepare(`
-          SELECT * FROM day_notes WHERE day_id IN (${placeholders}) ORDER BY sort_order ASC
-        `).all(...dayIds) as (Record<string, unknown> & { day_id: number })[];
-        for (const n of dayNotes) {
-          if (!dayNotesByDay[n.day_id]) dayNotesByDay[n.day_id] = [];
-          dayNotesByDay[n.day_id].push(n);
-        }
-      }
-
-      const daysWithAssignments = days.map(d => ({
-        ...d,
-        assignments: assignmentsByDay[d.id] || [],
-        notes: dayNotesByDay[d.id] || [],
-      }));
-
-      // Accommodations
-      const accommodations = db.prepare(`
-        SELECT da.*, p.name as place_name, ds.day_number as start_day_number, de.day_number as end_day_number
-        FROM day_accommodations da
-        JOIN places p ON da.place_id = p.id
-        LEFT JOIN days ds ON da.start_day_id = ds.id
-        LEFT JOIN days de ON da.end_day_id = de.id
-        WHERE da.trip_id = ?
-        ORDER BY ds.day_number ASC
-      `).all(tripId);
-
-      // Budget summary
-      const budgetStats = db.prepare(`
-        SELECT COUNT(*) as item_count, COALESCE(SUM(total_price), 0) as total
-        FROM budget_items WHERE trip_id = ?
-      `).get(tripId) as { item_count: number; total: number };
-
-      // Packing summary
-      const packingStats = db.prepare(`
-        SELECT COUNT(*) as total, SUM(CASE WHEN checked = 1 THEN 1 ELSE 0 END) as checked
-        FROM packing_items WHERE trip_id = ?
-      `).get(tripId) as { total: number; checked: number };
-
-      // Upcoming reservations (all, sorted by time)
-      const reservations = db.prepare(`
-        SELECT r.*, d.day_number
-        FROM reservations r
-        LEFT JOIN days d ON r.day_id = d.id
-        WHERE r.trip_id = ?
-        ORDER BY r.reservation_time ASC, r.created_at ASC
-      `).all(tripId);
-
-      // Collab notes
-      const collabNotes = db.prepare(
-        'SELECT * FROM collab_notes WHERE trip_id = ? ORDER BY pinned DESC, updated_at DESC'
-      ).all(tripId);
-
-      return ok({
-        trip,
-        members: { owner, collaborators: members },
-        days: daysWithAssignments,
-        accommodations,
-        budget: { ...budgetStats, currency: trip.currency },
-        packing: packingStats,
-        reservations,
-        collab_notes: collabNotes,
-      });
+      const summary = getTripSummary(tripId);
+      if (!summary) return noAccess();
+      return ok(summary);
     }
   );
 
@@ -987,10 +710,7 @@ export function registerTools(server: McpServer, userId: number): void {
     },
     async ({ name, lat, lng, country_code, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
-      const result = db.prepare(
-        'INSERT INTO bucket_list (user_id, name, lat, lng, country_code, notes) VALUES (?, ?, ?, ?, ?, ?)'
-      ).run(userId, name, lat ?? null, lng ?? null, country_code || null, notes || null);
-      const item = db.prepare('SELECT * FROM bucket_list WHERE id = ?').get(result.lastInsertRowid);
+      const item = createBucketItem(userId, { name, lat, lng, country_code, notes });
       return ok({ item });
     }
   );
@@ -1005,9 +725,8 @@ export function registerTools(server: McpServer, userId: number): void {
     },
     async ({ itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
-      const item = db.prepare('SELECT id FROM bucket_list WHERE id = ? AND user_id = ?').get(itemId, userId);
-      if (!item) return { content: [{ type: 'text' as const, text: 'Bucket list item not found.' }], isError: true };
-      db.prepare('DELETE FROM bucket_list WHERE id = ?').run(itemId);
+      const deleted = deleteBucketItem(userId, itemId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Bucket list item not found.' }], isError: true };
       return ok({ success: true });
     }
   );
@@ -1024,7 +743,7 @@ export function registerTools(server: McpServer, userId: number): void {
     },
     async ({ country_code }) => {
       if (isDemoUser(userId)) return demoDenied();
-      db.prepare('INSERT OR IGNORE INTO visited_countries (user_id, country_code) VALUES (?, ?)').run(userId, country_code.toUpperCase());
+      markCountryVisited(userId, country_code.toUpperCase());
       return ok({ success: true, country_code: country_code.toUpperCase() });
     }
   );
@@ -1039,7 +758,7 @@ export function registerTools(server: McpServer, userId: number): void {
     },
     async ({ country_code }) => {
       if (isDemoUser(userId)) return demoDenied();
-      db.prepare('DELETE FROM visited_countries WHERE user_id = ? AND country_code = ?').run(userId, country_code.toUpperCase());
+      unmarkCountryVisited(userId, country_code.toUpperCase());
       return ok({ success: true, country_code: country_code.toUpperCase() });
     }
   );
@@ -1061,11 +780,7 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, title, content, category, color }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const result = db.prepare(`
-        INSERT INTO collab_notes (trip_id, user_id, title, content, category, color)
-        VALUES (?, ?, ?, ?, ?, ?)
-      `).run(tripId, userId, title, content || null, category || 'General', color || '#6366f1');
-      const note = db.prepare('SELECT * FROM collab_notes WHERE id = ?').get(result.lastInsertRowid);
+      const note = createCollabNote(tripId, userId, { title, content, category, color });
       broadcast(tripId, 'collab:note:created', { note });
       return ok({ note });
     }
@@ -1088,26 +803,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, noteId, title, content, category, color, pinned }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM collab_notes WHERE id = ? AND trip_id = ?').get(noteId, tripId);
-      if (!existing) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
-      db.prepare(`
-        UPDATE collab_notes SET
-          title = CASE WHEN ? THEN ? ELSE title END,
-          content = CASE WHEN ? THEN ? ELSE content END,
-          category = CASE WHEN ? THEN ? ELSE category END,
-          color = CASE WHEN ? THEN ? ELSE color END,
-          pinned = CASE WHEN ? THEN ? ELSE pinned END,
-          updated_at = CURRENT_TIMESTAMP
-        WHERE id = ?
-      `).run(
-        title !== undefined ? 1 : 0, title !== undefined ? title : null,
-        content !== undefined ? 1 : 0, content !== undefined ? content : null,
-        category !== undefined ? 1 : 0, category !== undefined ? category : null,
-        color !== undefined ? 1 : 0, color !== undefined ? color : null,
-        pinned !== undefined ? 1 : 0, pinned !== undefined ? (pinned ? 1 : 0) : null,
-        noteId
-      );
-      const note = db.prepare('SELECT * FROM collab_notes WHERE id = ?').get(noteId);
+      const note = updateCollabNote(tripId, noteId, { title, content, category, color, pinned });
+      if (!note) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       broadcast(tripId, 'collab:note:updated', { note });
       return ok({ note });
     }
@@ -1125,19 +822,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, noteId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT id FROM collab_notes WHERE id = ? AND trip_id = ?').get(noteId, tripId);
-      if (!existing) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
-      const noteFiles = db.prepare('SELECT filename FROM trip_files WHERE note_id = ?').all(noteId) as { filename: string }[];
-      const uploadsDir = path.resolve(__dirname, '../../uploads');
-      for (const f of noteFiles) {
-        const resolved = path.resolve(path.join(uploadsDir, 'files', f.filename));
-        if (!resolved.startsWith(uploadsDir)) continue;
-        try { fs.unlinkSync(resolved); } catch {}
-      }
-      db.transaction(() => {
-        db.prepare('DELETE FROM trip_files WHERE note_id = ?').run(noteId);
-        db.prepare('DELETE FROM collab_notes WHERE id = ?').run(noteId);
-      })();
+      const deleted = deleteCollabNote(tripId, noteId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       broadcast(tripId, 'collab:note:deleted', { noteId });
       return ok({ success: true });
     }
@@ -1160,12 +846,8 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, text, time, icon }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const day = db.prepare('SELECT id FROM days WHERE id = ? AND trip_id = ?').get(dayId, tripId);
-      if (!day) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
-      const result = db.prepare(
-        'INSERT INTO day_notes (day_id, trip_id, text, time, icon, sort_order) VALUES (?, ?, ?, ?, ?, ?)'
-      ).run(dayId, tripId, text.trim(), time || null, icon || '📝', 9999);
-      const note = db.prepare('SELECT * FROM day_notes WHERE id = ?').get(result.lastInsertRowid);
+      if (!dayNoteExists(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
+      const note = createDayNote(dayId, tripId, text, time, icon);
       broadcast(tripId, 'dayNote:created', { dayId, note });
       return ok({ note });
     }
@@ -1187,17 +869,11 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, noteId, text, time, icon }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const existing = db.prepare('SELECT * FROM day_notes WHERE id = ? AND day_id = ? AND trip_id = ?').get(noteId, dayId, tripId) as Record<string, unknown> | undefined;
+      const existing = getDayNote(noteId, dayId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
-      db.prepare('UPDATE day_notes SET text = ?, time = ?, icon = ? WHERE id = ?').run(
-        text !== undefined ? text.trim() : existing.text,
-        time !== undefined ? time : existing.time,
-        icon ?? existing.icon,
-        noteId
-      );
-      const updated = db.prepare('SELECT * FROM day_notes WHERE id = ?').get(noteId);
-      broadcast(tripId, 'dayNote:updated', { dayId, note: updated });
-      return ok({ note: updated });
+      const note = updateDayNote(noteId, existing, { text, time: time !== undefined ? time : undefined, icon });
+      broadcast(tripId, 'dayNote:updated', { dayId, note });
+      return ok({ note });
     }
   );
 
@@ -1214,9 +890,9 @@ export function registerTools(server: McpServer, userId: number): void {
     async ({ tripId, dayId, noteId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const note = db.prepare('SELECT id FROM day_notes WHERE id = ? AND day_id = ? AND trip_id = ?').get(noteId, dayId, tripId);
+      const note = getDayNote(noteId, dayId, tripId);
       if (!note) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
-      db.prepare('DELETE FROM day_notes WHERE id = ?').run(noteId);
+      deleteDayNote(noteId);
       broadcast(tripId, 'dayNote:deleted', { noteId, dayId });
       return ok({ success: true });
     }

server/src/routes/admin.ts

@@ -3,6 +3,7 @@ import { authenticate, adminOnly } from '../middleware/auth';
 import { AuthRequest } from '../types';
 import { writeAudit, getClientIp, logInfo } from '../services/auditLog';
 import * as svc from '../services/adminService';
+import { getPreferencesMatrix, setAdminPreferences } from '../services/notificationPreferencesService';
 
 const router = express.Router();
 
@@ -132,6 +133,19 @@ router.get('/version-check', async (_req: Request, res: Response) => {
   res.json(await svc.checkVersion());
 });
 
+// ── Admin notification preferences ────────────────────────────────────────
+
+router.get('/notification-preferences', (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  res.json(getPreferencesMatrix(authReq.user.id, authReq.user.role, 'admin'));
+});
+
+router.put('/notification-preferences', (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  setAdminPreferences(authReq.user.id, req.body);
+  res.json(getPreferencesMatrix(authReq.user.id, authReq.user.role, 'admin'));
+});
+
 // ── Invite Tokens ──────────────────────────────────────────────────────────
 
 router.get('/invites', (_req: Request, res: Response) => {
@@ -313,38 +327,22 @@ router.post('/rotate-jwt-secret', (req: Request, res: Response) => {
 
 // ── Dev-only: test notification endpoints ──────────────────────────────────────
 if (process.env.NODE_ENV === 'development') {
-  const { createNotification } = require('../services/inAppNotifications');
+  const { send } = require('../services/notificationService');
 
-  router.post('/dev/test-notification', (req: Request, res: Response) => {
+  router.post('/dev/test-notification', async (req: Request, res: Response) => {
     const authReq = req as AuthRequest;
-    const { type, scope, target, title_key, text_key, title_params, text_params,
-            positive_text_key, negative_text_key, positive_callback, negative_callback,
-            navigate_text_key, navigate_target } = req.body;
-
-    const input: Record<string, unknown> = {
-      type: type || 'simple',
-      scope: scope || 'user',
-      target: target ?? authReq.user.id,
-      sender_id: authReq.user.id,
-      title_key: title_key || 'notifications.test.title',
-      title_params: title_params || {},
-      text_key: text_key || 'notifications.test.text',
-      text_params: text_params || {},
-    };
-
-    if (type === 'boolean') {
-      input.positive_text_key = positive_text_key || 'notifications.test.accept';
-      input.negative_text_key = negative_text_key || 'notifications.test.decline';
-      input.positive_callback = positive_callback || { action: 'test_approve', payload: {} };
-      input.negative_callback = negative_callback || { action: 'test_deny', payload: {} };
-    } else if (type === 'navigate') {
-      input.navigate_text_key = navigate_text_key || 'notifications.test.goThere';
-      input.navigate_target = navigate_target || '/dashboard';
-    }
+    const { event = 'trip_reminder', scope = 'user', targetId, params = {}, inApp } = req.body;
 
     try {
-      const ids = createNotification(input);
-      res.json({ success: true, notification_ids: ids });
+      await send({
+        event,
+        actorId: authReq.user.id,
+        scope,
+        targetId: targetId ?? authReq.user.id,
+        params: { actor: authReq.user.email, ...params },
+        inApp,
+      });
+      res.json({ success: true });
     } catch (err: any) {
       res.status(400).json({ error: err.message });
     }

server/src/routes/atlas.ts

@@ -6,6 +6,10 @@ import {
   getCountryPlaces,
   markCountryVisited,
   unmarkCountryVisited,
+  markRegionVisited,
+  unmarkRegionVisited,
+  getVisitedRegions,
+  getRegionGeo,
   listBucketList,
   createBucketItem,
   updateBucketItem,
@@ -21,6 +25,21 @@ router.get('/stats', async (req: Request, res: Response) => {
   res.json(data);
 });
 
+router.get('/regions', async (req: Request, res: Response) => {
+  const userId = (req as AuthRequest).user.id;
+  res.setHeader('Cache-Control', 'no-cache, no-store');
+  const data = await getVisitedRegions(userId);
+  res.json(data);
+});
+
+router.get('/regions/geo', async (req: Request, res: Response) => {
+  const countries = (req.query.countries as string || '').split(',').filter(Boolean);
+  if (countries.length === 0) return res.json({ type: 'FeatureCollection', features: [] });
+  const geo = await getRegionGeo(countries);
+  res.setHeader('Cache-Control', 'public, max-age=86400');
+  res.json(geo);
+});
+
 router.get('/country/:code', (req: Request, res: Response) => {
   const userId = (req as AuthRequest).user.id;
   const code = req.params.code.toUpperCase();
@@ -39,6 +58,20 @@ router.delete('/country/:code/mark', (req: Request, res: Response) => {
   res.json({ success: true });
 });
 
+router.post('/region/:code/mark', (req: Request, res: Response) => {
+  const userId = (req as AuthRequest).user.id;
+  const { name, country_code } = req.body;
+  if (!name || !country_code) return res.status(400).json({ error: 'name and country_code are required' });
+  markRegionVisited(userId, req.params.code.toUpperCase(), name, country_code.toUpperCase());
+  res.json({ success: true });
+});
+
+router.delete('/region/:code/mark', (req: Request, res: Response) => {
+  const userId = (req as AuthRequest).user.id;
+  unmarkRegionVisited(userId, req.params.code.toUpperCase());
+  res.json({ success: true });
+});
+
 // ── Bucket List ─────────────────────────────────────────────────────────────
 
 router.get('/bucket-list', (req: Request, res: Response) => {

server/src/routes/auth.ts

@@ -260,8 +260,8 @@ router.post('/mfa/setup', authenticate, (req: Request, res: Response) => {
   const result = setupMfa(authReq.user.id, authReq.user.email);
   if (result.error) return res.status(result.status!).json({ error: result.error });
   result.qrPromise!
-    .then((qr_data_url: string) => {
-      res.json({ secret: result.secret, otpauth_url: result.otpauth_url, qr_data_url });
+    .then((qr_svg: string) => {
+      res.json({ secret: result.secret, otpauth_url: result.otpauth_url, qr_svg });
     })
     .catch((err: unknown) => {
       console.error('[MFA] QR code generation error:', err);
@@ -317,9 +317,9 @@ router.post('/ws-token', authenticate, (req: Request, res: Response) => {
 // Short-lived single-use token for direct resource URLs
 router.post('/resource-token', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
-  const result = createResourceToken(authReq.user.id, req.body.purpose);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json({ token: result.token });
+  const token = createResourceToken(authReq.user.id, req.body.purpose);
+  if (!token) return res.status(503).json({ error: 'Service unavailable' });
+  res.json(token);
 });
 
 export default router;

server/src/routes/budget.ts

@@ -3,6 +3,7 @@ import { authenticate } from '../middleware/auth';
 import { broadcast } from '../websocket';
 import { checkPermission } from '../services/permissions';
 import { AuthRequest } from '../types';
+import { db } from '../db/database';
 import {
   verifyTripAccess,
   listBudgetItems,
@@ -68,6 +69,22 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
   const updated = updateBudgetItem(id, tripId, req.body);
   if (!updated) return res.status(404).json({ error: 'Budget item not found' });
 
+  // Sync price back to linked reservation
+  if (updated.reservation_id && req.body.total_price !== undefined) {
+    try {
+      const reservation = db.prepare('SELECT id, metadata FROM reservations WHERE id = ? AND trip_id = ?').get(updated.reservation_id, tripId) as { id: number; metadata: string | null } | undefined;
+      if (reservation) {
+        const meta = reservation.metadata ? JSON.parse(reservation.metadata) : {};
+        meta.price = String(updated.total_price);
+        db.prepare('UPDATE reservations SET metadata = ? WHERE id = ?').run(JSON.stringify(meta), reservation.id);
+        const updatedRes = db.prepare('SELECT * FROM reservations WHERE id = ?').get(reservation.id);
+        broadcast(tripId, 'reservation:updated', { reservation: updatedRes }, req.headers['x-socket-id'] as string);
+      }
+    } catch (err) {
+      console.error('[budget] Failed to sync price to reservation:', err);
+    }
+  }
+
   res.json({ item: updated });
   broadcast(tripId, 'budget:updated', { item: updated }, req.headers['x-socket-id'] as string);
 });

server/src/routes/collab.ts

@@ -79,9 +79,9 @@ router.post('/notes', authenticate, (req: Request, res: Response) => {
   res.status(201).json({ note: formatted });
   broadcast(tripId, 'collab:note:created', { note: formatted }, req.headers['x-socket-id'] as string);
 
-  import('../services/notifications').then(({ notifyTripMembers }) => {
+  import('../services/notificationService').then(({ send }) => {
     const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-    notifyTripMembers(Number(tripId), authReq.user.id, 'collab_message', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email }).catch(() => {});
+    send({ event: 'collab_message', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, tripId: String(tripId) } }).catch(() => {});
   });
 });
 
@@ -256,10 +256,10 @@ router.post('/messages', authenticate, validateStringLengths({ text: 5000 }), (r
   broadcast(tripId, 'collab:message:created', { message: result.message }, req.headers['x-socket-id'] as string);
 
   // Notify trip members about new chat message
-  import('../services/notifications').then(({ notifyTripMembers }) => {
+  import('../services/notificationService').then(({ send }) => {
     const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
     const preview = text.trim().length > 80 ? text.trim().substring(0, 80) + '...' : text.trim();
-    notifyTripMembers(Number(tripId), authReq.user.id, 'collab_message', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, preview }).catch(() => {});
+    send({ event: 'collab_message', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, preview, tripId: String(tripId) } }).catch(() => {});
   });
 });
 

server/src/routes/immich.ts

@@ -1,234 +0,0 @@
-import express, { Request, Response, NextFunction } from 'express';
-import { db, canAccessTrip } from '../db/database';
-import { authenticate } from '../middleware/auth';
-import { broadcast } from '../websocket';
-import { AuthRequest } from '../types';
-import { consumeEphemeralToken } from '../services/ephemeralTokens';
-import { getClientIp } from '../services/auditLog';
-import {
-  getConnectionSettings,
-  saveImmichSettings,
-  testConnection,
-  getConnectionStatus,
-  browseTimeline,
-  searchPhotos,
-  listTripPhotos,
-  addTripPhotos,
-  removeTripPhoto,
-  togglePhotoSharing,
-  getAssetInfo,
-  proxyThumbnail,
-  proxyOriginal,
-  isValidAssetId,
-  canAccessUserPhoto,
-  listAlbums,
-  listAlbumLinks,
-  createAlbumLink,
-  deleteAlbumLink,
-  syncAlbumAssets,
-} from '../services/immichService';
-
-const router = express.Router();
-
-// ── Dual auth middleware (JWT or ephemeral token for <img> src) ─────────────
-
-function authFromQuery(req: Request, res: Response, next: NextFunction) {
-  const queryToken = req.query.token as string | undefined;
-  if (queryToken) {
-    const userId = consumeEphemeralToken(queryToken, 'immich');
-    if (!userId) return res.status(401).send('Invalid or expired token');
-    const user = db.prepare('SELECT id, username, email, role, mfa_enabled FROM users WHERE id = ?').get(userId) as any;
-    if (!user) return res.status(401).send('User not found');
-    (req as AuthRequest).user = user;
-    return next();
-  }
-  return (authenticate as any)(req, res, next);
-}
-
-// ── Immich Connection Settings ─────────────────────────────────────────────
-
-router.get('/settings', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  res.json(getConnectionSettings(authReq.user.id));
-});
-
-router.put('/settings', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { immich_url, immich_api_key } = req.body;
-  const result = await saveImmichSettings(authReq.user.id, immich_url, immich_api_key, getClientIp(req));
-  if (!result.success) return res.status(400).json({ error: result.error });
-  if (result.warning) return res.json({ success: true, warning: result.warning });
-  res.json({ success: true });
-});
-
-router.get('/status', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  res.json(await getConnectionStatus(authReq.user.id));
-});
-
-router.post('/test', authenticate, async (req: Request, res: Response) => {
-  const { immich_url, immich_api_key } = req.body;
-  if (!immich_url || !immich_api_key) return res.json({ connected: false, error: 'URL and API key required' });
-  res.json(await testConnection(immich_url, immich_api_key));
-});
-
-// ── Browse Immich Library (for photo picker) ───────────────────────────────
-
-router.get('/browse', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const result = await browseTimeline(authReq.user.id);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json({ buckets: result.buckets });
-});
-
-router.post('/search', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { from, to } = req.body;
-  const result = await searchPhotos(authReq.user.id, from, to);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json({ assets: result.assets });
-});
-
-// ── Trip Photos (selected by user) ────────────────────────────────────────
-
-router.get('/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { tripId } = req.params;
-  if (!canAccessTrip(tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  res.json({ photos: listTripPhotos(tripId, authReq.user.id) });
-});
-
-router.post('/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { tripId } = req.params;
-  if (!canAccessTrip(tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  const { asset_ids, shared = true } = req.body;
-
-  if (!Array.isArray(asset_ids) || asset_ids.length === 0) {
-    return res.status(400).json({ error: 'asset_ids required' });
-  }
-
-  const added = addTripPhotos(tripId, authReq.user.id, asset_ids, shared);
-  res.json({ success: true, added });
-  broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
-
-  // Notify trip members about shared photos
-  if (shared && added > 0) {
-    import('../services/notifications').then(({ notifyTripMembers }) => {
-      const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-      notifyTripMembers(Number(tripId), authReq.user.id, 'photos_shared', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, count: String(added) }).catch(() => {});
-    });
-  }
-});
-
-router.delete('/trips/:tripId/photos/:assetId', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  if (!canAccessTrip(req.params.tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  removeTripPhoto(req.params.tripId, authReq.user.id, req.params.assetId);
-  res.json({ success: true });
-  broadcast(req.params.tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
-});
-
-router.put('/trips/:tripId/photos/:assetId/sharing', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  if (!canAccessTrip(req.params.tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  const { shared } = req.body;
-  togglePhotoSharing(req.params.tripId, authReq.user.id, req.params.assetId, shared);
-  res.json({ success: true });
-  broadcast(req.params.tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
-});
-
-// ── Asset Details ──────────────────────────────────────────────────────────
-
-router.get('/assets/:assetId/info', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { assetId } = req.params;
-  if (!isValidAssetId(assetId)) return res.status(400).json({ error: 'Invalid asset ID' });
-  const queryUserId = req.query.userId ? Number(req.query.userId) : undefined;
-  const ownerUserId = queryUserId && queryUserId !== authReq.user.id ? queryUserId : undefined;
-  if (ownerUserId && !canAccessUserPhoto(authReq.user.id, ownerUserId, assetId)) {
-    return res.status(403).json({ error: 'Forbidden' });
-  }
-  const result = await getAssetInfo(authReq.user.id, assetId, ownerUserId);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json(result.data);
-});
-
-// ── Proxy Immich Assets ────────────────────────────────────────────────────
-
-router.get('/assets/:assetId/thumbnail', authFromQuery, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { assetId } = req.params;
-  if (!isValidAssetId(assetId)) return res.status(400).send('Invalid asset ID');
-  const queryUserId = req.query.userId ? Number(req.query.userId) : undefined;
-  const ownerUserId = queryUserId && queryUserId !== authReq.user.id ? queryUserId : undefined;
-  if (ownerUserId && !canAccessUserPhoto(authReq.user.id, ownerUserId, assetId)) {
-    return res.status(403).send('Forbidden');
-  }
-  const result = await proxyThumbnail(authReq.user.id, assetId, ownerUserId);
-  if (result.error) return res.status(result.status!).send(result.error);
-  res.set('Content-Type', result.contentType!);
-  res.set('Cache-Control', 'public, max-age=86400');
-  res.send(result.buffer);
-});
-
-router.get('/assets/:assetId/original', authFromQuery, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { assetId } = req.params;
-  if (!isValidAssetId(assetId)) return res.status(400).send('Invalid asset ID');
-  const queryUserId = req.query.userId ? Number(req.query.userId) : undefined;
-  const ownerUserId = queryUserId && queryUserId !== authReq.user.id ? queryUserId : undefined;
-  if (ownerUserId && !canAccessUserPhoto(authReq.user.id, ownerUserId, assetId)) {
-    return res.status(403).send('Forbidden');
-  }
-  const result = await proxyOriginal(authReq.user.id, assetId, ownerUserId);
-  if (result.error) return res.status(result.status!).send(result.error);
-  res.set('Content-Type', result.contentType!);
-  res.set('Cache-Control', 'public, max-age=86400');
-  res.send(result.buffer);
-});
-
-// ── Album Linking ──────────────────────────────────────────────────────────
-
-router.get('/albums', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const result = await listAlbums(authReq.user.id);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json({ albums: result.albums });
-});
-
-router.get('/trips/:tripId/album-links', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  if (!canAccessTrip(req.params.tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  res.json({ links: listAlbumLinks(req.params.tripId) });
-});
-
-router.post('/trips/:tripId/album-links', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { tripId } = req.params;
-  if (!canAccessTrip(tripId, authReq.user.id)) return res.status(404).json({ error: 'Trip not found' });
-  const { album_id, album_name } = req.body;
-  if (!album_id) return res.status(400).json({ error: 'album_id required' });
-  const result = createAlbumLink(tripId, authReq.user.id, album_id, album_name);
-  if (!result.success) return res.status(400).json({ error: result.error });
-  res.json({ success: true });
-});
-
-router.delete('/trips/:tripId/album-links/:linkId', authenticate, (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  deleteAlbumLink(req.params.linkId, req.params.tripId, authReq.user.id);
-  res.json({ success: true });
-});
-
-router.post('/trips/:tripId/album-links/:linkId/sync', authenticate, async (req: Request, res: Response) => {
-  const authReq = req as AuthRequest;
-  const { tripId, linkId } = req.params;
-  const result = await syncAlbumAssets(tripId, linkId, authReq.user.id);
-  if (result.error) return res.status(result.status!).json({ error: result.error });
-  res.json({ success: true, added: result.added, total: result.total });
-  if (result.added! > 0) {
-    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
-  }
-});
-
-export default router;

server/src/routes/memories/immich.ts

@@ -0,0 +1,128 @@
+import express, { Request, Response } from 'express';
+import { canAccessTrip } from '../../db/database';
+import { authenticate } from '../../middleware/auth';
+import { broadcast } from '../../websocket';
+import { AuthRequest } from '../../types';
+import { getClientIp } from '../../services/auditLog';
+import {
+  getConnectionSettings,
+  saveImmichSettings,
+  testConnection,
+  getConnectionStatus,
+  browseTimeline,
+  searchPhotos,
+  streamImmichAsset,
+  listAlbums,
+  syncAlbumAssets,
+  getAssetInfo,
+  isValidAssetId,
+} from '../../services/memories/immichService';
+import { canAccessUserPhoto } from '../../services/memories/helpersService';
+
+const router = express.Router();
+
+// ── Immich Connection Settings ─────────────────────────────────────────────
+
+router.get('/settings', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  res.json(getConnectionSettings(authReq.user.id));
+});
+
+router.put('/settings', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { immich_url, immich_api_key } = req.body;
+  const result = await saveImmichSettings(authReq.user.id, immich_url, immich_api_key, getClientIp(req));
+  if (!result.success) return res.status(400).json({ error: result.error });
+  if (result.warning) return res.json({ success: true, warning: result.warning });
+  res.json({ success: true });
+});
+
+router.get('/status', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  res.json(await getConnectionStatus(authReq.user.id));
+});
+
+router.post('/test', authenticate, async (req: Request, res: Response) => {
+  const { immich_url, immich_api_key } = req.body;
+  if (!immich_url || !immich_api_key) return res.json({ connected: false, error: 'URL and API key required' });
+  res.json(await testConnection(immich_url, immich_api_key));
+});
+
+// ── Browse Immich Library (for photo picker) ───────────────────────────────
+
+router.get('/browse', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const result = await browseTimeline(authReq.user.id);
+  if (result.error) return res.status(result.status!).json({ error: result.error });
+  res.json({ buckets: result.buckets });
+});
+
+router.post('/search', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { from, to } = req.body;
+  const result = await searchPhotos(authReq.user.id, from, to);
+  if (result.error) return res.status(result.status!).json({ error: result.error });
+  res.json({ assets: result.assets });
+});
+
+// ── Asset Details ──────────────────────────────────────────────────────────
+
+router.get('/assets/:tripId/:assetId/:ownerId/info', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, assetId, ownerId } = req.params;
+
+  if (!isValidAssetId(assetId)) return res.status(400).json({ error: 'Invalid asset ID' });
+  if (!canAccessUserPhoto(authReq.user.id, Number(ownerId), tripId, assetId, 'immich')) {
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+  const result = await getAssetInfo(authReq.user.id, assetId, Number(ownerId));
+  if (result.error) return res.status(result.status!).json({ error: result.error });
+  res.json(result.data);
+});
+
+// ── Proxy Immich Assets ────────────────────────────────────────────────────
+
+router.get('/assets/:tripId/:assetId/:ownerId/thumbnail', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, assetId, ownerId } = req.params;
+
+  if (!isValidAssetId(assetId)) return res.status(400).json({ error: 'Invalid asset ID' });
+  if (!canAccessUserPhoto(authReq.user.id, Number(ownerId), tripId, assetId, 'immich')) {
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+  await streamImmichAsset(res, authReq.user.id, assetId, 'thumbnail', Number(ownerId));
+});
+
+router.get('/assets/:tripId/:assetId/:ownerId/original', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, assetId, ownerId } = req.params;
+
+  if (!isValidAssetId(assetId)) return res.status(400).json({ error: 'Invalid asset ID' });
+  if (!canAccessUserPhoto(authReq.user.id, Number(ownerId), tripId, assetId, 'immich')) {
+    return res.status(403).json({ error: 'Forbidden' });
+  }
+  await streamImmichAsset(res, authReq.user.id, assetId, 'original', Number(ownerId));
+});
+
+// ── Album Linking ──────────────────────────────────────────────────────────
+
+router.get('/albums', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const result = await listAlbums(authReq.user.id);
+  if (result.error) return res.status(result.status!).json({ error: result.error });
+  res.json({ albums: result.albums });
+});
+
+router.post('/trips/:tripId/album-links/:linkId/sync', authenticate, async (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, linkId } = req.params;
+  const sid = req.headers['x-socket-id'] as string;
+  const result = await syncAlbumAssets(tripId, linkId, authReq.user.id, sid);
+  if (result.error) return res.status(result.status!).json({ error: result.error });
+  res.json({ success: true, added: result.added, total: result.total });
+  if (result.added! > 0) {
+    broadcast(tripId, 'memories:updated', { userId: authReq.user.id }, req.headers['x-socket-id'] as string);
+  }
+});
+
+export default router;

server/src/routes/memories/synology.ts

@@ -0,0 +1,133 @@
+import express, { Request, Response } from 'express';
+import { authenticate } from '../../middleware/auth';
+import { AuthRequest } from '../../types';
+import {
+    getSynologySettings,
+    updateSynologySettings,
+    getSynologyStatus,
+    testSynologyConnection,
+    listSynologyAlbums,
+    syncSynologyAlbumLink,
+    searchSynologyPhotos,
+    getSynologyAssetInfo,
+    streamSynologyAsset,
+} from '../../services/memories/synologyService';
+import { canAccessUserPhoto, handleServiceResult, fail, success } from '../../services/memories/helpersService';
+
+const router = express.Router();
+
+function _parseStringBodyField(value: unknown): string {
+    return String(value ?? '').trim();
+}
+
+function _parseNumberBodyField(value: unknown, fallback: number): number {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+router.get('/settings', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    handleServiceResult(res, await getSynologySettings(authReq.user.id));
+});
+
+router.put('/settings', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const body = req.body as Record<string, unknown>;
+    const synology_url = _parseStringBodyField(body.synology_url);
+    const synology_username = _parseStringBodyField(body.synology_username);
+    const synology_password = _parseStringBodyField(body.synology_password);
+
+    if (!synology_url || !synology_username) {
+        handleServiceResult(res, fail('URL and username are required', 400));
+    }
+    else {
+        handleServiceResult(res, await updateSynologySettings(authReq.user.id, synology_url, synology_username, synology_password));
+    }
+});
+
+router.get('/status', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    handleServiceResult(res, await getSynologyStatus(authReq.user.id));
+});
+
+router.post('/test', authenticate, async (req: Request, res: Response) => {
+    const body = req.body as Record<string, unknown>;
+    const synology_url = _parseStringBodyField(body.synology_url);
+    const synology_username = _parseStringBodyField(body.synology_username);
+    const synology_password = _parseStringBodyField(body.synology_password);
+
+    if (!synology_url || !synology_username || !synology_password) {
+        const missingFields: string[] = [];
+        if (!synology_url) missingFields.push('URL');
+        if (!synology_username) missingFields.push('Username');
+        if (!synology_password) missingFields.push('Password');
+        handleServiceResult(res, success({ connected: false, error: `${missingFields.join(', ')} ${missingFields.length > 1 ? 'are' : 'is'} required` }));
+    }
+    else{
+        handleServiceResult(res, await testSynologyConnection(synology_url, synology_username, synology_password));
+    }
+});
+
+router.get('/albums', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    handleServiceResult(res, await listSynologyAlbums(authReq.user.id));
+});
+
+router.post('/trips/:tripId/album-links/:linkId/sync', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId, linkId } = req.params;
+    const sid = req.headers['x-socket-id'] as string;
+
+    handleServiceResult(res, await syncSynologyAlbumLink(authReq.user.id, tripId, linkId, sid));
+});
+
+router.post('/search', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const body = req.body as Record<string, unknown>;
+    const from = _parseStringBodyField(body.from);
+    const to = _parseStringBodyField(body.to);
+    const offset = _parseNumberBodyField(body.offset, 0);
+    const limit = _parseNumberBodyField(body.limit, 100);
+
+    handleServiceResult(res, await searchSynologyPhotos(
+        authReq.user.id,
+        from || undefined,
+        to || undefined,
+        offset,
+        limit,
+    ));
+});
+
+router.get('/assets/:tripId/:photoId/:ownerId/info', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId, photoId, ownerId } = req.params;
+
+    if (!canAccessUserPhoto(authReq.user.id, Number(ownerId), tripId, photoId, 'synologyphotos')) {
+        handleServiceResult(res, fail('You don\'t have access to this photo', 403));
+    }
+    else {
+        handleServiceResult(res, await getSynologyAssetInfo(authReq.user.id, photoId, Number(ownerId)));
+    }
+});
+
+router.get('/assets/:tripId/:photoId/:ownerId/:kind', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId, photoId, ownerId, kind } = req.params;
+    const VALID_SIZES = ['sm', 'm', 'xl'] as const;
+    const rawSize = String(req.query.size ?? 'sm');
+    const size = VALID_SIZES.includes(rawSize as any) ? rawSize : 'sm';
+
+    if (kind !== 'thumbnail' && kind !== 'original') {
+        return handleServiceResult(res, fail('Invalid asset kind', 400));
+    }
+
+    if (!canAccessUserPhoto(authReq.user.id, Number(ownerId), tripId, photoId, 'synologyphotos')) {
+        handleServiceResult(res, fail('You don\'t have access to this photo', 403));
+    }
+    else{
+        await streamSynologyAsset(res, authReq.user.id, Number(ownerId), photoId, kind as 'thumbnail' | 'original', String(size));
+    }
+
+});
+
+export default router;

server/src/routes/memories/unified.ts

@@ -0,0 +1,104 @@
+import express, { Request, Response } from 'express';
+import { authenticate } from '../../middleware/auth';
+import { AuthRequest } from '../../types';
+import {
+    listTripPhotos,
+    listTripAlbumLinks,
+    createTripAlbumLink,
+    removeAlbumLink,
+    addTripPhotos,
+    removeTripPhoto,
+    setTripPhotoSharing,
+} from '../../services/memories/unifiedService';
+import immichRouter from './immich';
+import synologyRouter from './synology';
+import { Selection } from '../../services/memories/helpersService';
+
+const router = express.Router();
+
+router.use('/immich', immichRouter);
+router.use('/synologyphotos', synologyRouter);
+
+//------------------------------------------------
+// routes for managing photos linked to trip
+
+router.get('/unified/trips/:tripId/photos', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+        const result = listTripPhotos(tripId, authReq.user.id);
+        if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+        res.json({ photos: result.data });
+});
+
+router.post('/unified/trips/:tripId/photos', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const sid = req.headers['x-socket-id'] as string;
+    const selections: Selection[] = Array.isArray(req.body?.selections) ? req.body.selections : [];
+    
+    const shared = req.body?.shared === undefined ? true : !!req.body?.shared;
+    const result = await addTripPhotos(
+        tripId,
+        authReq.user.id,
+        shared,
+        selections,
+        sid,
+    );
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+
+    res.json({ success: true, added: result.data.added });
+});
+
+router.put('/unified/trips/:tripId/photos/sharing', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const result = await setTripPhotoSharing(
+        tripId,
+        authReq.user.id,
+        req.body?.provider,
+        req.body?.asset_id,
+        req.body?.shared,
+    );
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+    res.json({ success: true });
+});
+
+router.delete('/unified/trips/:tripId/photos', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const result = await removeTripPhoto(tripId, authReq.user.id, req.body?.provider, req.body?.asset_id);
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+    res.json({ success: true });
+});
+
+//------------------------------
+// routes for managing album links
+
+router.get('/unified/trips/:tripId/album-links', authenticate, (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const result = listTripAlbumLinks(tripId, authReq.user.id);
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+    res.json({ links: result.data });
+});
+
+router.post('/unified/trips/:tripId/album-links', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId } = req.params;
+    const result = createTripAlbumLink(tripId, authReq.user.id, req.body?.provider, req.body?.album_id, req.body?.album_name);
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+    res.json({ success: true });
+});
+
+router.delete('/unified/trips/:tripId/album-links/:linkId', authenticate, async (req: Request, res: Response) => {
+    const authReq = req as AuthRequest;
+    const { tripId, linkId } = req.params;
+    const result = removeAlbumLink(tripId, linkId, authReq.user.id);
+    if ('error' in result) return res.status(result.error.status).json({ error: result.error.message });
+    res.json({ success: true });
+});
+
+
+
+
+export default router;

server/src/routes/notifications.ts

@@ -1,7 +1,7 @@
 import express, { Request, Response } from 'express';
 import { authenticate } from '../middleware/auth';
 import { AuthRequest } from '../types';
-import { testSmtp, testWebhook } from '../services/notifications';
+import { testSmtp, testWebhook, getAdminWebhookUrl, getUserWebhookUrl } from '../services/notifications';
 import {
   getNotifications,
   getUnreadCount,
@@ -12,22 +12,19 @@ import {
   deleteAll,
   respondToBoolean,
 } from '../services/inAppNotifications';
-import * as prefsService from '../services/notificationPreferencesService';
+import { getPreferencesMatrix, setPreferences } from '../services/notificationPreferencesService';
 
 const router = express.Router();
 
 router.get('/preferences', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
-  res.json({ preferences: prefsService.getPreferences(authReq.user.id) });
+  res.json(getPreferencesMatrix(authReq.user.id, authReq.user.role, 'user'));
 });
 
 router.put('/preferences', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
-  const { notify_trip_invite, notify_booking_change, notify_trip_reminder, notify_webhook } = req.body;
-  const preferences = prefsService.updatePreferences(authReq.user.id, {
-    notify_trip_invite, notify_booking_change, notify_trip_reminder, notify_webhook
-  });
-  res.json({ preferences });
+  setPreferences(authReq.user.id, req.body);
+  res.json(getPreferencesMatrix(authReq.user.id, authReq.user.role, 'user'));
 });
 
 router.post('/test-smtp', authenticate, async (req: Request, res: Response) => {
@@ -39,8 +36,15 @@ router.post('/test-smtp', authenticate, async (req: Request, res: Response) => {
 
 router.post('/test-webhook', authenticate, async (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
-  if (authReq.user.role !== 'admin') return res.status(403).json({ error: 'Admin only' });
-  res.json(await testWebhook());
+  let { url } = req.body;
+  if (!url || url === '••••••••') {
+    url = getUserWebhookUrl(authReq.user.id);
+    if (!url && authReq.user.role === 'admin') url = getAdminWebhookUrl();
+    if (!url) return res.status(400).json({ error: 'No webhook URL configured' });
+  }
+  if (typeof url !== 'string') return res.status(400).json({ error: 'url must be a string' });
+  try { new URL(url); } catch { return res.status(400).json({ error: 'Invalid URL' }); }
+  res.json(await testWebhook(url));
 });
 
 // ── In-app notifications ──────────────────────────────────────────────────────

server/src/routes/packing.ts

@@ -16,6 +16,8 @@ import {
   updateBag,
   deleteBag,
   applyTemplate,
+  saveAsTemplate,
+  setBagMembers,
   getCategoryAssignees,
   updateCategoryAssignees,
   reorderItems,
@@ -92,7 +94,7 @@ router.put('/reorder', authenticate, (req: Request, res: Response) => {
 router.put('/:id', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { tripId, id } = req.params;
-  const { name, checked, category, weight_grams, bag_id } = req.body;
+  const { name, checked, category, weight_grams, bag_id, quantity } = req.body;
 
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -100,7 +102,7 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
   if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
     return res.status(403).json({ error: 'No permission' });
 
-  const updated = updateItem(tripId, id, { name, checked, category, weight_grams, bag_id }, Object.keys(req.body));
+  const updated = updateItem(tripId, id, { name, checked, category, weight_grams, bag_id, quantity }, Object.keys(req.body));
   if (!updated) return res.status(404).json({ error: 'Item not found' });
 
   res.json({ item: updated });
@@ -151,12 +153,12 @@ router.post('/bags', authenticate, (req: Request, res: Response) => {
 router.put('/bags/:bagId', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { tripId, bagId } = req.params;
-  const { name, color, weight_limit_grams } = req.body;
+  const { name, color, weight_limit_grams, user_id } = req.body;
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
   if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
     return res.status(403).json({ error: 'No permission' });
-  const updated = updateBag(tripId, bagId, { name, color, weight_limit_grams });
+  const updated = updateBag(tripId, bagId, { name, color, weight_limit_grams, user_id }, Object.keys(req.body));
   if (!updated) return res.status(404).json({ error: 'Bag not found' });
   res.json({ bag: updated });
   broadcast(tripId, 'packing:bag-updated', { bag: updated }, req.headers['x-socket-id'] as string);
@@ -193,6 +195,40 @@ router.post('/apply-template/:templateId', authenticate, (req: Request, res: Res
   broadcast(tripId, 'packing:template-applied', { items: added }, req.headers['x-socket-id'] as string);
 });
 
+// ── Bag Members ────────────────────────────────────────────────────────────
+
+router.put('/bags/:bagId/members', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, bagId } = req.params;
+  const { user_ids } = req.body;
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+  const members = setBagMembers(tripId, bagId, Array.isArray(user_ids) ? user_ids : []);
+  if (!members) return res.status(404).json({ error: 'Bag not found' });
+  res.json({ members });
+  broadcast(tripId, 'packing:bag-members-updated', { bagId: Number(bagId), members }, req.headers['x-socket-id'] as string);
+});
+
+// ── Save as Template ───────────────────────────────────────────────────────
+
+router.post('/save-as-template', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId } = req.params;
+  const { name } = req.body;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!name?.trim()) return res.status(400).json({ error: 'Template name is required' });
+
+  const template = saveAsTemplate(tripId, authReq.user.id, name.trim());
+  if (!template) return res.status(400).json({ error: 'No items to save' });
+
+  res.status(201).json({ template });
+});
+
 // ── Category assignees ──────────────────────────────────────────────────────
 
 router.get('/category-assignees', authenticate, (req: Request, res: Response) => {
@@ -224,13 +260,10 @@ router.put('/category-assignees/:categoryName', authenticate, (req: Request, res
 
   // Notify newly assigned users
   if (Array.isArray(user_ids) && user_ids.length > 0) {
-    import('../services/notifications').then(({ notify }) => {
+    import('../services/notificationService').then(({ send }) => {
       const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-      for (const uid of user_ids) {
-        if (uid !== authReq.user.id) {
-          notify({ userId: uid, event: 'packing_tagged', params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, category: cat } }).catch(() => {});
-        }
-      }
+      // Use trip scope so the service resolves recipients — actor is excluded automatically
+      send({ event: 'packing_tagged', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, category: cat, tripId: String(tripId) } }).catch(() => {});
     });
   }
 });

server/src/routes/reservations.ts

@@ -30,7 +30,7 @@ router.get('/', authenticate, (req: Request, res: Response) => {
 router.post('/', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { tripId } = req.params;
-  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry } = req.body;
 
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -50,13 +50,30 @@ router.post('/', authenticate, (req: Request, res: Response) => {
     broadcast(tripId, 'accommodation:created', {}, req.headers['x-socket-id'] as string);
   }
 
+  // Auto-create budget entry if price was provided
+  if (create_budget_entry && create_budget_entry.total_price > 0) {
+    try {
+      const { createBudgetItem } = require('../services/budgetService');
+      const budgetItem = createBudgetItem(tripId, {
+        name: title,
+        category: create_budget_entry.category || type || 'Other',
+        total_price: create_budget_entry.total_price,
+      });
+      db.prepare('UPDATE budget_items SET reservation_id = ? WHERE id = ?').run(reservation.id, budgetItem.id);
+      budgetItem.reservation_id = reservation.id;
+      broadcast(tripId, 'budget:created', { item: budgetItem }, req.headers['x-socket-id'] as string);
+    } catch (err) {
+      console.error('[reservations] Failed to create budget entry:', err);
+    }
+  }
+
   res.status(201).json({ reservation });
   broadcast(tripId, 'reservation:created', { reservation }, req.headers['x-socket-id'] as string);
 
   // Notify trip members about new booking
-  import('../services/notifications').then(({ notifyTripMembers }) => {
+  import('../services/notificationService').then(({ send }) => {
     const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-    notifyTripMembers(Number(tripId), authReq.user.id, 'booking_change', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: title, type: type || 'booking' }).catch(() => {});
+    send({ event: 'booking_change', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: title, type: type || 'booking', tripId: String(tripId) } }).catch(() => {});
   });
 });
 
@@ -83,7 +100,7 @@ router.put('/positions', authenticate, (req: Request, res: Response) => {
 router.put('/:id', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { tripId, id } = req.params;
-  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry } = req.body;
 
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -104,12 +121,50 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
     broadcast(tripId, 'accommodation:updated', {}, req.headers['x-socket-id'] as string);
   }
 
+  // Remove linked budget entry if price was cleared
+  if (!create_budget_entry || !create_budget_entry.total_price) {
+    const linked = db.prepare('SELECT id FROM budget_items WHERE trip_id = ? AND reservation_id = ?').get(tripId, id) as { id: number } | undefined;
+    if (linked) {
+      const { deleteBudgetItem } = require('../services/budgetService');
+      deleteBudgetItem(linked.id, tripId);
+      broadcast(tripId, 'budget:deleted', { id: linked.id }, req.headers['x-socket-id'] as string);
+    }
+  }
+
+  // Auto-create or update budget entry if price was provided
+  if (create_budget_entry && create_budget_entry.total_price > 0) {
+    try {
+      const { createBudgetItem, updateBudgetItem } = require('../services/budgetService');
+      const itemName = title || current.title;
+      const existing = db.prepare('SELECT id FROM budget_items WHERE trip_id = ? AND reservation_id = ?').get(tripId, id) as { id: number } | undefined;
+      if (existing) {
+        const updated = updateBudgetItem(existing.id, tripId, {
+          name: itemName,
+          category: create_budget_entry.category || type || current.type || 'Other',
+          total_price: create_budget_entry.total_price,
+        });
+        broadcast(tripId, 'budget:updated', { item: updated }, req.headers['x-socket-id'] as string);
+      } else {
+        const budgetItem = createBudgetItem(tripId, {
+          name: itemName,
+          category: create_budget_entry.category || type || current.type || 'Other',
+          total_price: create_budget_entry.total_price,
+        });
+        db.prepare('UPDATE budget_items SET reservation_id = ? WHERE id = ?').run(id, budgetItem.id);
+        budgetItem.reservation_id = Number(id);
+        broadcast(tripId, 'budget:created', { item: budgetItem }, req.headers['x-socket-id'] as string);
+      }
+    } catch (err) {
+      console.error('[reservations] Failed to create/update budget entry:', err);
+    }
+  }
+
   res.json({ reservation });
   broadcast(tripId, 'reservation:updated', { reservation }, req.headers['x-socket-id'] as string);
 
-  import('../services/notifications').then(({ notifyTripMembers }) => {
+  import('../services/notificationService').then(({ send }) => {
     const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-    notifyTripMembers(Number(tripId), authReq.user.id, 'booking_change', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: title || current.title, type: type || current.type || 'booking' }).catch(() => {});
+    send({ event: 'booking_change', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: title || current.title, type: type || current.type || 'booking', tripId: String(tripId) } }).catch(() => {});
   });
 });
 
@@ -133,9 +188,9 @@ router.delete('/:id', authenticate, (req: Request, res: Response) => {
   res.json({ success: true });
   broadcast(tripId, 'reservation:deleted', { reservationId: Number(id) }, req.headers['x-socket-id'] as string);
 
-  import('../services/notifications').then(({ notifyTripMembers }) => {
+  import('../services/notificationService').then(({ send }) => {
     const tripInfo = db.prepare('SELECT title FROM trips WHERE id = ?').get(tripId) as { title: string } | undefined;
-    notifyTripMembers(Number(tripId), authReq.user.id, 'booking_change', { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: reservation.title, type: reservation.type || 'booking' }).catch(() => {});
+    send({ event: 'booking_change', actorId: authReq.user.id, scope: 'trip', targetId: Number(tripId), params: { trip: tripInfo?.title || 'Untitled', actor: authReq.user.email, booking: reservation.title, type: reservation.type || 'booking', tripId: String(tripId) } }).catch(() => {});
   });
 });
 

server/src/routes/settings.ts

@@ -14,6 +14,7 @@ router.put('/', authenticate, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   const { key, value } = req.body;
   if (!key) return res.status(400).json({ error: 'Key is required' });
+  if (value === '••••••••') return res.json({ success: true, key, unchanged: true });
   settingsService.upsertSetting(authReq.user.id, key, value);
   res.json({ success: true, key, value });
 });

server/src/routes/todo.ts

@@ -0,0 +1,127 @@
+import express, { Request, Response } from 'express';
+import { authenticate } from '../middleware/auth';
+import { broadcast } from '../websocket';
+import { checkPermission } from '../services/permissions';
+import { AuthRequest } from '../types';
+import {
+  verifyTripAccess,
+  listItems,
+  createItem,
+  updateItem,
+  deleteItem,
+  getCategoryAssignees,
+  updateCategoryAssignees,
+  reorderItems,
+} from '../services/todoService';
+
+const router = express.Router({ mergeParams: true });
+
+router.get('/', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId } = req.params;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  const items = listItems(tripId);
+  res.json({ items });
+});
+
+router.post('/', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId } = req.params;
+  const { name, category, due_date, description, assigned_user_id, priority } = req.body;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  if (!name) return res.status(400).json({ error: 'Item name is required' });
+
+  const item = createItem(tripId, { name, category, due_date, description, assigned_user_id, priority });
+  res.status(201).json({ item });
+  broadcast(tripId, 'todo:created', { item }, req.headers['x-socket-id'] as string);
+});
+
+router.put('/reorder', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId } = req.params;
+  const { orderedIds } = req.body;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  reorderItems(tripId, orderedIds);
+  res.json({ success: true });
+});
+
+router.put('/:id', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, id } = req.params;
+  const { name, checked, category, due_date, description, assigned_user_id, priority } = req.body;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  const updated = updateItem(tripId, id, { name, checked, category, due_date, description, assigned_user_id, priority }, Object.keys(req.body));
+  if (!updated) return res.status(404).json({ error: 'Item not found' });
+
+  res.json({ item: updated });
+  broadcast(tripId, 'todo:updated', { item: updated }, req.headers['x-socket-id'] as string);
+});
+
+router.delete('/:id', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, id } = req.params;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  if (!deleteItem(tripId, id)) return res.status(404).json({ error: 'Item not found' });
+
+  res.json({ success: true });
+  broadcast(tripId, 'todo:deleted', { itemId: Number(id) }, req.headers['x-socket-id'] as string);
+});
+
+// ── Category assignees ──────────────────────────────────────────────────────
+
+router.get('/category-assignees', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId } = req.params;
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  const assignees = getCategoryAssignees(tripId);
+  res.json({ assignees });
+});
+
+router.put('/category-assignees/:categoryName', authenticate, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  const { tripId, categoryName } = req.params;
+  const { user_ids } = req.body;
+
+  const trip = verifyTripAccess(tripId, authReq.user.id);
+  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+
+  if (!checkPermission('packing_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  const cat = decodeURIComponent(categoryName);
+  const rows = updateCategoryAssignees(tripId, cat, user_ids);
+
+  res.json({ assignees: rows });
+  broadcast(tripId, 'todo:assignees', { category: cat, assignees: rows }, req.headers['x-socket-id'] as string);
+});
+
+export default router;

server/src/routes/trips.ts

@@ -74,7 +74,7 @@ router.post('/', authenticate, (req: Request, res: Response) => {
   if (!checkPermission('trip_create', authReq.user.role, null, authReq.user.id, false))
     return res.status(403).json({ error: 'No permission to create trips' });
 
-  const { title, description, currency, reminder_days } = req.body;
+  const { title, description, currency, reminder_days, day_count } = req.body;
   if (!title) return res.status(400).json({ error: 'Title is required' });
 
   const toDateStr = (d: Date) => d.toISOString().slice(0, 10);
@@ -84,19 +84,18 @@ router.post('/', authenticate, (req: Request, res: Response) => {
   let end_date: string | null = req.body.end_date || null;
 
   if (!start_date && !end_date) {
-    const tomorrow = addDays(new Date(), 1);
-    start_date = toDateStr(tomorrow);
-    end_date = toDateStr(addDays(tomorrow, 7));
+    // No dates: create dateless placeholder days (day_count or default 7)
   } else if (start_date && !end_date) {
-    end_date = toDateStr(addDays(new Date(start_date), 7));
+    end_date = toDateStr(addDays(new Date(start_date), 6));
   } else if (!start_date && end_date) {
-    start_date = toDateStr(addDays(new Date(end_date), -7));
+    start_date = toDateStr(addDays(new Date(end_date), -6));
   }
 
-  if (new Date(end_date!) < new Date(start_date!))
+  if (start_date && end_date && new Date(end_date) < new Date(start_date))
     return res.status(400).json({ error: 'End date must be after start date' });
 
-  const { trip, tripId, reminderDays } = createTrip(authReq.user.id, { title, description, start_date, end_date, currency, reminder_days });
+  const parsedDayCount = day_count ? Math.min(Math.max(Number(day_count) || 7, 1), 365) : undefined;
+  const { trip, tripId, reminderDays } = createTrip(authReq.user.id, { title, description, start_date, end_date, currency, reminder_days, day_count: parsedDayCount });
 
   writeAudit({ userId: authReq.user.id, action: 'trip.create', ip: getClientIp(req), details: { tripId, title, reminder_days: reminderDays === 0 ? 'none' : `${reminderDays} days` } });
   if (reminderDays > 0) {
@@ -136,7 +135,7 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
       return res.status(403).json({ error: 'No permission to change cover image' });
   }
   // General edit check (title, description, dates, currency, reminder_days)
-  const editFields = ['title', 'description', 'start_date', 'end_date', 'currency', 'reminder_days'];
+  const editFields = ['title', 'description', 'start_date', 'end_date', 'currency', 'reminder_days', 'day_count'];
   if (editFields.some(f => req.body[f] !== undefined)) {
     if (!checkPermission('trip_edit', authReq.user.role, tripOwnerId, authReq.user.id, isMember))
       return res.status(403).json({ error: 'No permission to edit this trip' });
@@ -412,8 +411,8 @@ router.post('/:id/members', authenticate, (req: Request, res: Response) => {
     const result = addMember(req.params.id, identifier, tripOwnerId, authReq.user.id);
 
     // Notify invited user
-    import('../services/notifications').then(({ notify }) => {
-      notify({ userId: result.targetUserId, event: 'trip_invite', params: { trip: result.tripTitle, actor: authReq.user.email, invitee: result.member.email } }).catch(() => {});
+    import('../services/notificationService').then(({ send }) => {
+      send({ event: 'trip_invite', actorId: authReq.user.id, scope: 'user', targetId: result.targetUserId, params: { trip: result.tripTitle, actor: authReq.user.email, invitee: result.member.email, tripId: String(req.params.id) } }).catch(() => {});
     });
 
     res.status(201).json({ member: result.member });

server/src/scheduler.ts

@@ -163,22 +163,23 @@ function startTripReminders(): void {
   try {
     const { db } = require('./db/database');
     const getSetting = (key: string) => (db.prepare('SELECT value FROM app_settings WHERE key = ?').get(key) as { value: string } | undefined)?.value;
-    const channel = getSetting('notification_channel') || 'none';
     const reminderEnabled = getSetting('notify_trip_reminder') !== 'false';
-    const hasSmtp = !!(getSetting('smtp_host') || '').trim();
-    const hasWebhook = !!(getSetting('notification_webhook_url') || '').trim();
-    const channelReady = (channel === 'email' && hasSmtp) || (channel === 'webhook' && hasWebhook);
+    const channelsRaw = getSetting('notification_channels') || getSetting('notification_channel') || 'none';
+    const activeChannels = channelsRaw === 'none' ? [] : channelsRaw.split(',').map((c: string) => c.trim());
+    const hasEmail = activeChannels.includes('email') && !!(getSetting('smtp_host') || '').trim();
+    const hasWebhook = activeChannels.includes('webhook');
+    const channelReady = hasEmail || hasWebhook;
 
     if (!channelReady || !reminderEnabled) {
       const { logInfo: li } = require('./services/auditLog');
-      const reason = !channelReady ? `no ${channel === 'none' ? 'notification channel' : channel} configuration` : 'trip reminders disabled in settings';
+      const reason = !channelReady ? 'no notification channels configured' : 'trip reminders disabled in settings';
       li(`Trip reminders: disabled (${reason})`);
       return;
     }
 
     const tripCount = (db.prepare('SELECT COUNT(*) as c FROM trips WHERE reminder_days > 0 AND start_date IS NOT NULL').get() as { c: number }).c;
     const { logInfo: liSetup } = require('./services/auditLog');
-    liSetup(`Trip reminders: enabled via ${channel}${tripCount > 0 ? `, ${tripCount} trip(s) with active reminders` : ''}`);
+    liSetup(`Trip reminders: enabled via [${activeChannels.join(',')}]${tripCount > 0 ? `, ${tripCount} trip(s) with active reminders` : ''}`);
   } catch {
     return;
   }
@@ -187,7 +188,7 @@ function startTripReminders(): void {
   reminderTask = cron.schedule('0 9 * * *', async () => {
     try {
       const { db } = require('./db/database');
-      const { notifyTripMembers } = require('./services/notifications');
+      const { send } = require('./services/notificationService');
 
       const trips = db.prepare(`
         SELECT t.id, t.title, t.user_id, t.reminder_days FROM trips t
@@ -197,7 +198,7 @@ function startTripReminders(): void {
       `).all() as { id: number; title: string; user_id: number; reminder_days: number }[];
 
       for (const trip of trips) {
-        await notifyTripMembers(trip.id, 0, 'trip_reminder', { trip: trip.title }).catch(() => {});
+        await send({ event: 'trip_reminder', actorId: null, scope: 'trip', targetId: trip.id, params: { trip: trip.title, tripId: String(trip.id) } }).catch(() => {});
       }
 
       const { logInfo: li } = require('./services/auditLog');
@@ -211,10 +212,29 @@ function startTripReminders(): void {
   }, { timezone: tz });
 }
 
+// Version check: daily at 9 AM — notify admins if a new TREK release is available
+let versionCheckTask: ScheduledTask | null = null;
+
+function startVersionCheck(): void {
+  if (versionCheckTask) { versionCheckTask.stop(); versionCheckTask = null; }
+
+  const tz = process.env.TZ || 'UTC';
+  versionCheckTask = cron.schedule('0 9 * * *', async () => {
+    try {
+      const { checkAndNotifyVersion } = require('./services/adminService');
+      await checkAndNotifyVersion();
+    } catch (err: unknown) {
+      const { logError: le } = require('./services/auditLog');
+      le(`Version check: ${err instanceof Error ? err.message : err}`);
+    }
+  }, { timezone: tz });
+}
+
 function stop(): void {
   if (currentTask) { currentTask.stop(); currentTask = null; }
   if (demoTask) { demoTask.stop(); demoTask = null; }
   if (reminderTask) { reminderTask.stop(); reminderTask = null; }
+  if (versionCheckTask) { versionCheckTask.stop(); versionCheckTask = null; }
 }
 
-export { start, stop, startDemoReset, startTripReminders, loadSettings, saveSettings, VALID_INTERVALS };
+export { start, stop, startDemoReset, startTripReminders, startVersionCheck, loadSettings, saveSettings, VALID_INTERVALS };

server/src/services/adminService.ts

@@ -9,6 +9,8 @@ import { maybe_encrypt_api_key, decrypt_api_key } from './apiKeyCrypto';
 import { getAllPermissions, savePermissions as savePerms, PERMISSION_ACTIONS } from './permissions';
 import { revokeUserSessions } from '../mcp';
 import { validatePassword } from './passwordPolicy';
+import { getPhotoProviderConfig } from './memories/helpersService';
+import { send as sendNotification } from './notificationService';
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
@@ -312,6 +314,28 @@ export async function checkVersion() {
   }
 }
 
+export async function checkAndNotifyVersion(): Promise<void> {
+  try {
+    const result = await checkVersion();
+    if (!result.update_available) return;
+
+    const lastNotified = (db.prepare('SELECT value FROM app_settings WHERE key = ?').get('last_notified_version') as { value: string } | undefined)?.value;
+    if (lastNotified === result.latest) return;
+
+    db.prepare('INSERT OR REPLACE INTO app_settings (key, value) VALUES (?, ?)').run('last_notified_version', result.latest);
+
+    await sendNotification({
+      event: 'version_available',
+      actorId: null,
+      scope: 'admin',
+      targetId: 0,
+      params: { version: result.latest as string },
+    });
+  } catch {
+    // Silently ignore — version check is non-critical
+  }
+}
+
 // ── Invite Tokens ──────────────────────────────────────────────────────────
 
 export function listInvites() {
@@ -463,19 +487,98 @@ export function deleteTemplateItem(itemId: string) {
 
 // ── Addons ─────────────────────────────────────────────────────────────────
 
+export function isAddonEnabled(addonId: string): boolean {
+  const addon = db.prepare('SELECT enabled FROM addons WHERE id = ?').get(addonId) as { enabled: number } | undefined;
+  return !!addon?.enabled;
+}
+
 export function listAddons() {
   const addons = db.prepare('SELECT * FROM addons ORDER BY sort_order, id').all() as Addon[];
-  return addons.map(a => ({ ...a, enabled: !!a.enabled, config: JSON.parse(a.config || '{}') }));
+  const providers = db.prepare(`
+    SELECT id, name, description, icon, enabled, sort_order
+    FROM photo_providers
+    ORDER BY sort_order, id
+  `).all() as Array<{ id: string; name: string; description?: string | null; icon: string; enabled: number; sort_order: number }>;
+  const fields = db.prepare(`
+    SELECT provider_id, field_key, label, input_type, placeholder, required, secret, settings_key, payload_key, sort_order
+    FROM photo_provider_fields
+    ORDER BY sort_order, id
+  `).all() as Array<{
+    provider_id: string;
+    field_key: string;
+    label: string;
+    input_type: string;
+    placeholder?: string | null;
+    required: number;
+    secret: number;
+    settings_key?: string | null;
+    payload_key?: string | null;
+    sort_order: number;
+  }>;
+  const fieldsByProvider = new Map<string, typeof fields>();
+  for (const field of fields) {
+    const arr = fieldsByProvider.get(field.provider_id) || [];
+    arr.push(field);
+    fieldsByProvider.set(field.provider_id, arr);
+  }
+
+  return [
+    ...addons.map(a => ({ ...a, enabled: !!a.enabled, config: JSON.parse(a.config || '{}') })),
+    ...providers.map(p => ({
+      id: p.id,
+      name: p.name,
+      description: p.description,
+      type: 'photo_provider',
+      icon: p.icon,
+      enabled: !!p.enabled,
+      config: getPhotoProviderConfig(p.id),
+      fields: (fieldsByProvider.get(p.id) || []).map(f => ({
+        key: f.field_key,
+        label: f.label,
+        input_type: f.input_type,
+        placeholder: f.placeholder || '',
+        required: !!f.required,
+        secret: !!f.secret,
+        settings_key: f.settings_key || null,
+        payload_key: f.payload_key || null,
+        sort_order: f.sort_order,
+      })),
+      sort_order: p.sort_order,
+    })),
+  ];
 }
 
 export function updateAddon(id: string, data: { enabled?: boolean; config?: Record<string, unknown> }) {
-  const addon = db.prepare('SELECT * FROM addons WHERE id = ?').get(id);
-  if (!addon) return { error: 'Addon not found', status: 404 };
-  if (data.enabled !== undefined) db.prepare('UPDATE addons SET enabled = ? WHERE id = ?').run(data.enabled ? 1 : 0, id);
-  if (data.config !== undefined) db.prepare('UPDATE addons SET config = ? WHERE id = ?').run(JSON.stringify(data.config), id);
-  const updated = db.prepare('SELECT * FROM addons WHERE id = ?').get(id) as Addon;
+  const addon = db.prepare('SELECT * FROM addons WHERE id = ?').get(id) as Addon | undefined;
+  const provider = db.prepare('SELECT * FROM photo_providers WHERE id = ?').get(id) as { id: string; name: string; description?: string | null; icon: string; enabled: number; sort_order: number } | undefined;
+  if (!addon && !provider) return { error: 'Addon not found', status: 404 };
+
+  if (addon) {
+    if (data.enabled !== undefined) db.prepare('UPDATE addons SET enabled = ? WHERE id = ?').run(data.enabled ? 1 : 0, id);
+    if (data.config !== undefined) db.prepare('UPDATE addons SET config = ? WHERE id = ?').run(JSON.stringify(data.config), id);
+  } else {
+    if (data.enabled !== undefined) db.prepare('UPDATE photo_providers SET enabled = ? WHERE id = ?').run(data.enabled ? 1 : 0, id);
+  }
+
+  const updatedAddon = db.prepare('SELECT * FROM addons WHERE id = ?').get(id) as Addon | undefined;
+  const updatedProvider = db.prepare('SELECT * FROM photo_providers WHERE id = ?').get(id) as { id: string; name: string; description?: string | null; icon: string; enabled: number; sort_order: number } | undefined;
+  const updated = updatedAddon
+    ? { ...updatedAddon, enabled: !!updatedAddon.enabled, config: JSON.parse(updatedAddon.config || '{}') }
+    : updatedProvider
+      ? {
+        id: updatedProvider.id,
+        name: updatedProvider.name,
+        description: updatedProvider.description,
+        type: 'photo_provider',
+        icon: updatedProvider.icon,
+        enabled: !!updatedProvider.enabled,
+        config: getPhotoProviderConfig(updatedProvider.id),
+        sort_order: updatedProvider.sort_order,
+      }
+      : null;
+
   return {
-    addon: { ...updated, enabled: !!updated.enabled, config: JSON.parse(updated.config || '{}') },
+    addon: updated,
     auditDetails: { enabled: data.enabled !== undefined ? !!data.enabled : undefined, config_changed: data.config !== undefined },
   };
 }

server/src/services/assignmentService.ts

@@ -35,8 +35,11 @@ export function getAssignmentWithPlace(assignmentId: number | bigint) {
   return {
     id: a.id,
     day_id: a.day_id,
+    place_id: a.place_id,
     order_index: a.order_index,
     notes: a.notes,
+    assignment_time: a.assignment_time ?? null,
+    assignment_end_time: a.assignment_end_time ?? null,
     participants,
     created_at: a.created_at,
     place: {

server/src/services/atlasService.ts

@@ -1,7 +1,38 @@
-import fetch from 'node-fetch';
 import { db } from '../db/database';
 import { Trip, Place } from '../types';
 
+// ── Admin-1 GeoJSON cache (sub-national regions) ─────────────────────────
+
+let admin1GeoCache: any = null;
+let admin1GeoLoading: Promise<any> | null = null;
+
+async function loadAdmin1Geo(): Promise<any> {
+  if (admin1GeoCache) return admin1GeoCache;
+  if (admin1GeoLoading) return admin1GeoLoading;
+  admin1GeoLoading = fetch(
+    'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_1_states_provinces.geojson',
+    { headers: { 'User-Agent': 'TREK Travel Planner' } }
+  ).then(r => r.json()).then(geo => {
+    admin1GeoCache = geo;
+    admin1GeoLoading = null;
+    console.log(`[Atlas] Cached admin-1 GeoJSON: ${geo.features?.length || 0} features`);
+    return geo;
+  }).catch(err => {
+    admin1GeoLoading = null;
+    console.error('[Atlas] Failed to load admin-1 GeoJSON:', err);
+    return null;
+  });
+  return admin1GeoLoading;
+}
+
+export async function getRegionGeo(countryCodes: string[]): Promise<any> {
+  const geo = await loadAdmin1Geo();
+  if (!geo) return { type: 'FeatureCollection', features: [] };
+  const codes = new Set(countryCodes.map(c => c.toUpperCase()));
+  const features = geo.features.filter((f: any) => codes.has(f.properties?.iso_a2?.toUpperCase()));
+  return { type: 'FeatureCollection', features };
+}
+
 // ── Geocode cache ───────────────────────────────────────────────────────────
 
 const geocodeCache = new Map<string, string | null>();
@@ -327,12 +358,138 @@ export function getCountryPlaces(userId: number, code: string) {
 
 // ── Mark / unmark country ───────────────────────────────────────────────────
 
+export function listVisitedCountries(userId: number): { country_code: string; created_at: string }[] {
+  return db.prepare(
+    'SELECT country_code, created_at FROM visited_countries WHERE user_id = ? ORDER BY created_at DESC'
+  ).all(userId) as { country_code: string; created_at: string }[];
+}
+
 export function markCountryVisited(userId: number, code: string): void {
   db.prepare('INSERT OR IGNORE INTO visited_countries (user_id, country_code) VALUES (?, ?)').run(userId, code);
 }
 
 export function unmarkCountryVisited(userId: number, code: string): void {
   db.prepare('DELETE FROM visited_countries WHERE user_id = ? AND country_code = ?').run(userId, code);
+  db.prepare('DELETE FROM visited_regions WHERE user_id = ? AND country_code = ?').run(userId, code);
+}
+
+// ── Mark / unmark region ────────────────────────────────────────────────────
+
+export function listManuallyVisitedRegions(userId: number): { region_code: string; region_name: string; country_code: string }[] {
+  return db.prepare(
+    'SELECT region_code, region_name, country_code FROM visited_regions WHERE user_id = ? ORDER BY created_at DESC'
+  ).all(userId) as { region_code: string; region_name: string; country_code: string }[];
+}
+
+export function markRegionVisited(userId: number, regionCode: string, regionName: string, countryCode: string): void {
+  db.prepare('INSERT OR IGNORE INTO visited_regions (user_id, region_code, region_name, country_code) VALUES (?, ?, ?, ?)').run(userId, regionCode, regionName, countryCode);
+  // Auto-mark parent country if not already visited
+  db.prepare('INSERT OR IGNORE INTO visited_countries (user_id, country_code) VALUES (?, ?)').run(userId, countryCode);
+}
+
+export function unmarkRegionVisited(userId: number, regionCode: string): void {
+  const region = db.prepare('SELECT country_code FROM visited_regions WHERE user_id = ? AND region_code = ?').get(userId, regionCode) as { country_code: string } | undefined;
+  db.prepare('DELETE FROM visited_regions WHERE user_id = ? AND region_code = ?').run(userId, regionCode);
+  if (region) {
+    const remaining = db.prepare('SELECT COUNT(*) as count FROM visited_regions WHERE user_id = ? AND country_code = ?').get(userId, region.country_code) as { count: number };
+    if (remaining.count === 0) {
+      db.prepare('DELETE FROM visited_countries WHERE user_id = ? AND country_code = ?').run(userId, region.country_code);
+    }
+  }
+}
+
+// ── Sub-national region resolution ────────────────────────────────────────
+
+interface RegionInfo { country_code: string; region_code: string; region_name: string }
+
+const regionCache = new Map<string, RegionInfo | null>();
+
+async function reverseGeocodeRegion(lat: number, lng: number): Promise<RegionInfo | null> {
+  const key = roundKey(lat, lng);
+  if (regionCache.has(key)) return regionCache.get(key)!;
+  try {
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&zoom=8&accept-language=en`,
+      { headers: { 'User-Agent': 'TREK Travel Planner' } }
+    );
+    if (!res.ok) return null;
+    const data = await res.json() as { address?: Record<string, string> };
+    const countryCode = data.address?.country_code?.toUpperCase() || null;
+    // Try finest ISO level first (lvl6 = departments/provinces), then lvl5, then lvl4 (states/regions)
+    let regionCode = data.address?.['ISO3166-2-lvl6'] || data.address?.['ISO3166-2-lvl5'] || data.address?.['ISO3166-2-lvl4'] || null;
+    // Normalize: FR-75C → FR-75 (strip trailing letter suffixes for GeoJSON compatibility)
+    if (regionCode && /^[A-Z]{2}-\d+[A-Z]$/i.test(regionCode)) {
+      regionCode = regionCode.replace(/[A-Z]$/i, '');
+    }
+    const regionName = data.address?.county || data.address?.state || data.address?.province || data.address?.region || data.address?.city || null;
+    if (!countryCode || !regionName) { regionCache.set(key, null); return null; }
+    const info: RegionInfo = {
+      country_code: countryCode,
+      region_code: regionCode || `${countryCode}-${regionName.substring(0, 3).toUpperCase()}`,
+      region_name: regionName,
+    };
+    regionCache.set(key, info);
+    return info;
+  } catch {
+    return null;
+  }
+}
+
+export async function getVisitedRegions(userId: number): Promise<{ regions: Record<string, { code: string; name: string; placeCount: number }[]> }> {
+  const trips = getUserTrips(userId);
+  const tripIds = trips.map(t => t.id);
+  const places = getPlacesForTrips(tripIds);
+
+  // Check DB cache first
+  const placeIds = places.filter(p => p.lat && p.lng).map(p => p.id);
+  const cached = placeIds.length > 0
+    ? db.prepare(`SELECT * FROM place_regions WHERE place_id IN (${placeIds.map(() => '?').join(',')})`).all(...placeIds) as { place_id: number; country_code: string; region_code: string; region_name: string }[]
+    : [];
+  const cachedMap = new Map(cached.map(c => [c.place_id, c]));
+
+  // Resolve uncached places (rate-limited to avoid hammering Nominatim)
+  const uncached = places.filter(p => p.lat && p.lng && !cachedMap.has(p.id));
+  const insertStmt = db.prepare('INSERT OR REPLACE INTO place_regions (place_id, country_code, region_code, region_name) VALUES (?, ?, ?, ?)');
+
+  for (const place of uncached) {
+    const info = await reverseGeocodeRegion(place.lat!, place.lng!);
+    if (info) {
+      insertStmt.run(place.id, info.country_code, info.region_code, info.region_name);
+      cachedMap.set(place.id, { place_id: place.id, ...info });
+    }
+    // Nominatim rate limit: 1 req/sec
+    if (uncached.indexOf(place) < uncached.length - 1) {
+      await new Promise(r => setTimeout(r, 1100));
+    }
+  }
+
+  // Group by country → regions with place counts
+  const regionMap: Record<string, Map<string, { code: string; name: string; placeCount: number }>> = {};
+  for (const [, entry] of cachedMap) {
+    if (!regionMap[entry.country_code]) regionMap[entry.country_code] = new Map();
+    const existing = regionMap[entry.country_code].get(entry.region_code);
+    if (existing) {
+      existing.placeCount++;
+    } else {
+      regionMap[entry.country_code].set(entry.region_code, { code: entry.region_code, name: entry.region_name, placeCount: 1 });
+    }
+  }
+
+  const result: Record<string, { code: string; name: string; placeCount: number; manuallyMarked?: boolean }[]> = {};
+  for (const [country, regions] of Object.entries(regionMap)) {
+    result[country] = [...regions.values()];
+  }
+
+  // Merge manually marked regions
+  const manualRegions = listManuallyVisitedRegions(userId);
+  for (const r of manualRegions) {
+    if (!result[r.country_code]) result[r.country_code] = [];
+    if (!result[r.country_code].find(x => x.code === r.region_code)) {
+      result[r.country_code].push({ code: r.region_code, name: r.region_name, placeCount: 0, manuallyMarked: true });
+    }
+  }
+
+  return { regions: result };
 }
 
 // ── Bucket list CRUD ────────────────────────────────────────────────────────

server/src/services/authService.ts

@@ -3,7 +3,6 @@ import jwt from 'jsonwebtoken';
 import crypto from 'crypto';
 import path from 'path';
 import fs from 'fs';
-import fetch from 'node-fetch';
 import { authenticator } from 'otplib';
 import QRCode from 'qrcode';
 import { randomBytes, createHash } from 'crypto';
@@ -31,9 +30,7 @@ const MFA_BACKUP_CODE_COUNT = 10;
 const ADMIN_SETTINGS_KEYS = [
   'allow_registration', 'allowed_file_types', 'require_mfa',
   'smtp_host', 'smtp_port', 'smtp_user', 'smtp_pass', 'smtp_from', 'smtp_skip_tls_verify',
-  'notification_webhook_url', 'notification_channel',
-  'notify_trip_invite', 'notify_booking_change', 'notify_trip_reminder',
-  'notify_vacay_invite', 'notify_photos_shared', 'notify_collab_message', 'notify_packing_tagged',
+  'notification_channels', 'admin_webhook_url',
 ];
 
 const avatarDir = path.join(__dirname, '../../uploads/avatars');
@@ -195,8 +192,10 @@ export function getAppConfig(authenticatedUser: { id: number } | null) {
   const notifChannel = (db.prepare("SELECT value FROM app_settings WHERE key = 'notification_channel'").get() as { value: string } | undefined)?.value || 'none';
   const tripReminderSetting = (db.prepare("SELECT value FROM app_settings WHERE key = 'notify_trip_reminder'").get() as { value: string } | undefined)?.value;
   const hasSmtpHost = !!(process.env.SMTP_HOST || (db.prepare("SELECT value FROM app_settings WHERE key = 'smtp_host'").get() as { value: string } | undefined)?.value);
-  const hasWebhookUrl = !!(process.env.NOTIFICATION_WEBHOOK_URL || (db.prepare("SELECT value FROM app_settings WHERE key = 'notification_webhook_url'").get() as { value: string } | undefined)?.value);
-  const channelConfigured = (notifChannel === 'email' && hasSmtpHost) || (notifChannel === 'webhook' && hasWebhookUrl);
+  const notifChannelsRaw = (db.prepare("SELECT value FROM app_settings WHERE key = 'notification_channels'").get() as { value: string } | undefined)?.value || notifChannel;
+  const activeChannels = notifChannelsRaw === 'none' ? [] : notifChannelsRaw.split(',').map((c: string) => c.trim()).filter(Boolean);
+  const hasWebhookEnabled = activeChannels.includes('webhook');
+  const channelConfigured = (activeChannels.includes('email') && hasSmtpHost) || hasWebhookEnabled;
   const tripRemindersEnabled = channelConfigured && tripReminderSetting !== 'false';
   const setupComplete = userCount > 0 && !(db.prepare("SELECT id FROM users WHERE role = 'admin' AND must_change_password = 1 LIMIT 1").get());
 
@@ -216,6 +215,8 @@ export function getAppConfig(authenticatedUser: { id: number } | null) {
     demo_password: isDemo ? 'demo12345' : undefined,
     timezone: process.env.TZ || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
     notification_channel: notifChannel,
+    notification_channels: activeChannels,
+    available_channels: { email: hasSmtpHost, webhook: hasWebhookEnabled, inapp: true },
     trip_reminders_enabled: tripRemindersEnabled,
     permissions: authenticatedUser ? getAllPermissions() : undefined,
     dev_mode: process.env.NODE_ENV === 'development',
@@ -676,7 +677,7 @@ export function getAppSettings(userId: number): { error?: string; status?: numbe
   const result: Record<string, string> = {};
   for (const key of ADMIN_SETTINGS_KEYS) {
     const row = db.prepare("SELECT value FROM app_settings WHERE key = ?").get(key) as { value: string } | undefined;
-    if (row) result[key] = key === 'smtp_pass' ? '••••••••' : row.value;
+    if (row) result[key] = (key === 'smtp_pass' || key === 'admin_webhook_url') ? '••••••••' : row.value;
   }
   return { data: result };
 }
@@ -714,6 +715,8 @@ export function updateAppSettings(
       }
       if (key === 'smtp_pass' && val === '••••••••') continue;
       if (key === 'smtp_pass') val = encrypt_api_key(val);
+      if (key === 'admin_webhook_url' && val === '••••••••') continue;
+      if (key === 'admin_webhook_url' && val) val = maybe_encrypt_api_key(val) ?? val;
       db.prepare("INSERT OR REPLACE INTO app_settings (key, value) VALUES (?, ?)").run(key, val);
     }
   }
@@ -722,11 +725,9 @@ export function updateAppSettings(
 
   const summary: Record<string, unknown> = {};
   const smtpChanged = changedKeys.some(k => k.startsWith('smtp_'));
-  const eventsChanged = changedKeys.some(k => k.startsWith('notify_'));
-  if (changedKeys.includes('notification_channel')) summary.notification_channel = body.notification_channel;
-  if (changedKeys.includes('notification_webhook_url')) summary.webhook_url_updated = true;
+  if (changedKeys.includes('notification_channels')) summary.notification_channels = body.notification_channels;
+  if (changedKeys.includes('admin_webhook_url')) summary.admin_webhook_url_updated = true;
   if (smtpChanged) summary.smtp_settings_updated = true;
-  if (eventsChanged) summary.notification_events_updated = true;
   if (changedKeys.includes('allow_registration')) summary.allow_registration = body.allow_registration;
   if (changedKeys.includes('allowed_file_types')) summary.allowed_file_types_updated = true;
   if (changedKeys.includes('require_mfa')) summary.require_mfa = body.require_mfa;
@@ -736,7 +737,7 @@ export function updateAppSettings(
     debugDetails[k] = k === 'smtp_pass' ? '***' : body[k];
   }
 
-  const notifRelated = ['notification_channel', 'notification_webhook_url', 'smtp_host', 'notify_trip_reminder'];
+  const notifRelated = ['notification_channels', 'smtp_host'];
   const shouldRestartScheduler = changedKeys.some(k => notifRelated.includes(k));
   if (shouldRestartScheduler) {
     startTripReminders();
@@ -814,7 +815,7 @@ export function setupMfa(userId: number, userEmail: string): { error?: string; s
     console.error('[MFA] Setup error:', err);
     return { error: 'MFA setup failed', status: 500 };
   }
-  return { secret, otpauth_url, qrPromise: QRCode.toDataURL(otpauth_url) };
+  return { secret, otpauth_url, qrPromise: QRCode.toString(otpauth_url, { type: 'svg', width: 250 }) };
 }
 
 export function enableMfa(userId: number, code?: string): { error?: string; status?: number; success?: boolean; mfa_enabled?: boolean; backup_codes?: string[] } {
@@ -981,10 +982,45 @@ export function createWsToken(userId: number): { error?: string; status?: number
 }
 
 export function createResourceToken(userId: number, purpose?: string): { error?: string; status?: number; token?: string } {
-  if (purpose !== 'download' && purpose !== 'immich') {
+  if (purpose !== 'download') {
     return { error: 'Invalid purpose', status: 400 };
   }
   const token = createEphemeralToken(userId, purpose);
   if (!token) return { error: 'Service unavailable', status: 503 };
   return { token };
 }
+
+// ---------------------------------------------------------------------------
+// MCP auth helpers
+// ---------------------------------------------------------------------------
+
+export function isDemoUser(userId: number): boolean {
+  if (process.env.DEMO_MODE !== 'true') return false;
+  const user = db.prepare('SELECT email FROM users WHERE id = ?').get(userId) as { email: string } | undefined;
+  return user?.email === 'demo@nomad.app';
+}
+
+export function verifyMcpToken(rawToken: string): User | null {
+  const hash = createHash('sha256').update(rawToken).digest('hex');
+  const row = db.prepare(`
+    SELECT u.id, u.username, u.email, u.role
+    FROM mcp_tokens mt
+    JOIN users u ON mt.user_id = u.id
+    WHERE mt.token_hash = ?
+  `).get(hash) as User | undefined;
+  if (row) {
+    db.prepare('UPDATE mcp_tokens SET last_used_at = CURRENT_TIMESTAMP WHERE token_hash = ?').run(hash);
+    return row;
+  }
+  return null;
+}
+
+export function verifyJwtToken(token: string): User | null {
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET, { algorithms: ['HS256'] }) as { id: number };
+    const user = db.prepare('SELECT id, username, email, role FROM users WHERE id = ?').get(decoded.id) as User | undefined;
+    return user || null;
+  } catch {
+    return null;
+  }
+}

server/src/services/collabService.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import fs from 'fs';
 import { db, canAccessTrip } from '../db/database';
 import { CollabNote, CollabPoll, CollabMessage, TripFile } from '../types';
-import { checkSsrf, createPinnedAgent } from '../utils/ssrfGuard';
+import { checkSsrf, createPinnedDispatcher } from '../utils/ssrfGuard';
 
 /* ------------------------------------------------------------------ */
 /*  Internal row types                                                 */
@@ -400,17 +400,16 @@ export async function fetchLinkPreview(url: string): Promise<LinkPreviewResult>
   }
 
   try {
-    const nodeFetch = require('node-fetch');
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 5000);
 
     try {
-      const r: { ok: boolean; text: () => Promise<string> } = await nodeFetch(url, {
+      const r = await fetch(url, {
         redirect: 'error',
         signal: controller.signal,
-        agent: createPinnedAgent(ssrf.resolvedIp!, parsed.protocol),
+        dispatcher: createPinnedDispatcher(ssrf.resolvedIp!),
         headers: { 'User-Agent': 'Mozilla/5.0 (compatible; NOMAD/1.0; +https://github.com/mauriceboe/NOMAD)' },
-      });
+      } as any);
       clearTimeout(timeout);
       if (!r.ok) throw new Error('Fetch failed');
 

server/src/services/dayService.ts

@@ -145,10 +145,10 @@ export function getDay(id: string | number, tripId: string | number) {
   return db.prepare('SELECT * FROM days WHERE id = ? AND trip_id = ?').get(id, tripId) as Day | undefined;
 }
 
-export function updateDay(id: string | number, current: Day, fields: { notes?: string; title?: string }) {
+export function updateDay(id: string | number, current: Day, fields: { notes?: string; title?: string | null }) {
   db.prepare('UPDATE days SET notes = ?, title = ? WHERE id = ?').run(
     fields.notes || null,
-    fields.title !== undefined ? fields.title : current.title,
+    'title' in fields ? (fields.title ?? null) : current.title,
     id
   );
   const updatedDay = db.prepare('SELECT * FROM days WHERE id = ?').get(id) as Day;

server/src/services/ephemeralTokens.ts

@@ -3,7 +3,6 @@ import crypto from 'crypto';
 const TTL: Record<string, number> = {
   ws: 30_000,
   download: 60_000,
-  immich: 60_000,
 };
 
 const MAX_STORE_SIZE = 10_000;

server/src/services/fileService.ts

@@ -42,6 +42,7 @@ export function formatFile(file: TripFile & { trip_id?: number }) {
   return {
     ...file,
     url: `/api/trips/${tripId}/files/${file.id}/download`,
+    uploaded_by_avatar: file.uploaded_by_avatar ? `/uploads/avatars/${file.uploaded_by_avatar}` : null,
   };
 }
 

server/src/services/inAppNotifications.ts

@@ -1,6 +1,7 @@
 import { db } from '../db/database';
 import { broadcastToUser } from '../websocket';
 import { getAction } from './inAppNotificationActions';
+import { isEnabledForEvent, type NotifEventType } from './notificationPreferencesService';
 
 type NotificationType = 'simple' | 'boolean' | 'navigate';
 type NotificationScope = 'trip' | 'user' | 'admin';
@@ -11,6 +12,7 @@ interface BaseNotificationInput {
   scope: NotificationScope;
   target: number;
   sender_id: number | null;
+  event_type?: NotifEventType;
   title_key: string;
   title_params?: Record<string, string>;
   text_key: string;
@@ -61,7 +63,7 @@ interface NotificationRow {
   created_at: string;
 }
 
-function resolveRecipients(scope: NotificationScope, target: number, excludeUserId?: number | null): number[] {
+export function resolveRecipients(scope: NotificationScope, target: number, excludeUserId?: number | null): number[] {
   let userIds: number[] = [];
 
   if (scope === 'trip') {
@@ -93,7 +95,8 @@ function createNotification(input: NotificationInput): number[] {
   const titleParams = JSON.stringify(input.title_params ?? {});
   const textParams = JSON.stringify(input.text_params ?? {});
 
-  const insertedIds: number[] = [];
+  // Track inserted id → recipientId pairs (some recipients may be skipped by pref check)
+  const insertedPairs: Array<{ id: number; recipientId: number }> = [];
 
   const insert = db.transaction(() => {
     const stmt = db.prepare(`
@@ -106,6 +109,11 @@ function createNotification(input: NotificationInput): number[] {
     `);
 
     for (const recipientId of recipients) {
+      // Check per-user in-app preference if an event_type is provided
+      if (input.event_type && !isEnabledForEvent(recipientId, input.event_type, 'inapp')) {
+        continue;
+      }
+
       let positiveTextKey: string | null = null;
       let negativeTextKey: string | null = null;
       let positiveCallback: string | null = null;
@@ -130,7 +138,7 @@ function createNotification(input: NotificationInput): number[] {
         navigateTextKey, navigateTarget
       );
 
-      insertedIds.push(result.lastInsertRowid as number);
+      insertedPairs.push({ id: result.lastInsertRowid as number, recipientId });
     }
   });
 
@@ -142,9 +150,7 @@ function createNotification(input: NotificationInput): number[] {
     : null;
 
   // Broadcast to each recipient
-  for (let i = 0; i < insertedIds.length; i++) {
-    const notificationId = insertedIds[i];
-    const recipientId = recipients[i];
+  for (const { id: notificationId, recipientId } of insertedPairs) {
     const row = db.prepare('SELECT * FROM notifications WHERE id = ?').get(notificationId) as NotificationRow;
     if (!row) continue;
 
@@ -158,7 +164,66 @@ function createNotification(input: NotificationInput): number[] {
     });
   }
 
-  return insertedIds;
+  return insertedPairs.map(p => p.id);
+}
+
+/**
+ * Insert a single in-app notification for one pre-resolved recipient and broadcast via WebSocket.
+ * Used by notificationService.send() which handles recipient resolution externally.
+ */
+export function createNotificationForRecipient(
+  input: NotificationInput,
+  recipientId: number,
+  sender: { username: string; avatar: string | null } | null
+): number | null {
+  const titleParams = JSON.stringify(input.title_params ?? {});
+  const textParams = JSON.stringify(input.text_params ?? {});
+
+  let positiveTextKey: string | null = null;
+  let negativeTextKey: string | null = null;
+  let positiveCallback: string | null = null;
+  let negativeCallback: string | null = null;
+  let navigateTextKey: string | null = null;
+  let navigateTarget: string | null = null;
+
+  if (input.type === 'boolean') {
+    positiveTextKey = input.positive_text_key;
+    negativeTextKey = input.negative_text_key;
+    positiveCallback = JSON.stringify(input.positive_callback);
+    negativeCallback = JSON.stringify(input.negative_callback);
+  } else if (input.type === 'navigate') {
+    navigateTextKey = input.navigate_text_key;
+    navigateTarget = input.navigate_target;
+  }
+
+  const result = db.prepare(`
+    INSERT INTO notifications (
+      type, scope, target, sender_id, recipient_id,
+      title_key, title_params, text_key, text_params,
+      positive_text_key, negative_text_key, positive_callback, negative_callback,
+      navigate_text_key, navigate_target
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(
+    input.type, input.scope, input.target, input.sender_id, recipientId,
+    input.title_key, titleParams, input.text_key, textParams,
+    positiveTextKey, negativeTextKey, positiveCallback, negativeCallback,
+    navigateTextKey, navigateTarget
+  );
+
+  const notificationId = result.lastInsertRowid as number;
+  const row = db.prepare('SELECT * FROM notifications WHERE id = ?').get(notificationId) as NotificationRow | undefined;
+  if (!row) return null;
+
+  broadcastToUser(recipientId, {
+    type: 'notification:new',
+    notification: {
+      ...row,
+      sender_username: sender?.username ?? null,
+      sender_avatar: sender?.avatar ?? null,
+    },
+  });
+
+  return notificationId;
 }
 
 function getNotifications(
@@ -266,55 +331,6 @@ async function respondToBoolean(
   return { success: true, notification: updated };
 }
 
-interface NotificationPreferences {
-  id: number;
-  user_id: number;
-  notify_trip_invite: number;
-  notify_booking_change: number;
-  notify_trip_reminder: number;
-  notify_webhook: number;
-}
-
-interface PreferencesUpdate {
-  notify_trip_invite?: boolean;
-  notify_booking_change?: boolean;
-  notify_trip_reminder?: boolean;
-  notify_webhook?: boolean;
-}
-
-function getPreferences(userId: number): NotificationPreferences {
-  let prefs = db.prepare('SELECT * FROM notification_preferences WHERE user_id = ?').get(userId) as NotificationPreferences | undefined;
-  if (!prefs) {
-    db.prepare('INSERT INTO notification_preferences (user_id) VALUES (?)').run(userId);
-    prefs = db.prepare('SELECT * FROM notification_preferences WHERE user_id = ?').get(userId) as NotificationPreferences;
-  }
-  return prefs;
-}
-
-function updatePreferences(userId: number, updates: PreferencesUpdate): NotificationPreferences {
-  const existing = db.prepare('SELECT id FROM notification_preferences WHERE user_id = ?').get(userId);
-  if (!existing) {
-    db.prepare('INSERT INTO notification_preferences (user_id) VALUES (?)').run(userId);
-  }
-
-  const { notify_trip_invite, notify_booking_change, notify_trip_reminder, notify_webhook } = updates;
-
-  db.prepare(`UPDATE notification_preferences SET
-    notify_trip_invite = COALESCE(?, notify_trip_invite),
-    notify_booking_change = COALESCE(?, notify_booking_change),
-    notify_trip_reminder = COALESCE(?, notify_trip_reminder),
-    notify_webhook = COALESCE(?, notify_webhook)
-    WHERE user_id = ?`).run(
-    notify_trip_invite !== undefined ? (notify_trip_invite ? 1 : 0) : null,
-    notify_booking_change !== undefined ? (notify_booking_change ? 1 : 0) : null,
-    notify_trip_reminder !== undefined ? (notify_trip_reminder ? 1 : 0) : null,
-    notify_webhook !== undefined ? (notify_webhook ? 1 : 0) : null,
-    userId
-  );
-
-  return db.prepare('SELECT * FROM notification_preferences WHERE user_id = ?').get(userId) as NotificationPreferences;
-}
-
 export {
   createNotification,
   getNotifications,
@@ -325,8 +341,6 @@ export {
   deleteNotification,
   deleteAll,
   respondToBoolean,
-  getPreferences,
-  updatePreferences,
 };
 
 export type { NotificationInput, NotificationRow, NotificationType, NotificationScope, NotificationResponse };

server/src/services/mapsService.ts

@@ -1,6 +1,6 @@
-import fetch from 'node-fetch';
 import { db } from '../db/database';
 import { decrypt_api_key } from './apiKeyCrypto';
+import { checkSsrf } from '../utils/ssrfGuard';
 
 // ── Interfaces ───────────────────────────────────────────────────────────────
 
@@ -474,8 +474,11 @@ export async function reverseGeocode(lat: string, lng: string, lang?: string): P
 export async function resolveGoogleMapsUrl(url: string): Promise<{ lat: number; lng: number; name: string | null; address: string | null }> {
   let resolvedUrl = url;
 
-  // Follow redirects for short URLs (goo.gl, maps.app.goo.gl)
-  if (url.includes('goo.gl') || url.includes('maps.app')) {
+  // Follow redirects for short URLs (goo.gl, maps.app.goo.gl) with SSRF protection
+  const parsed = new URL(url);
+  if (['goo.gl', 'maps.app.goo.gl'].includes(parsed.hostname)) {
+    const ssrf = await checkSsrf(url, true);
+    if (!ssrf.allowed) throw Object.assign(new Error('URL blocked by SSRF check'), { status: 403 });
     const redirectRes = await fetch(url, { redirect: 'follow', signal: AbortSignal.timeout(10000) });
     resolvedUrl = redirectRes.url;
   }