v2.5.0 — Addon System, Vacay, Atlas, Dashboard Widgets & Mobile Overhaul

The biggest NOMAD update yet. Introduces a modular addon architecture and three major new features.

Addon System:
- Admin panel addon management with enable/disable toggles
- Trip addons (Packing List, Budget, Documents) dynamically show/hide in trip tabs
- Global addons appear in the main navigation for all users

Vacay — Vacation Day Planner (Global Addon):
- Monthly calendar view with international public holidays (100+ countries via Nager.Date API)
- Company holidays with auto-cleanup of conflicting entries
- User-based system: each NOMAD user is a person in the calendar
- Fusion system: invite other users to share a combined calendar with real-time WebSocket sync
- Vacation entitlement tracking with automatic carry-over to next year
- Full settings: block weekends, public holidays, company holidays, carry-over toggle
- Invite/accept/decline flow with forced confirmation modal
- Color management per user with collision detection on fusion
- Dissolve fusion with preserved entries

Atlas — Travel World Map (Global Addon):
- Fullscreen Leaflet world map with colored country polygons (GeoJSON)
- Glass-effect bottom panel with stats, continent breakdown, streak tracking
- Country tooltips with trip count, places visited, first/last visit dates
- Liquid glass hover effect on the stats panel
- Canvas renderer with tile preloading for maximum performance
- Responsive: mobile stats bars, no zoom controls on touch

Dashboard Widgets:
- Currency converter with 50 currencies, CustomSelect dropdowns, localStorage persistence
- Timezone widget with customizable city list, live updating clock
- Per-user toggle via settings button, bottom sheet on mobile

Admin Panel:
- Consistent dark mode across all tabs (CSS variable overrides)
- Online/offline status badges on user list via WebSocket
- Unified heading sizes and subtitles across all sections
- Responsive tab grid on mobile

Mobile Improvements:
- Vacay: slide-in sidebar drawer, floating toolbar, responsive calendar grid
- Atlas: top/bottom glass stat bars, no popups
- Trip Planner: fixed position content container prevents overscroll, portal-based sidebar buttons
- Dashboard: fixed viewport container, mobile widget bottom sheet
- Admin: responsive tab grid, compact buttons
- Global: overscroll-behavior fixes, modal scroll containment

Other:
- Trip tab labels: Planung→Karte, Packliste→Liste, Buchungen→Buchung (DE mobile)
- Reservation form responsive layout
- Backup panel responsive buttons

