v2.1.0 — Real-time collaboration, performance & security overhaul

Real-Time Collaboration (WebSocket):
- WebSocket server with JWT auth and trip-based rooms
- Live sync for all CRUD operations (places, assignments, days, notes, budget, packing, reservations, files)
- Socket-based exclusion to prevent duplicate updates
- Auto-reconnect with exponential backoff
- Assignment move sync between days

Performance:
- 16 database indexes on all foreign key columns
- N+1 query fix in places, assignments and days endpoints
- Marker clustering (react-leaflet-cluster) with configurable radius
- List virtualization (react-window) for places sidebar
- useMemo for filtered places
- SQLite WAL mode + busy_timeout for concurrent writes
- Weather API: server-side cache (1h forecast, 15min current) + client sessionStorage
- Google Places photos: persisted to DB after first fetch
- Google Details: 3-tier cache (memory → sessionStorage → API)

Security:
- CORS auto-configuration (production: same-origin, dev: open)
- API keys removed from /auth/me response
- Admin-only endpoint for reading API keys
- Path traversal prevention in cover image deletion
- JWT secret persisted to file (survives restarts)
- Avatar upload file extension whitelist
- API key fallback: normal users use admin's key without exposure
- Case-insensitive email login

Dark Mode:
- Fixed hardcoded colors across PackingList, Budget, ReservationModal, ReservationsPanel
- Mobile map buttons and sidebar sheets respect dark mode
- Cluster markers always dark

UI/UX:
- Redesigned login page with animated planes, stars and feature cards
- Admin: create user functionality with CustomSelect
- Mobile: day-picker popup for assigning places to days
- Mobile: touch-friendly reorder buttons (32px targets)
- Mobile: responsive text (shorter labels on small screens)
- Packing list: index-based category colors
- i18n: translated date picker placeholder, fixed German labels
- Default map tile: CartoDB Light

client/src/api/client.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { getSocketId } from './websocket'
 
 const apiClient = axios.create({
   baseURL: '/api',
@@ -7,13 +8,17 @@ const apiClient = axios.create({
   },
 })
 
-// Request interceptor - add auth token
+// Request interceptor - add auth token and socket ID
 apiClient.interceptors.request.use(
   (config) => {
     const token = localStorage.getItem('auth_token')
     if (token) {
       config.headers.Authorization = `Bearer ${token}`
     }
+    const sid = getSocketId()
+    if (sid) {
+      config.headers['X-Socket-Id'] = sid
+    }
     return config
   },
   (error) => Promise.reject(error)
@@ -112,6 +117,7 @@ export const categoriesApi = {
 
 export const adminApi = {
   users: () => apiClient.get('/admin/users').then(r => r.data),
+  createUser: (data) => apiClient.post('/admin/users', data).then(r => r.data),
   updateUser: (id, data) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
   deleteUser: (id) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
   stats: () => apiClient.get('/admin/stats').then(r => r.data),

client/src/api/websocket.js

@@ -0,0 +1,143 @@
+// Singleton WebSocket manager for real-time collaboration
+
+let socket = null
+let reconnectTimer = null
+let reconnectDelay = 1000
+const MAX_RECONNECT_DELAY = 30000
+const listeners = new Set()
+const activeTrips = new Set()
+let currentToken = null
+let refetchCallback = null
+let mySocketId = null
+
+export function getSocketId() {
+  return mySocketId
+}
+
+export function setRefetchCallback(fn) {
+  refetchCallback = fn
+}
+
+function getWsUrl(token) {
+  const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
+  return `${protocol}://${location.host}/ws?token=${token}`
+}
+
+function handleMessage(event) {
+  try {
+    const parsed = JSON.parse(event.data)
+    // Store our socket ID from welcome message
+    if (parsed.type === 'welcome') {
+      mySocketId = parsed.socketId
+      console.log('[WS] Got socketId:', mySocketId)
+      return
+    }
+    console.log('[WS] Received:', parsed.type, parsed)
+    listeners.forEach(fn => {
+      try { fn(parsed) } catch (err) { console.error('WebSocket listener error:', err) }
+    })
+  } catch (err) {
+    console.error('WebSocket message parse error:', err)
+  }
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) return
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null
+    if (currentToken) {
+      connectInternal(currentToken, true)
+    }
+  }, reconnectDelay)
+  reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
+}
+
+function connectInternal(token, isReconnect = false) {
+  if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
+    return
+  }
+
+  const url = getWsUrl(token)
+  socket = new WebSocket(url)
+
+  socket.onopen = () => {
+    console.log('[WS] Connected', isReconnect ? '(reconnect)' : '(initial)')
+    reconnectDelay = 1000
+    // Join active trips on any connect (initial or reconnect)
+    if (activeTrips.size > 0) {
+      activeTrips.forEach(tripId => {
+        if (socket && socket.readyState === WebSocket.OPEN) {
+          socket.send(JSON.stringify({ type: 'join', tripId }))
+          console.log('[WS] Joined trip', tripId)
+        }
+      })
+      // Refetch trip data for active trips
+      if (refetchCallback) {
+        activeTrips.forEach(tripId => {
+          try { refetchCallback(tripId) } catch (err) {
+            console.error('Failed to refetch trip data on reconnect:', err)
+          }
+        })
+      }
+    }
+  }
+
+  socket.onmessage = handleMessage
+
+  socket.onclose = () => {
+    socket = null
+    if (currentToken) {
+      scheduleReconnect()
+    }
+  }
+
+  socket.onerror = () => {
+    // onclose will fire after onerror, reconnect handled there
+  }
+}
+
+export function connect(token) {
+  currentToken = token
+  reconnectDelay = 1000
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  connectInternal(token, false)
+}
+
+export function disconnect() {
+  currentToken = null
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  activeTrips.clear()
+  if (socket) {
+    socket.onclose = null // prevent reconnect
+    socket.close()
+    socket = null
+  }
+}
+
+export function joinTrip(tripId) {
+  activeTrips.add(String(tripId))
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({ type: 'join', tripId: String(tripId) }))
+  }
+}
+
+export function leaveTrip(tripId) {
+  activeTrips.delete(String(tripId))
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({ type: 'leave', tripId: String(tripId) }))
+  }
+}
+
+export function addListener(fn) {
+  listeners.add(fn)
+}
+
+export function removeListener(fn) {
+  listeners.delete(fn)
+}