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/Layout/Navbar.jsx

@@ -1,19 +1,39 @@
 import React, { useState, useEffect } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun } from 'lucide-react'
+import { addonsApi } from '../../api/client'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, CalendarDays, Briefcase, Globe } from 'lucide-react'
+
+const ADDON_ICONS = { CalendarDays, Briefcase, Globe }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }) {
   const { user, logout } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
   const { t, locale } = useTranslation()
   const navigate = useNavigate()
+  const location = useLocation()
   const [userMenuOpen, setUserMenuOpen] = useState(false)
   const [appVersion, setAppVersion] = useState(null)
+  const [globalAddons, setGlobalAddons] = useState([])
   const dark = settings.dark_mode
 
+  const loadAddons = () => {
+    if (user) {
+      addonsApi.enabled().then(data => {
+        setGlobalAddons(data.addons.filter(a => a.type === 'global'))
+      }).catch(() => {})
+    }
+  }
+  useEffect(loadAddons, [user, location.pathname])
+  // Listen for addon changes from AddonManager
+  useEffect(() => {
+    const handler = () => loadAddons()
+    window.addEventListener('addons-changed', handler)
+    return () => window.removeEventListener('addons-changed', handler)
+  }, [user])
+
   useEffect(() => {
     import('../../api/client').then(({ authApi }) => {
       authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
@@ -35,6 +55,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare })
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
       boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
+      touchAction: 'manipulation',
     }} className="h-14 flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
       {/* Left side */}
       <div className="flex items-center gap-3 min-w-0">
@@ -55,6 +76,42 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare })
           <span className="font-bold text-sm hidden sm:inline">NOMAD</span>
         </Link>
 
+        {/* Global addon nav items */}
+        {globalAddons.length > 0 && !tripTitle && (
+          <>
+            <span style={{ color: 'var(--text-faint)' }}>|</span>
+            <Link to="/dashboard"
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+              style={{
+                color: location.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-muted)',
+                background: location.pathname === '/dashboard' ? 'var(--bg-hover)' : 'transparent',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => { if (location.pathname !== '/dashboard') e.currentTarget.style.background = 'transparent' }}>
+              <Briefcase className="w-3.5 h-3.5" />
+              <span className="hidden md:inline">{t('nav.myTrips')}</span>
+            </Link>
+            {globalAddons.map(addon => {
+              const Icon = ADDON_ICONS[addon.icon] || CalendarDays
+              const path = `/${addon.id}`
+              const isActive = location.pathname === path
+              return (
+                <Link key={addon.id} to={path}
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors flex-shrink-0"
+                  style={{
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                    background: isActive ? 'var(--bg-hover)' : 'transparent',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent' }}>
+                  <Icon className="w-3.5 h-3.5" />
+                  <span className="hidden md:inline">{addon.name}</span>
+                </Link>
+              )
+            })}
+          </>
+        )}
+
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>