client/src/components/Admin/AddonManager.jsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react'
+import { adminApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase } from 'lucide-react'
+
+const ICON_MAP = {
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase,
+}
+
+function AddonIcon({ name, size = 20 }) {
+  const Icon = ICON_MAP[name] || Puzzle
+  return <Icon size={size} />
+}
+
+export default function AddonManager() {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const [addons, setAddons] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadAddons()
+  }, [])
+
+  const loadAddons = async () => {
+    setLoading(true)
+    try {
+      const data = await adminApi.addons()
+      setAddons(data.addons)
+    } catch (err) {
+      toast.error(t('admin.addons.toast.error'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggle = async (addon) => {
+    const newEnabled = !addon.enabled
+    // Optimistic update
+    setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
+    try {
+      await adminApi.updateAddon(addon.id, { enabled: newEnabled })
+      window.dispatchEvent(new Event('addons-changed'))
+      toast.success(t('admin.addons.toast.updated'))
+    } catch (err) {
+      // Rollback
+      setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
+  const tripAddons = addons.filter(a => a.type === 'trip')
+  const globalAddons = addons.filter(a => a.type === 'global')
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <div className="w-8 h-8 border-2 border-slate-200 border-t-slate-900 rounded-full animate-spin mx-auto" style={{ borderTopColor: 'var(--text-primary)' }}></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+        <div className="px-6 py-4 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('admin.addons.subtitle')}</p>
+        </div>
+
+        {addons.length === 0 ? (
+          <div className="p-8 text-center text-sm" style={{ color: 'var(--text-faint)' }}>
+            {t('admin.addons.noAddons')}
+          </div>
+        ) : (
+          <div>
+            {/* Trip Addons */}
+            {tripAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Briefcase size={13} style={{ color: 'var(--text-muted)' }} />
+                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    {t('admin.addons.type.trip')} — {t('admin.addons.tripHint')}
+                  </span>
+                </div>
+                {tripAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+
+            {/* Global Addons */}
+            {globalAddons.length > 0 && (
+              <div>
+                <div className="px-6 py-2.5 border-b border-t flex items-center gap-2" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-secondary)' }}>
+                  <Globe size={13} style={{ color: 'var(--text-muted)' }} />
+                  <span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    {t('admin.addons.type.global')} — {t('admin.addons.globalHint')}
+                  </span>
+                </div>
+                {globalAddons.map(addon => (
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AddonRow({ addon, onToggle, t }) {
+  return (
+    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)' }}>
+      {/* Icon */}
+      <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}>
+        <AddonIcon name={addon.icon} size={20} />
+      </div>
+
+      {/* 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)' }}>{addon.name}</span>
+          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full" style={{
+            background: addon.type === 'global' ? 'var(--bg-secondary)' : 'var(--bg-secondary)',
+            color: 'var(--text-muted)',
+          }}>
+            {addon.type === 'global' ? t('admin.addons.type.global') : t('admin.addons.type.trip')}
+          </span>
+        </div>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{addon.description}</p>
+      </div>
+
+      {/* Toggle */}
+      <div className="flex items-center gap-2 shrink-0">
+        <span className="text-xs font-medium" style={{ color: addon.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        </span>
+        <button
+          onClick={() => onToggle(addon)}
+          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+          style={{ background: addon.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
+        >
+          <span
+            className="inline-block h-4 w-4 transform rounded-full transition-transform"
+            style={{
+              background: addon.enabled ? 'var(--bg-card)' : 'var(--bg-card)',
+              transform: addon.enabled ? 'translateX(22px)' : 'translateX(4px)',
+            }}
+          />
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Admin/BackupPanel.jsx

@@ -153,8 +153,8 @@ export default function BackupPanel() {
           <div className="flex items-center gap-3">
             <HardDrive className="w-5 h-5 text-gray-400" />
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">{t('backup.title')}</h2>
-              <p className="text-sm text-gray-500 mt-0.5">{t('backup.subtitle')}</p>
+              <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.title')}</h2>
+              <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.subtitle')}</p>
             </div>
           </div>
           <div className="flex items-center gap-2">
@@ -179,26 +179,28 @@ export default function BackupPanel() {
               onClick={() => fileInputRef.current?.click()}
               disabled={isUploading}
               className="flex items-center gap-2 border border-gray-200 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-50 text-sm font-medium disabled:opacity-60"
+              title={isUploading ? t('backup.uploading') : t('backup.upload')}
             >
               {isUploading ? (
                 <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
               ) : (
                 <Upload className="w-4 h-4" />
               )}
-              {isUploading ? t('backup.uploading') : t('backup.upload')}
+              <span className="hidden sm:inline">{isUploading ? t('backup.uploading') : t('backup.upload')}</span>
             </button>
 
             <button
               onClick={handleCreate}
               disabled={isCreating}
-              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
+              className="flex items-center gap-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-900 text-sm font-medium disabled:opacity-60"
+              title={isCreating ? t('backup.creating') : t('backup.create')}
             >
               {isCreating ? (
                 <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
               ) : (
                 <Plus className="w-4 h-4" />
               )}
-              {isCreating ? t('backup.creating') : t('backup.create')}
+              <span className="hidden sm:inline">{isCreating ? t('backup.creating') : t('backup.create')}</span>
             </button>
           </div>
         </div>
@@ -275,23 +277,23 @@ export default function BackupPanel() {
         <div className="flex items-center gap-3 mb-6">
           <Clock className="w-5 h-5 text-gray-400" />
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">{t('backup.auto.title')}</h2>
-            <p className="text-sm text-gray-500 mt-0.5">{t('backup.auto.subtitle')}</p>
+            <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('backup.auto.title')}</h2>
+            <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('backup.auto.subtitle')}</p>
           </div>
         </div>
 
         <div className="flex flex-col gap-5">
           {/* Enable toggle */}
-          <label className="flex items-center justify-between cursor-pointer">
-            <div>
+          <label className="flex items-center justify-between gap-4 cursor-pointer">
+            <div className="min-w-0">
               <span className="text-sm font-medium text-gray-900">{t('backup.auto.enable')}</span>
               <p className="text-xs text-gray-500 mt-0.5">{t('backup.auto.enableHint')}</p>
             </div>
             <button
               onClick={() => handleAutoSettingsChange('enabled', !autoSettings.enabled)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${autoSettings.enabled ? 'bg-slate-900 dark:bg-slate-100' : 'bg-gray-200 dark:bg-gray-600'}`}
+              className={`relative shrink-0 inline-flex h-6 w-11 items-center rounded-full transition-colors ${autoSettings.enabled ? 'bg-slate-900 dark:bg-slate-100' : 'bg-gray-200 dark:bg-gray-600'}`}
             >
-              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${autoSettings.enabled ? 'translate-x-6' : 'translate-x-1'}`} />
+              <span className={`absolute left-1 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${autoSettings.enabled ? 'translate-x-5' : 'translate-x-0'}`} />
             </button>
           </label>
 

client/src/components/Admin/CategoryManager.jsx

@@ -190,13 +190,14 @@ export default function CategoryManager() {
     <div className="bg-white rounded-2xl border border-gray-200 p-6">
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h2 className="text-lg font-semibold text-gray-900">{t('categories.title')}</h2>
-          <p className="text-sm text-gray-500 mt-0.5">{t('categories.subtitle')}</p>
+          <h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{t('categories.title')}</h2>
+          <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{t('categories.subtitle')}</p>
         </div>
         <button onClick={handleStartCreate}
-          className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">
+          className="flex items-center gap-2 bg-slate-900 text-white px-3 sm:px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium">
           <Plus className="w-4 h-4" />
-          {t('categories.new')}
+          <span className="hidden sm:inline">{t('categories.new')}</span>
+          <span className="sm:hidden">Add</span>
         </button>
       </div>