Merge pull request #714 from mauriceboe/feat/selective-file-import-perf

feat(import): selective GPX/KML element import and performance improvements

.gitignore

@@ -16,7 +16,7 @@ client/public/icons/*.png
 *.sqlite-wal
 
 # User data
-server/data/
+server/data/*
 server/uploads/
 
 # Environment

client/src/api/client.ts

@@ -190,18 +190,27 @@ export const placesApi = {
   update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
   searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
-  importGpx: (tripId: number | string, file: File) => {
-    const fd = new FormData(); fd.append('file', file)
+  importGpx: (tripId: number | string, file: File, opts?: { waypoints?: boolean; routes?: boolean; tracks?: boolean }) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    if (opts?.waypoints !== undefined) fd.append('importWaypoints', String(opts.waypoints))
+    if (opts?.routes !== undefined) fd.append('importRoutes', String(opts.routes))
+    if (opts?.tracks !== undefined) fd.append('importTracks', String(opts.tracks))
     return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
-  importMapFile: (tripId: number | string, file: File) => {
-    const fd = new FormData(); fd.append('file', file)
+  importMapFile: (tripId: number | string, file: File, opts?: { points?: boolean; paths?: boolean }) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    if (opts?.points !== undefined) fd.append('importPoints', String(opts.points))
+    if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
   importGoogleList: (tripId: number | string, url: string) =>
     apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
   importNaverList: (tripId: number | string, url: string) =>
     apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
+  bulkDelete: (tripId: number | string, ids: number[]) =>
+    apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids }).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -371,6 +380,11 @@ export const mapsApi = {
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => r.data),
 }
 
+export const airportsApi = {
+  search: (q: string, signal?: AbortSignal) => apiClient.get('/airports/search', { params: { q }, signal }).then(r => r.data),
+  byIata: (iata: string) => apiClient.get(`/airports/${encodeURIComponent(iata)}`).then(r => r.data),
+}
+
 export const budgetApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),

client/src/components/Budget/BudgetPanel.test.tsx

@@ -416,8 +416,8 @@ describe('BudgetPanel', () => {
     render(<BudgetPanel tripId={1} />);
     await screen.findByText('Flight');
     await screen.findByText('Hotel');
-    // Grand total card shows 300.00
-    expect(screen.getByText('300.00')).toBeInTheDocument();
+    // Grand total card shows 300.00 (integer and decimal are rendered in separate spans)
+    expect(document.body.textContent?.replace(/\s+/g, '')).toMatch(/300[,.]00/);
   });
 
   it('FE-COMP-BUDGET-033: read-only mode hides add/delete/edit controls', async () => {

client/src/components/Budget/BudgetPanel.tsx

@@ -4,7 +4,69 @@ import DOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, GripVertical } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, GripVertical, TrendingUp, TrendingDown, PieChart as PieChartIcon } from 'lucide-react'
+
+function useIsDark(): boolean {
+  const [dark, setDark] = useState<boolean>(() => typeof document !== 'undefined' && document.documentElement.classList.contains('dark'))
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const mo = new MutationObserver(() => setDark(document.documentElement.classList.contains('dark')))
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => mo.disconnect()
+  }, [])
+  return dark
+}
+
+function widgetTheme(dark: boolean) {
+  if (dark) return {
+    bg: 'linear-gradient(180deg, #17171d 0%, #0d0d12 100%)',
+    border: 'rgba(255,255,255,0.07)',
+    text: '#ffffff',
+    sub: 'rgba(255,255,255,0.6)',
+    faint: 'rgba(255,255,255,0.4)',
+    track: 'rgba(255,255,255,0.04)',
+    divider: 'rgba(255,255,255,0.07)',
+    iconBg: 'rgba(255,255,255,0.08)',
+    iconBorder: 'rgba(255,255,255,0.12)',
+    iconColor: 'rgba(255,255,255,0.9)',
+    centerBg: '#17171d',
+    flowBg: 'rgba(255,255,255,0.05)',
+    flowBorder: 'rgba(255,255,255,0.07)',
+    flowHoverBg: 'rgba(255,255,255,0.08)',
+    flowHoverBorder: 'rgba(255,255,255,0.12)',
+    rowHover: 'rgba(255,255,255,0.03)',
+    shadow: '0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04)',
+    donutShadow: 'drop-shadow(0 0 20px rgba(0,0,0,0.3))',
+  }
+  return {
+    bg: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 100%)',
+    border: 'rgba(15,23,42,0.08)',
+    text: '#111827',
+    sub: 'rgba(17,24,39,0.6)',
+    faint: 'rgba(17,24,39,0.4)',
+    track: 'rgba(15,23,42,0.05)',
+    divider: 'rgba(15,23,42,0.08)',
+    iconBg: 'rgba(15,23,42,0.05)',
+    iconBorder: 'rgba(15,23,42,0.1)',
+    iconColor: 'rgba(17,24,39,0.75)',
+    centerBg: '#ffffff',
+    flowBg: 'rgba(15,23,42,0.03)',
+    flowBorder: 'rgba(15,23,42,0.08)',
+    flowHoverBg: 'rgba(15,23,42,0.06)',
+    flowHoverBorder: 'rgba(15,23,42,0.14)',
+    rowHover: 'rgba(15,23,42,0.04)',
+    shadow: '0 12px 32px rgba(15,23,42,0.08), 0 2px 6px rgba(0,0,0,0.04)',
+    donutShadow: 'drop-shadow(0 4px 18px rgba(15,23,42,0.12))',
+  }
+}
+
+function hexLighten(hex: string, amount: number): string {
+  const m = hex.replace('#', '').match(/.{2}/g)
+  if (!m || m.length !== 3) return hex
+  const mix = (c: number) => Math.min(255, Math.round(c + (255 - c) * amount))
+  const [r, g, b] = m.map(x => parseInt(x, 16))
+  return `#${[mix(r), mix(g), mix(b)].map(v => v.toString(16).padStart(2, '0')).join('')}`
+}
 import CustomSelect from '../shared/CustomSelect'
 import { budgetApi } from '../../api/client'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -361,9 +423,47 @@ interface PerPersonInlineProps {
   locale: string
 }
 
-function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInlineProps) {
-  const [data, setData] = useState(null)
-  const fmt = (v) => fmtNum(v, locale, currency)
+const SPLIT_COLORS = [
+  { solid: '#6366f1', gradient: 'linear-gradient(135deg, #6366f1, #8b5cf6)' },
+  { solid: '#ec4899', gradient: 'linear-gradient(135deg, #ec4899, #f43f5e)' },
+  { solid: '#10b981', gradient: 'linear-gradient(135deg, #10b981, #22c55e)' },
+  { solid: '#f59e0b', gradient: 'linear-gradient(135deg, #f59e0b, #f97316)' },
+  { solid: '#06b6d4', gradient: 'linear-gradient(135deg, #06b6d4, #3b82f6)' },
+  { solid: '#a855f7', gradient: 'linear-gradient(135deg, #a855f7, #d946ef)' },
+]
+
+export function splitColorFor(userId: number, order: number) {
+  return SPLIT_COLORS[order % SPLIT_COLORS.length]
+}
+
+function colorForUserId(userId: number) {
+  return SPLIT_COLORS[((userId | 0) - 1 + SPLIT_COLORS.length * 1000) % SPLIT_COLORS.length]
+}
+
+function RingAvatar({ userId, username, avatarUrl, size = 34, innerBg = '#17171d', textColor = '#fff' }: { userId: number; username?: string; avatarUrl?: string | null; size?: number; innerBg?: string; textColor?: string }) {
+  const color = colorForUserId(userId)
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: '50%', flexShrink: 0,
+      padding: 2, background: color.gradient,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      <div style={{
+        width: '100%', height: '100%', borderRadius: '50%',
+        background: innerBg,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        overflow: 'hidden',
+        fontSize: size < 28 ? 10 : 12, fontWeight: 600, color: textColor,
+      }}>
+        {avatarUrl ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : username?.[0]?.toUpperCase()}
+      </div>
+    </div>
+  )
+}
+
+function PerPersonInline({ tripId, budgetItems, currency, locale, grandTotal, theme }: PerPersonInlineProps & { grandTotal: number; theme: ReturnType<typeof widgetTheme> }) {
+  const [data, setData] = useState<any[] | null>(null)
+  const fmt = (v: number) => fmtNum(v, locale, currency)
 
   useEffect(() => {
     budgetApi.perPersonSummary(tripId).then(d => setData(d.summary)).catch(() => {})
@@ -371,25 +471,38 @@ function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInl
 
   if (!data || data.length === 0) return null
 
+  const people = data.map((p: any) => ({ ...p, color: colorForUserId(p.user_id) }))
+
   return (
-    <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {data.map(person => (
-        <div key={person.user_id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <div style={{
-            width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700,
-            color: 'rgba(255,255,255,0.7)', overflow: 'hidden', flexShrink: 0,
-          }}>
-            {person.avatar_url
-              ? <img src={person.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-              : person.username?.[0]?.toUpperCase()
-            }
-          </div>
-          <span style={{ flex: 1, fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.7)' }}>{person.username}</span>
-          <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{fmt(person.total_assigned)}</span>
+    <>
+      {grandTotal > 0 && (
+        <div style={{ display: 'flex', height: 6, borderRadius: 999, overflow: 'hidden', marginTop: 8, marginBottom: 4, gap: 3 }}>
+          {people.map(p => (
+            <div key={p.user_id} style={{
+              height: '100%', borderRadius: 999,
+              flex: Math.max(p.total_assigned || 0, 0.01),
+              background: p.color.gradient,
+            }} />
+          ))}
         </div>
-      ))}
-    </div>
+      )}
+
+      <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${theme.divider}`, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {people.map(p => {
+          const percent = grandTotal > 0 ? Math.round((p.total_assigned / grandTotal) * 100) : 0
+          return (
+            <div key={p.user_id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' }}>
+              <RingAvatar userId={p.user_id} username={p.username} avatarUrl={p.avatar_url} size={34} innerBg={theme.centerBg} textColor={theme.text} />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text }}>{p.username}</div>
+                <div style={{ fontSize: 11, color: theme.faint, marginTop: 1 }}>{percent}%</div>
+              </div>
+              <div style={{ fontSize: 13.5, fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>{fmt(p.total_assigned)}</div>
+            </div>
+          )
+        })}
+      </div>
+    </>
   )
 }
 
@@ -446,6 +559,8 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid, reorderBudgetItems, reorderBudgetCategories } = useTripStore()
   const can = useCanDo()
   const { t, locale } = useTranslation()
+  const isDark = useIsDark()
+  const theme = useMemo(() => widgetTheme(isDark), [isDark])
   const [newCategoryName, setNewCategoryName] = useState('')
   const [editingCat, setEditingCat] = useState(null) // { name, value }
   const [settlement, setSettlement] = useState<{ balances: any[]; flows: any[] } | null>(null)
@@ -589,20 +704,69 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   }
 
   // ── Main Layout ──────────────────────────────────────────────────────────
+  const totalBudget = budgetItems.reduce((s, x) => s + (x.total_price || 0), 0)
   return (
-    <div style={{ fontFamily: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif" }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 16px 12px', flexWrap: 'wrap', gap: 8 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <Calculator size={20} color="var(--text-primary)" />
-          <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('budget.title')}</h2>
+    <div>
+      <div style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
+        <div style={{
+          background: 'var(--bg-tertiary)', borderRadius: 18,
+          padding: '14px 16px 14px 22px',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
+        }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+            {t('budget.title')}
+          </h2>
+          <div className="hidden md:flex" style={{ alignItems: 'center', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
+            <div style={{ width: 150 }}>
+              <CustomSelect
+                value={currency}
+                onChange={setCurrency}
+                disabled={!canEdit}
+                options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
+                searchable
+              />
+            </div>
+            {canEdit && (
+              <div style={{ display: 'flex', gap: 6, width: 260 }}>
+                <input
+                  value={newCategoryName}
+                  onChange={e => setNewCategoryName(e.target.value)}
+                  onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
+                  placeholder={t('budget.categoryName')}
+                  style={{ flex: 1, minWidth: 0, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                />
+                <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+                  title={t('budget.addCategory')}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: newCategoryName.trim() ? 'pointer' : 'default', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                    background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                    opacity: newCategoryName.trim() ? 1 : 0.4,
+                    transition: 'opacity 0.15s ease',
+                  }}>
+                  <Plus size={14} strokeWidth={2.5} />
+                </button>
+              </div>
+            )}
+            <button onClick={handleExportCsv} title={t('budget.exportCsv')}
+              style={{
+                appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                display: 'inline-flex', alignItems: 'center', gap: 6,
+                padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                transition: 'opacity 0.15s ease',
+              }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Download size={14} strokeWidth={2.5} /> CSV
+            </button>
+          </div>
         </div>
-        <button onClick={handleExportCsv} title={t('budget.exportCsv')}
-          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
-          <Download size={13} /> CSV
-        </button>
       </div>
 
-      <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+      <div style={{ display: 'flex', gap: 20, padding: '24px 28px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }} className="max-md:!px-4">
         <div style={{ flex: 1, minWidth: 0 }}>
           {categoryNames.map((cat, ci) => {
             const items = grouped.get(cat) || []
@@ -811,61 +975,57 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           })}
         </div>
 
-        <div className="w-full md:w-[240px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
-          <div style={{ marginBottom: 12 }}>
-            <CustomSelect
-              value={currency}
-              onChange={setCurrency}
-              disabled={!canEdit}
-              options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
-              searchable
-            />
-          </div>
-
-          {canEdit && (
-            <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
-              <input
-                value={newCategoryName}
-                onChange={e => setNewCategoryName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
-                placeholder={t('budget.categoryName')}
-                style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
-              />
-              <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-                style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
-                <Plus size={16} />
-              </button>
-            </div>
-          )}
+        <div className="w-full md:w-[320px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
 
           <div style={{
-            background: 'linear-gradient(135deg, #000000 0%, #18181b 100%)',
-            borderRadius: 16, padding: '24px 20px', color: '#fff', marginBottom: 16,
-            boxShadow: '0 8px 32px rgba(15,23,42,0.18)',
+            background: theme.bg,
+            borderRadius: 20, padding: 20, color: theme.text, marginBottom: 16,
+            border: `1px solid ${theme.border}`,
+            boxShadow: theme.shadow,
           }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Wallet size={18} color="rgba(255,255,255,0.8)" />
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
+              <div style={{
+                width: 40, height: 40, borderRadius: 12,
+                background: theme.iconBg,
+                border: `1px solid ${theme.iconBorder}`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                color: theme.iconColor, flexShrink: 0,
+              }}>
+                <Wallet size={20} strokeWidth={2} />
               </div>
-              <div>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.5 }}>{t('budget.totalBudget')}</div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 11, color: theme.faint, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.09em' }}>{t('budget.totalBudget')}</div>
               </div>
             </div>
-            <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
-              {Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: currencyDecimals(currency), maximumFractionDigits: currencyDecimals(currency) })}
+
+            {(() => {
+              const decimals = currencyDecimals(currency)
+              const full = Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+              const sep = (0.1).toLocaleString(locale).replace(/\d/g, '')
+              const [integerPart, decimalPart] = decimals > 0 ? full.split(sep) : [full, '']
+              return (
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, letterSpacing: '-0.03em', lineHeight: 1 }}>
+                  <span style={{ fontSize: 38, fontWeight: 700 }}>{integerPart}</span>
+                  {decimalPart && <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub }}>{sep}{decimalPart}</span>}
+                  <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub, marginLeft: 2 }}>{SYMBOLS[currency] || currency}</span>
+                </div>
+              )
+            })()}
+            <div style={{ color: theme.faint, fontSize: 12, marginTop: 8, fontWeight: 500, letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span>{currency}</span>
             </div>
-            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
+
             {hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
-              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} />
+              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} grandTotal={grandTotal} theme={theme} />
             )}
 
             {/* Settlement dropdown inside the total card */}
             {hasMultipleMembers && settlement && settlement.flows.length > 0 && (
-              <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 12 }}>
+              <div style={{ marginTop: 16, borderTop: `1px solid ${theme.divider}`, paddingTop: 12 }}>
                 <button onClick={() => setSettlementOpen(v => !v)} style={{
                   display: 'flex', alignItems: 'center', gap: 6, width: '100%',
                   background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit',
-                  color: 'rgba(255,255,255,0.6)', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
+                  color: theme.sub, fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                 }}>
                   {settlementOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                   {t('budget.settlement')}
@@ -890,53 +1050,60 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 </button>
 
                 {settlementOpen && (
-                  <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                     {settlement.flows.map((flow, i) => (
                       <div key={i} style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
-                        padding: '8px 10px', borderRadius: 10,
-                        background: 'rgba(255,255,255,0.06)',
-                      }}>
-                        <ChipWithTooltip label={flow.from.username} avatarUrl={flow.from.avatar_url} size={28} />
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
-                          <span style={{ fontSize: 12, fontWeight: 700, color: '#f87171', whiteSpace: 'nowrap' }}>
+                        display: 'flex', alignItems: 'center', gap: 14,
+                        padding: '12px 14px', borderRadius: 14,
+                        background: theme.flowBg,
+                        border: `1px solid ${theme.flowBorder}`,
+                        transition: 'all 0.2s',
+                      }}
+                        onMouseEnter={e => { e.currentTarget.style.background = theme.flowHoverBg; e.currentTarget.style.borderColor = theme.flowHoverBorder }}
+                        onMouseLeave={e => { e.currentTarget.style.background = theme.flowBg; e.currentTarget.style.borderColor = theme.flowBorder }}
+                      >
+                        <RingAvatar userId={flow.from.user_id} username={flow.from.username} avatarUrl={flow.from.avatar_url} size={32} innerBg={theme.centerBg} textColor={theme.text} />
+                        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
+                          <span style={{ fontSize: 13, fontWeight: 700, color: '#ef4444', letterSpacing: '-0.01em' }}>
                             {fmt(flow.amount, currency)}
                           </span>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
+                          <div style={{ width: '100%', height: 2, borderRadius: 2, background: 'linear-gradient(90deg, rgba(239,68,68,0.1), rgba(239,68,68,0.55), rgba(239,68,68,0.3))', position: 'relative' }}>
+                            <div style={{ position: 'absolute', right: -1, top: '50%', transform: 'translateY(-50%)', width: 0, height: 0, borderLeft: '6px solid rgba(239,68,68,0.55)', borderTop: '4px solid transparent', borderBottom: '4px solid transparent' }} />
+                          </div>
                         </div>
-                        <ChipWithTooltip label={flow.to.username} avatarUrl={flow.to.avatar_url} size={28} />
+                        <RingAvatar userId={flow.to.user_id} username={flow.to.username} avatarUrl={flow.to.avatar_url} size={32} innerBg={theme.centerBg} textColor={theme.text} />
                       </div>
                     ))}
 
                     {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
-                      <div style={{ marginTop: 4, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 8 }}>
-                        <div style={{ fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
+                      <div style={{ marginTop: 8, borderTop: `1px solid ${theme.divider}`, paddingTop: 12 }}>
+                        <div style={{ fontSize: 10, fontWeight: 700, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.11em', marginBottom: 10 }}>
                           {t('budget.netBalances')}
                         </div>
-                        {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => (
-                          <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}>
-                            <div style={{
-                              width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
-                              background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              fontSize: 8, fontWeight: 700, color: 'rgba(255,255,255,0.6)', overflow: 'hidden',
-                            }}>
-                              {b.avatar_url
-                                ? <img src={b.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                                : b.username?.[0]?.toUpperCase()
-                              }
-                            </div>
-                            <span style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                              {b.username}
-                            </span>
-                            <span style={{
-                              fontSize: 11, fontWeight: 600, flexShrink: 0,
-                              color: b.balance > 0 ? '#4ade80' : '#f87171',
-                            }}>
-                              {b.balance > 0 ? '+' : ''}{fmt(b.balance, currency)}
-                            </span>
-                          </div>
-                        ))}
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                          {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => {
+                            const positive = b.balance > 0
+                            const Trend = positive ? TrendingUp : TrendingDown
+                            return (
+                              <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
+                                <RingAvatar userId={b.user_id} username={b.username} avatarUrl={b.avatar_url} size={26} innerBg={theme.centerBg} textColor={theme.text} />
+                                <span style={{ flex: 1, fontSize: 13, color: theme.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                  {b.username}
+                                </span>
+                                <span style={{
+                                  display: 'inline-flex', alignItems: 'center', gap: 4,
+                                  padding: '4px 10px', borderRadius: 8,
+                                  fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
+                                  background: positive ? 'rgba(16,185,129,0.13)' : 'rgba(239,68,68,0.13)',
+                                  color: positive ? '#10b981' : '#ef4444',
+                                }}>
+                                  <Trend size={11} strokeWidth={3} />
+                                  {positive ? '+' : ''}{fmt(b.balance, currency)}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
                       </div>
                     )}
                   </div>
@@ -945,36 +1112,115 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
             )}
           </div>
 
-          {pieSegments.length > 0 && (
-            <div style={{
-              background: 'var(--bg-card)', borderRadius: 16, padding: '20px 16px',
-              border: '1px solid var(--border-primary)',
-              boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
-              marginBottom: 16,
-            }}>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 16, textAlign: 'center' }}>{t('budget.byCategory')}</div>
+          {pieSegments.length > 0 && (() => {
+            const decimals = currencyDecimals(currency)
+            const total = pieSegments.reduce((s, x) => s + x.value, 0)
+            const totalFmt = Number(total).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+            const decimalSep = (0.1).toLocaleString(locale).replace(/\d/g, '')
+            const [totalInt, totalDec] = decimals > 0 ? totalFmt.split(decimalSep) : [totalFmt, '']
+            const R = 80
+            const CIRC = 2 * Math.PI * R
+            let dashOffset = 0
+            return (
+              <div style={{
+                background: theme.bg,
+                borderRadius: 20, padding: 20, color: theme.text, marginBottom: 16,
+                border: `1px solid ${theme.border}`,
+                boxShadow: theme.shadow,
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
+                  <div style={{
+                    width: 38, height: 38, borderRadius: 11,
+                    background: theme.iconBg,
+                    border: `1px solid ${theme.iconBorder}`,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: theme.iconColor, flexShrink: 0,
+                  }}>
+                    <PieChartIcon size={18} strokeWidth={2} />
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 11, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.09em', fontWeight: 600 }}>{t('budget.byCategory')}</div>
+                  </div>
+                </div>
 
-              <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
-
-              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 0 }}>
-                {pieSegments.map((seg, i) => {
-                  const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
-                  return (
-                    <div key={seg.name} style={{ padding: '8px 0', borderTop: i > 0 ? '1px solid var(--border-secondary)' : 'none' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
-                        <span style={{ fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>{seg.name}</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3, paddingLeft: 18 }}>
-                        <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 500 }}>{fmt(seg.value, currency)}</span>
-                        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 600, background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 99 }}>{pct}%</span>
-                      </div>
+                <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', margin: '4px 0 16px' }}>
+                  <svg width={200} height={200} viewBox="0 0 200 200" style={{ transform: 'rotate(-90deg)', filter: theme.donutShadow }}>
+                    <defs>
+                      {pieSegments.map((seg, i) => {
+                        const c2 = hexLighten(seg.color, 0.2)
+                        return (
+                          <linearGradient key={`grad-${i}`} id={`cat-grad-${i}`} x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor={seg.color} />
+                            <stop offset="100%" stopColor={c2} />
+                          </linearGradient>
+                        )
+                      })}
+                    </defs>
+                    <circle cx={100} cy={100} r={R} fill="none" stroke={theme.track} strokeWidth={22} />
+                    {pieSegments.map((seg, i) => {
+                      const segLen = total > 0 ? (seg.value / total) * CIRC : 0
+                      const circle = (
+                        <circle key={i}
+                          cx={100} cy={100} r={R}
+                          fill="none" strokeLinecap="round" strokeWidth={22}
+                          stroke={`url(#cat-grad-${i})`}
+                          strokeDasharray={`${segLen} ${CIRC}`}
+                          strokeDashoffset={-dashOffset}
+                        />
+                      )
+                      dashOffset += segLen
+                      return circle
+                    })}
+                  </svg>
+                  <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, pointerEvents: 'none' }}>
+                    <div style={{ fontSize: 10.5, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700 }}>{t('budget.total')}</div>
+                    <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 2 }}>
+                      <span>{totalInt}</span>
+                      {totalDec && <span style={{ fontSize: 13, fontWeight: 500, color: theme.sub }}>{decimalSep}{totalDec}</span>}
                     </div>
-                  )
-                })}
+                    <div style={{ fontSize: 10.5, color: theme.faint, fontWeight: 500, marginTop: 2 }}>{currency}</div>
+                  </div>
+                </div>
+
+                <div style={{ borderTop: `1px solid ${theme.divider}`, paddingTop: 10, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  {pieSegments.map((seg, i) => {
+                    const pct = total > 0 ? (seg.value / total) * 100 : 0
+                    const pctLabel = pct.toFixed(1).replace('.', decimalSep) + '%'
+                    const c2 = hexLighten(seg.color, 0.2)
+                    const chipColor = isDark ? hexLighten(seg.color, 0.35) : seg.color
+                    return (
+                      <div key={seg.name} style={{
+                        display: 'flex', alignItems: 'center', gap: 12,
+                        padding: '10px 8px', borderRadius: 12,
+                        transition: 'background 0.15s',
+                      }}
+                        onMouseEnter={e => e.currentTarget.style.background = theme.rowHover}
+                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                      >
+                        <div style={{
+                          width: 10, height: 10, borderRadius: 3, flexShrink: 0,
+                          background: `linear-gradient(135deg, ${seg.color}, ${c2})`,
+                          boxShadow: `0 0 12px ${seg.color}80`,
+                        }} />
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{seg.name}</div>
+                          <div style={{ fontSize: 11.5, color: theme.sub, fontWeight: 500, marginTop: 1 }}>{fmt(seg.value, currency)}</div>
+                        </div>
+                        <span style={{
+                          flexShrink: 0,
+                          padding: '4px 9px', borderRadius: 7,
+                          fontSize: 11, fontWeight: 700, letterSpacing: '-0.01em',
+                          background: `${seg.color}26`,
+                          border: `1px solid ${seg.color}40`,
+                          color: chipColor,
+                        }}>{pctLabel}</span>
+                      </div>
+                    )
+                  })}
+                </div>
               </div>
-            </div>
-          )}
+            )
+          })()}
 
         </div>
       </div>

client/src/components/Files/FileManager.tsx

@@ -779,25 +779,81 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
         document.body
       )}
 
-      {/* Header */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-        <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{showTrash ? (t('files.trash') || 'Trash') : t('files.title')}</h2>
-          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-            {showTrash
-              ? `${trashFiles.length} ${trashFiles.length === 1 ? 'file' : 'files'}`
-              : (files.length === 1 ? t('files.countSingular') : t('files.count', { count: files.length }))}
-          </p>
-        </div>
-        <button onClick={toggleTrash} style={{
-          padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)',
-          background: showTrash ? 'var(--accent)' : 'var(--bg-card)',
-          color: showTrash ? 'var(--accent-text)' : 'var(--text-muted)',
-          fontSize: 12, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
-          fontFamily: 'inherit',
+      {/* Toolbar */}
+      <div style={{ padding: '24px 28px 0', flexShrink: 0 }} className="max-md:!px-4 max-md:!pt-4">
+        <div style={{
+          background: 'var(--bg-tertiary)', borderRadius: 18,
+          padding: '14px 16px 14px 22px',
+          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
         }}>
-          <Trash2 size={13} /> {t('files.trash') || 'Trash'}
-        </button>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+            {showTrash ? (t('files.trash') || 'Trash') : t('files.title')}
+          </h2>
+
+          {!showTrash && (
+            <>
+              <div className="hidden md:block" style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+              <div className="hidden md:inline-flex" style={{ gap: 4, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
+                {[
+                  { id: 'all', label: t('files.filterAll') },
+                  ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star } as const] : []),
+                  { id: 'pdf', label: t('files.filterPdf') },
+                  { id: 'image', label: t('files.filterImages') },
+                  { id: 'doc', label: t('files.filterDocs') },
+                  ...(files.some(f => f.note_id) ? [{ id: 'collab', label: t('files.filterCollab') || 'Collab' }] : []),
+                ].map(tab => {
+                  const active = filterType === tab.id
+                  const TabIcon = 'icon' in tab ? tab.icon : null
+                  const count = tab.id === 'all' ? files.length
+                    : tab.id === 'starred' ? files.filter(f => f.starred).length
+                    : tab.id === 'pdf' ? files.filter(f => (f.mime_type || '').includes('pdf') || /\.pdf$/i.test(f.original_name)).length
+                    : tab.id === 'image' ? files.filter(f => (f.mime_type || '').startsWith('image/')).length
+                    : tab.id === 'doc' ? files.filter(f => /\.(docx?|xlsx?|txt|csv)$/i.test(f.original_name)).length
+                    : tab.id === 'collab' ? files.filter(f => f.note_id).length
+                    : 0
+                  return (
+                    <button key={tab.id} onClick={() => setFilterType(tab.id)}
+                      style={{
+                        appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                        display: 'inline-flex', alignItems: 'center', gap: 6,
+                        padding: '6px 12px', borderRadius: 99, fontSize: 13, whiteSpace: 'nowrap',
+                        background: active ? 'var(--bg-card)' : 'transparent',
+                        color: active ? 'var(--text-primary)' : 'var(--text-muted)',
+                        fontWeight: active ? 500 : 400,
+                        boxShadow: active ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
+                        transition: 'all 0.15s ease',
+                      }}
+                    >
+                      {TabIcon ? <TabIcon size={13} fill={active ? '#facc15' : 'none'} color={active ? '#facc15' : 'currentColor'} /> : null}
+                      {'label' in tab && tab.label}
+                      <span style={{
+                        fontSize: 10, fontWeight: 600,
+                        background: active ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
+                        color: 'var(--text-faint)',
+                        padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
+                      }}>{count}</span>
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          )}
+
+          <button onClick={toggleTrash} style={{
+            appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+            padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+            background: 'var(--accent)', color: 'var(--accent-text)',
+            flexShrink: 0, marginLeft: 'auto',
+            opacity: showTrash ? 1 : 0.88,
+            transition: 'opacity 0.15s ease',
+          }}
+            onMouseEnter={e => e.currentTarget.style.opacity = '1'}
+            onMouseLeave={e => e.currentTarget.style.opacity = showTrash ? '1' : '0.88'}
+          >
+            <Trash2 size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">{t('files.trash') || 'Trash'}</span>
+          </button>
+        </div>
       </div>
 
       {showTrash ? (
@@ -835,7 +891,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           {can('file_upload', trip) && <div
             {...getRootProps()}
             style={{
-              margin: '16px 16px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
+              margin: '16px 28px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
               textAlign: 'center', cursor: 'pointer', transition: 'all 0.15s',
               borderColor: isDragActive ? 'var(--text-secondary)' : 'var(--border-primary)',
               background: isDragActive ? 'var(--bg-secondary)' : 'var(--bg-card)',
@@ -860,7 +916,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           </div>}
 
           {/* Filter tabs */}
-          <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
+          <div className="md:!hidden" style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
             {[
               { id: 'all', label: t('files.filterAll') },
               ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star }] : []),
@@ -883,7 +939,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           </div>
 
           {/* File list */}
-          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
+          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 28px 16px' }} className="max-md:!px-4">
             {filteredFiles.length === 0 ? (
               <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
                 <FileText size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />

client/src/components/Map/MapView.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen } from '../../../tests/helpers/render'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import * as photoService from '../../services/photoService'
@@ -16,10 +17,13 @@ vi.mock('react-leaflet', () => ({
       data-lng={position[1]}
       onClick={() => eventHandlers?.click?.()}
     >
+      <button
+        data-testid="marker-hover-trigger"
+        onClick={() => eventHandlers?.mouseover?.({ originalEvent: { clientX: 100, clientY: 100 } })}
+      />
       {children}
     </div>
   ),
-  Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
   Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
   CircleMarker: () => <div data-testid="circle-marker" />,
   Circle: () => <div data-testid="circle" />,
@@ -32,6 +36,7 @@ vi.mock('react-leaflet', () => ({
     off: vi.fn(),
     panBy: vi.fn(),
   }),
+  useMapEvents: () => ({}),
 }))
 
 vi.mock('react-leaflet-cluster', () => ({
@@ -100,22 +105,26 @@ describe('MapView', () => {
     expect(onMarkerClick).toHaveBeenCalledWith(42)
   })
 
-  it('FE-COMP-MAPVIEW-004: tooltip shows place name', () => {
+  it('FE-COMP-MAPVIEW-004: tooltip shows place name', async () => {
+    const user = userEvent.setup()
     const places = [buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 })]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('Eiffel Tower')
   })
 
-  it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', () => {
+  it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', async () => {
+    const user = userEvent.setup()
     const places = [
       buildMapPlace({ name: 'Louvre', lat: 48.86, lng: 2.337, category_name: 'Museum', category_icon: null }),
     ]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('Museum')
   })
 
   it('FE-COMP-MAPVIEW-006: renders polyline when route has 2+ points', () => {
-    render(<MapView route={[[48.0, 2.0], [49.0, 3.0]]} />)
+    render(<MapView route={[[[48.0, 2.0], [49.0, 3.0]]]} />)
     expect(screen.getByTestId('polyline')).toBeTruthy()
   })
 
@@ -125,7 +134,7 @@ describe('MapView', () => {
   })
 
   it('FE-COMP-MAPVIEW-008: does not render polyline for single-point route', () => {
-    render(<MapView route={[[48.0, 2.0]]} />)
+    render(<MapView route={[[[48.0, 2.0]]]} />)
     expect(screen.queryByTestId('polyline')).toBeNull()
   })
 
@@ -144,7 +153,7 @@ describe('MapView', () => {
   })
 
   it('FE-COMP-MAPVIEW-011: renders RouteLabel marker when routeSegments provided with route', () => {
-    const route = [[48.0, 2.0], [49.0, 3.0]] as [number, number][]
+    const route = [[[48.0, 2.0], [49.0, 3.0]]] as [number, number][][][]
     const routeSegments = [
       { mid: [48.5, 2.5] as [number, number], from: 0, to: 1, walkingText: '10 min', drivingText: '3 min' },
     ]
@@ -190,11 +199,13 @@ describe('MapView', () => {
     vi.mocked(photoService.getCached).mockReturnValue(null)
   })
 
-  it('FE-COMP-MAPVIEW-016: tooltip shows address when present', () => {
+  it('FE-COMP-MAPVIEW-016: tooltip shows address when present', async () => {
+    const user = userEvent.setup()
     const places = [
       buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, address: '5 Av. Anatole France' }),
     ]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('5 Av. Anatole France')
   })
 

client/src/components/Map/MapView.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Tooltip, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+import ReservationOverlay from './ReservationOverlay'
+import type { Reservation } from '../../types'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -367,6 +369,35 @@ function LocationTracker() {
   )
 }
 
+interface MemoMarkerProps {
+  place: any
+  isSelected: boolean
+  orderNumbers: number[] | null
+  photoUrl: string | null
+  onClickPlace: (id: number) => void
+  onHover: (place: any, x: number, y: number) => void
+  onHoverOut: () => void
+}
+
+const MemoMarker = memo(function MemoMarker({
+  place, isSelected, orderNumbers, photoUrl, onClickPlace, onHover, onHoverOut,
+}: MemoMarkerProps) {
+  const icon = createPlaceIcon({ ...place, image_url: photoUrl }, orderNumbers, isSelected)
+  return (
+    <Marker
+      position={[place.lat, place.lng]}
+      icon={icon}
+      eventHandlers={{
+        click: () => onClickPlace(place.id),
+        mouseover: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
+        mousemove: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
+        mouseout: onHoverOut,
+      }}
+      zIndexOffset={isSelected ? 1000 : 0}
+    />
+  )
+})
+
 export const MapView = memo(function MapView({
   places = [],
   dayPlaces = [],
@@ -385,7 +416,16 @@ export const MapView = memo(function MapView({
   rightWidth = 0,
   hasInspector = false,
   hasDayDetail = false,
-}) {
+  reservations = [] as Reservation[],
+  showReservationStats = false,
+  visibleConnectionIds = [] as number[],
+  onReservationClick,
+}: any) {
+  const visibleReservations = useMemo(() => {
+    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
+    const set = new Set(visibleConnectionIds)
+    return reservations.filter((r: Reservation) => set.has(r.id))
+  }, [reservations, visibleConnectionIds])
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   const paddingOpts = useMemo(() => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -397,18 +437,48 @@ export const MapView = memo(function MapView({
     return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
+  // Hover state for the single tooltip overlay (replaces per-marker <Tooltip>)
+  const [hoveredPlace, setHoveredPlace] = useState<any>(null)
+  const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
+
+  const handleMarkerHover = useCallback((place: any, x: number, y: number) => {
+    setHoveredPlace(place)
+    setTooltipPos({ x, y })
+  }, [])
+
+  const handleMarkerHoverOut = useCallback(() => {
+    setHoveredPlace(null)
+  }, [])
+
+  const handleMarkerClick = useCallback((id: number) => {
+    onMarkerClick?.(id)
+  }, [onMarkerClick])
+
   // photoUrls: only base64 thumbs for smooth map zoom
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
+  // Batch photo state updates through a RAF so N simultaneous photo loads
+  // collapse into a single re-render instead of N separate renders.
+  const pendingThumbsRef = useRef<Record<string, string>>({})
+  const thumbRafRef = useRef<number | null>(null)
 
-  // Fetch photos via shared service — subscribe to thumb (base64) availability
   const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
   useEffect(() => {
     if (!places || places.length === 0 || !placesPhotosEnabled) return
     const cleanups: (() => void)[] = []
 
     const setThumb = (cacheKey: string, thumb: string) => {
-      setPhotoUrls(prev => prev[cacheKey] === thumb ? prev : { ...prev, [cacheKey]: thumb })
+      pendingThumbsRef.current[cacheKey] = thumb
+      if (thumbRafRef.current !== null) return
+      thumbRafRef.current = requestAnimationFrame(() => {
+        thumbRafRef.current = null
+        const pending = pendingThumbsRef.current
+        pendingThumbsRef.current = {}
+        setPhotoUrls(prev => {
+          const hasChange = Object.entries(pending).some(([k, v]) => prev[k] !== v)
+          return hasChange ? { ...prev, ...pending } : prev
+        })
+      })
     }
 
     for (const place of places) {
@@ -421,11 +491,9 @@ export const MapView = memo(function MapView({
         continue
       }
 
-      // Subscribe for when thumb becomes available
       cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
 
       if (!cached && !isLoading(cacheKey)) {
-        // Use the persisted proxy URL as photoId so photoService generates a base64 thumb from it
         const photoId = place.image_url || place.google_place_id || place.osm_id
         if (photoId || (place.lat && place.lng)) {
           fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
@@ -433,7 +501,13 @@ export const MapView = memo(function MapView({
       }
     }
 
-    return () => cleanups.forEach(fn => fn())
+    return () => {
+      cleanups.forEach(fn => fn())
+      if (thumbRafRef.current !== null) {
+        cancelAnimationFrame(thumbRafRef.current)
+        thumbRafRef.current = null
+      }
+    }
   }, [placeIds, placesPhotosEnabled])
 
   const clusterIconCreateFunction = useCallback((cluster) => {
@@ -446,57 +520,49 @@ export const MapView = memo(function MapView({
     })
   }, [])
 
-  const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+  const isTouchDevice = typeof window !== 'undefined' && navigator.maxTouchPoints > 0
 
   const markers = useMemo(() => places.map((place) => {
     const isSelected = place.id === selectedPlaceId
     const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-    const resolvedPhoto = (pck && photoUrls[pck]) || place.image_url || null
+    const photoUrl = (pck && photoUrls[pck]) || place.image_url || null
     const orderNumbers = dayOrderMap[place.id] ?? null
-    const icon = createPlaceIcon({ ...place, image_url: resolvedPhoto }, orderNumbers, isSelected)
-
     return (
-      <Marker
+      <MemoMarker
         key={place.id}
-        position={[place.lat, place.lng]}
-        icon={icon}
-        eventHandlers={{
-          click: () => onMarkerClick && onMarkerClick(place.id),
-        }}
-        zIndexOffset={isSelected ? 1000 : 0}
-      >
-        <Tooltip
-          direction="right"
-          offset={[0, 0]}
-          opacity={1}
-          className="map-tooltip"
-          permanent={isTouchDevice && isSelected}
-        >
-          <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-            <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
-              {place.name}
-            </div>
-            {place.category_name && (() => {
-              const CatIcon = getCategoryIcon(place.category_icon)
-              return (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
-                  <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
-                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
-                </div>
-              )
-            })()}
-            {place.address && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                {place.address}
-              </div>
-            )}
-          </div>
-        </Tooltip>
-      </Marker>
+        place={place}
+        isSelected={isSelected}
+        orderNumbers={orderNumbers}
+        photoUrl={photoUrl}
+        onClickPlace={handleMarkerClick}
+        onHover={handleMarkerHover}
+        onHoverOut={handleMarkerHoverOut}
+      />
     )
-  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick, isTouchDevice])
+  }), [places, selectedPlaceId, dayOrderMap, photoUrls, handleMarkerClick, handleMarkerHover, handleMarkerHoverOut])
+
+  const gpxPolylines = useMemo(() => places.flatMap(place => {
+    if (!place.route_geometry) return []
+    try {
+      const coords = JSON.parse(place.route_geometry) as [number, number][]
+      if (!coords || coords.length < 2) return []
+      return [(
+        <Polyline
+          key={`gpx-${place.id}`}
+          positions={coords}
+          color={place.category_color || '#3b82f6'}
+          weight={3.5}
+          opacity={0.75}
+        />
+      )]
+    } catch { return [] }
+  }), [places])
+
+  const TooltipOverlay = hoveredPlace && tooltipPos && !isTouchDevice
+  const CatIcon = TooltipOverlay ? getCategoryIcon(hoveredPlace.category_icon) : null
 
   return (
+    <>
     <MapContainer
       id="trek-map"
       center={center}
@@ -537,15 +603,18 @@ export const MapView = memo(function MapView({
         {markers}
       </MarkerClusterGroup>
 
-      {route && route.length > 1 && (
+      {route && route.length > 0 && (
         <>
-          <Polyline
-            positions={route}
-            color="#111827"
-            weight={3}
-            opacity={0.9}
-            dashArray="6, 5"
-          />
+          {route.map((seg, i) => seg.length > 1 && (
+            <Polyline
+              key={i}
+              positions={seg}
+              color="#111827"
+              weight={3}
+              opacity={0.9}
+              dashArray="6, 5"
+            />
+          ))}
           {routeSegments.map((seg, i) => (
             <RouteLabel key={i} midpoint={seg.mid} from={seg.from} to={seg.to} walkingText={seg.walkingText} drivingText={seg.drivingText} />
           ))}
@@ -553,22 +622,47 @@ export const MapView = memo(function MapView({
       )}
 
       {/* GPX imported route geometries */}
-      {places.map((place) => {
-        if (!place.route_geometry) return null
-        try {
-          const coords = JSON.parse(place.route_geometry) as [number, number][]
-          if (!coords || coords.length < 2) return null
-          return (
-            <Polyline
-              key={`gpx-${place.id}`}
-              positions={coords}
-              color={place.category_color || '#3b82f6'}
-              weight={3.5}
-              opacity={0.75}
-            />
-          )
-        } catch { return null }
-      })}
+      {gpxPolylines}
+
+      <ReservationOverlay
+        reservations={visibleReservations}
+        showConnections
+        showStats={showReservationStats}
+        onEndpointClick={onReservationClick}
+      />
     </MapContainer>
+
+    {TooltipOverlay && (
+      <div data-testid="tooltip" style={{
+        position: 'fixed',
+        left: tooltipPos.x + 14,
+        top: tooltipPos.y - 10,
+        zIndex: 9999,
+        pointerEvents: 'none',
+        background: 'white',
+        borderRadius: 8,
+        boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
+        padding: '6px 10px',
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+        maxWidth: 220,
+        whiteSpace: 'nowrap',
+      }}>
+        <div style={{ fontWeight: 600, fontSize: 12, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {hoveredPlace.name}
+        </div>
+        {hoveredPlace.category_name && CatIcon && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
+            <CatIcon size={10} style={{ color: hoveredPlace.category_color || '#6b7280', flexShrink: 0 }} />
+            <span style={{ fontSize: 11, color: '#6b7280' }}>{hoveredPlace.category_name}</span>
+          </div>
+        )}
+        {hoveredPlace.address && (
+          <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {hoveredPlace.address}
+          </div>
+        )}
+      </div>
+    )}
+    </>
   )
 })

client/src/components/Map/ReservationOverlay.tsx

@@ -0,0 +1,447 @@
+import { createElement, useEffect, useMemo, useRef, useState } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
+import L from 'leaflet'
+import { Plane, Train, Ship, Car } from 'lucide-react'
+import { useSettingsStore } from '../../store/settingsStore'
+import type { Reservation, ReservationEndpoint } from '../../types'
+
+const ENDPOINT_PANE = 'reservation-endpoints'
+const AIRPORT_BADGE_HALF_PX = 16
+const BADGE_GAP_PX = 5
+
+type TransportType = 'flight' | 'train' | 'cruise' | 'car'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
+
+const TRANSPORT_COLOR = '#3b82f6'
+
+const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geodesic: boolean }> = {
+  flight: { color: TRANSPORT_COLOR, icon: Plane, geodesic: true },
+  train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
+  cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
+  car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
+}
+
+function useEndpointPane() {
+  const map = useMap()
+  useMemo(() => {
+    if (typeof map?.getPane !== 'function' || typeof map?.createPane !== 'function') return
+    if (!map.getPane(ENDPOINT_PANE)) {
+      const pane = map.createPane(ENDPOINT_PANE)
+      pane.style.zIndex = '650'
+      pane.style.pointerEvents = 'auto'
+    }
+  }, [map])
+}
+
+function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
+  const { icon: IconCmp, color } = TYPE_META[type]
+  const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
+  const labelHtml = label ? `<span>${label}</span>` : ''
+  const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
+  return L.divIcon({
+    className: 'trek-endpoint-marker',
+    html: `<div style="
+      display:inline-flex;align-items:center;justify-content:center;gap:4px;
+      padding:0 8px;border-radius:999px;
+      background:${color};box-shadow:0 2px 6px rgba(0,0,0,0.25);
+      border:1.5px solid #fff;color:#fff;
+      font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+      box-sizing:border-box;height:22px;white-space:nowrap;
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
+    iconSize: [estWidth, 22],
+    iconAnchor: [estWidth / 2, 11],
+    popupAnchor: [0, -11],
+  })
+}
+
+function toRad(d: number) { return d * Math.PI / 180 }
+function toDeg(r: number) { return r * 180 / Math.PI }
+
+function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
+  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
+  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
+  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
+  if (d === 0) return [a, b]
+  const pts: [number, number][] = []
+  for (let i = 0; i <= steps; i++) {
+    const f = i / steps
+    const A = Math.sin((1 - f) * d) / Math.sin(d)
+    const B = Math.sin(f * d) / Math.sin(d)
+    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
+    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
+    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
+    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
+    const lng = Math.atan2(y, x)
+    pts.push([toDeg(lat), toDeg(lng)])
+  }
+  return pts
+}
+
+function splitAntimeridian(points: [number, number][]): [number, number][][] {
+  const segments: [number, number][][] = []
+  let cur: [number, number][] = []
+  for (let i = 0; i < points.length; i++) {
+    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
+      if (cur.length > 1) segments.push(cur)
+      cur = []
+    }
+    cur.push(points[i])
+  }
+  if (cur.length > 1) segments.push(cur)
+  return segments
+}
+
+function cleanName(name: string): string {
+  return name.replace(/\s*\([^)]*\)/g, '').trim()
+}
+
+function haversineKm(a: [number, number], b: [number, number]): number {
+  const R = 6371
+  const dLat = toRad(b[0] - a[0])
+  const dLng = toRad(b[1] - a[1])
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a[0])) * Math.cos(toRad(b[0])) * Math.sin(dLng / 2) ** 2
+  return 2 * R * Math.asin(Math.sqrt(h))
+}
+
+function parseInTz(isoLocal: string, tz: string): number {
+  const [datePart, timePart] = isoLocal.split('T')
+  const [y, mo, d] = datePart.split('-').map(Number)
+  const [h, mi] = (timePart || '00:00').split(':').map(Number)
+  const guess = Date.UTC(y, mo - 1, d, h, mi)
+  const fmt = new Intl.DateTimeFormat('en-US', {
+    timeZone: tz, hour12: false,
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  })
+  const parts = Object.fromEntries(fmt.formatToParts(new Date(guess)).filter(p => p.type !== 'literal').map(p => [p.type, p.value]))
+  const asUtc = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour) % 24, Number(parts.minute), Number(parts.second))
+  return guess - (asUtc - guess)
+}
+
+function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fallbackStart: string | null, fallbackEnd: string | null): string | null {
+  let start = from.local_date && from.local_time ? `${from.local_date}T${from.local_time}` : fallbackStart
+  let end = to.local_date && to.local_time ? `${to.local_date}T${to.local_time}` : fallbackEnd
+  if (!start || !end) return null
+
+  if (!start.includes('T') && end.includes('T')) start = `${end.split('T')[0]}T${start}`
+  if (!end.includes('T') && start.includes('T')) end = `${start.split('T')[0]}T${end}`
+  if (!start.includes('T') || !end.includes('T')) return null
+
+  const fromTz = from.timezone || to.timezone
+  const toTz = to.timezone || fromTz
+
+  let startMs: number, endMs: number
+  if (fromTz && toTz) {
+    startMs = parseInTz(start, fromTz)
+    endMs = parseInTz(end, toTz)
+  } else {
+    startMs = new Date(start).getTime()
+    endMs = new Date(end).getTime()
+  }
+  if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) return null
+  if (endMs <= startMs) endMs += 24 * 60 * 60000
+  const minutes = Math.round((endMs - startMs) / 60000)
+  if (minutes <= 0 || minutes > 48 * 60) return null
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+interface TransportItem {
+  res: Reservation
+  from: ReservationEndpoint
+  to: ReservationEndpoint
+  type: TransportType
+  arcs: [number, number][][]
+  primaryArc: [number, number][]
+  fallback: [number, number]
+  mainLabel: string | null
+  subLabel: string | null
+}
+
+function buildStatsHtml(color: string, mainLabel: string | null, subLabel: string | null): { html: string; width: number; height: number } {
+  const estWidth = Math.max(
+    mainLabel ? mainLabel.length * 6.5 : 0,
+    subLabel ? subLabel.length * 5.5 : 0,
+  ) + 22
+  const hasBoth = !!mainLabel && !!subLabel
+  const height = hasBoth ? 36 : 22
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const html = `<div class="trek-stats-inner" style="
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    width:100%;height:100%;
+    padding:0 11px;border-radius:999px;
+    background:rgba(17,24,39,0.92);color:#fff;
+    box-shadow:0 2px 6px rgba(0,0,0,0.25);
+    border:1px solid ${color}aa;
+    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
+    white-space:nowrap;box-sizing:border-box;
+    transform-origin:center;
+    will-change:transform;
+  ">${main}${sub}</div>`
+  return { html, width: estWidth, height }
+}
+
+function StatsLabel({ item }: { item: TransportItem }) {
+  const map = useMap()
+  const markerRef = useRef<L.Marker | null>(null)
+  const innerRef = useRef<HTMLElement | null>(null)
+
+  const arc = item.primaryArc
+  const color = TYPE_META[item.type].color
+
+  const { html, width, height } = useMemo(() => buildStatsHtml(color, item.mainLabel, item.subLabel), [color, item.mainLabel, item.subLabel])
+  const buffer = AIRPORT_BADGE_HALF_PX + width / 2 + BADGE_GAP_PX
+
+  const compute = () => {
+    if (arc.length < 2) return null
+    const size = map.getSize()
+    const pts = arc.map(p => map.latLngToContainerPoint(p as L.LatLngTuple))
+    const cum: number[] = [0]
+    let total = 0
+    for (let i = 1; i < pts.length; i++) {
+      total += pts[i].distanceTo(pts[i - 1])
+      cum.push(total)
+    }
+    if (total <= 0) return null
+
+    const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+    const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+
+    const isIn = (p: L.Point) => {
+      if (p.x < -40 || p.x > size.x + 40 || p.y < -40 || p.y > size.y + 40) return false
+      if (p.distanceTo(fromPx) < buffer) return false
+      if (p.distanceTo(toPx) < buffer) return false
+      return true
+    }
+
+    let firstIdx = -1
+    let lastIdx = -1
+    for (let i = 0; i < pts.length; i++) {
+      if (isIn(pts[i])) {
+        if (firstIdx < 0) firstIdx = i
+        lastIdx = i
+      }
+    }
+    if (firstIdx < 0) {
+      const target = total / 2
+      let sIdx = 0
+      while (sIdx < cum.length - 2 && cum[sIdx + 1] < target) sIdx++
+      const span = cum[sIdx + 1] - cum[sIdx]
+      const tm = span > 0 ? (target - cum[sIdx]) / span : 0
+      const pA = pts[sIdx]
+      const pB = pts[sIdx + 1]
+      const mx = pA.x + (pB.x - pA.x) * tm
+      const my = pA.y + (pB.y - pA.y) * tm
+      const latlng = map.containerPointToLatLng([mx, my])
+      let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
+      if (angle > 90) angle -= 180
+      if (angle < -90) angle += 180
+      return { point: [latlng.lat, latlng.lng] as [number, number], angle }
+    }
+
+    const bisectFraction = (a: L.Point, b: L.Point) => {
+      let lo = 0, hi = 1
+      for (let k = 0; k < 10; k++) {
+        const mid = (lo + hi) / 2
+        const mp = L.point(a.x + (b.x - a.x) * mid, a.y + (b.y - a.y) * mid)
+        if (isIn(mp)) hi = mid
+        else lo = mid
+      }
+      return (lo + hi) / 2
+    }
+
+    let lowCum = cum[firstIdx]
+    if (firstIdx > 0) {
+      const t = bisectFraction(pts[firstIdx - 1], pts[firstIdx])
+      lowCum = cum[firstIdx - 1] + (cum[firstIdx] - cum[firstIdx - 1]) * t
+    }
+    let highCum = cum[lastIdx]
+    if (lastIdx < pts.length - 1) {
+      const t = bisectFraction(pts[lastIdx + 1], pts[lastIdx])
+      highCum = cum[lastIdx] + (cum[lastIdx + 1] - cum[lastIdx]) * (1 - t)
+    }
+
+    const targetLen = (lowCum + highCum) / 2
+
+    let segIdx = 0
+    while (segIdx < cum.length - 2 && cum[segIdx + 1] < targetLen) segIdx++
+    const segSpan = cum[segIdx + 1] - cum[segIdx]
+    const t = segSpan > 0 ? (targetLen - cum[segIdx]) / segSpan : 0
+    const pA = pts[segIdx]
+    const pB = pts[segIdx + 1]
+    const px = pA.x + (pB.x - pA.x) * t
+    const py = pA.y + (pB.y - pA.y) * t
+    const latlng = map.containerPointToLatLng([px, py])
+
+    let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
+    if (angle > 90) angle -= 180
+    if (angle < -90) angle += 180
+
+    return { point: [latlng.lat, latlng.lng] as [number, number], angle }
+  }
+
+  const apply = () => {
+    const pose = compute()
+    const marker = markerRef.current
+    if (!marker) return
+    const el = marker.getElement() as HTMLElement | null
+    if (!pose) {
+      if (el) el.style.display = 'none'
+      return
+    }
+    if (el) el.style.display = ''
+    marker.setLatLng(pose.point as L.LatLngTuple)
+    if (!innerRef.current && el) innerRef.current = el.querySelector('.trek-stats-inner') as HTMLElement | null
+    if (innerRef.current) innerRef.current.style.transform = `rotate(${pose.angle}deg)`
+  }
+
+  useEffect(() => {
+    const icon = L.divIcon({
+      className: 'trek-endpoint-stats',
+      html,
+      iconSize: [width, height],
+      iconAnchor: [width / 2, height / 2],
+    })
+    const marker = L.marker([0, 0], { icon, pane: ENDPOINT_PANE, interactive: false, keyboard: false })
+    marker.addTo(map)
+    markerRef.current = marker
+    innerRef.current = null
+    apply()
+    return () => {
+      marker.remove()
+      markerRef.current = null
+      innerRef.current = null
+    }
+  }, [map, html, width, height])
+
+  useMapEvents({
+    move: apply,
+    zoom: apply,
+    viewreset: apply,
+    resize: apply,
+  })
+
+  return null
+}
+
+interface Props {
+  reservations: Reservation[]
+  showConnections: boolean
+  showStats: boolean
+  onEndpointClick?: (reservationId: number) => void
+}
+
+export default function ReservationOverlay({ reservations, showConnections, showStats, onEndpointClick }: Props) {
+  useEndpointPane()
+  const map = useMap()
+  const [zoom, setZoom] = useState(() => map.getZoom())
+  useMapEvents({
+    zoomend: () => setZoom(map.getZoom()),
+  })
+  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+
+  const items = useMemo<TransportItem[]>(() => {
+    const out: TransportItem[] = []
+    for (const r of reservations) {
+      if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
+      const eps = r.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      if (!from || !to) continue
+      const type = r.type as TransportType
+      const isGeo = TYPE_META[type].geodesic
+      const arcs = isGeo
+        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+      const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
+      const primaryArc = arcs[primaryIdx] ?? []
+      const fallback: [number, number] = primaryArc.length > 0
+        ? (primaryArc[Math.floor(primaryArc.length / 2)] ?? [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2])
+        : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
+
+      const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
+      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+      const subParts = [duration, distance].filter(Boolean) as string[]
+      const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
+
+      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+    }
+    return out
+  }, [reservations])
+
+  const visibleItems = useMemo(() => {
+    return items.filter(item => {
+      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
+      return fromPx.distanceTo(toPx) >= minPx
+    })
+  }, [items, zoom, map])
+
+  const labelVisibleIds = useMemo(() => {
+    const set = new Set<number>()
+    for (const item of visibleItems) {
+      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
+      if (fromPx.distanceTo(toPx) >= minPx) set.add(item.res.id)
+    }
+    return set
+  }, [visibleItems, zoom, map])
+
+  if (!showConnections) return null
+
+  return (
+    <>
+      {visibleItems.map(item => item.arcs.map((seg, segIdx) => (
+        <Polyline
+          key={`line-${item.res.id}-${segIdx}`}
+          positions={seg}
+          pathOptions={{
+            color: TYPE_META[item.type].color,
+            weight: 2.5,
+            opacity: item.res.status === 'confirmed' ? 0.75 : 0.55,
+            dashArray: item.res.status === 'confirmed' ? undefined : '6, 6',
+          }}
+        />
+      )))}
+
+      {visibleItems.flatMap(item => [
+        <Marker
+          key={`from-${item.res.id}`}
+          position={[item.from.lat, item.from.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
+            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+        <Marker
+          key={`to-${item.res.id}`}
+          position={[item.to.lat, item.to.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
+            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+      ])}
+
+      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
+        <StatsLabel key={`stats-${item.res.id}`} item={item} />
+      ))}
+    </>
+  )
+}

client/src/components/Packing/PackingListPanel.tsx

@@ -729,9 +729,11 @@ function MenuItem({ icon, label, onClick, danger }: MenuItemProps) {
 interface PackingListPanelProps {
   tripId: number
   items: PackingItem[]
+  openImportSignal?: number
+  inlineHeader?: boolean
 }
 
-export default function PackingListPanel({ tripId, items }: PackingListPanelProps) {
+export default function PackingListPanel({ tripId, items, openImportSignal = 0, inlineHeader = true }: PackingListPanelProps) {
   const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCatName, setNewCatName] = useState('')
@@ -896,6 +898,14 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
   const [saveTemplateName, setSaveTemplateName] = useState('')
   const [showImportModal, setShowImportModal] = useState(false)
   const [importText, setImportText] = useState('')
+  const lastHandledImportSignal = useRef(openImportSignal)
+
+  useEffect(() => {
+    if (openImportSignal !== lastHandledImportSignal.current && openImportSignal > 0) {
+      setShowImportModal(true)
+    }
+    lastHandledImportSignal.current = openImportSignal
+  }, [openImportSignal])
   const csvInputRef = useRef<HTMLInputElement>(null)
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
@@ -999,15 +1009,34 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
 
       {/* ── Header ── */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
-          <div>
-            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
-            <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-              {items.length === 0 ? t('packing.empty') : t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
-            </p>
-          </div>
+      <div style={{ padding: inlineHeader ? '20px 24px 16px' : '0 0 16px', flexShrink: 0, borderBottom: inlineHeader ? '1px solid rgba(0,0,0,0.06)' : undefined }}>
+        <div style={{ display: 'flex', alignItems: inlineHeader ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 14 }}>
+          {inlineHeader ? (
+            <div>
+              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
+              {items.length > 0 && (
+                <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
+                  {t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
+                </p>
+              )}
+            </div>
+          ) : (
+            items.length > 0 ? (
+              <p style={{ margin: 0, fontSize: 12.5, color: 'var(--text-faint)' }}>
+                {t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
+              </p>
+            ) : <span />
+          )}
           <div style={{ display: 'flex', gap: 6 }}>
+            {inlineHeader && canEdit && (
+              <button onClick={() => setShowImportModal(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)',
+              }}>
+                <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
+              </button>
+            )}
             {canEdit && abgehakt > 0 && (
               <button onClick={handleClearChecked} style={{
                 fontSize: 11.5, padding: '5px 10px', borderRadius: 99, border: '1px solid rgba(239,68,68,0.3)',
@@ -1017,15 +1046,6 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
                 <span className="sm:hidden">{t('packing.clearCheckedShort', { count: abgehakt })}</span>
               </button>
             )}
-            {canEdit && (
-            <button onClick={() => setShowImportModal(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)',
-            }}>
-              <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
-            </button>
-            )}
             {canEdit && availableTemplates.length > 0 && (
               <div ref={templateDropdownRef} style={{ position: 'relative' }}>
                 <button onClick={() => setShowTemplateDropdown(v => !v)} disabled={applyingTemplate} style={{
@@ -1151,7 +1171,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
 
       {/* ── Filter-Tabs ── */}
       {items.length > 0 && (
-        <div style={{ display: 'flex', gap: 4, padding: '10px 16px 0', flexShrink: 0 }}>
+        <div style={{ display: 'flex', gap: 4, padding: '10px 0 0', flexShrink: 0 }}>
           {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
             <button key={id} onClick={() => setFilter(id)} style={{
               padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
@@ -1165,7 +1185,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
 
       {/* ── Liste + Bags Sidebar ── */}
       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px 16px' }}>
+      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
         {items.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
             <Luggage size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 10px' }} />

client/src/components/Planner/AirportSelect.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Plane, X } from 'lucide-react'
+import { airportsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+export interface Airport {
+  iata: string
+  icao: string | null
+  name: string
+  city: string
+  country: string
+  lat: number
+  lng: number
+  tz: string
+}
+
+interface Props {
+  value: Airport | null
+  onChange: (airport: Airport | null) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+function formatLabel(a: Airport) {
+  return `${a.city || a.name} (${a.iata})`
+}
+
+export default function AirportSelect({ value, onChange, placeholder, style }: Props) {
+  const { t, locale } = useTranslation()
+  const countryName = useMemo(() => {
+    try { return new Intl.DisplayNames([locale || 'en'], { type: 'region' }) } catch { return null }
+  }, [locale])
+  const displayCountry = (code: string) => {
+    if (!code) return ''
+    try { return countryName?.of(code) || code } catch { return code }
+  }
+  const [query, setQuery] = useState(value ? formatLabel(value) : '')
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<Airport[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const abortRef = useRef<AbortController | null>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    setQuery(value ? formatLabel(value) : '')
+  }, [value])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = query.trim()
+    if (trimmed.length < 2 || (value && trimmed === formatLabel(value))) {
+      setResults([])
+      return
+    }
+    debounceRef.current = setTimeout(async () => {
+      abortRef.current?.abort()
+      const controller = new AbortController()
+      abortRef.current = controller
+      setLoading(true)
+      try {
+        const data = await airportsApi.search(trimmed, controller.signal)
+        setResults(Array.isArray(data) ? data : [])
+        setHighlight(-1)
+      } catch (err: any) {
+        if (err?.name !== 'AbortError' && err?.name !== 'CanceledError') {
+          setResults([])
+        }
+      } finally {
+        setLoading(false)
+      }
+    }, 220)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query, value])
+
+  const pick = (a: Airport) => {
+    onChange(a)
+    setQuery(formatLabel(a))
+    setOpen(false)
+    setResults([])
+  }
+
+  const clear = () => {
+    onChange(null)
+    setQuery('')
+    setResults([])
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <Plane size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <input
+          type="text"
+          value={query}
+          placeholder={placeholder ?? t('airport.searchPlaceholder')}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={onKey}
+          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
+        />
+        {value && (
+          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {open && (loading || results.length > 0) && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
+          )}
+          {results.map((a, i) => (
+            <button
+              key={a.iata}
+              type="button"
+              onClick={() => pick(a)}
+              onMouseEnter={() => setHighlight(i)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
+                color: 'var(--text-primary)', fontFamily: 'inherit',
+              }}
+            >
+              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', minWidth: 32 }}>{a.iata}</span>
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.city || a.name}</div>
+                <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}{a.country ? ` · ${displayCountry(a.country)}` : ''}</div>
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebar.test.tsx

@@ -440,26 +440,27 @@ describe('DayPlanSidebar', () => {
       type: 'flight',
       title: 'Paris to London',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation] })} />)
     expect(screen.getByText('Paris to London')).toBeInTheDocument()
   })
 
-  it('FE-PLANNER-DAYPLAN-031: clicking transport item shows detail modal', async () => {
+  it('FE-PLANNER-DAYPLAN-031: clicking transport item calls onEditTransport', async () => {
     const user = userEvent.setup()
+    const onEditTransport = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel Day' })
     const reservation = buildReservation({
       id: 200,
       type: 'flight',
       title: 'Air France 123',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation] })} />)
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation], onEditTransport })} />)
     await user.click(screen.getByText('Air France 123'))
-    // Detail modal should appear (shows the title again in the modal)
     await waitFor(() => {
-      const titles = screen.getAllByText('Air France 123')
-      expect(titles.length).toBeGreaterThan(1)
+      expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 200 }))
     })
   })
 
@@ -664,6 +665,7 @@ describe('DayPlanSidebar', () => {
     const reservation = buildReservation({
       id: 200, type: 'flight', title: 'CDG to LHR',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day],
@@ -684,6 +686,8 @@ describe('DayPlanSidebar', () => {
       id: 201, type: 'flight', title: 'Transatlantic',
       reservation_time: '2025-06-01T22:00:00',
       reservation_end_time: '2025-06-02T06:00:00',
+      day_id: 10,
+      end_day_id: 11,
     } as any)
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day1, day2],
@@ -704,6 +708,8 @@ describe('DayPlanSidebar', () => {
       id: 300, type: 'car', title: 'Renault Rental',
       reservation_time: '2025-06-01T09:00:00',
       reservation_end_time: '2025-06-03T17:00:00',
+      day_id: 10,
+      end_day_id: 12,
     } as any)
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day1, day2, day3],
@@ -786,20 +792,22 @@ describe('DayPlanSidebar', () => {
 
   // ── Transport detail modal with metadata ───────────────────────────────
 
-  it('FE-PLANNER-DAYPLAN-051: transport detail modal shows flight metadata', async () => {
+  it('FE-PLANNER-DAYPLAN-051: clicking flight transport calls onEditTransport with reservation', async () => {
     const user = userEvent.setup()
+    const onEditTransport = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel' })
     const reservation = {
       ...buildReservation({
         id: 202, type: 'flight', title: 'Paris to Berlin',
         reservation_time: '2025-06-01T07:30:00',
+        day_id: 10,
       }),
       metadata: JSON.stringify({ airline: 'Lufthansa', flight_number: 'LH1234', departure_airport: 'CDG', arrival_airport: 'BER' }),
     }
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation as any] })} />)
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation as any], onEditTransport })} />)
     await user.click(screen.getByText('Paris to Berlin'))
     await waitFor(() => {
-      expect(screen.getByText('Lufthansa')).toBeInTheDocument()
+      expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 202, type: 'flight' }))
     })
   })
 
@@ -1124,6 +1132,7 @@ describe('DayPlanSidebar', () => {
     const flight = buildReservation({
       id: 201, type: 'flight', title: 'Afternoon Flight',
       reservation_time: '2025-06-01T14:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [flight],
@@ -1683,4 +1692,42 @@ describe('DayPlanSidebar', () => {
     // Optimize button should not be visible when no day is selected
     expect(screen.queryByRole('button', { name: /optimize/i })).not.toBeInTheDocument()
   })
+
+  // ── Edit reservation pencil button ───────────────────────────────────────
+
+  it('FE-PLANNER-DAYPLAN-097: pencil button on non-transport reservation calls onEditReservation', async () => {
+    const user = userEvent.setup()
+    const place = buildPlace({ id: 1, name: 'Hotel du Lac' })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const res = buildReservation({ id: 77, trip_id: 1, type: 'hotel', status: 'pending', assignment_id: 99 } as any)
+    const onEditReservation = vi.fn()
+    const onEditTransport = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
+      onEditReservation, onEditTransport,
+    })} />)
+    const pencil = screen.getByTitle(/edit/i)
+    await user.click(pencil)
+    expect(onEditReservation).toHaveBeenCalledWith(res)
+    expect(onEditTransport).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-098: pencil button on transport reservation calls onEditTransport', async () => {
+    const user = userEvent.setup()
+    const place = buildPlace({ id: 1, name: 'Geneva Airport' })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const res = buildReservation({ id: 88, trip_id: 1, type: 'flight', status: 'pending', assignment_id: 99 } as any)
+    const onEditReservation = vi.fn()
+    const onEditTransport = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
+      onEditReservation, onEditTransport,
+    })} />)
+    const pencil = screen.getByTitle(/edit/i)
+    await user.click(pencil)
+    expect(onEditTransport).toHaveBeenCalledWith(res)
+    expect(onEditReservation).not.toHaveBeenCalled()
+  })
 })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
-interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; fromDayId?: string }
+interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; reservationId?: string; fromDayId?: string; phase?: 'single' | 'start' | 'middle' | 'end' }
 declare global { interface Window { __dragData: DragDataPayload | null } }
 
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ReactDOM from 'react-dom'
-import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Route as RouteIcon } from 'lucide-react'
 
 const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 import { assignmentsApi, reservationsApi } from '../../api/client'
@@ -170,6 +170,10 @@ interface DayPlanSidebarProps {
   onEditPlace: (place: Place) => void
   onDeletePlace: (placeId: number) => void
   reservations?: Reservation[]
+  visibleConnectionIds?: number[]
+  onToggleConnection?: (reservationId: number) => void
+  externalTransportDetail?: Reservation | null
+  onExternalTransportDetailHandled?: () => void
   onAddReservation: () => void
   onNavigateToFiles?: () => void
   onAddPlace?: () => void
@@ -179,6 +183,11 @@ interface DayPlanSidebarProps {
   canUndo?: boolean
   lastActionLabel?: string | null
   onUndo?: () => void
+  onRouteRefresh?: () => void
+  onAddTransport?: (dayId: number) => void
+  onEditTransport?: (reservation: Reservation) => void
+  onEditReservation?: (reservation: Reservation) => void
+  onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
 }
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar({
@@ -189,6 +198,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onReorder, onUpdateDayTitle, onRouteCalculated,
   onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
   reservations = [],
+  visibleConnectionIds = [],
+  onToggleConnection,
+  externalTransportDetail,
+  onExternalTransportDetailHandled,
   onAddReservation,
   onAddPlace,
   onAddPlaceToDay,
@@ -198,6 +211,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   canUndo = false,
   lastActionLabel = null,
   onUndo,
+  onRouteRefresh,
+  onAddTransport,
+  onEditTransport,
+  onEditReservation,
+  onAddBookingToAssignment,
 }: DayPlanSidebarProps) {
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -227,13 +245,20 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const [undoHover, setUndoHover] = useState(false)
   const [pdfHover, setPdfHover] = useState(false)
   const [icsHover, setIcsHover] = useState(false)
+  const [hoveredAssignmentId, setHoveredAssignmentId] = useState<number | null>(null)
   const [dropTargetKey, _setDropTargetKey] = useState(null)
   const dropTargetRef = useRef(null)
   const setDropTargetKey = (key) => { dropTargetRef.current = key; _setDropTargetKey(key) }
   const [dragOverDayId, setDragOverDayId] = useState(null)
-  const [hoveredId, setHoveredId] = useState(null)
   const [transportDetail, setTransportDetail] = useState(null)
   const [transportPosVersion, setTransportPosVersion] = useState(0)
+
+  useEffect(() => {
+    if (externalTransportDetail) {
+      setTransportDetail(externalTransportDetail)
+      onExternalTransportDetailHandled?.()
+    }
+  }, [externalTransportDetail, onExternalTransportDetailHandled])
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
@@ -250,19 +275,21 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   // Drag-Daten aus dataTransfer, Ref oder window lesen (dataTransfer geht bei Re-Render verloren)
   const getDragData = (e) => {
     const dt = e?.dataTransfer
-    // Interner Drag hat Vorrang (Ref wird nur bei assignmentId/noteId gesetzt)
+    // Interner Drag hat Vorrang (Ref wird nur bei assignmentId/noteId/reservationId gesetzt)
     if (dragDataRef.current) {
       return {
         placeId: '',
         assignmentId: dragDataRef.current.assignmentId || '',
         noteId: dragDataRef.current.noteId || '',
+        reservationId: dragDataRef.current.reservationId || '',
         fromDayId: parseInt(dragDataRef.current.fromDayId) || 0,
+        phase: (dragDataRef.current.phase || 'single') as 'single' | 'start' | 'middle' | 'end',
       }
     }
     // Externer Drag (aus PlacesSidebar)
     const ext = window.__dragData || {}
     const placeId = dt?.getData('placeId') || ext.placeId || ''
-    return { placeId, assignmentId: '', noteId: '', fromDayId: 0 }
+    return { placeId, assignmentId: '', noteId: '', reservationId: '', fromDayId: 0, phase: 'single' as const }
   }
 
   // Only auto-expand genuinely new days (not on initial load from storage)
@@ -309,26 +336,19 @@ 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'
+  // Get span phase: how a reservation relates to a specific day (by id)
+  const getSpanPhase = (r: Reservation, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
+    const startDayId = r.day_id
+    const endDayId = r.end_day_id ?? startDayId
+    if (!startDayId || startDayId === endDayId) return 'single'
+    if (dayId === startDayId) return 'start'
+    if (dayId === endDayId) 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)
+  const getDisplayTimeForDay = (r: Reservation, dayId: number): string | null => {
+    const phase = getSpanPhase(r, dayId)
     if (phase === 'end') return r.reservation_end_time || null
     if (phase === 'middle') return null
     return r.reservation_time || null
@@ -342,36 +362,56 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     return t(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
   }
 
+  const getDayOrder = (day: (typeof days)[number]) => (day as any).day_number ?? days.indexOf(day)
+
+  const computeMultiDayMove = (r: Reservation, targetDayId: number, phase: 'single' | 'start' | 'middle' | 'end') => {
+    const startId = r.day_id ?? targetDayId
+    const endId = r.end_day_id ?? startId
+    const order = (id: number) => { const d = days.find(x => x.id === id); return d ? getDayOrder(d) : 0 }
+    if (phase === 'single' || startId === endId) return { day_id: targetDayId, end_day_id: targetDayId }
+    if (phase === 'start') {
+      if (order(targetDayId) > order(endId)) return { day_id: targetDayId, end_day_id: targetDayId }
+      return { day_id: targetDayId, end_day_id: endId }
+    }
+    // phase === 'end'
+    if (order(targetDayId) < order(startId)) return { day_id: targetDayId, end_day_id: targetDayId }
+    return { day_id: startId, end_day_id: targetDayId }
+  }
+
   const getTransportForDay = (dayId: number) => {
-    const day = days.find(d => d.id === dayId)
-    if (!day?.date) return []
     const dayAssignmentIds = (assignments[String(dayId)] || []).map(a => a.id)
     return reservations.filter(r => {
-      if (!r.reservation_time || r.type === 'hotel') return false
+      if (r.type === 'hotel') return false
       if (r.assignment_id && dayAssignmentIds.includes(r.assignment_id)) 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
+      const startDayId = r.day_id
+      const endDayId = r.end_day_id ?? startDayId
+
+      if (startDayId == null) return false
+
+      if (endDayId !== startDayId) {
+        const startDay = days.find(d => d.id === startDayId)
+        const endDay = days.find(d => d.id === endDayId)
+        const thisDay = days.find(d => d.id === dayId)
+        if (!startDay || !endDay || !thisDay) return false
+        return getDayOrder(thisDay) >= getDayOrder(startDay) && getDayOrder(thisDay) <= getDayOrder(endDay)
       }
+      return startDayId === dayId
     })
   }
 
   // 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
+      if (r.type !== 'car') return false
+      const startDayId = r.day_id
+      const endDayId = r.end_day_id
+      if (!startDayId || !endDayId || endDayId === startDayId) return false
+      const startDay = days.find(d => d.id === startDayId)
+      const endDay = days.find(d => d.id === endDayId)
+      const thisDay = days.find(d => d.id === dayId)
+      if (!startDay || !endDay || !thisDay) return false
+      return getDayOrder(thisDay) > getDayOrder(startDay) && getDayOrder(thisDay) < getDayOrder(endDay)
     })
   }
 
@@ -420,11 +460,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       day_plan_position: computeTransportPosition(r, da) + idx * 0.01,
     }))
     // Mark as initialized immediately to prevent re-entry
-    for (const p of positions) {
-      initedTransportIds.current.add(p.id)
-      const res = reservations.find(x => x.id === p.id)
-      if (res) res.day_plan_position = p.day_plan_position
-    }
+    for (const p of positions) initedTransportIds.current.add(p.id)
+    // Update store so subscribers see the new positions
+    useTripStore.setState(state => ({
+      reservations: state.reservations.map(r => {
+        const p = positions.find(x => x.id === r.id)
+        if (!p) return r
+        return { ...r, day_plan_position: p.day_plan_position }
+      })
+    }))
     // Persist to server (fire and forget)
     reservationsApi.updatePositions(tripId, positions).catch(() => {})
   }
@@ -433,7 +477,6 @@ 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)) {
@@ -450,7 +493,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     const timedTransports = transport.map(r => ({
       type: 'transport' as const,
       data: r,
-      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayDate)) ?? 0,
+      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayId)) ?? 0,
     })).sort((a, b) => a.minutes - b.minutes)
 
     if (timedTransports.length === 0) return baseItems
@@ -592,23 +635,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     }
 
     try {
+      // Update transport positions in store FIRST so the useEffect triggered by
+      // onReorder's optimistic assignment update reads the correct positions.
+      if (transportUpdates.length) {
+        useTripStore.setState(state => ({
+          reservations: state.reservations.map(r => {
+            const tu = transportUpdates.find(u => u.id === r.id)
+            if (!tu) return r
+            const day_positions = { ...(r.day_positions || {}), [dayId]: tu.day_plan_position }
+            return { ...r, day_plan_position: tu.day_plan_position, day_positions }
+          })
+        }))
+        setTransportPosVersion(v => v + 1)
+      }
       if (assignmentIds.length) await onReorder(dayId, assignmentIds)
+      if (transportUpdates.length) {
+        onRouteRefresh?.()
+        await reservationsApi.updatePositions(tripId, transportUpdates, dayId)
+      }
       for (const n of noteUpdates) {
         await tripActions.updateDayNote(tripId, dayId, n.id, { sort_order: n.sort_order })
       }
-      if (transportUpdates.length) {
-        for (const tu of transportUpdates) {
-          const res = reservations.find(r => r.id === tu.id)
-          if (res) {
-            res.day_plan_position = tu.day_plan_position
-            // Update per-day position for multi-day reservations
-            if (!res.day_positions) res.day_positions = {}
-            res.day_positions[dayId] = tu.day_plan_position
-          }
-        }
-        setTransportPosVersion(v => v + 1)
-        await reservationsApi.updatePositions(tripId, transportUpdates, dayId)
-      }
       if (prevAssignmentIds.length) {
         const capturedDayId = dayId
         const capturedPrevIds = prevAssignmentIds
@@ -620,13 +667,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   }
 
   const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false) => {
-    // Transport bookings themselves cannot be dragged
-    if (fromType === 'transport') {
-      toast.error(t('dayplan.cannotReorderTransport'))
-      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
-      return
-    }
-
     const m = getMergedItems(dayId)
 
     // Check if a timed place is being moved → would it break chronological order?
@@ -839,7 +879,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     e.preventDefault()
     e.stopPropagation()
     setDragOverDayId(null)
-    const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+    const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
+    if (fromReservationId && fromDayId !== dayId) {
+      const r = reservations.find(x => x.id === Number(fromReservationId))
+      if (r) { const update = computeMultiDayMove(r, dayId, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null; return
+    }
     if (placeId) {
       onAssignToDay?.(parseInt(placeId), dayId)
     } else if (assignmentId && fromDayId !== dayId) {
@@ -1097,6 +1142,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       >
                         <Pencil size={15} strokeWidth={1.8} color="var(--text-secondary)" />
                       </button>}
+                      {canEditDays && onAddTransport && (
+                        <button
+                          onClick={e => { e.stopPropagation(); onAddTransport(day.id) }}
+                          title={t('transport.addTransport')}
+                          style={{
+                            flexShrink: 0,
+                            background: 'none',
+                            border: 'none',
+                            padding: '4px',
+                            cursor: 'pointer',
+                            opacity: 0.45,
+                            display: 'flex',
+                            alignItems: 'center',
+                            borderRadius: 4,
+                          }}
+                          onMouseEnter={e => { (e.currentTarget as HTMLElement).style.opacity = '1' }}
+                          onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '0.45' }}
+                        >
+                          <Plus size={15} strokeWidth={1.8} color="var(--text-secondary)" />
+                        </button>
+                      )}
                       {(() => {
                         const dayAccs = accommodations.filter(a => day.id >= a.start_day_id && day.id <= a.end_day_id)
                           // Sort: check-out first, then ongoing stays, then check-in last
@@ -1176,7 +1242,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                   onDrop={e => {
                     e.preventDefault()
                     e.stopPropagation()
-                    const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+                    const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                     // Drop on transport card (detected via dropTargetRef for sync accuracy)
                     if (dropTargetRef.current?.startsWith('transport-')) {
                       const isAfter = dropTargetRef.current.startsWith('transport-after-')
@@ -1185,6 +1251,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
+                      } else if (fromReservationId && fromDayId !== day.id) {
+                        const r = reservations.find(x => x.id === Number(fromReservationId))
+                        if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                      } else if (fromReservationId) {
+                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter)
                       } else if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (assignmentId) {
@@ -1198,6 +1269,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       return
                     }
 
+                    if (fromReservationId && fromDayId !== day.id) {
+                      const r = reservations.find(x => x.id === Number(fromReservationId))
+                      if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; return
+                    }
                     if (!assignmentId && !noteId && !placeId) { dragDataRef.current = null; window.__dragData = null; return }
                     if (placeId) {
                       onAssignToDay?.(parseInt(placeId), day.id)
@@ -1244,7 +1320,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         const cat = categories.find(c => c.id === place.category_id)
                         const isPlaceSelected = selectedAssignmentId ? assignment.id === selectedAssignmentId : place.id === selectedPlaceId
                         const isDraggingThis = draggingId === assignment.id
-                        const isHovered = hoveredId === assignment.id
                         const placeIdx = placeItems.findIndex(i => i.data.id === assignment.id)
 
                         const arrowMove = (direction: 'up' | 'down') => {
@@ -1297,11 +1372,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             onDragOver={e => { e.preventDefault(); e.stopPropagation(); setDragOverDayId(null); if (dropTargetKey !== `place-${assignment.id}`) setDropTargetKey(`place-${assignment.id}`) }}
                             onDrop={e => {
                               e.preventDefault(); e.stopPropagation()
-                              const { placeId, assignmentId: fromAssignmentId, noteId, fromDayId } = getDragData(e)
+                              const { placeId, assignmentId: fromAssignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                               if (placeId) {
                                 const pos = placeItems.findIndex(i => i.data.id === assignment.id)
                                 onAssignToDay?.(parseInt(placeId), day.id, pos >= 0 ? pos : undefined)
                                 setDropTargetKey(null); window.__dragData = null
+                              } else if (fromReservationId && fromDayId !== day.id) {
+                                const r = reservations.find(x => x.id === Number(fromReservationId))
+                                if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                                setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
+                              } else if (fromReservationId) {
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'place', assignment.id)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 const toIdx = getDayAssignments(day.id).findIndex(a => a.id === assignment.id)
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id, toIdx).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
@@ -1328,15 +1409,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               { divider: true },
                               canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
                             ])}
-                            onMouseEnter={() => setHoveredId(assignment.id)}
-                            onMouseLeave={() => setHoveredId(null)}
+                            onMouseEnter={e => {
+                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
+                                e.currentTarget.style.background = 'var(--bg-hover)'
+                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                              if (grip) grip.style.opacity = '1'
+                              setHoveredAssignmentId(assignment.id)
+                            }}
+                            onMouseLeave={e => {
+                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
+                                e.currentTarget.style.background = 'transparent'
+                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                              if (grip) grip.style.opacity = '0.3'
+                              setHoveredAssignmentId(null)
+                            }}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
                               padding: '7px 8px 7px 10px',
                               cursor: 'pointer',
                               background: lockedIds.has(assignment.id)
                                 ? 'rgba(220,38,38,0.08)'
-                                : isPlaceSelected ? 'var(--bg-hover)' : (isHovered ? 'var(--bg-hover)' : 'transparent'),
+                                : isPlaceSelected ? 'var(--bg-hover)' : 'transparent',
                               borderLeft: lockedIds.has(assignment.id)
                                 ? '3px solid #dc2626'
                                 : '3px solid transparent',
@@ -1344,7 +1437,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               opacity: isDraggingThis ? 0.4 : 1,
                             }}
                           >
-                            {canEditDays && <div style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: isHovered ? 1 : 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                            {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                               <GripVertical size={13} strokeWidth={1.8} />
                             </div>}
                             <div
@@ -1405,26 +1498,74 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 const res = reservations.find(r => r.assignment_id === assignment.id)
                                 if (!res) return null
                                 const confirmed = res.status === 'confirmed'
+                                const hasEndpoints = onToggleConnection && (res.endpoints || []).length >= 2
+                                const active = hasEndpoints ? visibleConnectionIds.includes(res.id) : false
                                 return (
-                                  <div style={{ marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 5, fontSize: 9, fontWeight: 600,
-                                    background: confirmed ? 'rgba(22,163,74,0.1)' : 'rgba(217,119,6,0.1)',
-                                    color: confirmed ? '#16a34a' : '#d97706',
-                                  }}>
-                                    {(() => { const RI = RES_ICONS[res.type] || Ticket; return <RI size={8} /> })()}
-                                    <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
-                                    {res.reservation_time?.includes('T') && (
-                                      <span style={{ fontWeight: 400 }}>
-                                        {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
-                                        {res.reservation_end_time && ` – ${res.reservation_end_time}`}
-                                      </span>
+                                  <div style={{ marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 5, fontSize: 9, fontWeight: 600,
+                                      background: confirmed ? 'rgba(22,163,74,0.1)' : 'rgba(217,119,6,0.1)',
+                                      color: confirmed ? '#16a34a' : '#d97706',
+                                    }}>
+                                      {(() => { const RI = RES_ICONS[res.type] || Ticket; return <RI size={8} /> })()}
+                                      <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
+                                      {res.reservation_time?.includes('T') && (
+                                        <span style={{ fontWeight: 400 }}>
+                                          {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                                          {res.reservation_end_time && ` – ${res.reservation_end_time}`}
+                                        </span>
+                                      )}
+                                      {(() => {
+                                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+                                        if (!meta) return null
+                                        if (meta.airline && meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.airline} {meta.flight_number}</span>
+                                        if (meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.flight_number}</span>
+                                        if (meta.train_number) return <span style={{ fontWeight: 400 }}>{meta.train_number}</span>
+                                        return null
+                                      })()}
+                                    </div>
+                                    {hasEndpoints && (
+                                      <button
+                                        type="button"
+                                        onClick={e => { e.stopPropagation(); onToggleConnection!(res.id) }}
+                                        title={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                        style={{
+                                          flexShrink: 0, appearance: 'none',
+                                          width: 20, height: 20, borderRadius: 4,
+                                          display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                          border: 'none',
+                                          background: active ? '#3b82f6' : 'transparent',
+                                          color: active ? '#fff' : 'var(--text-faint)',
+                                          transition: 'all 0.12s',
+                                        }}
+                                        onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
+                                        onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                      >
+                                        <RouteIcon size={11} />
+                                      </button>
                                     )}
-                                    {(() => {
-                                      const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                                      if (!meta) return null
-                                      if (meta.airline && meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.airline} {meta.flight_number}</span>
-                                      if (meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.flight_number}</span>
-                                      if (meta.train_number) return <span style={{ fontWeight: 400 }}>{meta.train_number}</span>
-                                      return null
+                                    {canEditDays && (() => {
+                                      const isTransport = ['flight','train','car','cruise','bus'].includes(res.type)
+                                      const handler = isTransport ? onEditTransport : onEditReservation
+                                      if (!handler) return null
+                                      return (
+                                        <button
+                                          type="button"
+                                          onClick={e => { e.stopPropagation(); handler(res) }}
+                                          title={t('common.edit')}
+                                          style={{
+                                            flexShrink: 0, appearance: 'none',
+                                            width: 20, height: 20, borderRadius: 4,
+                                            display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                            border: 'none', background: 'transparent',
+                                            color: 'var(--text-faint)',
+                                            transition: 'all 0.12s',
+                                          }}
+                                          onMouseEnter={e => { e.currentTarget.style.color = 'var(--text-primary)' }}
+                                          onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-faint)' }}
+                                        >
+                                          <Pencil size={11} />
+                                        </button>
+                                      )
                                     })()}
                                   </div>
                                 )
@@ -1447,7 +1588,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 </div>
                               )}
                             </div>
-                            {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, opacity: isHovered ? 1 : undefined, transition: 'opacity 0.15s' }}>
+                            {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                               <button onClick={moveUp} disabled={idx === 0} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: idx === 0 ? 'default' : 'pointer', color: idx === 0 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}>
                                 <ChevronUp size={12} strokeWidth={2} />
                               </button>
@@ -1455,6 +1596,32 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 <ChevronDown size={12} strokeWidth={2} />
                               </button>
                             </div>}
+                            {canEditDays && onAddBookingToAssignment && hoveredAssignmentId === assignment.id && (
+                              <button
+                                onClick={e => {
+                                  e.stopPropagation()
+                                  onAddBookingToAssignment(day.id, assignment.id)
+                                }}
+                                title={t('reservations.addBooking')}
+                                style={{
+                                  flexShrink: 0,
+                                  background: 'none',
+                                  border: '1px solid var(--border-primary)',
+                                  borderRadius: 5,
+                                  padding: '2px 6px',
+                                  cursor: 'pointer',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: 3,
+                                  fontSize: 10,
+                                  fontWeight: 500,
+                                  color: 'var(--text-muted)',
+                                  fontFamily: 'inherit',
+                                }}
+                              >
+                                <Plus size={11} strokeWidth={2} />
+                              </button>
+                            )}
                           </div>
                           </React.Fragment>
                         )
@@ -1463,7 +1630,7 @@ 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)
+                        const spanPhase = getSpanPhase(res, day.id)
 
                         // Car "active" (middle) days are shown in the day header, skip here
                         if (res.type === 'car' && spanPhase === 'middle') return null
@@ -1471,7 +1638,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         const TransportIcon = RES_ICONS[res.type] || Ticket
                         const color = '#3b82f6'
                         const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        const isTransportHovered = hoveredId === `transport-${res.id}`
 
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
@@ -1486,13 +1652,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                         // Multi-day span phase
                         const spanLabel = getSpanLabel(res, spanPhase)
-                        const displayTime = getDisplayTimeForDay(res, day.date)
+                        const displayTime = getDisplayTimeForDay(res, day.id)
 
                         return (
                           <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)}
+                            onClick={() => canEditDays && onEditTransport?.(res)}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
@@ -1500,13 +1666,26 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
+                            draggable={canEditDays && spanPhase !== 'middle'}
+                            onDragStart={e => {
+                              if (!canEditDays || spanPhase === 'middle') { e.preventDefault(); return }
+                              e.dataTransfer.effectAllowed = 'move'
+                              dragDataRef.current = { reservationId: String(res.id), fromDayId: String(day.id), phase: spanPhase }
+                              setDraggingId(res.id)
+                            }}
+                            onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
                             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)
+                              const { placeId, assignmentId: fromAssignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                               if (placeId) {
                                 onAssignToDay?.(parseInt(placeId), day.id)
+                              } else if (fromReservationId && fromDayId !== day.id) {
+                                const r2 = reservations.find(x => x.id === Number(fromReservationId))
+                                if (r2) { const update = computeMultiDayMove(r2, day.id, phase); tripActions.updateReservation(tripId, r2.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                              } else if (fromReservationId) {
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (fromAssignmentId) {
@@ -1518,20 +1697,25 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
-                            onMouseEnter={() => setHoveredId(`transport-${res.id}`)}
-                            onMouseLeave={() => setHoveredId(null)}
+                            onMouseEnter={e => { e.currentTarget.style.background = `${color}12` }}
+                            onMouseLeave={e => { e.currentTarget.style.background = `${color}08` }}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
                               padding: '7px 8px 7px 10px',
                               margin: '1px 8px',
                               borderRadius: 6,
                               border: `1px solid ${color}33`,
-                              background: isTransportHovered ? `${color}12` : `${color}08`,
-                              cursor: 'pointer', userSelect: 'none',
+                              background: `${color}08`,
+                              cursor: canEditDays && onEditTransport ? 'pointer' : 'default', userSelect: 'none',
                               transition: 'background 0.1s',
-                              opacity: spanPhase === 'middle' ? 0.65 : 1,
+                              opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
+                            {canEditDays && spanPhase !== 'middle' && (
+                              <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                                <GripVertical size={13} strokeWidth={1.8} />
+                              </div>
+                            )}
                             <div style={{
                               width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                               borderRadius: '50%', background: `${color}18`,
@@ -1570,6 +1754,29 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 </div>
                               )}
                             </div>
+                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
+                              const active = visibleConnectionIds.includes(res.id)
+                              return (
+                                <button
+                                  type="button"
+                                  onClick={e => { e.stopPropagation(); onToggleConnection(res.id) }}
+                                  title={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                  style={{
+                                    flexShrink: 0, appearance: 'none',
+                                    width: 26, height: 26, borderRadius: 6,
+                                    display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                    border: 'none',
+                                    background: active ? color : 'transparent',
+                                    color: active ? '#fff' : 'var(--text-faint)',
+                                    transition: 'all 0.12s',
+                                  }}
+                                  onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
+                                  onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                >
+                                  <RouteIcon size={13} />
+                                </button>
+                              )
+                            })()}
                           </div>
                           {showDropLineAfter && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           </React.Fragment>
@@ -1578,7 +1785,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                       // Notizkarte
                       const note = item.data
-                      const isNoteHovered = hoveredId === `note-${note.id}`
                       const NoteIcon = getNoteIcon(note.icon)
                       const noteIdx = idx
                       return (
@@ -1591,8 +1797,14 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `note-${note.id}`) setDropTargetKey(`note-${note.id}`) }}
                           onDrop={e => {
                             e.preventDefault(); e.stopPropagation()
-                            const { noteId: fromNoteId, assignmentId: fromAssignmentId, fromDayId } = getDragData(e)
-                            if (fromNoteId && fromDayId !== day.id) {
+                            const { noteId: fromNoteId, assignmentId: fromAssignmentId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
+                            if (fromReservationId && fromDayId !== day.id) {
+                              const r = reservations.find(x => x.id === Number(fromReservationId))
+                              if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                              setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
+                            } else if (fromReservationId) {
+                              handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'note', note.id)
+                            } else if (fromNoteId && fromDayId !== day.id) {
                               const tm = getMergedItems(day.id)
                               const toIdx = tm.findIndex(i => i.type === 'note' && i.data.id === note.id)
                               const so = toIdx <= 0 ? (tm[0]?.sortKey ?? 0) - 1 : (tm[toIdx - 1].sortKey + tm[toIdx].sortKey) / 2
@@ -1615,20 +1827,30 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             { divider: true },
                             { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
                           ]) : undefined}
-                          onMouseEnter={() => setHoveredId(`note-${note.id}`)}
-                          onMouseLeave={() => setHoveredId(null)}
+                          onMouseEnter={e => {
+                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                            if (grip) grip.style.opacity = '1'
+                            const editBtns = e.currentTarget.querySelector('.note-edit-buttons') as HTMLElement | null
+                            if (editBtns) editBtns.style.opacity = '1'
+                          }}
+                          onMouseLeave={e => {
+                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                            if (grip) grip.style.opacity = '0.3'
+                            const editBtns = e.currentTarget.querySelector('.note-edit-buttons') as HTMLElement | null
+                            if (editBtns) editBtns.style.opacity = '0'
+                          }}
                           style={{
                             display: 'flex', alignItems: 'center', gap: 8,
                             padding: '7px 8px 7px 2px',
                             margin: '1px 8px',
                             borderRadius: 6,
                             border: '1px solid var(--border-faint)',
-                            background: isNoteHovered ? 'var(--bg-hover)' : 'var(--bg-hover)',
+                            background: 'var(--bg-hover)',
                             opacity: draggingId === `note-${note.id}` ? 0.4 : 1,
                             transition: 'background 0.1s', cursor: 'grab', userSelect: 'none',
                           }}
                         >
-                          {canEditDays && <div style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: isNoteHovered ? 1 : 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                          {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                             <GripVertical size={13} strokeWidth={1.8} />
                           </div>}
                           <div style={{ width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--bg-hover)', overflow: 'hidden' }}>
@@ -1642,11 +1864,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               <div className="collab-note-md" style={{ fontSize: 10.5, fontWeight: 400, color: 'var(--text-faint)', lineHeight: '1.3', marginTop: 2, wordBreak: 'break-word' }}><Markdown remarkPlugins={[remarkGfm]}>{note.time}</Markdown></div>
                             )}
                           </div>
-                          {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: isNoteHovered ? 1 : 0, transition: 'opacity 0.15s' }}>
+                          {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: 0, transition: 'opacity 0.15s' }}>
                             <button onClick={e => openEditNote(day.id, note, e)} style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><Pencil size={10} /></button>
                             <button onClick={e => deleteNote(day.id, note.id, e)} style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
-                          {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, opacity: isNoteHovered ? 1 : undefined, transition: 'opacity 0.15s' }}>
+                          {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', color: noteIdx === 0 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'down') }} disabled={noteIdx === merged.length - 1} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === merged.length - 1 ? 'default' : 'pointer', color: noteIdx === merged.length - 1 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}><ChevronDown size={12} strokeWidth={2} /></button>
                           </div>}
@@ -1661,12 +1883,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                     onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `end-${day.id}`) setDropTargetKey(`end-${day.id}`) }}
                     onDrop={e => {
                       e.preventDefault(); e.stopPropagation()
-                      const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+                      const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                       // Neuer Ort von der Orte-Liste
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
                         setDropTargetKey(null); window.__dragData = null; return
                       }
+                      if (fromReservationId && fromDayId !== day.id) {
+                        const r = reservations.find(x => x.id === Number(fromReservationId))
+                        if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                        setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null; return
+                      }
                       if (!assignmentId && !noteId) { dragDataRef.current = null; window.__dragData = null; return }
                       if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))

client/src/components/Planner/FileImportModal.tsx

@@ -36,6 +36,8 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [summary, setSummary] = useState<PlacesImportSummary | null>(null)
+  const [gpxOpts, setGpxOpts] = useState({ waypoints: true, routes: true, tracks: true })
+  const [kmlOpts, setKmlOpts] = useState({ points: true, paths: true })
 
   const validateFile = (f: File): string | null => {
     const ext = f.name.toLowerCase().split('.').pop()
@@ -127,7 +129,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
 
     try {
       if (ext === 'gpx') {
-        const result = await placesApi.importGpx(tripId, file)
+        const result = await placesApi.importGpx(tripId, file, gpxOpts)
         await loadTrip(tripId)
         if (result.count === 0 && result.skipped > 0) {
           toast.warning(t('places.importAllSkipped'))
@@ -137,15 +139,13 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         if (result.places?.length > 0) {
           const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
           pushUndo?.(t('undo.importGpx'), async () => {
-            for (const id of importedIds) {
-              try { await placesApi.delete(tripId, id) } catch {}
-            }
+            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
             await loadTrip(tripId)
           })
         }
         handleClose()
       } else {
-        const result = await placesApi.importMapFile(tripId, file)
+        const result = await placesApi.importMapFile(tripId, file, kmlOpts)
         await loadTrip(tripId)
         setSummary(result.summary || null)
         if (result.count === 0 && (result.summary?.skippedCount ?? 0) > 0) {
@@ -159,9 +159,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         if (result.places?.length > 0) {
           const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
           pushUndo?.(t('undo.importKeyholeMarkup'), async () => {
-            for (const id of importedIds) {
-              try { await placesApi.delete(tripId, id) } catch {}
-            }
+            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
             await loadTrip(tripId)
           })
         }
@@ -177,7 +175,12 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
     }
   }
 
-  const canImport = !!file && !loading
+  const fileExt = file?.name.toLowerCase().split('.').pop() ?? ''
+  const isGpx = fileExt === 'gpx'
+  const isKml = fileExt === 'kml' || fileExt === 'kmz'
+  const gpxNoneSelected = isGpx && !gpxOpts.waypoints && !gpxOpts.routes && !gpxOpts.tracks
+  const kmlNoneSelected = isKml && !kmlOpts.points && !kmlOpts.paths
+  const canImport = !!file && !loading && !gpxNoneSelected && !kmlNoneSelected
 
   if (!isOpen) return null
 
@@ -242,6 +245,58 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           )}
         </div>
 
+        {isGpx && (
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              {t('places.gpxImportTypes')}
+            </div>
+            {(['waypoints', 'routes', 'tracks'] as const).map(key => (
+              <label key={key} onClick={() => setGpxOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' }}>
+                <div style={{
+                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                  border: gpxOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
+                  background: gpxOpts[key] ? 'var(--accent)' : 'transparent',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {gpxOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
+                </div>
+                <span style={{ fontSize: 12, color: 'var(--text-primary)', userSelect: 'none' }}>
+                  {t(key === 'waypoints' ? 'places.gpxImportWaypoints' : key === 'routes' ? 'places.gpxImportRoutes' : 'places.gpxImportTracks')}
+                </span>
+              </label>
+            ))}
+            {gpxNoneSelected && (
+              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.gpxImportNoneSelected')}</div>
+            )}
+          </div>
+        )}
+
+        {isKml && (
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              {t('places.kmlImportTypes')}
+            </div>
+            {(['points', 'paths'] as const).map(key => (
+              <label key={key} onClick={() => setKmlOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' }}>
+                <div style={{
+                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                  border: kmlOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
+                  background: kmlOpts[key] ? 'var(--accent)' : 'transparent',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {kmlOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
+                </div>
+                <span style={{ fontSize: 12, color: 'var(--text-primary)', userSelect: 'none' }}>
+                  {t(key === 'points' ? 'places.kmlImportPoints' : 'places.kmlImportPaths')}
+                </span>
+              </label>
+            ))}
+            {kmlNoneSelected && (
+              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.kmlImportNoneSelected')}</div>
+            )}
+          </div>
+        )}
+
         {summary && (
           <div style={{
             border: '1px solid var(--border-primary)', borderRadius: 10,

client/src/components/Planner/LocationSelect.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'react'
+import { MapPin, X } from 'lucide-react'
+import { mapsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+export interface LocationPoint {
+  name: string
+  lat: number
+  lng: number
+  address?: string | null
+}
+
+interface Props {
+  value: LocationPoint | null
+  onChange: (loc: LocationPoint | null) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+export default function LocationSelect({ value, onChange, placeholder, style }: Props) {
+  const { t, locale } = useTranslation()
+  const [query, setQuery] = useState(value?.name || '')
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<any[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    setQuery(value?.name || '')
+  }, [value])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = query.trim()
+    if (trimmed.length < 3 || (value && trimmed === value.name)) {
+      setResults([])
+      return
+    }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true)
+      try {
+        const data = await mapsApi.search(trimmed, locale)
+        setResults(data.places || [])
+        setHighlight(-1)
+      } catch {
+        setResults([])
+      } finally {
+        setLoading(false)
+      }
+    }, 320)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query, value, locale])
+
+  const pick = (r: any) => {
+    const lat = Number(r.lat)
+    const lng = Number(r.lng)
+    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return
+    const loc: LocationPoint = { name: r.name || r.address || 'Location', lat, lng, address: r.address || null }
+    onChange(loc)
+    setQuery(loc.name)
+    setOpen(false)
+    setResults([])
+  }
+
+  const clear = () => {
+    onChange(null)
+    setQuery('')
+    setResults([])
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <MapPin size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <input
+          type="text"
+          value={query}
+          placeholder={placeholder ?? t('reservations.searchLocation')}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={onKey}
+          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
+        />
+        {value && (
+          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {open && (loading || results.length > 0) && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
+          )}
+          {results.map((r, i) => (
+            <button
+              key={`${r.osm_id || r.google_place_id || i}`}
+              type="button"
+              onClick={() => pick(r)}
+              onMouseEnter={() => setHighlight(i)}
+              style={{
+                display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
+                color: 'var(--text-primary)', fontFamily: 'inherit',
+              }}
+            >
+              <MapPin size={12} style={{ color: 'var(--text-faint)', marginTop: 2, flexShrink: 0 }} />
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name || r.address}</div>
+                {r.address && r.name !== r.address && (
+                  <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState, useMemo, useEffect, useRef } from 'react'
-import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye, Route } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTranslation } from '../../i18n'
@@ -12,6 +12,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
 import FileImportModal from './FileImportModal'
+import ConfirmDialog from '../shared/ConfirmDialog'
 
 interface PlacesSidebarProps {
   tripId: number
@@ -25,6 +26,8 @@ interface PlacesSidebarProps {
   onAssignToDay: (placeId: number, dayId: number) => void
   onEditPlace: (place: Place) => void
   onDeletePlace: (placeId: number) => void
+  onBulkDeletePlaces?: (ids: number[]) => void
+  onBulkDeleteConfirm?: (ids: number[]) => void
   days: Day[]
   isMobile: boolean
   onCategoryFilterChange?: (categoryIds: Set<string>) => void
@@ -32,9 +35,115 @@ interface PlacesSidebarProps {
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
 }
 
+interface MemoPlaceRowProps {
+  place: Place
+  category: Category | undefined
+  isSelected: boolean
+  isPlanned: boolean
+  inDay: boolean
+  isChecked: boolean
+  selectMode: boolean
+  selectedDayId: number | null
+  canEditPlaces: boolean
+  isMobile: boolean
+  t: (key: string, params?: Record<string, any>) => string
+  onPlaceClick: (id: number | null) => void
+  onContextMenu: (e: React.MouseEvent, place: Place) => void
+  onAssignToDay: (placeId: number, dayId?: number) => void
+  toggleSelected: (id: number) => void
+  setDayPickerPlace: (place: any) => void
+}
+
+const MemoPlaceRow = React.memo(function MemoPlaceRow({
+  place, category: cat, isSelected, isPlanned, inDay, isChecked,
+  selectMode, selectedDayId, canEditPlaces, isMobile, t,
+  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+}: MemoPlaceRowProps) {
+  const hasGeometry = Boolean(place.route_geometry)
+  return (
+    <div
+      key={place.id}
+      draggable={!selectMode}
+      onDragStart={e => {
+        e.dataTransfer.setData('placeId', String(place.id))
+        e.dataTransfer.effectAllowed = 'copy'
+        window.__dragData = { placeId: String(place.id) }
+      }}
+      onClick={() => {
+        if (selectMode) {
+          toggleSelected(place.id)
+        } else if (isMobile) {
+          setDayPickerPlace(place)
+        } else {
+          onPlaceClick(isSelected ? null : place.id)
+        }
+      }}
+      onContextMenu={selectMode ? undefined : e => onContextMenu(e, place)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10,
+        padding: '9px 14px 9px 16px',
+        cursor: selectMode ? 'pointer' : 'grab',
+        background: isChecked ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : isSelected ? 'var(--border-faint)' : 'transparent',
+        borderBottom: '1px solid var(--border-faint)',
+        transition: 'background 0.1s',
+        contentVisibility: 'auto',
+        containIntrinsicSize: '0 52px',
+      }}
+      onMouseEnter={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'transparent' }}
+    >
+      {selectMode && (
+        <div style={{
+          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+          border: isChecked ? 'none' : '1.5px solid var(--border-primary)',
+          background: isChecked ? 'var(--accent)' : 'transparent',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {isChecked && <Check size={10} strokeWidth={3} color="white" />}
+        </div>
+      )}
+      <PlaceAvatar place={place} category={cat} size={34} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
+          {hasGeometry && <Route size={11} strokeWidth={2} color="var(--text-faint)" style={{ flexShrink: 0 }} title="Track / Route" />}
+          {cat && (() => {
+            const CatIcon = getCategoryIcon(cat.icon)
+            return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
+          })()}
+          <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+            {place.name}
+          </span>
+        </div>
+        {(place.description || place.address || cat?.name) && (
+          <div style={{ marginTop: 2 }}>
+            <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
+              {place.description || place.address || cat?.name}
+            </span>
+          </div>
+        )}
+      </div>
+      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+        {!selectMode && !inDay && selectedDayId && (
+          <button
+            onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              width: 20, height: 20, borderRadius: 6,
+              background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
+              color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
+            }}
+            onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
+          ><Plus size={12} strokeWidth={2.5} /></button>
+        )}
+      </div>
+    </div>
+  )
+})
+
 const PlacesSidebar = React.memo(function PlacesSidebar({
   tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
-  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
+  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, onBulkDeletePlaces, onBulkDeleteConfirm, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
 }: PlacesSidebarProps) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -110,9 +219,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
       if (result.places?.length > 0) {
         const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
         pushUndo?.(t(provider === 'google' ? 'undo.importGoogleList' : 'undo.importNaverList'), async () => {
-          for (const id of importedIds) {
-            try { await placesApi.delete(tripId, id) } catch {}
-          }
+          try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
           await loadTrip(tripId)
         })
       }
@@ -126,6 +233,28 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState('all')
   const [categoryFilters, setCategoryFiltersLocal] = useState<Set<string>>(new Set())
+  const [selectMode, setSelectMode] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<number[] | null>(null)
+
+  const exitSelectMode = () => { setSelectMode(false); setSelectedIds(new Set()) }
+
+  // Auto-exit when all selected places have been removed from the store (e.g. after bulk delete)
+  useEffect(() => {
+    if (!selectMode || selectedIds.size === 0) return
+    const placeIdSet = new Set(places.map(p => p.id))
+    if ([...selectedIds].every(id => !placeIdSet.has(id))) {
+      setSelectMode(false)
+      setSelectedIds(new Set())
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [places])
+
+  const toggleSelected = useCallback((id: number) => setSelectedIds(prev => {
+    const next = new Set(prev)
+    if (next.has(id)) next.delete(id); else next.add(id)
+    return next
+  }), [])
 
   const toggleCategoryFilter = (catId: string) => {
     setCategoryFiltersLocal(prev => {
@@ -140,12 +269,16 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [mobileShowDays, setMobileShowDays] = useState(false)
 
   // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
+  const hasTracks = useMemo(() => places.some(p => p.route_geometry), [places])
+  useEffect(() => { if (filter === 'tracks' && !hasTracks) setFilter('all') }, [hasTracks, filter])
+
   const plannedIds = useMemo(() => new Set(
     Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
   ), [assignments])
 
   const filtered = useMemo(() => places.filter(p => {
     if (filter === 'unplanned' && plannedIds.has(p.id)) return false
+    if (filter === 'tracks' && !p.route_geometry) return false
     if (categoryFilters.size > 0) {
       if (p.category_id == null) {
         if (!categoryFilters.has('uncategorized')) return false
@@ -159,6 +292,26 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const isAssignedToSelectedDay = (placeId) =>
     selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
 
+  const selectedDayIdRef = useRef<number | null>(selectedDayId)
+  useEffect(() => { selectedDayIdRef.current = selectedDayId }, [selectedDayId])
+
+  const inDaySet = useMemo(() => {
+    if (!selectedDayId) return new Set<number>()
+    return new Set<number>((assignments[String(selectedDayId)] || []).map((a: any) => a.place?.id).filter(Boolean))
+  }, [assignments, selectedDayId])
+
+  const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
+    const selDayId = selectedDayIdRef.current
+    ctxMenu.open(e, [
+      canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
+      selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selDayId) },
+      place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
+      (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${(place as any).google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + (place as any).google_place_id : place.lat + ',' + place.lng}`, '_blank') },
+      { divider: true },
+      canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+    ])
+  }, [ctxMenu.open, canEditPlaces, t, onEditPlace, onAssignToDay, onDeletePlace])
+
   return (
     <div
       onDragEnter={handleSidebarDragEnter}
@@ -219,13 +372,67 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           >
             <MapPin size={11} strokeWidth={2} /> {t(hasMultipleListImportProviders ? 'places.importList' : 'places.importGoogleList')}
           </button>
+          <button
+            onClick={() => { setSelectMode(v => !v); setSelectedIds(new Set()) }}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+              padding: '5px 10px', borderRadius: 8,
+              border: `1px solid ${selectMode ? 'var(--accent)' : 'var(--border-primary)'}`,
+              background: selectMode ? 'color-mix(in srgb, var(--accent) 12%, transparent)' : 'none',
+              color: selectMode ? 'var(--accent)' : 'var(--text-faint)', fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
+            }}
+          >
+            <Check size={11} strokeWidth={2} /> {t('common.select')}
+          </button>
         </div>
+        {selectMode && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, padding: '6px 8px', borderRadius: 8, background: 'var(--bg-tertiary)', fontSize: 11 }}>
+            <span style={{ flex: 1, color: 'var(--text-muted)', fontWeight: 500 }}>
+              {t('places.selectionCount', { count: selectedIds.size })}
+            </span>
+            <button
+              onClick={() => {
+                if (selectedIds.size === filtered.length) {
+                  setSelectedIds(new Set())
+                } else {
+                  setSelectedIds(new Set(filtered.map(p => p.id)))
+                }
+              }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 11, fontFamily: 'inherit', padding: '2px 4px', borderRadius: 4 }}
+            >
+              {selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')}
+            </button>
+            <button
+              onClick={() => {
+                if (selectedIds.size === 0) return
+                if (isMobile) {
+                  setPendingDeleteIds(Array.from(selectedIds))
+                } else {
+                  onBulkDeletePlaces?.(Array.from(selectedIds))
+                }
+              }}
+              disabled={selectedIds.size === 0}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 4, background: 'none', border: 'none',
+                cursor: selectedIds.size > 0 ? 'pointer' : 'default',
+                color: selectedIds.size > 0 ? '#ef4444' : 'var(--text-faint)',
+                fontSize: 11, fontFamily: 'inherit', padding: '2px 4px', borderRadius: 4, fontWeight: 500,
+              }}
+            >
+              <Trash2 size={11} strokeWidth={2} /> {t('places.deleteSelected')}
+            </button>
+            <button onClick={exitSelectMode} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 2 }}>
+              <X size={12} strokeWidth={2} color="var(--text-faint)" />
+            </button>
+          </div>
+        )}
         </>}
 
         {/* Filter-Tabs */}
         <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
-          {[{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }].map(f => (
-            <button key={f.id} onClick={() => { setFilter(f.id); onPlacesFilterChange?.(f.id) }} style={{
+          {([{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }, hasTracks ? { id: 'tracks', label: t('places.filterTracks') } : null] as const).filter(Boolean).map(f => (
+            <button key={f.id} onClick={() => { setFilter(f.id); onPlacesFilterChange?.(f.id); setSelectedIds(new Set()) }} style={{
               padding: '4px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
               fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
               background: filter === f.id ? 'var(--accent)' : 'var(--bg-tertiary)',
@@ -240,7 +447,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           <input
             type="text"
             value={search}
-            onChange={e => setSearch(e.target.value)}
+            onChange={e => { setSearch(e.target.value); if (selectMode) setSelectedIds(new Set()) }}
             placeholder={t('places.search')}
             style={{
               width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
@@ -363,82 +570,29 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           filtered.map(place => {
             const cat = categories.find(c => c.id === place.category_id)
             const isSelected = place.id === selectedPlaceId
-            const inDay = isAssignedToSelectedDay(place.id)
             const isPlanned = plannedIds.has(place.id)
-
+            const inDay = inDaySet.has(place.id)
+            const isChecked = selectedIds.has(place.id)
             return (
-              <div
+              <MemoPlaceRow
                 key={place.id}
-                draggable
-                onDragStart={e => {
-                  e.dataTransfer.setData('placeId', String(place.id))
-                  e.dataTransfer.effectAllowed = 'copy'
-                  // Backup in window für Cross-Component Drag (dataTransfer geht bei Re-Render verloren)
-                  window.__dragData = { placeId: String(place.id) }
-                }}
-                onClick={() => {
-                  if (isMobile) {
-                    setDayPickerPlace(place)
-                  } else {
-                    onPlaceClick(isSelected ? null : place.id)
-                  }
-                }}
-                onContextMenu={e => ctxMenu.open(e, [
-                  canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
-                  selectedDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selectedDayId) },
-                  place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                  (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank') },
-                  { divider: true },
-                  canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                ])}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 10,
-                  padding: '9px 14px 9px 16px',
-                  cursor: 'grab',
-                  background: isSelected ? 'var(--border-faint)' : 'transparent',
-                  borderBottom: '1px solid var(--border-faint)',
-                  transition: 'background 0.1s',
-                  contentVisibility: 'auto',
-                  containIntrinsicSize: '0 52px',
-                }}
-                onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
-              >
-                <PlaceAvatar place={place} category={cat} size={34} />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
-                    {cat && (() => {
-                      const CatIcon = getCategoryIcon(cat.icon)
-                      return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
-                    })()}
-                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
-                      {place.name}
-                    </span>
-                  </div>
-                  {(place.description || place.address || cat?.name) && (
-                    <div style={{ marginTop: 2 }}>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
-                        {place.description || place.address || cat?.name}
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                  {!inDay && selectedDayId && (
-                    <button
-                      onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
-                      style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        width: 20, height: 20, borderRadius: 6,
-                        background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
-                        color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
-                      }}
-                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
-                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-                    ><Plus size={12} strokeWidth={2.5} /></button>
-                  )}
-                </div>
-              </div>
+                place={place}
+                category={cat}
+                isSelected={isSelected}
+                isPlanned={isPlanned}
+                inDay={inDay}
+                isChecked={isChecked}
+                selectMode={selectMode}
+                selectedDayId={selectedDayId}
+                canEditPlaces={canEditPlaces}
+                isMobile={isMobile}
+                t={t}
+                onPlaceClick={onPlaceClick}
+                onContextMenu={openContextMenu}
+                onAssignToDay={onAssignToDay}
+                toggleSelected={toggleSelected}
+                setDayPickerPlace={setDayPickerPlace}
+              />
             )
           })
         )}
@@ -602,6 +756,14 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
         initialFile={sidebarDropFile}
       />
       <ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
+      {isMobile && (
+        <ConfirmDialog
+          isOpen={!!pendingDeleteIds?.length}
+          onClose={() => setPendingDeleteIds(null)}
+          onConfirm={() => { onBulkDeleteConfirm?.(pendingDeleteIds!); setPendingDeleteIds(null) }}
+          message={t('trip.confirm.deletePlaces', { count: pendingDeleteIds?.length ?? 0 })}
+        />
+      )}
     </div>
   )
 })

client/src/components/Planner/ReservationModal.test.tsx

@@ -87,7 +87,7 @@ describe('ReservationModal', () => {
   });
 
   it('FE-PLANNER-RESMODAL-003: shows "Edit Reservation" title when editing', () => {
-    const res = buildReservation({ title: 'Flight NY', type: 'flight' });
+    const res = buildReservation({ title: 'Nice Dinner', type: 'restaurant' });
     render(<ReservationModal {...defaultProps} reservation={res} />);
     expect(screen.getByText(/Edit Reservation/i)).toBeInTheDocument();
   });
@@ -101,34 +101,26 @@ describe('ReservationModal', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-RESMODAL-005: all 9 type buttons are visible', () => {
+  it('FE-PLANNER-RESMODAL-005: all 5 type buttons are visible (transport types removed)', () => {
     render(<ReservationModal {...defaultProps} />);
-    expect(screen.getByRole('button', { name: /Flight/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Accommodation/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Restaurant/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Train/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Rental Car/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Cruise/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Event/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Tour/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Other/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Flight$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Train$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Car$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Cruise$/i })).not.toBeInTheDocument();
   });
 
   // ── Type selection ──────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-006: clicking Flight type button shows flight-specific fields', async () => {
+  it('FE-PLANNER-RESMODAL-006: clicking Event type button activates it', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    // Flight-specific airline field has placeholder="Lufthansa" (exact, not the title placeholder)
-    expect(screen.getByPlaceholderText('Lufthansa')).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESMODAL-007: flight type shows airline/airport fields', async () => {
-    render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    expect(screen.getByText(/Airline/i)).toBeInTheDocument();
-    expect(screen.getByText(/^From$/i)).toBeInTheDocument();
-    expect(screen.getByText(/^To$/i)).toBeInTheDocument();
+    const eventBtn = screen.getByRole('button', { name: /Event/i });
+    await userEvent.click(eventBtn);
+    expect(eventBtn).toHaveStyle({ background: 'var(--text-primary)' });
   });
 
   it('FE-PLANNER-RESMODAL-008: hotel type shows check-in/check-out time fields', async () => {
@@ -139,12 +131,10 @@ describe('ReservationModal', () => {
     expect(screen.getByText(/Check-out/i)).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-009: train type shows train number/platform/seat fields', async () => {
+  it('FE-PLANNER-RESMODAL-009: restaurant type shows location field', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    expect(screen.getByText(/Train No\./i)).toBeInTheDocument();
-    expect(screen.getByText(/Platform/i)).toBeInTheDocument();
-    expect(screen.getByText(/Seat/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /Restaurant/i }));
+    expect(screen.getByPlaceholderText(/Address, Airport/i)).toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESMODAL-010: hotel type hides assignment picker', async () => {
@@ -183,13 +173,10 @@ describe('ReservationModal', () => {
     expect(screen.getByDisplayValue('Breakfast included')).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-014: editing pre-fills type — train type does not show flight fields', () => {
-    const res = buildReservation({ type: 'train' });
+  it('FE-PLANNER-RESMODAL-014: editing pre-fills type — restaurant type shows location field', () => {
+    const res = buildReservation({ type: 'restaurant', location: 'Via Roma 1' });
     render(<ReservationModal {...defaultProps} reservation={res} />);
-    // Flight-specific airline input has placeholder="Lufthansa" (exact) — should NOT appear for train type
-    expect(screen.queryByPlaceholderText('Lufthansa')).not.toBeInTheDocument();
-    // Train fields should appear
-    expect(screen.getByText(/Train No\./i)).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Via Roma 1')).toBeInTheDocument();
   });
 
   // ── Validation ──────────────────────────────────────────────────────────────
@@ -232,18 +219,18 @@ describe('ReservationModal', () => {
 
   // ── Submit flow ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-016: submitting valid flight calls onSave with correct shape', async () => {
+  it('FE-PLANNER-RESMODAL-016: submitting valid restaurant booking calls onSave with correct shape', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Air France 777');
+    await userEvent.click(screen.getByRole('button', { name: /Restaurant/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Le Jules Verne');
 
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ title: 'Air France 777', type: 'flight' })
+      expect.objectContaining({ title: 'Le Jules Verne', type: 'restaurant' })
     );
   });
 
@@ -439,17 +426,17 @@ describe('ReservationModal', () => {
     );
   });
 
-  it('FE-PLANNER-RESMODAL-031: train type — saving calls onSave with train type', async () => {
+  it('FE-PLANNER-RESMODAL-031: event type — saving calls onSave with event type', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Eurostar Paris');
+    await userEvent.click(screen.getByRole('button', { name: /Event/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Louvre Museum');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ title: 'Eurostar Paris', type: 'train' })
+      expect.objectContaining({ title: 'Louvre Museum', type: 'event' })
     );
   });
 
@@ -473,7 +460,7 @@ describe('ReservationModal', () => {
 
   it('FE-PLANNER-RESMODAL-036: file upload to existing reservation calls onFileUpload', async () => {
     const onFileUpload = vi.fn().mockResolvedValue(undefined);
-    const res = buildReservation({ id: 10, title: 'My Trip', type: 'flight' });
+    const res = buildReservation({ id: 10, title: 'My Trip', type: 'other' });
     render(
       <ReservationModal
         {...defaultProps}
@@ -575,30 +562,18 @@ describe('ReservationModal', () => {
     expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-042: flight type metadata saved with airline and airports', async () => {
+  it('FE-PLANNER-RESMODAL-042: hotel type metadata saved with check-in time', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'AF 447');
-    await userEvent.type(screen.getByPlaceholderText('Lufthansa'), 'Air France');
-    await userEvent.type(screen.getByPlaceholderText('LH 123'), 'AF 447');
-    await userEvent.type(screen.getByPlaceholderText('FRA'), 'CDG');
-    await userEvent.type(screen.getByPlaceholderText('NRT'), 'JFK');
+    await userEvent.click(screen.getByRole('button', { name: /Accommodation/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Grand Hotel');
 
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'flight',
-        metadata: expect.objectContaining({
-          airline: 'Air France',
-          flight_number: 'AF 447',
-          departure_airport: 'CDG',
-          arrival_airport: 'JFK',
-        }),
-      })
+      expect.objectContaining({ title: 'Grand Hotel', type: 'hotel' })
     );
   });
 
@@ -638,22 +613,21 @@ describe('ReservationModal', () => {
     expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-045: car type shows date/time section', async () => {
+  it('FE-PLANNER-RESMODAL-045: tour type shows time pickers', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Rental Car/i }));
-    // Car type still shows date fields (not hotel which hides them)
+    await userEvent.click(screen.getByRole('button', { name: /^Tour$/i }));
     await waitFor(() => {
-      expect(screen.getAllByTestId('date-picker').length).toBeGreaterThan(0);
+      expect(screen.getAllByTestId('time-picker').length).toBeGreaterThan(0);
     });
   });
 
-  it('FE-PLANNER-RESMODAL-046: cruise type renders and saves correctly', async () => {
+  it('FE-PLANNER-RESMODAL-046: other type renders and saves correctly', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
-    await userEvent.click(screen.getByRole('button', { name: /Cruise/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Caribbean Cruise');
+    await userEvent.click(screen.getByRole('button', { name: /^Other$/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Misc item');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'cruise' })));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
   });
 
   it('FE-PLANNER-RESMODAL-047: clicking budget category select changes the value', async () => {
@@ -734,23 +708,17 @@ describe('ReservationModal', () => {
     });
   });
 
-  it('FE-PLANNER-RESMODAL-035: flight with train number metadata saved correctly', async () => {
+  it('FE-PLANNER-RESMODAL-035: hotel type saves correctly', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE 792');
-    await userEvent.type(screen.getByPlaceholderText(/ICE 123/i), 'ICE 792');
-    await userEvent.type(screen.getByPlaceholderText(/^12$/i), '5');
-    await userEvent.type(screen.getByPlaceholderText(/42A/i), '14B');
+    await userEvent.click(screen.getByRole('button', { name: /^Accommodation$/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Test');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'train',
-        metadata: expect.objectContaining({ train_number: 'ICE 792', platform: '5', seat: '14B' }),
-      })
+      expect.objectContaining({ type: 'hotel' })
     );
   });
 });

client/src/components/Planner/ReservationModal.tsx

@@ -5,7 +5,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
-import { Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
+import { Hotel, Utensils, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -14,12 +14,8 @@ import { openFile } from '../../utils/fileDownload'
 import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
 
 const TYPE_OPTIONS = [
-  { value: 'flight',     labelKey: 'reservations.type.flight',     Icon: Plane },
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
   { value: 'restaurant', labelKey: 'reservations.type.restaurant', Icon: Utensils },
-  { value: 'train',      labelKey: 'reservations.type.train',      Icon: Train },
-  { value: 'car',        labelKey: 'reservations.type.car',        Icon: Car },
-  { value: 'cruise',     labelKey: 'reservations.type.cruise',     Icon: Ship },
   { value: 'event',      labelKey: 'reservations.type.event',      Icon: Ticket },
   { value: 'tour',       labelKey: 'reservations.type.tour',       Icon: Users },
   { value: 'other',      labelKey: 'reservations.type.other',      Icon: FileText },
@@ -33,7 +29,6 @@ function buildAssignmentOptions(days, assignments, t, locale) {
     const dayLabel = day.title || t('dayplan.dayN', { n: day.day_number })
     const dateStr = day.date ? ` · ${formatDate(day.date, locale)}` : ''
     const groupLabel = `${dayLabel}${dateStr}`
-    // Group header (non-selectable)
     options.push({ value: `_header_${day.id}`, label: groupLabel, disabled: true, isHeader: true })
     for (let i = 0; i < da.length; i++) {
       const place = da[i].place
@@ -64,9 +59,10 @@ interface ReservationModalProps {
   onFileUpload?: (fd: FormData) => Promise<void>
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
+  defaultAssignmentId?: number | null
 }
 
-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [] }: ReservationModalProps) {
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null }: ReservationModalProps) {
   const { id: tripId } = useParams<{ id: string }>()
   const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
@@ -84,20 +80,16 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const [form, setForm] = useState({
     title: '', type: 'other', status: 'pending',
     reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-    notes: '', assignment_id: '', accommodation_id: '',
+    notes: '', assignment_id: '' as string | number, accommodation_id: '' as string | number,
     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_in_end_time: '', meta_check_out_time: '',
-    hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
+    hotel_place_id: '' as string | number, hotel_start_day: '' as string | number, hotel_end_day: '' as string | number,
   })
   const [isSaving, setIsSaving] = useState(false)
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState([])
   const [showFilePicker, setShowFilePicker] = useState(false)
   const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
-  const [unlinkedFileIds, setUnlinkedFileIds] = useState<number[]>([])
 
   const assignmentOptions = useMemo(
     () => buildAssignmentOptions(days, assignments, t, locale),
@@ -107,7 +99,6 @@ 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
@@ -130,15 +121,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         notes: reservation.notes || '',
         assignment_id: reservation.assignment_id || '',
         accommodation_id: reservation.accommodation_id || '',
-        meta_airline: meta.airline || '',
-        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 || '',
         meta_check_in_time: meta.check_in_time || '',
         meta_check_in_end_time: meta.check_in_end_time || '',
         meta_check_out_time: meta.check_out_time || '',
@@ -152,41 +134,22 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       setForm({
         title: '', type: 'other', status: 'pending',
         reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-        notes: '', assignment_id: '', accommodation_id: '',
+        notes: '', assignment_id: defaultAssignmentId ?? '', 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_in_end_time: '', meta_check_out_time: '',
+        hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
       })
       setPendingFiles([])
     }
-  }, [reservation, isOpen, selectedDayId])
+  }, [reservation, isOpen, selectedDayId, defaultAssignmentId])
 
   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'
-    // For flights, compare in UTC using timezone offsets
-    if (form.type === 'flight') {
-      const parseOffset = (tz: string): number | null => {
-        if (!tz) return null
-        const m = tz.trim().match(/^(?:UTC|GMT)?\s*([+-])(\d{1,2})(?::(\d{2}))?$/i)
-        if (!m) return null
-        const sign = m[1] === '+' ? 1 : -1
-        return sign * (parseInt(m[2]) * 60 + parseInt(m[3] || '0'))
-      }
-      const depOffset = parseOffset(form.meta_departure_timezone)
-      const arrOffset = parseOffset(form.meta_arrival_timezone)
-      if (depOffset === null || arrOffset === null) return false
-      const depMinutes = new Date(`${startDate}T${startTime}`).getTime() - depOffset * 60000
-      const arrMinutes = new Date(`${form.end_date}T${endTime}`).getTime() - arrOffset * 60000
-      return arrMinutes <= depMinutes
-    }
     const startFull = `${startDate}T${startTime}`
     const endFull = `${form.end_date}T${endTime}`
     return endFull <= startFull
@@ -199,23 +162,11 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     setIsSaving(true)
     try {
       const metadata: Record<string, string> = {}
-      if (form.type === 'flight') {
-        if (form.meta_airline) metadata.airline = form.meta_airline
-        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.type === 'hotel') {
         if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
         if (form.meta_check_in_end_time) metadata.check_in_end_time = form.meta_check_in_end_time
         if (form.meta_check_out_time) metadata.check_out_time = form.meta_check_out_time
-      } else if (form.type === 'train') {
-        if (form.meta_train_number) metadata.train_number = form.meta_train_number
-        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
@@ -224,23 +175,24 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         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.type === 'hotel' ? null : form.reservation_time,
-        reservation_end_time: form.type === 'hotel' ? null : combinedEndTime,
+        reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
+        reservation_end_time: form.type === 'hotel' ? null : (combinedEndTime || null),
         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,
+        endpoints: [],
+        needs_review: false,
       }
-      // Auto-create/update budget entry if price is set, or signal removal if cleared
       if (isBudgetEnabled) {
         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 = {
           place_id: form.hotel_place_id,
@@ -338,7 +290,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
         {/* Assignment Picker (hidden for hotels) */}
         {form.type !== 'hotel' && assignmentOptions.length > 0 && (
-        <div>
+          <div>
             <div style={{ flex: 1, minWidth: 0 }}>
               <label style={labelStyle}>
                 <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
@@ -365,126 +317,88 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 size="sm"
               />
             </div>
-        </div>
+          </div>
         )}
 
         {/* 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 selectedDay = days.find(dy => dy.id === selectedDayId)
-                  const date = d || selectedDay?.date || new Date().toISOString().split('T')[0]
-                  set('reservation_time', t ? `${date}T${t}` : date)
-                }}
-              />
-            </div>
-            {form.type === 'flight' && (
+          <>
+            <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <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} />
+                <label style={labelStyle}>{t('reservations.date')}</label>
+                <CustomDatePicker
+                  value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
+                  onChange={d => {
+                    const [, tm] = (form.reservation_time || '').split('T')
+                    set('reservation_time', d ? (tm ? `${d}T${tm}` : d) : '')
+                  }}
+                />
               </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} />
+                <label style={labelStyle}>{t('reservations.startTime')}</label>
+                <CustomTimePicker
+                  value={(() => { const [, tm] = (form.reservation_time || '').split('T'); return tm || '' })()}
+                  onChange={tm => {
+                    const [d] = (form.reservation_time || '').split('T')
+                    const selectedDay = days.find(dy => dy.id === selectedDayId)
+                    const date = d || selectedDay?.date || new Date().toISOString().split('T')[0]
+                    set('reservation_time', tm ? `${date}T${tm}` : date)
+                  }}
+                />
               </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>
-        </>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{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}>{t('reservations.endTime')}</label>
+                <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
+              </div>
+            </div>
+            {isEndBeforeStart && (
+              <div style={{ fontSize: 11, color: '#ef4444', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
+            )}
+          </>
         )}
 
-        {/* Location + Booking Code */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Location */}
+        {form.type !== 'hotel' && (
           <div>
             <label style={labelStyle}>{t('reservations.locationAddress')}</label>
             <input type="text" value={form.location} onChange={e => set('location', e.target.value)}
               placeholder={t('reservations.locationPlaceholder')} style={inputStyle} />
           </div>
+        )}
+
+        {/* Booking Code + Status */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
             <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
               placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
           </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>
 
-        {/* Type-specific fields */}
-        {form.type === 'flight' && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.airline') || 'Airline'}</label>
-              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.flightNumber') || 'Flight No.'}</label>
-              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
-                placeholder="LH 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.from') || 'From'}</label>
-              <input type="text" value={form.meta_departure_airport} onChange={e => set('meta_departure_airport', e.target.value)}
-                placeholder="FRA" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.to') || 'To'}</label>
-              <input type="text" value={form.meta_arrival_airport} onChange={e => set('meta_arrival_airport', e.target.value)}
-                placeholder="NRT" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
+        {/* Hotel fields */}
         {form.type === 'hotel' && (
           <>
-            {/* Hotel place + day range */}
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
                 <label style={labelStyle}>{t('reservations.meta.hotelPlace')}</label>
@@ -528,8 +442,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
             </div>
-            {/* Check-in/out times + Status */}
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            <div className="grid grid-cols-1 sm: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)} />
@@ -542,42 +455,10 @@ 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>
           </>
         )}
 
-        {form.type === 'train' && (
-          <div className="grid grid-cols-3 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.trainNumber') || 'Train No.'}</label>
-              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
-                placeholder="ICE 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.platform') || 'Platform'}</label>
-              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
-                placeholder="12" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.seat') || 'Seat'}</label>
-              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
-                placeholder="42A" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
         {/* Notes */}
         <div>
           <label style={labelStyle}>{t('reservations.notes')}</label>
@@ -596,12 +477,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                 <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
                 <button type="button" onClick={async () => {
-                  // Always unlink, never delete the file
-                  // Clear primary reservation_id if it points to this reservation
                   if (f.reservation_id === reservation?.id) {
                     try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
                   }
-                  // Remove from file_links if linked there
                   try {
                     const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
                     const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
@@ -634,7 +512,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <Paperclip size={11} />
                 {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
               </button>}
-              {/* Link existing file picker */}
               {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
                 <div style={{ position: 'relative' }}>
                   <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
@@ -678,7 +555,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </div>
         </div>
 
-        {/* Price + Budget Category — only shown when budget addon is enabled */}
+        {/* Price + Budget Category */}
         {isBudgetEnabled && (
           <>
             <div style={{ display: 'flex', gap: 8 }}>
@@ -686,7 +563,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <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.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let t = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = t.lastIndexOf(','), ld = t.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { t = t.substring(0, dp).replace(/[.,]/g, '') + '.' + t.substring(dp + 1) } else { t = t.replace(/[.,]/g, '') } set('price', t) }}
+                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
                   placeholder="0.00"
                   style={inputStyle} />
               </div>

client/src/components/Planner/ReservationsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
@@ -8,7 +8,7 @@ import { useTranslation } from '../../i18n'
 import {
   Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
   Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
@@ -69,9 +69,10 @@ interface ReservationCardProps {
   onNavigateToFiles: () => void
   assignmentLookup: Record<number, AssignmentLookupEntry>
   canEdit: boolean
+  days?: Day[]
 }
 
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit }: ReservationCardProps) {
+function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit, days = [] }: ReservationCardProps) {
   const { toggleReservationStatus } = useTripStore()
   const toast = useToast()
   const { t, locale } = useTranslation()
@@ -109,6 +110,21 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
   const hasCode = !!r.confirmation_number
   const dateCols = [hasDate, hasTime, hasCode].filter(Boolean).length
 
+  const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+  const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
+  const startDay = r.day_id ? days.find(d => d.id === r.day_id) : undefined
+  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id) : undefined
+  const dayLabel = (day: typeof startDay): string => {
+    if (!day) return ''
+    const base = day.title || t('dayplan.dayN', { n: day.day_number })
+    if (day.date) {
+      const d = new Date(day.date + 'T00:00:00Z')
+      const dateStr = d.toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      return `${base} · ${dateStr}`
+    }
+    return base
+  }
+
   return (
     <div style={{
       borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column',
@@ -142,6 +158,17 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             <TypeIcon size={12} style={{ color: typeInfo.color }} />
             {t(typeInfo.labelKey)}
           </span>
+          {r.needs_review ? (
+            <span style={{
+              display: 'inline-flex', alignItems: 'center', gap: 4,
+              fontSize: 11, fontWeight: 600, color: '#b45309',
+              padding: '3px 8px', borderRadius: 6,
+              background: 'rgba(245,158,11,0.12)',
+            }} title={t('reservations.needsReviewHint')}>
+              <AlertCircle size={11} />
+              {t('reservations.needsReview')}
+            </span>
+          ) : null}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <span style={{
@@ -175,6 +202,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Body */}
       <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
+        {/* Day label for transport reservations linked to a day */}
+        {isTransportType && startDay && (
+          <div>
+            <div style={fieldLabelStyle}>{t('reservations.date')}</div>
+            <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+              {dayLabel(startDay)}{endDay && endDay.id !== startDay.id ? ` – ${dayLabel(endDay)}` : ''}
+            </div>
+          </div>
+        )}
         {/* Date / Time row */}
         {hasDate && (
           <div style={{ display: 'grid', gap: 10, gridTemplateColumns: hasTime ? '1fr 1fr' : '1fr' }}>
@@ -218,15 +254,35 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           </div>
         )}
 
+        {(() => {
+          const eps = r.endpoints || []
+          const from = eps.find(e => e.role === 'from')
+          const to = eps.find(e => e.role === 'to')
+          if (!from || !to) return null
+          return (
+            <div style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+              padding: '8px 12px', borderRadius: 10,
+              background: 'var(--bg-tertiary)',
+              fontSize: 12.5, color: 'var(--text-primary)',
+            }}>
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
+              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
+            </div>
+          )
+        })()}
+
         {/* Type-specific metadata */}
         {(() => {
           const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
           if (!meta || Object.keys(meta).length === 0) return null
+          const hasEndpoints = (r.endpoints || []).some(e => e.role === 'from') && (r.endpoints || []).some(e => e.role === 'to')
           const cells: { label: string; value: string }[] = []
           if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
           if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
-          if (meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
-          if (meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+          if (!hasEndpoints && meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+          if (!hasEndpoints && meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
           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 })
@@ -351,10 +407,20 @@ interface SectionProps {
   children: React.ReactNode
   defaultOpen?: boolean
   accent: 'green' | string
+  storageKey?: string
 }
 
-function Section({ title, count, children, defaultOpen = true, accent }: SectionProps) {
-  const [open, setOpen] = useState(defaultOpen)
+function Section({ title, count, children, defaultOpen = true, accent, storageKey }: SectionProps) {
+  const [open, setOpen] = useState(() => {
+    if (!storageKey || typeof window === 'undefined') return defaultOpen
+    const stored = window.localStorage.getItem(storageKey)
+    if (stored === null) return defaultOpen
+    return stored === '1'
+  })
+  useEffect(() => {
+    if (!storageKey || typeof window === 'undefined') return
+    window.localStorage.setItem(storageKey, open ? '1' : '0')
+  }, [open, storageKey])
   return (
     <div style={{ marginBottom: 28 }}>
       <button onClick={() => setOpen(o => !o)} style={{
@@ -389,9 +455,11 @@ interface ReservationsPanelProps {
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
+  titleKey?: string
+  addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -442,7 +510,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
           display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
         }}>
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
-            {t('reservations.title')}
+            {t(titleKey)}
           </h2>
 
           {reservations.length > 0 && (
@@ -516,7 +584,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
               onMouseLeave={e => e.currentTarget.style.opacity = '1'}
             >
               <Plus size={14} strokeWidth={2.5} />
-              <span className="hidden sm:inline">{t('reservations.addManual')}</span>
+              <span className="hidden sm:inline">{t(addManualKey)}</span>
             </button>
           )}
         </div>
@@ -537,13 +605,13 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
         ) : (
           <>
             {allPending.length > 0 && (
-              <Section title={t('reservations.pending')} count={allPending.length} accent="gray">
-                {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
+              <Section title={t('reservations.pending')} count={allPending.length} accent="gray" storageKey={`trek:bookings-pending-open:${tripId}`}>
+                {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} days={days} />)}
               </Section>
             )}
             {allConfirmed.length > 0 && (
-              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green">
-                {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
+              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green" storageKey={`trek:bookings-confirmed-open:${tripId}`}>
+                {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} days={days} />)}
               </Section>
             )}
           </>

client/src/components/Planner/TransportModal.tsx

@@ -0,0 +1,422 @@
+import { useState, useEffect } from 'react'
+import { Plane, Train, Car, Ship } from 'lucide-react'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import AirportSelect, { type Airport } from './AirportSelect'
+import LocationSelect, { type LocationPoint } from './LocationSelect'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { formatDate } from '../../utils/formatters'
+import type { Day, Reservation, ReservationEndpoint } from '../../types'
+
+const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
+type TransportType = typeof TRANSPORT_TYPES[number]
+
+interface EndpointPick {
+  airport?: Airport
+  location?: LocationPoint
+}
+
+function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+  return {
+    role, sequence,
+    name: a.city ? `${a.city} (${a.iata})` : a.name,
+    code: a.iata,
+    lat: a.lat, lng: a.lng,
+    timezone: a.tz,
+    local_date: date,
+    local_time: time,
+  }
+}
+
+function endpointFromLocation(l: LocationPoint, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+  return {
+    role, sequence,
+    name: l.name,
+    code: null,
+    lat: l.lat, lng: l.lng,
+    timezone: null,
+    local_date: date,
+    local_time: time,
+  }
+}
+
+function airportFromEndpoint(e: ReservationEndpoint | undefined): Airport | null {
+  if (!e || !e.code) return null
+  return {
+    iata: e.code, icao: null,
+    name: e.name, city: e.name.replace(/\s*\([A-Z]{3}\)\s*$/, ''),
+    country: '',
+    lat: e.lat, lng: e.lng,
+    tz: e.timezone || '',
+  }
+}
+
+function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint | null {
+  if (!e) return null
+  return { name: e.name, lat: e.lat, lng: e.lng, address: null }
+}
+
+const TYPE_OPTIONS = [
+  { value: 'flight', labelKey: 'reservations.type.flight', Icon: Plane },
+  { value: 'train',  labelKey: 'reservations.type.train',  Icon: Train },
+  { value: 'car',    labelKey: 'reservations.type.car',    Icon: Car },
+  { value: 'cruise', labelKey: 'reservations.type.cruise', Icon: Ship },
+]
+
+const defaultForm = {
+  title: '',
+  type: 'flight' as TransportType,
+  status: 'pending' as 'pending' | 'confirmed',
+  start_day_id: '' as string | number,
+  end_day_id: '' as string | number,
+  departure_time: '',
+  arrival_time: '',
+  confirmation_number: '',
+  notes: '',
+  meta_airline: '',
+  meta_flight_number: '',
+  meta_train_number: '',
+  meta_platform: '',
+  meta_seat: '',
+}
+
+interface TransportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: Record<string, any>) => Promise<void>
+  reservation: Reservation | null
+  days: Day[]
+  selectedDayId: number | null
+}
+
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId }: TransportModalProps) {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const [form, setForm] = useState({ ...defaultForm })
+  const [isSaving, setIsSaving] = useState(false)
+  const [fromPick, setFromPick] = useState<EndpointPick>({})
+  const [toPick, setToPick] = useState<EndpointPick>({})
+
+  useEffect(() => {
+    if (!isOpen) return
+    if (reservation) {
+      const meta = typeof reservation.metadata === 'string'
+        ? JSON.parse(reservation.metadata || '{}')
+        : (reservation.metadata || {})
+      const eps = reservation.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      const type = (TRANSPORT_TYPES as readonly string[]).includes(reservation.type)
+        ? reservation.type as TransportType
+        : 'flight'
+      setForm({
+        title: reservation.title || '',
+        type,
+        status: reservation.status || 'pending',
+        start_day_id: reservation.day_id ?? '',
+        end_day_id: reservation.end_day_id ?? '',
+        departure_time: reservation.reservation_time?.split('T')[1]?.slice(0, 5) ?? '',
+        arrival_time: reservation.reservation_end_time?.split('T')[1]?.slice(0, 5) ?? '',
+        confirmation_number: reservation.confirmation_number || '',
+        notes: reservation.notes || '',
+        meta_airline: meta.airline || '',
+        meta_flight_number: meta.flight_number || '',
+        meta_train_number: meta.train_number || '',
+        meta_platform: meta.platform || '',
+        meta_seat: meta.seat || '',
+      })
+      if (type === 'flight') {
+        setFromPick({ airport: airportFromEndpoint(from) || undefined })
+        setToPick({ airport: airportFromEndpoint(to) || undefined })
+      } else {
+        setFromPick({ location: locationFromEndpoint(from) || undefined })
+        setToPick({ location: locationFromEndpoint(to) || undefined })
+      }
+    } else {
+      setForm({ ...defaultForm, start_day_id: selectedDayId ?? '' })
+      setFromPick({})
+      setToPick({})
+    }
+  }, [isOpen, reservation, selectedDayId])
+
+  const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.title.trim()) return
+    setIsSaving(true)
+    try {
+      const startDay = days.find(d => d.id === Number(form.start_day_id))
+      const endDay = days.find(d => d.id === Number(form.end_day_id))
+
+      const buildTime = (day: Day | undefined, time: string): string | null => {
+        if (!time) return null
+        return day?.date ? `${day.date}T${time}` : `T${time}`
+      }
+
+      const metadata: Record<string, string> = {}
+      if (form.type === 'flight') {
+        if (form.meta_airline) metadata.airline = form.meta_airline
+        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
+        if (fromPick.airport) {
+          metadata.departure_airport = fromPick.airport.iata
+          metadata.departure_timezone = fromPick.airport.tz
+        }
+        if (toPick.airport) {
+          metadata.arrival_airport = toPick.airport.iata
+          metadata.arrival_timezone = toPick.airport.tz
+        }
+      } else if (form.type === 'train') {
+        if (form.meta_train_number) metadata.train_number = form.meta_train_number
+        if (form.meta_platform) metadata.platform = form.meta_platform
+        if (form.meta_seat) metadata.seat = form.meta_seat
+      }
+
+      const startDate = startDay?.date ?? null
+      const endDate = (endDay ?? startDay)?.date ?? null
+      const endpoints: ReturnType<typeof endpointFromAirport>[] = []
+      if (form.type === 'flight') {
+        if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, form.departure_time || null))
+        if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, form.arrival_time || null))
+      } else {
+        if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, form.departure_time || null))
+        if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, form.arrival_time || null))
+      }
+
+      const payload = {
+        title: form.title,
+        type: form.type,
+        status: form.status,
+        day_id: form.start_day_id ? Number(form.start_day_id) : null,
+        end_day_id: form.end_day_id ? Number(form.end_day_id) : null,
+        reservation_time: buildTime(startDay, form.departure_time),
+        reservation_end_time: buildTime(endDay ?? startDay, form.arrival_time),
+        location: null,
+        confirmation_number: form.confirmation_number || null,
+        notes: form.notes || null,
+        metadata: Object.keys(metadata).length > 0 ? metadata : null,
+        endpoints,
+        needs_review: false,
+      }
+      await onSave(payload)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : t('common.unknownError'))
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const inputStyle = {
+    width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
+    padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
+    outline: 'none', boxSizing: 'border-box' as const, color: 'var(--text-primary)', background: 'var(--bg-input)',
+  }
+  const labelStyle = {
+    display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)',
+    marginBottom: 5, textTransform: 'uppercase' as const, letterSpacing: '0.03em',
+  }
+
+  const dayOptions = [
+    { value: '', label: '—' },
+    ...days.map(d => ({
+      value: d.id,
+      label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale) ?? ''}` : ''}`,
+    })),
+  ]
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
+      size="2xl"
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+
+        {/* Type selector */}
+        <div>
+          <label style={labelStyle}>{t('reservations.bookingType')}</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+            {TYPE_OPTIONS.map(({ value, labelKey, Icon }) => (
+              <button key={value} type="button" onClick={() => set('type', value)} style={{
+                display: 'flex', alignItems: 'center', gap: 4,
+                padding: '5px 10px', borderRadius: 99, border: '1px solid',
+                fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.12s',
+                background: form.type === value ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: form.type === value ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: form.type === value ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+                <Icon size={11} /> {t(labelKey)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Title */}
+        <div>
+          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
+          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
+            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
+        </div>
+
+        {/* From / To endpoints */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label style={labelStyle}>{t('reservations.meta.from')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
+            )}
+          </div>
+          <div>
+            <label style={labelStyle}>{t('reservations.meta.to')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
+            )}
+          </div>
+        </div>
+
+        {/* Departure row */}
+        <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>
+            <CustomSelect
+              value={form.start_day_id}
+              onChange={value => set('start_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </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={form.departure_time} onChange={v => set('departure_time', v)} />
+          </div>
+          {form.type === 'flight' && fromPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
+              <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {fromPick.airport.tz}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Arrival row */}
+        <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>
+            <CustomSelect
+              value={form.end_day_id}
+              onChange={value => set('end_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </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.arrival_time} onChange={v => set('arrival_time', v)} />
+          </div>
+          {form.type === 'flight' && toPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
+              <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {toPick.airport.tz}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Flight-specific fields */}
+        {form.type === 'flight' && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.airline')}</label>
+              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
+                placeholder="Lufthansa" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.flightNumber')}</label>
+              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
+                placeholder="LH 123" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {/* Train-specific fields */}
+        {form.type === 'train' && (
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.trainNumber')}</label>
+              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
+                placeholder="ICE 123" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.platform')}</label>
+              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
+                placeholder="12" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.seat')}</label>
+              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
+                placeholder="42A" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {/* Booking Code + Status */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
+            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+              placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
+          </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>
+
+        {/* Notes */}
+        <div>
+          <label style={labelStyle}>{t('reservations.notes')}</label>
+          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
+            placeholder={t('reservations.notesPlaceholder')}
+            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
+        </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 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  )
+}

client/src/components/Settings/AboutTab.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
+import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen, Tent, Compass, Plane, Crown, Infinity as InfinityIcon } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import Section from './Section'
 
@@ -7,8 +7,229 @@ interface Props {
   appVersion: string
 }
 
+type SupporterTierId = 'no_return_ticket' | 'lost_luggage_vip' | 'business_class_dreamer' | 'budget_traveller' | 'hostel_bunkmate'
+
+interface SupporterTier {
+  id: SupporterTierId
+  labelKey: string
+  price: string
+  gradient: string
+  glow: string
+  icon: typeof Tent
+}
+
+const SUPPORTER_TIERS: SupporterTier[] = [
+  { id: 'no_return_ticket', labelKey: 'settings.about.supporter.tier.noReturnTicket', price: '∞', gradient: 'linear-gradient(135deg, #fbbf24, #ec4899 55%, #6366f1)', glow: 'rgba(236,72,153,0.45)', icon: InfinityIcon },
+  { id: 'lost_luggage_vip', labelKey: 'settings.about.supporter.tier.lostLuggageVip', price: '$30', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', glow: 'rgba(168,85,247,0.35)', icon: Crown },
+  { id: 'business_class_dreamer', labelKey: 'settings.about.supporter.tier.businessClassDreamer', price: '$15', gradient: 'linear-gradient(135deg, #6366f1, #0ea5e9)', glow: 'rgba(99,102,241,0.35)', icon: Plane },
+  { id: 'budget_traveller', labelKey: 'settings.about.supporter.tier.budgetTraveller', price: '$10', gradient: 'linear-gradient(135deg, #14b8a6, #06b6d4)', glow: 'rgba(20,184,166,0.3)', icon: Compass },
+  { id: 'hostel_bunkmate', labelKey: 'settings.about.supporter.tier.hostelBunkmate', price: '$5', gradient: 'linear-gradient(135deg, #64748b, #94a3b8)', glow: 'rgba(100,116,139,0.25)', icon: Tent },
+]
+
+interface Supporter {
+  username: string
+  tier: SupporterTierId
+  since: string
+  link?: string
+}
+
+const SUPPORTERS: Supporter[] = [
+  { username: 'Someone', tier: 'hostel_bunkmate', since: '2026-04' },
+]
+
+function SupporterSection({ t, locale }: { t: (key: string, vars?: Record<string, string | number>) => string; locale: string }) {
+  if (SUPPORTERS.length === 0) return null
+
+  const formatSince = (yearMonth: string): string => {
+    const [y, m] = yearMonth.split('-').map(Number)
+    if (!y || !m) return yearMonth
+    try {
+      return new Date(y, m - 1, 1).toLocaleDateString(locale, { year: 'numeric', month: 'long' })
+    } catch { return yearMonth }
+  }
+
+  return (
+    <div className="supporter-section">
+      <style>{`
+        .supporter-section { margin-top: 20px; }
+        .supporter-card {
+          position: relative;
+          border-radius: 20px;
+          padding: 22px 22px 18px;
+          background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, rgba(236,72,153,0.04) 100%);
+          border: 1px solid rgba(99,102,241,0.18);
+          overflow: hidden;
+        }
+        .supporter-glow {
+          position: absolute; inset: -60px; z-index: 0; pointer-events: none;
+          background: radial-gradient(500px 240px at 15% -10%, rgba(99,102,241,0.18), transparent 60%), radial-gradient(400px 200px at 90% 110%, rgba(236,72,153,0.12), transparent 60%);
+          animation: supporterGlow 6s ease-in-out infinite;
+        }
+        .supporter-header {
+          position: relative; z-index: 1;
+          display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+          margin-bottom: 6px;
+        }
+        .supporter-badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          padding: 4px 10px; border-radius: 999px;
+          background: linear-gradient(90deg, #6366f1, #ec4899, #fbbf24);
+          background-size: 200% 100%;
+          animation: supporterShimmer 4s ease-in-out infinite;
+          color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+          box-shadow: 0 4px 16px rgba(236,72,153,0.25);
+          white-space: nowrap;
+        }
+        .supporter-title {
+          margin: 0; font-size: 16px; font-weight: 700;
+          color: var(--text-primary); letter-spacing: -0.01em;
+        }
+        .supporter-subtitle {
+          position: relative; z-index: 1;
+          margin: 0 0 16px; font-size: 12.5px;
+          color: var(--text-secondary); line-height: 1.55;
+        }
+        .supporter-tiers {
+          position: relative; z-index: 1;
+          display: flex; flex-direction: column; gap: 10px;
+        }
+        .supporter-tier {
+          display: flex; align-items: flex-start; gap: 12px;
+          padding: 10px 12px; border-radius: 14px;
+          background: var(--bg-card);
+          border: 1px solid var(--border-primary);
+        }
+        .supporter-tier-icon {
+          width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
+          display: flex; align-items: center; justify-content: center;
+          color: #fff;
+        }
+        .supporter-tier-body { flex: 1; min-width: 0; }
+        .supporter-tier-head {
+          display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
+        }
+        .supporter-tier-label {
+          font-size: 13.5px; font-weight: 700; color: var(--text-primary);
+        }
+        .supporter-tier-price {
+          font-size: 11px; font-weight: 600; color: var(--text-faint);
+          padding: 1px 7px; border-radius: 6px; background: var(--bg-tertiary);
+        }
+        .supporter-tier-chips {
+          display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
+        }
+        .supporter-tier-empty {
+          font-size: 11.5px; font-style: italic; color: var(--text-faint);
+        }
+        .supporter-chip {
+          display: inline-flex; align-items: center; gap: 7px;
+          padding: 4px 10px; border-radius: 999px;
+          background: var(--bg-tertiary);
+          border: 1px solid var(--border-primary);
+          text-decoration: none;
+          transition: border-color 0.15s, box-shadow 0.15s;
+          max-width: 100%;
+        }
+        .supporter-chip-name {
+          font-size: 12px; font-weight: 600; color: var(--text-primary);
+          white-space: nowrap;
+        }
+        .supporter-chip-since {
+          font-size: 10.5px; font-weight: 500; color: var(--text-faint);
+          white-space: nowrap;
+        }
+        .supporter-chip-since-short { display: none; }
+        @keyframes supporterShimmer {
+          0%, 100% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+        }
+        @keyframes supporterGlow {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 0.75; }
+        }
+        @media (max-width: 640px) {
+          .supporter-card { border-radius: 16px; padding: 16px 14px 14px; }
+          .supporter-glow { inset: -40px; }
+          .supporter-header { gap: 8px; }
+          .supporter-badge { font-size: 10px; padding: 3px 9px; letter-spacing: 0.03em; }
+          .supporter-title { font-size: 15px; flex-basis: 100%; }
+          .supporter-subtitle { font-size: 12px; margin-bottom: 14px; }
+          .supporter-tier { padding: 10px; gap: 10px; border-radius: 12px; }
+          .supporter-tier-icon { width: 34px; height: 34px; border-radius: 10px; }
+          .supporter-tier-label { font-size: 13px; }
+          .supporter-tier-chips { gap: 5px; margin-top: 7px; }
+          .supporter-chip { padding: 3px 9px; }
+          .supporter-chip-since { font-size: 10px; }
+          .supporter-chip-since-full { display: none; }
+          .supporter-chip-since-short { display: inline; }
+        }
+      `}</style>
+      <div className="supporter-card">
+        <div className="supporter-glow" />
+
+        <div className="supporter-header">
+          <span className="supporter-badge">{t('settings.about.supporters.badge')}</span>
+          <h3 className="supporter-title">{t('settings.about.supporters.title')}</h3>
+        </div>
+        <p className="supporter-subtitle">{t('settings.about.supporters.subtitle')}</p>
+
+        <div className="supporter-tiers">
+          {SUPPORTER_TIERS.map(tier => {
+            const members = SUPPORTERS.filter(s => s.tier === tier.id)
+            const empty = members.length === 0
+            const TierIcon = tier.icon
+            return (
+              <div key={tier.id} className="supporter-tier" style={{ opacity: empty ? 0.55 : 1 }}>
+                <div className="supporter-tier-icon" style={{ background: tier.gradient, boxShadow: `0 6px 18px ${tier.glow}` }}>
+                  <TierIcon size={18} strokeWidth={2.2} />
+                </div>
+                <div className="supporter-tier-body">
+                  <div className="supporter-tier-head">
+                    <span className="supporter-tier-label">{t(tier.labelKey)}</span>
+                    <span className="supporter-tier-price">{tier.price}</span>
+                  </div>
+                  <div className="supporter-tier-chips">
+                    {empty && (
+                      <span className="supporter-tier-empty">
+                        {t('settings.about.supporters.tierEmpty')}
+                      </span>
+                    )}
+                    {members.map(m => {
+                      const chipContent = (
+                        <>
+                          <span className="supporter-chip-name">{m.username}</span>
+                          <span className="supporter-chip-since supporter-chip-since-full">
+                            · {t('settings.about.supporters.since', { date: formatSince(m.since) })}
+                          </span>
+                          <span className="supporter-chip-since supporter-chip-since-short">
+                            · {formatSince(m.since)}
+                          </span>
+                        </>
+                      )
+                      return m.link ? (
+                        <a key={m.username} href={m.link} target="_blank" rel="noopener noreferrer" className="supporter-chip"
+                          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-faint)'; e.currentTarget.style.boxShadow = `0 2px 8px ${tier.glow}` }}
+                          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+                        >
+                          {chipContent}
+                        </a>
+                      ) : (
+                        <div key={m.username} className="supporter-chip">{chipContent}</div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function AboutTab({ appVersion }: Props): React.ReactElement {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
 
   return (
     <Section title={t('settings.about')} icon={Info}>
@@ -141,6 +362,8 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
         </a>
       </div>
+
+      <SupporterSection t={t} locale={locale} />
     </Section>
   )
 }

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -172,6 +172,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
         </div>
       </div>
 
+      {/* Booking route labels */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.bookingLabels')}</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('map_booking_labels', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.map_booking_labels !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.map_booking_labels !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1" style={{ color: 'var(--text-faint)' }}>{t('settings.bookingLabelsHint')}</p>
+      </div>
+
       {/* Blur Booking Codes */}
       <div>
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>

client/src/components/Todo/TodoListPanel.test.tsx

@@ -37,9 +37,10 @@ describe('TodoListPanel', () => {
     expect(screen.getByText('Buy tickets')).toBeInTheDocument();
   });
 
-  it('FE-COMP-TODO-002: shows Add new task button', () => {
-    render(<TodoListPanel tripId={1} items={[]} />);
-    expect(screen.getByText('Add new task...')).toBeInTheDocument();
+  it('FE-COMP-TODO-002: raising addItemSignal opens the new task form', async () => {
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
+    await screen.findByText('Create task');
   });
 
   it('FE-COMP-TODO-003: sidebar filter buttons are rendered', () => {
@@ -119,11 +120,9 @@ describe('TodoListPanel', () => {
     expect(screen.getByText(/1 \/ 2 completed/i)).toBeInTheDocument();
   });
 
-  it('FE-COMP-TODO-011: clicking Add new task opens detail form', async () => {
-    const user = userEvent.setup();
-    render(<TodoListPanel tripId={1} items={[]} />);
-    await user.click(screen.getByText('Add new task...'));
-    // The detail pane shows "Create task" button
+  it('FE-COMP-TODO-011: raising addItemSignal opens detail form with Create task button', async () => {
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
     await screen.findByText('Create task');
   });
 
@@ -398,15 +397,12 @@ describe('TodoListPanel', () => {
         return HttpResponse.json({ item: buildTodoItem({ id: 99, name: 'Brand New Task' }) });
       }),
     );
-    render(<TodoListPanel tripId={1} items={[]} />);
-    // Open the new task pane
-    await user.click(screen.getByText('Add new task...'));
-    // Wait for "Create task" button to appear
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    // Raising the signal opens the new task pane (simulates the toolbar button click)
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
     await screen.findByText('Create task');
-    // Type a task name in the autoFocus input (Task name placeholder)
     const nameInput = screen.getByPlaceholderText('Task name');
     await user.type(nameInput, 'Brand New Task');
-    // Click the Create task button
     await user.click(screen.getByText('Create task'));
     await waitFor(() => expect(postCalled).toBe(true));
   });

client/src/components/Todo/TodoListPanel.tsx

@@ -1,4 +1,5 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
@@ -37,7 +38,7 @@ 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[] }) {
+export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tripId: number; items: TodoItem[]; addItemSignal?: number }) {
   const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
   const canEdit = useCanDo('packing_edit')
   const toast = useToast()
@@ -55,6 +56,15 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
   const [filter, setFilter] = useState<FilterType>('all')
   const [selectedId, setSelectedId] = useState<number | null>(null)
   const [isAddingNew, setIsAddingNew] = useState(false)
+  const lastHandledAddSignal = useRef(addItemSignal)
+
+  useEffect(() => {
+    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
+      setSelectedId(null)
+      setIsAddingNew(true)
+    }
+    lastHandledAddSignal.current = addItemSignal
+  }, [addItemSignal])
   const [sortByPrio, setSortByPrio] = useState(false)
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCategoryName, setNewCategoryName] = useState('')
@@ -160,12 +170,12 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
       {/* ── 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',
+        padding: isMobile ? '12px 6px' : '16px 12px 16px 0', 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,
+          margin: '0 0 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)',
@@ -192,9 +202,12 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
         <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 */}
+        {/* Sort by */}
+        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '16px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          {t('todo.sidebar.sortBy')}
+        </div>}
         <button onClick={() => setSortByPrio(v => !v)}
-          title={isMobile ? t('todo.sortByPrio') : undefined}
+          title={isMobile ? t('todo.priority') : undefined}
           style={{
             display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
             gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
@@ -206,7 +219,7 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           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>}
+          {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{t('todo.priority')}</span>}
         </button>
 
         {/* Categories */}
@@ -251,27 +264,6 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           </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 : (
@@ -407,18 +399,27 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           </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 && (
+      {isAddingNew && !selectedItem && !isMobile && ReactDOM.createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
+          className="modal-backdrop"
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15,23,42,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: 'calc(var(--nav-h) + 60px)', paddingBottom: 40 }}>
+          <div style={{ width: 'min(520px, 92vw)', maxHeight: 'calc(100vh - var(--nav-h) - 120px)', overflow: 'auto', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.25)' }}
+            ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px' } } }}>
+            <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>,
+        document.body
+      )}
+      {isAddingNew && !selectedItem && isMobile && ReactDOM.createPortal(
+        <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
+          className="modal-backdrop"
           style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 'var(--bottom-nav-h)' }}>
           <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' } } }}>
@@ -431,7 +432,8 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
               onClose={() => setIsAddingNew(false)}
             />
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   )
@@ -647,6 +649,7 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
   const [desc, setDesc] = useState('')
   const [dueDate, setDueDate] = useState('')
   const [category, setCategory] = useState(defaultCategory || '')
+  const [addingCategory, setAddingCategoryInline] = useState(false)
   const [assignedUserId, setAssignedUserId] = useState<number | null>(null)
   const [priority, setPriority] = useState(0)
   const [saving, setSaving] = useState(false)
@@ -657,9 +660,10 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
     if (!name.trim()) return
     setSaving(true)
     try {
+      const trimmedCategory = category.trim()
       const item = await addTodoItem(tripId, {
         name: name.trim(), description: desc || null, priority,
-        due_date: dueDate || null, category: category || null,
+        due_date: dueDate || null, category: trimmedCategory || null,
         assigned_user_id: assignedUserId,
       } as any)
       if (item?.id) onCreated(item.id)
@@ -696,19 +700,49 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
 
         <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"
-          />
+          {addingCategory ? (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <input
+                autoFocus
+                value={category}
+                onChange={e => setCategory(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') setAddingCategoryInline(false); if (e.key === 'Escape') { setCategory(''); setAddingCategoryInline(false) } }}
+                placeholder={t('todo.newCategory')}
+                style={{ flex: 1, fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
+              />
+              <button type="button" onClick={() => setAddingCategoryInline(false)}
+                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-primary)' }}>
+                <Check size={14} />
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <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' }} />,
+                    })),
+                    ...(category && !categories.includes(category) ? [{
+                      value: category, label: `${category} (${t('todo.newCategoryLabel') || 'new'})`,
+                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#9ca3af', display: 'inline-block' }} />,
+                    }] : []),
+                  ]}
+                  placeholder={t('todo.noCategory')}
+                  size="sm"
+                />
+              </div>
+              <button type="button" onClick={() => { setCategory(''); setAddingCategoryInline(true) }}
+                title={t('todo.newCategory')}
+                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit' }}>
+                <Plus size={14} />
+              </button>
+            </div>
+          )}
         </div>
 
         <div>

client/src/components/Weather/WeatherWidget.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind } from 'lucide-react'
-import { weatherApi } from '../../api/client'
+import { fetchWeather } from '../../services/weatherQueue'
 import { useSettingsStore } from '../../store/settingsStore'
 
 const WEATHER_ICON_MAP = {
@@ -61,7 +61,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false }: Weath
       // Climate data: use from cache but re-fetch in background to upgrade to forecast
       else if (cached.type === 'climate') {
         setWeather(cached)
-        weatherApi.get(lat, lng, date)
+        fetchWeather(lat, lng, date)
           .then(data => {
             if (!data.error && data.temp !== undefined && data.type === 'forecast') {
               setWeatherCache(cacheKey, data)
@@ -77,7 +77,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false }: Weath
       return
     }
     setLoading(true)
-    weatherApi.get(lat, lng, date)
+    fetchWeather(lat, lng, date)
       .then(data => {
         if (data.error || data.temp === undefined) {
           setFailed(true)

client/src/components/shared/ConfirmDialog.tsx

@@ -40,7 +40,7 @@ export default function ConfirmDialog({
 
   return (
     <div
-      className="fixed inset-0 z-[60] flex items-center justify-center px-4"
+      className="fixed inset-0 z-[10000] flex items-center justify-center px-4"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
       onClick={onClose}
     >

client/src/hooks/useRouteCalculation.ts

@@ -1,50 +1,123 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
+import { useTripStore } from '../store/tripStore'
 import { calculateSegments } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
+const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'cruise']
+
 /**
  * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
  * day assignments, draws a straight-line route, and optionally fetches per-segment
  * driving/walking durations via OSRM. Aborts in-flight requests when the day changes.
  */
 export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null) {
-  const [route, setRoute] = useState<[number, number][] | null>(null)
+  const [route, setRoute] = useState<[number, number][][] | null>(null)
   const [routeInfo, setRouteInfo] = useState<RouteResult | null>(null)
   const [routeSegments, setRouteSegments] = useState<RouteSegment[]>([])
   const routeCalcEnabled = useSettingsStore((s) => s.settings.route_calculation) !== false
   const routeAbortRef = useRef<AbortController | null>(null)
-  // Keep a ref to the latest tripStore so updateRouteForDay never has a stale closure
-  const tripStoreRef = useRef(tripStore)
-  tripStoreRef.current = tripStore
+  const reservationsForSignature = useTripStore((s) => s.reservations)
 
   const updateRouteForDay = useCallback(async (dayId: number | null) => {
     if (routeAbortRef.current) routeAbortRef.current.abort()
     if (!dayId) { setRoute(null); setRouteSegments([]); return }
-    const currentAssignments = tripStoreRef.current.assignments || {}
+    // Read directly from store (not a render-phase ref) so callers after optimistic
+    // updates or non-optimistic deletes always see the latest assignments.
+    const currentAssignments = useTripStore.getState().assignments || {}
     const da = (currentAssignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
-    const waypoints = da.map((a) => a.place).filter((p) => p?.lat && p?.lng)
-    if (waypoints.length < 2) { setRoute(null); setRouteSegments([]); return }
-    setRoute(waypoints.map((p) => [p.lat!, p.lng!]))
+    const allReservations = useTripStore.getState().reservations || []
+    const allDays = useTripStore.getState().days || []
+    const dayOrder = (id: number | null | undefined): number | null => {
+      if (id == null) return null
+      const d = allDays.find(x => x.id === id)
+      return d ? ((d as any).day_number ?? allDays.indexOf(d)) : null
+    }
+    const thisOrder = dayOrder(dayId)
+
+    // Transport reservations for this day with a known position — mirrors getTransportForDay semantics
+    const dayTransports = thisOrder == null ? [] : allReservations.filter(r => {
+      if (!TRANSPORT_TYPES.includes(r.type)) return false
+      const startId = r.day_id
+      if (startId == null) return false
+      const endId = r.end_day_id ?? startId
+      if (startId === endId) {
+        if (startId !== dayId) return false
+      } else {
+        const startOrder = dayOrder(startId)
+        const endOrder = dayOrder(endId)
+        if (startOrder == null || endOrder == null) return false
+        if (thisOrder < startOrder || thisOrder > endOrder) return false
+      }
+      const pos = r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position
+      return pos != null
+    })
+
+    // Build a unified list of places + transports sorted by effective position,
+    // then derive segments by resetting whenever a transport appears — mirrors getMergedItems order.
+    type Entry = { kind: 'place'; lat: number; lng: number } | { kind: 'transport' }
+    const entries: (Entry & { pos: number })[] = [
+      ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
+        kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
+      })),
+      ...dayTransports.map(r => ({
+        kind: 'transport' as const,
+        pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
+      })),
+    ].sort((a, b) => a.pos - b.pos)
+
+    const segments: [number, number][][] = []
+    let currentSeg: [number, number][] = []
+    for (const entry of entries) {
+      if (entry.kind === 'place') {
+        currentSeg.push([entry.lat, entry.lng])
+      } else {
+        if (currentSeg.length >= 2) segments.push([...currentSeg])
+        currentSeg = []
+      }
+    }
+    if (currentSeg.length >= 2) segments.push(currentSeg)
+
+    const geocodedWaypoints = da.map(a => a.place).filter(p => p?.lat && p?.lng) as { lat: number; lng: number }[]
+
+    if (segments.length === 0 && geocodedWaypoints.length < 2) {
+      setRoute(null); setRouteSegments([]); return
+    }
+    setRoute(segments.length > 0 ? segments : null)
     if (!routeCalcEnabled) { setRouteSegments([]); return }
     const controller = new AbortController()
     routeAbortRef.current = controller
     try {
-      const segments = await calculateSegments(waypoints as { lat: number; lng: number }[], { signal: controller.signal })
-      if (!controller.signal.aborted) setRouteSegments(segments)
+      const calcSegments = await calculateSegments(geocodedWaypoints, { signal: controller.signal })
+      if (!controller.signal.aborted) setRouteSegments(calcSegments)
     } catch (err: unknown) {
       if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
       else if (!(err instanceof Error)) setRouteSegments([])
     }
   }, [routeCalcEnabled])
 
-  // Only recalculate when assignments for the SELECTED day change
+  // Stable signature for transport reservations on the selected day — changes when a transport
+  // is added, removed, or repositioned, ensuring route recalc fires even on transport-only reorders.
+  const transportSignature = useMemo(() => {
+    if (!selectedDayId) return ''
+    return reservationsForSignature
+      .filter(r => TRANSPORT_TYPES.includes(r.type))
+      .map(r => {
+        const pos = r.day_positions?.[selectedDayId] ?? r.day_positions?.[String(selectedDayId)] ?? r.day_plan_position
+        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}`
+      })
+      .sort()
+      .join('|')
+  }, [reservationsForSignature, selectedDayId])
+
+  // Recalculate when assignments or transport positions for the SELECTED day change
   const selectedDayAssignments = selectedDayId ? tripStore.assignments?.[String(selectedDayId)] : null
   useEffect(() => {
     if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
     updateRouteForDay(selectedDayId)
-  }, [selectedDayId, selectedDayAssignments])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDayId, selectedDayAssignments, transportSignature])
 
   return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }

client/src/i18n/translations/ar.ts

@@ -14,6 +14,9 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'إضافة',
   'common.loading': 'جارٍ التحميل...',
   'common.import': 'استيراد',
+  'common.select': 'تحديد',
+  'common.selectAll': 'تحديد الكل',
+  'common.deselectAll': 'إلغاء تحديد الكل',
   'common.error': 'خطأ',
   'common.unknownError': 'خطأ غير معروف',
   'common.tooManyAttempts': 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
@@ -313,6 +316,16 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'اقتراح ميزة',
   'settings.about.featureRequestHint': 'اقترح ميزة جديدة',
   'settings.about.wikiHint': 'التوثيق والأدلة',
+  'settings.about.supporters.badge': 'الداعمون الشهريون',
+  'settings.about.supporters.title': 'رفاق رحلة TREK',
+  'settings.about.supporters.subtitle': 'بينما تخطّط لمسارك التالي، يساعد هؤلاء الأشخاص في التخطيط لمستقبل TREK. تذهب مساهمتهم الشهرية مباشرةً إلى التطوير والساعات الفعلية المبذولة — حتى يظلّ TREK مفتوح المصدر.',
+  'settings.about.supporters.since': 'داعم منذ {date}',
+  'settings.about.supporters.tierEmpty': 'كن الأول',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK هو مخطط سفر مستضاف ذاتيًا يساعدك على تنظيم رحلاتك من أول فكرة حتى آخر ذكرى. تخطيط يومي، ميزانية، قوائم تعبئة، صور والمزيد — كل شيء في مكان واحد، على خادمك الخاص.',
   'settings.about.madeWith': 'صُنع بـ',
   'settings.about.madeBy': 'بواسطة موريس ومجتمع مفتوح المصدر متنامٍ.',
@@ -857,6 +870,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'الخطة',
+  'trip.tabs.transports': 'المواصلات',
   'trip.tabs.reservations': 'الحجوزات',
   'trip.tabs.reservationsShort': 'حجز',
   'trip.tabs.packing': 'قائمة التجهيز',
@@ -879,6 +893,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'تمت إضافة الحجز',
   'trip.toast.deleted': 'تم الحذف',
   'trip.confirm.deletePlace': 'هل تريد حذف هذا المكان؟',
+  'trip.confirm.deletePlaces': 'حذف {count} أماكن؟',
+  'trip.toast.placesDeleted': 'تم حذف {count} أماكن',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'لا توجد أماكن مخططة لهذا اليوم',
@@ -923,6 +939,17 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'فشل الاستيراد',
   'places.importAllSkipped': 'جميع الأماكن موجودة بالفعل في الرحلة.',
   'places.gpxImported': 'تم استيراد {count} مكان من GPX',
+  'places.gpxImportTypes': 'ما الذي تريد استيراده؟',
+  'places.gpxImportWaypoints': 'نقاط الطريق',
+  'places.gpxImportRoutes': 'المسارات',
+  'places.gpxImportTracks': 'المسارات (مع هندسة الطريق)',
+  'places.gpxImportNoneSelected': 'اختر نوعاً واحداً على الأقل للاستيراد.',
+  'places.kmlImportTypes': 'ما الذي تريد استيراده؟',
+  'places.kmlImportPoints': 'نقاط (Placemarks)',
+  'places.kmlImportPaths': 'مسارات (LineStrings)',
+  'places.kmlImportNoneSelected': 'اختر نوعًا واحدًا على الأقل.',
+  'places.selectionCount': '{count} محدد',
+  'places.deleteSelected': 'حذف المحدد',
   'places.kmlKmzImported': 'تم استيراد {count} مكان من KMZ/KML',
   'places.urlResolved': 'تم استيراد المكان من الرابط',
   'places.importList': 'استيراد قائمة',
@@ -939,6 +966,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'إلى أي يوم تريد الإضافة؟',
   'places.all': 'الكل',
   'places.unplanned': 'غير مخطط',
+  'places.filterTracks': 'المسارات',
   'places.search': 'ابحث عن أماكن...',
   'places.allCategories': 'كل الفئات',
   'places.categoriesSelected': 'فئات',
@@ -1023,6 +1051,15 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'رقم الرحلة',
   'reservations.meta.from': 'من',
   'reservations.meta.to': 'إلى',
+  'reservations.needsReview': 'مراجعة',
+  'reservations.needsReviewHint': 'تعذّر مطابقة المطار تلقائياً — يرجى تأكيد الموقع.',
+  'reservations.searchLocation': 'ابحث عن محطة، ميناء، عنوان...',
+  'airport.searchPlaceholder': 'رمز المطار أو المدينة (مثل FRA)',
+  'map.connections': 'الاتصالات',
+  'map.showConnections': 'عرض مسارات الحجوزات',
+  'map.hideConnections': 'إخفاء مسارات الحجوزات',
+  'settings.bookingLabels': 'تسميات مسارات الحجوزات',
+  'settings.bookingLabelsHint': 'عرض أسماء المحطات/المطارات على الخريطة. عند الإيقاف، يتم عرض الرمز فقط.',
   'reservations.meta.trainNumber': 'رقم القطار',
   'reservations.meta.platform': 'المنصة',
   'reservations.meta.seat': 'المقعد',
@@ -1041,7 +1078,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'إقامة',
   'reservations.type.restaurant': 'مطعم',
   'reservations.type.train': 'قطار',
-  'reservations.type.car': 'سيارة مستأجرة',
+  'reservations.type.car': 'سيارة',
   'reservations.type.cruise': 'رحلة بحرية',
   'reservations.type.event': 'فعالية',
   'reservations.type.tour': 'جولة',
@@ -1102,6 +1139,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'النهاية',
   'reservations.span.ongoing': 'جارٍ',
   'reservations.validation.endBeforeStart': 'يجب أن يكون تاريخ/وقت الانتهاء بعد تاريخ/وقت البدء',
+  'reservations.addBooking': 'إضافة حجز',
 
   // Budget
   'budget.title': 'الميزانية',
@@ -1754,6 +1792,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'تمت إعادة ترتيب الأماكن',
   'undo.optimize': 'تم تحسين المسار',
   'undo.deletePlace': 'تم حذف المكان',
+  'undo.deletePlaces': 'تم حذف الأماكن',
   'undo.moveDay': 'تم نقل المكان إلى يوم آخر',
   'undo.lock': 'تم تبديل قفل المكان',
   'undo.importGpx': 'استيراد GPX',
@@ -1813,7 +1852,11 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'غير مُسنَد',
   'todo.noCategory': 'بدون فئة',
   'todo.hasDescription': 'له وصف',
-  'todo.addItem': 'إضافة مهمة جديدة...',
+  'todo.addItem': 'إضافة مهمة جديدة',
+  'todo.sidebar.sortBy': 'ترتيب حسب',
+  'todo.priority': 'الأولوية',
+  'todo.newCategoryLabel': 'جديد',
+  'budget.categoriesLabel': 'فئات',
   'todo.newCategory': 'اسم الفئة',
   'todo.addCategory': 'إضافة فئة',
   'todo.newItem': 'مهمة جديدة',
@@ -2041,6 +2084,11 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'كلمة شخصية مني',
   'system_notice.v3_thankyou.body': 'قبل أن تمضي — أريد أن أتوقف لحظة.\n\nبدأ TREK كمشروع جانبي بنيته لرحلاتي الخاصة. لم أتخيل يومًا أنه سيكبر ليصبح شيئًا يعتمد عليه 4,000 منكم لتخطيط مغامراتهم. كل نجمة، كل مشكلة، كل طلب ميزة — أقرأها جميعًا، وهي ما يبقيني مستمرًا في الليالي المتأخرة بين عمل بدوام كامل والجامعة.\n\nأريدكم أن تعرفوا: TREK سيبقى دائمًا مفتوح المصدر، دائمًا مستضافًا ذاتيًا، دائمًا ملككم. لا تتبع، لا اشتراكات، لا شروط خفية. مجرد أداة بناها شخص يحب السفر بقدر ما تحبونه.\n\nشكر خاص لـ [jubnl](https://github.com/jubnl) — لقد أصبحت متعاونًا رائعًا. الكثير مما يجعل الإصدار 3.0 عظيمًا يحمل بصماتك. شكرًا لإيمانك بهذا المشروع عندما كان لا يزال في بداياته.\n\nولكل واحد منكم ممن أبلغ عن خطأ، أو ترجم نصًا، أو شارك TREK مع صديق، أو ببساطة استخدمه لتخطيط رحلة — **شكرًا لكم**. أنتم السبب في وجود هذا.\n\nإلى المزيد من المغامرات معًا.\n\n— Maurice\n\n---\n\n[انضم إلى المجتمع على Discord](https://discord.gg/7Q6M6jDwzf)\n\nإذا جعل TREK رحلاتك أفضل، [فنجان قهوة صغير](https://ko-fi.com/mauriceboe) يبقي الأضواء مشتعلة.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'المواصلات',
+  'transport.addManual': 'نقل يدوي',
 }
 
 export default ar

client/src/i18n/translations/br.ts

@@ -10,6 +10,9 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Adicionar',
   'common.loading': 'Carregando...',
   'common.import': 'Importar',
+  'common.select': 'Selecionar',
+  'common.selectAll': 'Selecionar tudo',
+  'common.deselectAll': 'Desmarcar tudo',
   'common.error': 'Erro',
   'common.unknownError': 'Erro desconhecido',
   'common.tooManyAttempts': 'Muitas tentativas. Tente novamente mais tarde.',
@@ -240,6 +243,16 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Solicitar recurso',
   'settings.about.featureRequestHint': 'Sugira um novo recurso',
   'settings.about.wikiHint': 'Documentação e guias',
+  'settings.about.supporters.badge': 'Apoiadores Mensais',
+  'settings.about.supporters.title': 'Companheiros de viagem do TREK',
+  'settings.about.supporters.subtitle': 'Enquanto você planeja sua próxima rota, essas pessoas planejam junto o futuro do TREK. A contribuição mensal delas vai direto para o desenvolvimento e horas reais investidas — para o TREK continuar Open Source.',
+  'settings.about.supporters.since': 'apoiador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Seja o primeiro',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK é um planejador de viagens auto-hospedado que ajuda você a organizar suas viagens da primeira ideia à última lembrança. Planejamento diário, orçamento, listas de bagagem, fotos e muito mais — tudo em um só lugar, no seu próprio servidor.',
   'settings.about.madeWith': 'Feito com',
   'settings.about.madeBy': 'por Maurice e uma crescente comunidade open-source.',
@@ -827,6 +840,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plano',
+  'trip.tabs.transports': 'Transportes',
   'trip.tabs.reservations': 'Reservas',
   'trip.tabs.reservationsShort': 'Reservas',
   'trip.tabs.packing': 'Lista de mala',
@@ -848,6 +862,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reserva adicionada',
   'trip.toast.deleted': 'Excluído',
   'trip.confirm.deletePlace': 'Tem certeza de que deseja excluir este lugar?',
+  'trip.confirm.deletePlaces': 'Excluir {count} lugares?',
+  'trip.toast.placesDeleted': '{count} lugares excluídos',
   'trip.loadingPhotos': 'Carregando fotos dos lugares...',
 
   // Day Plan Sidebar
@@ -893,6 +909,17 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Importação falhou',
   'places.importAllSkipped': 'Todos os lugares já estavam na viagem.',
   'places.gpxImported': '{count} lugares importados do GPX',
+  'places.gpxImportTypes': 'O que deseja importar?',
+  'places.gpxImportWaypoints': 'Pontos de caminho',
+  'places.gpxImportRoutes': 'Rotas',
+  'places.gpxImportTracks': 'Trilhas (com geometria de percurso)',
+  'places.gpxImportNoneSelected': 'Selecione pelo menos um tipo para importar.',
+  'places.kmlImportTypes': 'O que deseja importar?',
+  'places.kmlImportPoints': 'Pontos (Placemarks)',
+  'places.kmlImportPaths': 'Caminhos (LineStrings)',
+  'places.kmlImportNoneSelected': 'Selecione pelo menos um tipo.',
+  'places.selectionCount': '{count} selecionado(s)',
+  'places.deleteSelected': 'Excluir seleção',
   'places.kmlKmzImported': '{count} lugares importados de KMZ/KML',
   'places.urlResolved': 'Lugar importado da URL',
   'places.importList': 'Importar lista',
@@ -909,6 +936,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Adicionar a qual dia?',
   'places.all': 'Todos',
   'places.unplanned': 'Não planejados',
+  'places.filterTracks': 'Trilhas',
   'places.search': 'Buscar lugares...',
   'places.allCategories': 'Todas as categorias',
   'places.categoriesSelected': 'categorias',
@@ -992,6 +1020,15 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Nº do voo',
   'reservations.meta.from': 'De',
   'reservations.meta.to': 'Para',
+  'reservations.needsReview': 'Verificar',
+  'reservations.needsReviewHint': 'Aeroporto não pôde ser identificado automaticamente — confirme o local.',
+  'reservations.searchLocation': 'Buscar estação, porto, endereço...',
+  'airport.searchPlaceholder': 'Código ou cidade do aeroporto (ex. FRA)',
+  'map.connections': 'Conexões',
+  'map.showConnections': 'Mostrar rotas de reservas',
+  'map.hideConnections': 'Ocultar rotas de reservas',
+  'settings.bookingLabels': 'Rótulos das rotas de reservas',
+  'settings.bookingLabelsHint': 'Mostra nomes de estações / aeroportos no mapa. Desativado, apenas o ícone aparece.',
   'reservations.meta.trainNumber': 'Nº do trem',
   'reservations.meta.platform': 'Plataforma',
   'reservations.meta.seat': 'Assento',
@@ -1010,7 +1047,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Hospedagem',
   'reservations.type.restaurant': 'Restaurante',
   'reservations.type.train': 'Trem',
-  'reservations.type.car': 'Carro alugado',
+  'reservations.type.car': 'Carro',
   'reservations.type.cruise': 'Cruzeiro',
   'reservations.type.event': 'Evento',
   'reservations.type.tour': 'Passeio',
@@ -1071,6 +1108,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Fim',
   'reservations.span.ongoing': 'Em andamento',
   'reservations.validation.endBeforeStart': 'A data/hora final deve ser posterior à data/hora inicial',
+  'reservations.addBooking': 'Adicionar reserva',
 
   // Budget
   'budget.title': 'Orçamento',
@@ -1695,6 +1733,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Locais reordenados',
   'undo.optimize': 'Rota otimizada',
   'undo.deletePlace': 'Local excluído',
+  'undo.deletePlaces': 'Lugares excluídos',
   'undo.moveDay': 'Local movido para outro dia',
   'undo.lock': 'Bloqueio do local alternado',
   'undo.importGpx': 'Importação de GPX',
@@ -1754,7 +1793,11 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Não atribuído',
   'todo.noCategory': 'Sem categoria',
   'todo.hasDescription': 'Com descrição',
-  'todo.addItem': 'Adicionar nova tarefa...',
+  'todo.addItem': 'Nova tarefa',
+  'todo.sidebar.sortBy': 'Ordenar por',
+  'todo.priority': 'Prioridade',
+  'todo.newCategoryLabel': 'nova',
+  'budget.categoriesLabel': 'categorias',
   'todo.newCategory': 'Nome da categoria',
   'todo.addCategory': 'Adicionar categoria',
   'todo.newItem': 'Nova tarefa',
@@ -2244,6 +2287,11 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Uma nota pessoal minha',
   'system_notice.v3_thankyou.body': 'Antes de seguir em frente — quero fazer uma pausa.\n\nO TREK começou como um projeto paralelo que criei para minhas próprias viagens. Nunca imaginei que cresceria a ponto de 4.000 de vocês confiarem nele para planejar suas aventuras. Cada estrela, cada issue, cada pedido de recurso — eu leio todos, e eles me mantêm firme nas noites longas entre um trabalho em tempo integral e a universidade.\n\nQuero que saibam: o TREK sempre será open source, sempre self-hosted, sempre de vocês. Sem rastreamento, sem assinaturas, sem pegadinhas. Apenas uma ferramenta feita por alguém que ama viajar tanto quanto vocês.\n\nAgradecimento especial ao [jubnl](https://github.com/jubnl) — você se tornou um colaborador incrível. Muito do que torna a versão 3.0 especial tem a sua marca. Obrigado por acreditar neste projeto quando ele ainda era bem cru.\n\nE a cada um de vocês que reportou um bug, traduziu uma string, compartilhou o TREK com um amigo ou simplesmente o usou para planejar uma viagem — **obrigado**. Vocês são a razão de tudo isso existir.\n\nQue venham muitas mais aventuras juntos.\n\n— Maurice\n\n---\n\n[Junte-se à comunidade no Discord](https://discord.gg/7Q6M6jDwzf)\n\nSe o TREK torna suas viagens melhores, um [cafezinho](https://ko-fi.com/mauriceboe) sempre mantém as luzes acesas.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transportes',
+  'transport.addManual': 'Transporte Manual',
 }
 
 export default br

client/src/i18n/translations/cs.ts

@@ -10,6 +10,9 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Přidat',
   'common.loading': 'Načítání...',
   'common.import': 'Importovat',
+  'common.select': 'Vybrat',
+  'common.selectAll': 'Vybrat vše',
+  'common.deselectAll': 'Zrušit výběr všeho',
   'common.error': 'Chyba',
   'common.unknownError': 'Neznámá chyba',
   'common.tooManyAttempts': 'Příliš mnoho pokusů. Zkuste to prosím znovu.',
@@ -264,6 +267,16 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Navrhnout funkci',
   'settings.about.featureRequestHint': 'Navrhněte novou funkci',
   'settings.about.wikiHint': 'Dokumentace a návody',
+  'settings.about.supporters.badge': 'Měsíční podporovatelé',
+  'settings.about.supporters.title': 'Společníci na cestě s TREK',
+  'settings.about.supporters.subtitle': 'Zatímco plánuješ další trasu, tihle lidé plánují společně se mnou budoucnost TREK. Jejich měsíční příspěvek jde přímo na vývoj a reálně strávené hodiny — aby TREK zůstal Open Source.',
+  'settings.about.supporters.since': 'podporovatel od {date}',
+  'settings.about.supporters.tierEmpty': 'Buď první',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK je samohostovaný plánovač cest, který vám pomůže organizovat výlety od prvního nápadu po poslední vzpomínku. Denní plánování, rozpočet, balicí seznamy, fotky a mnoho dalšího — vše na jednom místě, na vašem vlastním serveru.',
   'settings.about.madeWith': 'Vytvořeno s',
   'settings.about.madeBy': 'Mauricem a rostoucí open-source komunitou.',
@@ -855,6 +868,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
 
   // Plánovač cesty (Trip Planner)
   'trip.tabs.plan': 'Plán',
+  'trip.tabs.transports': 'Doprava',
   'trip.tabs.reservations': 'Rezervace',
   'trip.tabs.reservationsShort': 'Rez.',
   'trip.tabs.packing': 'Seznam věcí',
@@ -877,6 +891,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Rezervace přidána',
   'trip.toast.deleted': 'Smazáno',
   'trip.confirm.deletePlace': 'Opravdu chcete toto místo smazat?',
+  'trip.confirm.deletePlaces': 'Smazat {count} míst?',
+  'trip.toast.placesDeleted': '{count} míst smazáno',
 
   // Denní plán (Day Plan)
   'dayplan.emptyDay': 'Na tento den nejsou naplánována žádná místa',
@@ -921,6 +937,17 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import se nezdařil',
   'places.importAllSkipped': 'Všechna místa již byla v cestě.',
   'places.gpxImported': '{count} míst importováno z GPX',
+  'places.gpxImportTypes': 'Co chcete importovat?',
+  'places.gpxImportWaypoints': 'Trasové body',
+  'places.gpxImportRoutes': 'Trasy',
+  'places.gpxImportTracks': 'Trasy GPS (s geometrií)',
+  'places.gpxImportNoneSelected': 'Vyberte alespoň jeden typ k importu.',
+  'places.kmlImportTypes': 'Co chcete importovat?',
+  'places.kmlImportPoints': 'Body (Placemarks)',
+  'places.kmlImportPaths': 'Trasy (LineStrings)',
+  'places.kmlImportNoneSelected': 'Vyberte alespoň jeden typ.',
+  'places.selectionCount': '{count} vybráno',
+  'places.deleteSelected': 'Smazat vybrané',
   'places.kmlKmzImported': 'Importováno {count} míst z KMZ/KML',
   'places.urlResolved': 'Místo importováno z URL',
   'places.importList': 'Import seznamu',
@@ -937,6 +964,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Přidat do kterého dne?',
   'places.all': 'Vše',
   'places.unplanned': 'Nezařazené',
+  'places.filterTracks': 'Trasy',
   'places.search': 'Hledat místa...',
   'places.allCategories': 'Všechny kategorie',
   'places.categoriesSelected': 'kategorií',
@@ -1021,6 +1049,15 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Číslo letu',
   'reservations.meta.from': 'Z',
   'reservations.meta.to': 'Do',
+  'reservations.needsReview': 'Zkontrolovat',
+  'reservations.needsReviewHint': 'Letiště nebylo možné automaticky rozpoznat — potvrďte prosím místo.',
+  'reservations.searchLocation': 'Hledat stanici, přístav, adresu...',
+  'airport.searchPlaceholder': 'Kód letiště nebo město (např. FRA)',
+  'map.connections': 'Spojení',
+  'map.showConnections': 'Zobrazit trasy rezervací',
+  'map.hideConnections': 'Skrýt trasy rezervací',
+  'settings.bookingLabels': 'Popisky tras rezervací',
+  'settings.bookingLabelsHint': 'Zobrazuje názvy stanic / letišť na mapě. Pokud je vypnuto, zobrazí se pouze ikona.',
   'reservations.meta.trainNumber': 'Číslo vlaku',
   'reservations.meta.platform': 'Nástupiště',
   'reservations.meta.seat': 'Sedadlo',
@@ -1039,7 +1076,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Ubytování',
   'reservations.type.restaurant': 'Restaurace',
   'reservations.type.train': 'Vlak',
-  'reservations.type.car': 'Pronájem auta',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Plavba',
   'reservations.type.event': 'Událost',
   'reservations.type.tour': 'Prohlídka',
@@ -1100,6 +1137,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Konec',
   'reservations.span.ongoing': 'Probíhá',
   'reservations.validation.endBeforeStart': 'Datum/čas konce musí být po datu/čase začátku',
+  'reservations.addBooking': 'Přidat rezervaci',
 
   // Rozpočet (Budget)
   'budget.title': 'Rozpočet',
@@ -1698,6 +1736,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Místa přeseřazena',
   'undo.optimize': 'Trasa optimalizována',
   'undo.deletePlace': 'Místo smazáno',
+  'undo.deletePlaces': 'Místa smazána',
   'undo.moveDay': 'Místo přesunuto na jiný den',
   'undo.lock': 'Zámek místa přepnut',
   'undo.importGpx': 'Import GPX',
@@ -1759,7 +1798,11 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nepřiřazeno',
   'todo.noCategory': 'Bez kategorie',
   'todo.hasDescription': 'Má popis',
-  'todo.addItem': 'Přidat nový úkol...',
+  'todo.addItem': 'Přidat nový úkol',
+  'todo.sidebar.sortBy': 'Řadit podle',
+  'todo.priority': 'Priorita',
+  'todo.newCategoryLabel': 'nová',
+  'budget.categoriesLabel': 'kategorie',
   'todo.newCategory': 'Název kategorie',
   'todo.addCategory': 'Přidat kategorii',
   'todo.newItem': 'Nový úkol',
@@ -2248,6 +2291,11 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Osobní slovo ode mě',
   'system_notice.v3_thankyou.body': 'Než budete pokračovat — chci se na chvíli zastavit.\n\nTREK začal jako vedlejší projekt, který jsem vytvořil pro své vlastní cesty. Nikdy jsem si nepředstavoval, že vyroste v něco, čemu 4 000 z vás důvěřuje při plánování svých dobrodružství. Každou hvězdičku, každý issue, každý požadavek na funkci — všechny čtu a právě ony mě drží při životě během pozdních nocí mezi prací na plný úvazek a univerzitou.\n\nChci, abyste věděli: TREK bude vždy open source, vždy self-hosted, vždy váš. Žádné sledování, žádná předplatná, žádné háčky. Jen nástroj vytvořený někým, kdo miluje cestování stejně jako vy.\n\nZvláštní poděkování patří [jubnl](https://github.com/jubnl) — stal ses neuvěřitelným spolupracovníkem. Tolik z toho, co dělá verzi 3.0 skvělou, nese tvůj rukopis. Děkuji, že jsi věřil tomuto projektu, když byl ještě v plenkách.\n\nA každému z vás, kdo nahlásil chybu, přeložil řetězec, sdílel TREK s přítelem nebo ho jednoduše použil k plánování cesty — **děkuji**. Vy jste důvod, proč tohle existuje.\n\nNa mnoho dalších dobrodružství společně.\n\n— Maurice\n\n---\n\n[Přidej se ke komunitě na Discordu](https://discord.gg/7Q6M6jDwzf)\n\nPokud ti TREK zlepšuje cestování, [malá káva](https://ko-fi.com/mauriceboe) vždy pomůže udržet světla rozsvícená.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Doprava',
+  'transport.addManual': 'Ruční doprava',
 }
 
 export default cs

client/src/i18n/translations/de.ts

@@ -10,6 +10,9 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Hinzufügen',
   'common.loading': 'Laden...',
   'common.import': 'Importieren',
+  'common.select': 'Auswählen',
+  'common.selectAll': 'Alle auswählen',
+  'common.deselectAll': 'Alle abwählen',
   'common.error': 'Fehler',
   'common.unknownError': 'Unbekannter Fehler',
   'common.tooManyAttempts': 'Zu viele Versuche. Bitte versuchen Sie es später erneut.',
@@ -176,6 +179,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.temperature': 'Temperatureinheit',
   'settings.timeFormat': 'Zeitformat',
   'settings.routeCalculation': 'Routenberechnung',
+  'settings.bookingLabels': 'Orts-Labels auf Buchungsrouten',
+  'settings.bookingLabelsHint': 'Zeigt Bahnhofs-/Flughafennamen auf der Karte. Wenn aus, wird nur das Icon angezeigt.',
   'settings.blurBookingCodes': 'Buchungscodes verbergen',
   'settings.notifications': 'Benachrichtigungen',
   'settings.notifyTripInvite': 'Trip-Einladungen',
@@ -311,6 +316,16 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Feature vorschlagen',
   'settings.about.featureRequestHint': 'Schlage ein neues Feature vor',
   'settings.about.wikiHint': 'Dokumentation & Anleitungen',
+  'settings.about.supporters.badge': 'Monatliche Unterstützer',
+  'settings.about.supporters.title': 'Reisebegleitung für TREK',
+  'settings.about.supporters.subtitle': 'Während du deine nächste Route planst, planen diese Leute mit, wie TREK weitergeht. Ihr monatlicher Beitrag fließt direkt in Entwicklung und echten Zeitaufwand — damit TREK Open Source bleibt.',
+  'settings.about.supporters.since': 'Unterstützer seit {date}',
+  'settings.about.supporters.tierEmpty': 'Sei die/der Erste',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK ist ein selbst gehosteter Reiseplaner, der dir hilft, deine Trips von der ersten Idee bis zur letzten Erinnerung zu organisieren. Tagesplanung, Budget, Packlisten, Fotos und vieles mehr — alles an einem Ort, auf deinem eigenen Server.',
   'settings.about.madeWith': 'Entwickelt mit',
   'settings.about.madeBy': 'von Maurice und einer wachsenden Open-Source-Community.',
@@ -858,6 +873,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Karte',
+  'trip.tabs.transports': 'Transporte',
   'trip.tabs.reservations': 'Buchungen',
   'trip.tabs.reservationsShort': 'Buchung',
   'trip.tabs.packing': 'Liste',
@@ -880,6 +896,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reservierung hinzugefügt',
   'trip.toast.deleted': 'Gelöscht',
   'trip.confirm.deletePlace': 'Möchtest du diesen Ort wirklich löschen?',
+  'trip.confirm.deletePlaces': '{count} Orte löschen?',
+  'trip.toast.placesDeleted': '{count} Orte gelöscht',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Keine Orte für diesen Tag geplant',
@@ -924,6 +942,17 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import fehlgeschlagen',
   'places.importAllSkipped': 'Alle Orte waren bereits in der Reise.',
   'places.gpxImported': '{count} Orte aus GPX importiert',
+  'places.gpxImportTypes': 'Was soll importiert werden?',
+  'places.gpxImportWaypoints': 'Wegpunkte',
+  'places.gpxImportRoutes': 'Routen',
+  'places.gpxImportTracks': 'Tracks (mit Streckenverlauf)',
+  'places.gpxImportNoneSelected': 'Wähle mindestens einen Typ zum Importieren.',
+  'places.kmlImportTypes': 'Was möchtest du importieren?',
+  'places.kmlImportPoints': 'Punkte (Placemarks)',
+  'places.kmlImportPaths': 'Pfade (LineStrings)',
+  'places.kmlImportNoneSelected': 'Wähle mindestens einen Typ aus.',
+  'places.selectionCount': '{count} ausgewählt',
+  'places.deleteSelected': 'Auswahl löschen',
   'places.kmlKmzImported': '{count} Orte aus KMZ/KML importiert',
   'places.urlResolved': 'Ort aus URL importiert',
   'places.importList': 'Listenimport',
@@ -940,6 +969,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Zu welchem Tag hinzufügen?',
   'places.all': 'Alle',
   'places.unplanned': 'Ungeplant',
+  'places.filterTracks': 'Tracks',
   'places.search': 'Orte suchen...',
   'places.allCategories': 'Alle Kategorien',
   'places.categoriesSelected': 'Kategorien',
@@ -1023,6 +1053,13 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Flugnr.',
   'reservations.meta.from': 'Von',
   'reservations.meta.to': 'Nach',
+  'reservations.needsReview': 'Prüfen',
+  'reservations.needsReviewHint': 'Flughafen konnte nicht automatisch erkannt werden — bitte Ort bestätigen.',
+  'reservations.searchLocation': 'Bahnhof, Hafen, Adresse suchen…',
+  'airport.searchPlaceholder': 'Flughafencode oder Stadt (z. B. FRA)',
+  'map.connections': 'Verbindungen',
+  'map.showConnections': 'Buchungsrouten anzeigen',
+  'map.hideConnections': 'Buchungsrouten ausblenden',
   'reservations.meta.trainNumber': 'Zugnr.',
   'reservations.meta.platform': 'Gleis',
   'reservations.meta.seat': 'Sitzplatz',
@@ -1041,7 +1078,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Unterkunft',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Zug',
-  'reservations.type.car': 'Mietwagen',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Kreuzfahrt',
   'reservations.type.event': 'Veranstaltung',
   'reservations.type.tour': 'Tour',
@@ -1102,6 +1139,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Ende',
   'reservations.span.ongoing': 'Laufend',
   'reservations.validation.endBeforeStart': 'Enddatum/-zeit muss nach dem Startdatum/-zeit liegen',
+  'reservations.addBooking': 'Buchung hinzufügen',
 
   // Budget
   'budget.title': 'Budget',
@@ -1703,6 +1741,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Orte neu sortiert',
   'undo.optimize': 'Route optimiert',
   'undo.deletePlace': 'Ort gelöscht',
+  'undo.deletePlaces': 'Orte gelöscht',
   'undo.moveDay': 'Ort zu anderem Tag verschoben',
   'undo.lock': 'Ortssperre umgeschaltet',
   'undo.importGpx': 'GPX-Import',
@@ -1762,7 +1801,11 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nicht zugewiesen',
   'todo.noCategory': 'Keine Kategorie',
   'todo.hasDescription': 'Hat Beschreibung',
-  'todo.addItem': 'Neue Aufgabe hinzufügen...',
+  'todo.addItem': 'Neue Aufgabe hinzufügen',
+  'todo.sidebar.sortBy': 'Sortieren nach',
+  'todo.priority': 'Priorität',
+  'todo.newCategoryLabel': 'neu',
+  'budget.categoriesLabel': 'Kategorien',
   'todo.newCategory': 'Kategoriename',
   'todo.addCategory': 'Kategorie hinzufügen',
   'todo.newItem': 'Neue Aufgabe',
@@ -2248,6 +2291,11 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   // System notices — persönlicher Dank
   'system_notice.v3_thankyou.title': 'Ein persönliches Wort von mir',
   'system_notice.v3_thankyou.body': 'Bevor du weiterklickst — einen Moment noch.\n\nTREK hat als Nebenprojekt für meine eigenen Reisen angefangen. Ich hätte nie gedacht, dass es jemals so weit kommt, dass 4.000 von euch damit ihre Abenteuer planen. Jeder Stern, jedes Issue, jeder Feature-Wunsch — ich lese sie alle, und sie halten mich am Laufen durch die späten Nächte zwischen Vollzeitjob und Studium.\n\nEins will ich euch sagen: TREK wird immer Open Source bleiben, immer self-hosted, immer eures. Kein Tracking, keine Abos, keine versteckten Haken. Einfach ein Tool, gebaut von jemandem, der das Reisen genauso liebt wie ihr.\n\nBesonderer Dank an [jubnl](https://github.com/jubnl) — du bist ein unglaublicher Mitstreiter geworden. So vieles, was 3.0 großartig macht, trägt deine Handschrift. Danke, dass du an dieses Projekt geglaubt hast, als es noch holprig war.\n\nUnd an jeden einzelnen von euch, der einen Bug gemeldet, einen String übersetzt, TREK mit Freunden geteilt oder einfach damit eine Reise geplant hat — **danke**. Ihr seid der Grund, warum es das hier gibt.\n\nAuf viele weitere Abenteuer zusammen.\n\n— Maurice\n\n---\n\n[Tritt der Community auf Discord bei](https://discord.gg/7Q6M6jDwzf)\n\nWenn TREK deine Reisen besser macht, hält ein [kleiner Kaffee](https://ko-fi.com/mauriceboe) die Lichter an.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transporte',
+  'transport.addManual': 'Manuelles Transportmittel',
 }
 
 export default de

client/src/i18n/translations/en.ts

@@ -10,6 +10,9 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Add',
   'common.loading': 'Loading...',
   'common.import': 'Import',
+  'common.select': 'Select',
+  'common.selectAll': 'Select all',
+  'common.deselectAll': 'Deselect all',
   'common.error': 'Error',
   'common.unknownError': 'Unknown error',
   'common.tooManyAttempts': 'Too many attempts. Please try again later.',
@@ -176,6 +179,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.temperature': 'Temperature Unit',
   'settings.timeFormat': 'Time Format',
   'settings.routeCalculation': 'Route Calculation',
+  'settings.bookingLabels': 'Booking route labels',
+  'settings.bookingLabelsHint': 'Show station / airport names on the map. When off, only the icon is shown.',
   'settings.blurBookingCodes': 'Blur Booking Codes',
   'settings.notifications': 'Notifications',
   'settings.notifyTripInvite': 'Trip invitations',
@@ -370,6 +375,16 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Feature Request',
   'settings.about.featureRequestHint': 'Suggest a new feature',
   'settings.about.wikiHint': 'Documentation & guides',
+  'settings.about.supporters.badge': 'Monthly Supporters',
+  'settings.about.supporters.title': 'Travel companions for TREK',
+  'settings.about.supporters.subtitle': "While you're planning your next route, these folks are helping plan TREK's future. Their monthly contribution goes straight into development and real hours spent — so TREK stays Open Source.",
+  'settings.about.supporters.since': 'supporter since {date}',
+  'settings.about.supporters.tierEmpty': 'Be the first',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   '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.',
@@ -915,6 +930,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transports',
   'trip.tabs.reservations': 'Bookings',
   'trip.tabs.reservationsShort': 'Book',
   'trip.tabs.packing': 'Packing List',
@@ -937,6 +953,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reservation added',
   'trip.toast.deleted': 'Deleted',
   'trip.confirm.deletePlace': 'Are you sure you want to delete this place?',
+  'trip.confirm.deletePlaces': 'Delete {count} places?',
+  'trip.toast.placesDeleted': '{count} places deleted',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'No places planned for this day',
@@ -981,6 +999,17 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import failed',
   'places.importAllSkipped': 'All places were already in the trip.',
   'places.gpxImported': '{count} places imported from GPX',
+  'places.gpxImportTypes': 'What do you want to import?',
+  'places.gpxImportWaypoints': 'Waypoints',
+  'places.gpxImportRoutes': 'Routes',
+  'places.gpxImportTracks': 'Tracks (with path geometry)',
+  'places.gpxImportNoneSelected': 'Select at least one type to import.',
+  'places.kmlImportTypes': 'What do you want to import?',
+  'places.kmlImportPoints': 'Points (Placemarks)',
+  'places.kmlImportPaths': 'Paths (LineStrings)',
+  'places.kmlImportNoneSelected': 'Select at least one type to import.',
+  'places.selectionCount': '{count} selected',
+  'places.deleteSelected': 'Delete selected',
   'places.kmlKmzImported': '{count} places imported from KMZ/KML',
   'places.urlResolved': 'Place imported from URL',
   'places.importList': 'List Import',
@@ -997,6 +1026,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Add to which day?',
   'places.all': 'All',
   'places.unplanned': 'Unplanned',
+  'places.filterTracks': 'Tracks',
   'places.search': 'Search places...',
   'places.allCategories': 'All Categories',
   'places.categoriesSelected': 'categories',
@@ -1080,6 +1110,13 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Flight No.',
   'reservations.meta.from': 'From',
   'reservations.meta.to': 'To',
+  'reservations.needsReview': 'Review',
+  'reservations.needsReviewHint': 'Airport could not be matched automatically — please confirm the location.',
+  'reservations.searchLocation': 'Search station, port, address…',
+  'airport.searchPlaceholder': 'Airport code or city (e.g. FRA)',
+  'map.connections': 'Connections',
+  'map.showConnections': 'Show booking routes',
+  'map.hideConnections': 'Hide booking routes',
   'reservations.meta.trainNumber': 'Train No.',
   'reservations.meta.platform': 'Platform',
   'reservations.meta.seat': 'Seat',
@@ -1098,7 +1135,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Accommodation',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Train',
-  'reservations.type.car': 'Rental Car',
+  'reservations.type.car': 'Car',
   'reservations.type.cruise': 'Cruise',
   'reservations.type.event': 'Event',
   'reservations.type.tour': 'Tour',
@@ -1159,6 +1196,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'End',
   'reservations.span.ongoing': 'Ongoing',
   'reservations.validation.endBeforeStart': 'End date/time must be after start date/time',
+  'reservations.addBooking': 'Add booking',
 
   // Budget
   'budget.title': 'Budget',
@@ -1772,6 +1810,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Places reordered',
   'undo.optimize': 'Route optimized',
   'undo.deletePlace': 'Place deleted',
+  'undo.deletePlaces': 'Places deleted',
   'undo.moveDay': 'Place moved to another day',
   'undo.lock': 'Place lock toggled',
   'undo.importGpx': 'GPX import',
@@ -1828,7 +1867,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Unassigned',
   'todo.noCategory': 'No category',
   'todo.hasDescription': 'Has description',
-  'todo.addItem': 'Add new task...',
+  'todo.addItem': 'Add new task',
+  'todo.sidebar.sortBy': 'Sort by',
+  'todo.priority': 'Priority',
+  'todo.newCategoryLabel': 'new',
+  'budget.categoriesLabel': 'categories',
   'todo.newCategory': 'Category name',
   'todo.addCategory': 'Add category',
   'todo.newItem': 'New task',
@@ -2286,6 +2329,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.pager.counter': '{current} / {total}',
   'system_notice.pager.goto': 'Go to notice {n}',
   'system_notice.pager.position': 'Notice {current} of {total}',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transports',
+  'transport.addManual': 'Manual Transport',
 }
 
 export default en

client/src/i18n/translations/es.ts

@@ -10,6 +10,9 @@ const es: Record<string, string> = {
   'common.add': 'Añadir',
   'common.loading': 'Cargando...',
   'common.import': 'Importar',
+  'common.select': 'Seleccionar',
+  'common.selectAll': 'Seleccionar todo',
+  'common.deselectAll': 'Deseleccionar todo',
   'common.error': 'Error',
   'common.unknownError': 'Error desconocido',
   'common.tooManyAttempts': 'Demasiados intentos. Inténtelo de nuevo más tarde.',
@@ -309,6 +312,16 @@ const es: Record<string, string> = {
   'settings.about.featureRequest': 'Solicitar función',
   'settings.about.featureRequestHint': 'Sugiere una nueva función',
   'settings.about.wikiHint': 'Documentación y guías',
+  'settings.about.supporters.badge': 'Patrocinadores Mensuales',
+  'settings.about.supporters.title': 'Compañía de viaje para TREK',
+  'settings.about.supporters.subtitle': 'Mientras planeas tu próxima ruta, estas personas ayudan a planear el futuro de TREK. Su aporte mensual va directo al desarrollo y a las horas reales invertidas — para que TREK siga siendo Open Source.',
+  'settings.about.supporters.since': 'patrocinador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Sé el primero',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK es un planificador de viajes autoalojado que te ayuda a organizar tus viajes desde la primera idea hasta el último recuerdo. Planificación diaria, presupuesto, listas de equipaje, fotos y mucho más — todo en un solo lugar, en tu propio servidor.',
   'settings.about.madeWith': 'Hecho con',
   'settings.about.madeBy': 'por Maurice y una creciente comunidad de código abierto.',
@@ -830,6 +843,7 @@ const es: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transportes',
   'trip.tabs.reservations': 'Reservas',
   'trip.tabs.reservationsShort': 'Reservas',
   'trip.tabs.packing': 'Lista de equipaje',
@@ -852,6 +866,8 @@ const es: Record<string, string> = {
   'trip.toast.reservationAdded': 'Reserva añadida',
   'trip.toast.deleted': 'Eliminado',
   'trip.confirm.deletePlace': '¿Seguro que quieres eliminar este lugar?',
+  'trip.confirm.deletePlaces': '¿Eliminar {count} lugares?',
+  'trip.toast.placesDeleted': '{count} lugares eliminados',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'No hay lugares planificados para este día',
@@ -896,6 +912,17 @@ const es: Record<string, string> = {
   'places.importFileError': 'Importación fallida',
   'places.importAllSkipped': 'Todos los lugares ya estaban en el viaje.',
   'places.gpxImported': '{count} lugares importados desde GPX',
+  'places.gpxImportTypes': '¿Qué deseas importar?',
+  'places.gpxImportWaypoints': 'Puntos de ruta',
+  'places.gpxImportRoutes': 'Rutas',
+  'places.gpxImportTracks': 'Tracks (con geometría de ruta)',
+  'places.gpxImportNoneSelected': 'Selecciona al menos un tipo para importar.',
+  'places.kmlImportTypes': '¿Qué deseas importar?',
+  'places.kmlImportPoints': 'Puntos (Placemarks)',
+  'places.kmlImportPaths': 'Rutas (LineStrings)',
+  'places.kmlImportNoneSelected': 'Selecciona al menos un tipo.',
+  'places.selectionCount': '{count} seleccionado(s)',
+  'places.deleteSelected': 'Eliminar selección',
   'places.kmlKmzImported': '{count} lugares importados desde KMZ/KML',
   'places.urlResolved': 'Lugar importado desde URL',
   'places.importList': 'Importar lista',
@@ -912,6 +939,7 @@ const es: Record<string, string> = {
   'places.assignToDay': '¿A qué día añadirlo?',
   'places.all': 'Todo',
   'places.unplanned': 'Sin planificar',
+  'places.filterTracks': 'Rutas',
   'places.search': 'Buscar lugares...',
   'places.allCategories': 'Todas las categorías',
   'places.categoriesSelected': 'categorías',
@@ -996,7 +1024,7 @@ const es: Record<string, string> = {
   'reservations.type.hotel': 'Alojamiento',
   'reservations.type.restaurant': 'Restaurante',
   'reservations.type.train': 'Tren',
-  'reservations.type.car': 'Coche de alquiler',
+  'reservations.type.car': 'Coche',
   'reservations.type.cruise': 'Crucero',
   'reservations.type.event': 'Evento',
   'reservations.type.tour': 'Excursión',
@@ -1057,6 +1085,7 @@ const es: Record<string, string> = {
   'reservations.span.end': 'Fin',
   'reservations.span.ongoing': 'En curso',
   'reservations.validation.endBeforeStart': 'La fecha/hora de fin debe ser posterior a la de inicio',
+  'reservations.addBooking': 'Añadir reserva',
 
   // Budget
   'budget.title': 'Presupuesto',
@@ -1624,6 +1653,15 @@ const es: Record<string, string> = {
   'reservations.meta.flightNumber': 'N° de vuelo',
   'reservations.meta.from': 'Desde',
   'reservations.meta.to': 'Hasta',
+  'reservations.needsReview': 'Revisar',
+  'reservations.needsReviewHint': 'No se pudo identificar el aeropuerto automáticamente — por favor confirma la ubicación.',
+  'reservations.searchLocation': 'Buscar estación, puerto, dirección...',
+  'airport.searchPlaceholder': 'Código o ciudad del aeropuerto (ej. FRA)',
+  'map.connections': 'Conexiones',
+  'map.showConnections': 'Mostrar rutas de reservas',
+  'map.hideConnections': 'Ocultar rutas de reservas',
+  'settings.bookingLabels': 'Etiquetas de rutas de reservas',
+  'settings.bookingLabelsHint': 'Muestra nombres de estaciones / aeropuertos en el mapa. Desactivado, solo se muestra el icono.',
   'reservations.meta.trainNumber': 'N° de tren',
   'reservations.meta.platform': 'Andén',
   'reservations.meta.seat': 'Asiento',
@@ -1705,6 +1743,7 @@ const es: Record<string, string> = {
   'undo.reorder': 'Lugares reordenados',
   'undo.optimize': 'Ruta optimizada',
   'undo.deletePlace': 'Lugar eliminado',
+  'undo.deletePlaces': 'Lugares eliminados',
   'undo.moveDay': 'Lugar movido a otro día',
   'undo.lock': 'Bloqueo de lugar activado/desactivado',
   'undo.importGpx': 'Importación GPX',
@@ -1764,7 +1803,11 @@ const es: Record<string, string> = {
   'todo.unassigned': 'Sin asignar',
   'todo.noCategory': 'Sin categoría',
   'todo.hasDescription': 'Con descripción',
-  'todo.addItem': 'Añadir nueva tarea...',
+  'todo.addItem': 'Nueva tarea',
+  'todo.sidebar.sortBy': 'Ordenar por',
+  'todo.priority': 'Prioridad',
+  'todo.newCategoryLabel': 'nueva',
+  'budget.categoriesLabel': 'categorías',
   'todo.newCategory': 'Nombre de la categoría',
   'todo.addCategory': 'Añadir categoría',
   'todo.newItem': 'Nueva tarea',
@@ -2250,6 +2293,11 @@ const es: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Una nota personal de mi parte',
   'system_notice.v3_thankyou.body': 'Antes de seguir — quiero tomarme un momento.\n\nTREK empezó como un proyecto personal que construí para mis propios viajes. Nunca imaginé que crecería hasta convertirse en algo en lo que 4.000 de vosotros confían para planificar sus aventuras. Cada estrella, cada issue, cada solicitud de funcionalidad — los leo todos, y son lo que me mantiene en pie durante las noches largas entre un trabajo a jornada completa y la universidad.\n\nQuiero que sepáis: TREK siempre será open source, siempre self-hosted, siempre vuestro. Sin rastreo, sin suscripciones, sin letra pequeña. Solo una herramienta hecha por alguien que ama viajar tanto como vosotros.\n\nUn agradecimiento especial a [jubnl](https://github.com/jubnl) — te has convertido en un colaborador increíble. Mucho de lo que hace grande la versión 3.0 lleva tu huella. Gracias por creer en este proyecto cuando todavía era un borrador.\n\nY a cada uno de vosotros que reportó un bug, tradujo un texto, compartió TREK con un amigo o simplemente lo usó para planificar un viaje — **gracias**. Vosotros sois la razón de que esto exista.\n\nPor muchas más aventuras juntos.\n\n— Maurice\n\n---\n\n[Únete a la comunidad en Discord](https://discord.gg/7Q6M6jDwzf)\n\nSi TREK mejora tus viajes, un [pequeño café](https://ko-fi.com/mauriceboe) siempre mantiene las luces encendidas.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transportes',
+  'transport.addManual': 'Transporte manual',
 }
 
 export default es

client/src/i18n/translations/fr.ts

@@ -10,6 +10,9 @@ const fr: Record<string, string> = {
   'common.add': 'Ajouter',
   'common.loading': 'Chargement…',
   'common.import': 'Importer',
+  'common.select': 'Sélectionner',
+  'common.selectAll': 'Tout sélectionner',
+  'common.deselectAll': 'Tout désélectionner',
   'common.error': 'Erreur',
   'common.unknownError': 'Erreur inconnue',
   'common.tooManyAttempts': 'Trop de tentatives. Veuillez réessayer plus tard.',
@@ -308,6 +311,16 @@ const fr: Record<string, string> = {
   'settings.about.featureRequest': 'Proposer une fonctionnalité',
   'settings.about.featureRequestHint': 'Suggérez une nouvelle fonctionnalité',
   'settings.about.wikiHint': 'Documentation et guides',
+  'settings.about.supporters.badge': 'Soutiens Mensuels',
+  'settings.about.supporters.title': 'Compagnons de voyage pour TREK',
+  'settings.about.supporters.subtitle': 'Pendant que tu planifies ton prochain itinéraire, ces personnes aident à planifier l\'avenir de TREK. Leur contribution mensuelle va directement au développement et aux heures réellement passées — pour que TREK reste Open Source.',
+  'settings.about.supporters.since': 'soutien depuis {date}',
+  'settings.about.supporters.tierEmpty': 'Sois le premier',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK est un planificateur de voyage auto-hébergé qui vous aide à organiser vos voyages de la première idée au dernier souvenir. Planification journalière, budget, listes de bagages, photos et bien plus — le tout au même endroit, sur votre propre serveur.',
   'settings.about.madeWith': 'Fait avec',
   'settings.about.madeBy': 'par Maurice et une communauté open-source grandissante.',
@@ -854,6 +867,7 @@ const fr: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transports',
   'trip.tabs.reservations': 'Réservations',
   'trip.tabs.reservationsShort': 'Résa',
   'trip.tabs.packing': 'Liste de bagages',
@@ -876,6 +890,8 @@ const fr: Record<string, string> = {
   'trip.toast.reservationAdded': 'Réservation ajoutée',
   'trip.toast.deleted': 'Supprimé',
   'trip.confirm.deletePlace': 'Voulez-vous vraiment supprimer ce lieu ?',
+  'trip.confirm.deletePlaces': 'Supprimer {count} lieux?',
+  'trip.toast.placesDeleted': '{count} lieux supprimés',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Aucun lieu prévu pour ce jour',
@@ -920,6 +936,17 @@ const fr: Record<string, string> = {
   'places.importFileError': 'Importation échouée',
   'places.importAllSkipped': 'Tous les lieux étaient déjà dans le voyage.',
   'places.gpxImported': '{count} lieux importés depuis GPX',
+  'places.gpxImportTypes': 'Que voulez-vous importer?',
+  'places.gpxImportWaypoints': 'Points de passage',
+  'places.gpxImportRoutes': 'Itinéraires',
+  'places.gpxImportTracks': 'Traces (avec géométrie)',
+  'places.gpxImportNoneSelected': 'Sélectionnez au moins un type à importer.',
+  'places.kmlImportTypes': 'Que souhaitez-vous importer ?',
+  'places.kmlImportPoints': 'Points (Placemarks)',
+  'places.kmlImportPaths': 'Chemins (LineStrings)',
+  'places.kmlImportNoneSelected': 'Sélectionnez au moins un type.',
+  'places.selectionCount': '{count} sélectionné(s)',
+  'places.deleteSelected': 'Supprimer la sélection',
   'places.kmlKmzImported': '{count} lieux importés depuis KMZ/KML',
   'places.urlResolved': 'Lieu importé depuis l\'URL',
   'places.importList': 'Import de liste',
@@ -936,6 +963,7 @@ const fr: Record<string, string> = {
   'places.assignToDay': 'Ajouter à quel jour ?',
   'places.all': 'Tous',
   'places.unplanned': 'Non planifiés',
+  'places.filterTracks': 'Traces',
   'places.search': 'Rechercher des lieux…',
   'places.allCategories': 'Toutes les catégories',
   'places.categoriesSelected': 'catégories',
@@ -1019,6 +1047,15 @@ const fr: Record<string, string> = {
   'reservations.meta.flightNumber': 'N° de vol',
   'reservations.meta.from': 'De',
   'reservations.meta.to': 'À',
+  'reservations.needsReview': 'Vérifier',
+  'reservations.needsReviewHint': 'L\'aéroport n\'a pas pu être identifié automatiquement — veuillez confirmer l\'emplacement.',
+  'reservations.searchLocation': 'Rechercher une gare, un port, une adresse…',
+  'airport.searchPlaceholder': 'Code ou ville de l\'aéroport (ex. FRA)',
+  'map.connections': 'Connexions',
+  'map.showConnections': 'Afficher les itinéraires',
+  'map.hideConnections': 'Masquer les itinéraires',
+  'settings.bookingLabels': 'Étiquettes des itinéraires',
+  'settings.bookingLabelsHint': 'Affiche les noms des gares / aéroports sur la carte. Si désactivé, seule l\'icône est affichée.',
   'reservations.meta.trainNumber': 'N° de train',
   'reservations.meta.platform': 'Quai',
   'reservations.meta.seat': 'Place',
@@ -1037,7 +1074,7 @@ const fr: Record<string, string> = {
   'reservations.type.hotel': 'Hébergement',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Train',
-  'reservations.type.car': 'Voiture de location',
+  'reservations.type.car': 'Voiture',
   'reservations.type.cruise': 'Croisière',
   'reservations.type.event': 'Événement',
   'reservations.type.tour': 'Visite',
@@ -1098,6 +1135,7 @@ const fr: Record<string, string> = {
   'reservations.span.end': 'Fin',
   'reservations.span.ongoing': 'En cours',
   'reservations.validation.endBeforeStart': 'La date/heure de fin doit être postérieure à la date/heure de début',
+  'reservations.addBooking': 'Ajouter une réservation',
 
   // Budget
   'budget.title': 'Budget',
@@ -1699,6 +1737,7 @@ const fr: Record<string, string> = {
   'undo.reorder': 'Lieux réorganisés',
   'undo.optimize': 'Itinéraire optimisé',
   'undo.deletePlace': 'Lieu supprimé',
+  'undo.deletePlaces': 'Lieux supprimés',
   'undo.moveDay': 'Lieu déplacé vers un autre jour',
   'undo.lock': 'Verrouillage du lieu modifié',
   'undo.importGpx': 'Import GPX',
@@ -1758,7 +1797,11 @@ const fr: Record<string, string> = {
   'todo.unassigned': 'Non assigné',
   'todo.noCategory': 'Aucune catégorie',
   'todo.hasDescription': 'Avec description',
-  'todo.addItem': 'Ajouter une tâche...',
+  'todo.addItem': 'Nouvelle tâche',
+  'todo.sidebar.sortBy': 'Trier par',
+  'todo.priority': 'Priorité',
+  'todo.newCategoryLabel': 'nouvelle',
+  'budget.categoriesLabel': 'catégories',
   'todo.newCategory': 'Nom de la catégorie',
   'todo.addCategory': 'Ajouter une catégorie',
   'todo.newItem': 'Nouvelle tâche',
@@ -2244,6 +2287,11 @@ const fr: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Un mot personnel de ma part',
   'system_notice.v3_thankyou.body': 'Avant de continuer — je veux prendre un instant.\n\nTREK a commencé comme un projet perso que j\'ai construit pour mes propres voyages. Je n\'aurais jamais imaginé qu\'il grandirait au point que 4 000 d\'entre vous lui fassent confiance pour planifier vos aventures. Chaque étoile, chaque issue, chaque demande de fonctionnalité — je les lis toutes, et ce sont elles qui me font tenir pendant les nuits blanches entre un travail à temps plein et l\'université.\n\nJe veux que vous sachiez : TREK sera toujours open source, toujours auto-hébergé, toujours à vous. Pas de tracking, pas d\'abonnements, pas de conditions cachées. Juste un outil construit par quelqu\'un qui aime voyager autant que vous.\n\nUn merci tout particulier à [jubnl](https://github.com/jubnl) — tu es devenu un collaborateur incroyable. Une grande partie de ce qui rend la 3.0 géniale porte ton empreinte. Merci d\'avoir cru en ce projet quand il était encore brut.\n\nEt à chacun d\'entre vous qui a signalé un bug, traduit une chaîne, partagé TREK avec un ami ou simplement l\'a utilisé pour planifier un voyage — **merci**. Vous êtes la raison pour laquelle tout ceci existe.\n\nÀ de nombreuses autres aventures ensemble.\n\n— Maurice\n\n---\n\n[Rejoins la communauté sur Discord](https://discord.gg/7Q6M6jDwzf)\n\nSi TREK rend tes voyages meilleurs, un [petit café](https://ko-fi.com/mauriceboe) aide toujours à garder les lumières allumées.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transports',
+  'transport.addManual': 'Transport manuel',
 }
 
 export default fr

client/src/i18n/translations/hu.ts

@@ -10,6 +10,9 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Hozzáadás',
   'common.loading': 'Betöltés...',
   'common.import': 'Importálás',
+  'common.select': 'Kiválaszt',
+  'common.selectAll': 'Mindet kiválaszt',
+  'common.deselectAll': 'Összes kijelölés megszüntetése',
   'common.error': 'Hiba',
   'common.unknownError': 'Ismeretlen hiba',
   'common.tooManyAttempts': 'Túl sok próbálkozás. Kérjük, próbálja újra később.',
@@ -263,6 +266,16 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Funkció javaslat',
   'settings.about.featureRequestHint': 'Javasolj egy új funkciót',
   'settings.about.wikiHint': 'Dokumentáció és útmutatók',
+  'settings.about.supporters.badge': 'Havi támogatók',
+  'settings.about.supporters.title': 'Útitársak a TREK mellett',
+  'settings.about.supporters.subtitle': 'Miközben te a következő útvonaladat tervezed, ők a TREK jövőjét tervezik velem együtt. Havi hozzájárulásuk közvetlenül fejlesztésre és valódi órákra fordítódik — hogy a TREK Open Source maradhasson.',
+  'settings.about.supporters.since': 'támogató {date} óta',
+  'settings.about.supporters.tierEmpty': 'Légy az első',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'A TREK egy saját szerveren üzemeltetett útitervező, amely segít az utazásaid megszervezésében az első ötlettől az utolsó emlékig. Napi tervezés, költségvetés, csomagolási listák, fotók és még sok más — minden egy helyen, a saját szervereden.',
   'settings.about.madeWith': 'Készítve',
   'settings.about.madeBy': 'Maurice és egy növekvő nyílt forráskódú közösség által.',
@@ -855,6 +868,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
 
   // Utazástervező
   'trip.tabs.plan': 'Terv',
+  'trip.tabs.transports': 'Közlekedés',
   'trip.tabs.reservations': 'Foglalások',
   'trip.tabs.reservationsShort': 'Foglalás',
   'trip.tabs.packing': 'Csomagolási lista',
@@ -876,6 +890,8 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Foglalás hozzáadva',
   'trip.toast.deleted': 'Törölve',
   'trip.confirm.deletePlace': 'Biztosan törölni szeretnéd ezt a helyet?',
+  'trip.confirm.deletePlaces': '{count} helyet töröl?',
+  'trip.toast.placesDeleted': '{count} hely törölve',
   'trip.loadingPhotos': 'Helyek fotóinak betöltése...',
 
   // Napi terv oldalsáv
@@ -921,6 +937,17 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Importálás sikertelen',
   'places.importAllSkipped': 'Minden hely már szerepel az utazásban.',
   'places.gpxImported': '{count} hely importálva GPX-ből',
+  'places.gpxImportTypes': 'Mit szeretnél importálni?',
+  'places.gpxImportWaypoints': 'Útpontok',
+  'places.gpxImportRoutes': 'Útvonalak',
+  'places.gpxImportTracks': 'Nyomvonalak (útvonalgeometriával)',
+  'places.gpxImportNoneSelected': 'Válassz legalább egy típust az importáláshoz.',
+  'places.kmlImportTypes': 'Mit szeretnél importálni?',
+  'places.kmlImportPoints': 'Pontok (Placemarks)',
+  'places.kmlImportPaths': 'Útvonalak (LineStrings)',
+  'places.kmlImportNoneSelected': 'Válassz legalább egy típust.',
+  'places.selectionCount': '{count} kiválasztva',
+  'places.deleteSelected': 'Kijelöltek törlése',
   'places.kmlKmzImported': '{count} hely importálva KMZ/KML-ből',
   'places.urlResolved': 'Hely importálva URL-ből',
   'places.importList': 'Lista importálás',
@@ -937,6 +964,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Melyik naphoz adod?',
   'places.all': 'Összes',
   'places.unplanned': 'Nem tervezett',
+  'places.filterTracks': 'Nyomvonalak',
   'places.search': 'Helyek keresése...',
   'places.allCategories': 'Összes kategória',
   'places.categoriesSelected': 'kategória',
@@ -1021,6 +1049,15 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Járatszám',
   'reservations.meta.from': 'Honnan',
   'reservations.meta.to': 'Hová',
+  'reservations.needsReview': 'Ellenőrzés',
+  'reservations.needsReviewHint': 'A repülőteret nem sikerült automatikusan azonosítani — erősítsd meg a helyet.',
+  'reservations.searchLocation': 'Állomás, kikötő, cím keresése...',
+  'airport.searchPlaceholder': 'Repülőtér kódja vagy város (pl. FRA)',
+  'map.connections': 'Kapcsolatok',
+  'map.showConnections': 'Foglalási útvonalak megjelenítése',
+  'map.hideConnections': 'Foglalási útvonalak elrejtése',
+  'settings.bookingLabels': 'Útvonal-címkék a foglalásokhoz',
+  'settings.bookingLabelsHint': 'Állomás- / repülőtér-nevek megjelenítése a térképen. Ha ki van kapcsolva, csak az ikon látszik.',
   'reservations.meta.trainNumber': 'Vonatszám',
   'reservations.meta.platform': 'Vágány',
   'reservations.meta.seat': 'Ülés',
@@ -1039,7 +1076,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Szálloda',
   'reservations.type.restaurant': 'Étterem',
   'reservations.type.train': 'Vonat',
-  'reservations.type.car': 'Autóbérlés',
+  'reservations.type.car': 'Autó',
   'reservations.type.cruise': 'Hajóút',
   'reservations.type.event': 'Esemény',
   'reservations.type.tour': 'Túra',
@@ -1099,6 +1136,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Vége',
   'reservations.span.ongoing': 'Folyamatban',
   'reservations.validation.endBeforeStart': 'A befejezés dátuma/időpontja a kezdés utáni kell legyen',
+  'reservations.addBooking': 'Foglalás hozzáadása',
 
   // Költségvetés
   'budget.title': 'Költségvetés',
@@ -1697,6 +1735,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Helyek átrendezve',
   'undo.optimize': 'Útvonal optimalizálva',
   'undo.deletePlace': 'Hely törölve',
+  'undo.deletePlaces': 'Helyek törölve',
   'undo.moveDay': 'Hely áthelyezve másik napra',
   'undo.lock': 'Hely zárolása váltva',
   'undo.importGpx': 'GPX importálás',
@@ -1756,7 +1795,11 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nem hozzárendelt',
   'todo.noCategory': 'Nincs kategória',
   'todo.hasDescription': 'Van leírás',
-  'todo.addItem': 'Új feladat hozzáadása...',
+  'todo.addItem': 'Új feladat',
+  'todo.sidebar.sortBy': 'Rendezés',
+  'todo.priority': 'Prioritás',
+  'todo.newCategoryLabel': 'új',
+  'budget.categoriesLabel': 'kategóriák',
   'todo.newCategory': 'Kategória neve',
   'todo.addCategory': 'Kategória hozzáadása',
   'todo.newItem': 'Új feladat',
@@ -2245,6 +2288,11 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Egy személyes gondolat tőlem',
   'system_notice.v3_thankyou.body': 'Mielőtt továbbmennél — szeretnék egy pillanatra megállni.\n\nA TREK egy hobbiprojektként indult, amit a saját utazásaimhoz építettem. Sosem gondoltam volna, hogy valami olyanná nő, amire 4000-en bízzátok a kalandjaitok tervezését. Minden csillagot, minden issue-t, minden funkciókérést — mindet elolvasom, és ezek tartanak életben a késő éjszakákon a teljes állás és az egyetem között.\n\nSzeretnétek, ha tudnátok: a TREK mindig nyílt forráskódú marad, mindig self-hosted, mindig a tiétek. Nincs nyomkövetés, nincs előfizetés, nincsenek rejtett feltételek. Csak egy eszköz, amit valaki épített, aki ugyanúgy szereti az utazást, mint ti.\n\nKülönleges köszönet [jubnl](https://github.com/jubnl)-nek — hihetetlen társsá váltál. A 3.0 nagyszerűségének nagy része a te kézjegyedet viseli. Köszönöm, hogy hittél ebben a projektben, amikor még nyers volt.\n\nÉs mindannyiótoknak, akik hibát jelentettetek, szöveget fordítottatok, megosztottátok a TREK-et egy baráttal, vagy egyszerűen csak egy utazást terveztetek vele — **köszönöm**. Ti vagytok az ok, amiért ez létezik.\n\nSok további közös kalandért.\n\n— Maurice\n\n---\n\n[Csatlakozz a közösséghez a Discordon](https://discord.gg/7Q6M6jDwzf)\n\nHa a TREK jobbá teszi az utazásaidat, egy [kis kávé](https://ko-fi.com/mauriceboe) mindig segít, hogy égve maradjanak a fények.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Közlekedés',
+  'transport.addManual': 'Kézi közlekedés',
 }
 
 export default hu

client/src/i18n/translations/id.ts

@@ -10,6 +10,9 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Tambah',
   'common.loading': 'Memuat...',
   'common.import': 'Impor',
+  'common.select': 'Pilih',
+  'common.selectAll': 'Pilih semua',
+  'common.deselectAll': 'Batalkan semua pilihan',
   'common.error': 'Kesalahan',
   'common.unknownError': 'Kesalahan tidak diketahui',
   'common.tooManyAttempts': 'Terlalu banyak percobaan. Coba lagi nanti.',
@@ -370,6 +373,16 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Permintaan Fitur',
   'settings.about.featureRequestHint': 'Sarankan fitur baru',
   'settings.about.wikiHint': 'Dokumentasi & panduan',
+  'settings.about.supporters.badge': 'Pendukung Bulanan',
+  'settings.about.supporters.title': 'Rekan perjalanan untuk TREK',
+  'settings.about.supporters.subtitle': 'Saat kamu merencanakan rute berikutnya, orang-orang ini ikut merencanakan masa depan TREK. Kontribusi bulanan mereka langsung masuk ke pengembangan dan jam kerja nyata — supaya TREK tetap Open Source.',
+  'settings.about.supporters.since': 'pendukung sejak {date}',
+  'settings.about.supporters.tierEmpty': 'Jadilah yang pertama',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK adalah perencana perjalanan self-hosted yang membantu kamu mengatur perjalanan dari ide pertama hingga kenangan terakhir. Perencanaan harian, anggaran, daftar bawaan, foto dan masih banyak lagi — semua di satu tempat, di servermu sendiri.',
   'settings.about.madeWith': 'Dibuat dengan',
   'settings.about.madeBy': 'oleh Maurice dan komunitas open-source yang terus berkembang.',
@@ -915,6 +928,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Rencana',
+  'trip.tabs.transports': 'Transportasi',
   'trip.tabs.reservations': 'Pemesanan',
   'trip.tabs.reservationsShort': 'Pesan',
   'trip.tabs.packing': 'Daftar Perlengkapan',
@@ -937,6 +951,8 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reservasi ditambahkan',
   'trip.toast.deleted': 'Dihapus',
   'trip.confirm.deletePlace': 'Apakah kamu yakin ingin menghapus tempat ini?',
+  'trip.confirm.deletePlaces': 'Hapus {count} tempat?',
+  'trip.toast.placesDeleted': '{count} tempat dihapus',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Belum ada tempat yang direncanakan untuk hari ini',
@@ -981,6 +997,17 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Impor gagal',
   'places.importAllSkipped': 'Semua tempat sudah ada di perjalanan.',
   'places.gpxImported': '{count} tempat diimpor dari GPX',
+  'places.gpxImportTypes': 'Apa yang ingin diimpor?',
+  'places.gpxImportWaypoints': 'Titik jalan',
+  'places.gpxImportRoutes': 'Rute',
+  'places.gpxImportTracks': 'Trek (dengan geometri jalur)',
+  'places.gpxImportNoneSelected': 'Pilih setidaknya satu jenis untuk diimpor.',
+  'places.kmlImportTypes': 'Apa yang ingin diimpor?',
+  'places.kmlImportPoints': 'Titik (Placemarks)',
+  'places.kmlImportPaths': 'Jalur (LineStrings)',
+  'places.kmlImportNoneSelected': 'Pilih setidaknya satu jenis.',
+  'places.selectionCount': '{count} dipilih',
+  'places.deleteSelected': 'Hapus yang dipilih',
   'places.kmlKmzImported': '{count} tempat diimpor dari KMZ/KML',
   'places.urlResolved': 'Tempat diimpor dari URL',
   'places.importList': 'Impor Daftar',
@@ -997,6 +1024,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Tambah ke hari mana?',
   'places.all': 'Semua',
   'places.unplanned': 'Belum direncanakan',
+  'places.filterTracks': 'Trek',
   'places.search': 'Cari tempat...',
   'places.allCategories': 'Semua Kategori',
   'places.categoriesSelected': 'kategori',
@@ -1080,6 +1108,15 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'No. Penerbangan',
   'reservations.meta.from': 'Dari',
   'reservations.meta.to': 'Ke',
+  'reservations.needsReview': 'Tinjau',
+  'reservations.needsReviewHint': 'Bandara tidak dapat dicocokkan otomatis — konfirmasi lokasi.',
+  'reservations.searchLocation': 'Cari stasiun, pelabuhan, alamat...',
+  'airport.searchPlaceholder': 'Kode bandara atau kota (mis. FRA)',
+  'map.connections': 'Koneksi',
+  'map.showConnections': 'Tampilkan rute pemesanan',
+  'map.hideConnections': 'Sembunyikan rute pemesanan',
+  'settings.bookingLabels': 'Label rute pemesanan',
+  'settings.bookingLabelsHint': 'Menampilkan nama stasiun / bandara di peta. Jika mati, hanya ikon ditampilkan.',
   'reservations.meta.trainNumber': 'No. Kereta',
   'reservations.meta.platform': 'Peron',
   'reservations.meta.seat': 'Kursi',
@@ -1098,7 +1135,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Akomodasi',
   'reservations.type.restaurant': 'Restoran',
   'reservations.type.train': 'Kereta',
-  'reservations.type.car': 'Mobil Sewa',
+  'reservations.type.car': 'Mobil',
   'reservations.type.cruise': 'Kapal Pesiar',
   'reservations.type.event': 'Acara',
   'reservations.type.tour': 'Tur',
@@ -1159,6 +1196,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Selesai',
   'reservations.span.ongoing': 'Berlangsung',
   'reservations.validation.endBeforeStart': 'Tanggal/waktu selesai harus setelah tanggal/waktu mulai',
+  'reservations.addBooking': 'Tambah pemesanan',
 
   // Budget
   'budget.title': 'Anggaran',
@@ -1772,6 +1810,7 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Tempat diurutkan ulang',
   'undo.optimize': 'Rute dioptimalkan',
   'undo.deletePlace': 'Tempat dihapus',
+  'undo.deletePlaces': 'Tempat dihapus',
   'undo.moveDay': 'Tempat dipindah ke hari lain',
   'undo.lock': 'Kunci tempat diubah',
   'undo.importGpx': 'Impor GPX',
@@ -1828,7 +1867,11 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Belum ditugaskan',
   'todo.noCategory': 'Tanpa kategori',
   'todo.hasDescription': 'Ada deskripsi',
-  'todo.addItem': 'Tambah tugas baru...',
+  'todo.addItem': 'Tugas baru',
+  'todo.sidebar.sortBy': 'Urutkan',
+  'todo.priority': 'Prioritas',
+  'todo.newCategoryLabel': 'baru',
+  'budget.categoriesLabel': 'kategori',
   'todo.newCategory': 'Nama kategori',
   'todo.addCategory': 'Tambah kategori',
   'todo.newItem': 'Tugas baru',
@@ -2286,6 +2329,11 @@ const id: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Catatan pribadi dari saya',
   'system_notice.v3_thankyou.body': 'Sebelum kamu lanjut — saya ingin berhenti sejenak.\n\nTREK dimulai sebagai proyek sampingan yang saya buat untuk perjalanan saya sendiri. Saya tidak pernah membayangkan ia akan tumbuh menjadi sesuatu yang dipercaya oleh 4.000 dari kalian untuk merencanakan petualangan. Setiap bintang, setiap issue, setiap permintaan fitur — saya membaca semuanya, dan itulah yang membuat saya terus bertahan di malam-malam larut antara pekerjaan penuh waktu dan kuliah.\n\nSaya ingin kalian tahu: TREK akan selalu open source, selalu self-hosted, selalu milik kalian. Tanpa pelacakan, tanpa langganan, tanpa syarat tersembunyi. Hanya sebuah alat yang dibuat oleh seseorang yang mencintai traveling sama seperti kalian.\n\nTerima kasih khusus untuk [jubnl](https://github.com/jubnl) — kamu telah menjadi kolaborator yang luar biasa. Begitu banyak hal yang membuat versi 3.0 hebat memiliki jejakmu. Terima kasih telah percaya pada proyek ini ketika masih kasar.\n\nDan untuk setiap dari kalian yang melaporkan bug, menerjemahkan string, membagikan TREK kepada teman, atau sekadar menggunakannya untuk merencanakan perjalanan — **terima kasih**. Kalianlah alasan semua ini ada.\n\nUntuk lebih banyak petualangan bersama.\n\n— Maurice\n\n---\n\n[Bergabunglah dengan komunitas di Discord](https://discord.gg/7Q6M6jDwzf)\n\nJika TREK membuat perjalananmu lebih baik, [secangkir kopi kecil](https://ko-fi.com/mauriceboe) selalu membantu menjaga lampu tetap menyala.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transportasi',
+  'transport.addManual': 'Transportasi Manual',
 };
 
 export default id;

client/src/i18n/translations/it.ts

@@ -10,6 +10,9 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Aggiungi',
   'common.loading': 'Caricamento...',
   'common.import': 'Importa',
+  'common.select': 'Seleziona',
+  'common.selectAll': 'Seleziona tutto',
+  'common.deselectAll': 'Deseleziona tutto',
   'common.error': 'Errore',
   'common.unknownError': 'Errore sconosciuto',
   'common.tooManyAttempts': 'Troppi tentativi. Riprova più tardi.',
@@ -263,6 +266,16 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Richiedi funzionalità',
   'settings.about.featureRequestHint': 'Suggerisci una nuova funzionalità',
   'settings.about.wikiHint': 'Documentazione e guide',
+  'settings.about.supporters.badge': 'Sostenitori Mensili',
+  'settings.about.supporters.title': 'Compagni di viaggio per TREK',
+  'settings.about.supporters.subtitle': 'Mentre pianifichi il tuo prossimo itinerario, queste persone aiutano a pianificare il futuro di TREK. Il loro contributo mensile va direttamente allo sviluppo e alle ore realmente investite — per mantenere TREK Open Source.',
+  'settings.about.supporters.since': 'sostenitore da {date}',
+  'settings.about.supporters.tierEmpty': 'Sii il primo',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK è un pianificatore di viaggi self-hosted che ti aiuta a organizzare i tuoi viaggi dalla prima idea all\'ultimo ricordo. Pianificazione giornaliera, budget, liste bagagli, foto e molto altro — tutto in un unico posto, sul tuo server.',
   'settings.about.madeWith': 'Fatto con',
   'settings.about.madeBy': 'da Maurice e una crescente comunità open-source.',
@@ -855,6 +868,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Programma',
+  'trip.tabs.transports': 'Trasporti',
   'trip.tabs.reservations': 'Prenotazioni',
   'trip.tabs.reservationsShort': 'Pren.',
   'trip.tabs.packing': 'Lista valigia',
@@ -876,6 +890,8 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Prenotazione aggiunta',
   'trip.toast.deleted': 'Eliminato',
   'trip.confirm.deletePlace': 'Sei sicuro di voler eliminare questo luogo?',
+  'trip.confirm.deletePlaces': 'Eliminare {count} luoghi?',
+  'trip.toast.placesDeleted': '{count} luoghi eliminati',
   'trip.loadingPhotos': 'Caricamento foto dei luoghi...',
 
   // Day Plan Sidebar
@@ -921,6 +937,17 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Importazione non riuscita',
   'places.importAllSkipped': 'Tutti i luoghi erano già nel viaggio.',
   'places.gpxImported': '{count} luoghi importati da GPX',
+  'places.gpxImportTypes': 'Cosa vuoi importare?',
+  'places.gpxImportWaypoints': 'Waypoint',
+  'places.gpxImportRoutes': 'Percorsi',
+  'places.gpxImportTracks': 'Tracce (con geometria percorso)',
+  'places.gpxImportNoneSelected': 'Seleziona almeno un tipo da importare.',
+  'places.kmlImportTypes': 'Cosa vuoi importare?',
+  'places.kmlImportPoints': 'Punti (Placemarks)',
+  'places.kmlImportPaths': 'Percorsi (LineStrings)',
+  'places.kmlImportNoneSelected': 'Seleziona almeno un tipo.',
+  'places.selectionCount': '{count} selezionato/i',
+  'places.deleteSelected': 'Elimina selezionati',
   'places.kmlKmzImported': '{count} luoghi importati da KMZ/KML',
   'places.urlResolved': 'Luogo importato dall\'URL',
   'places.importList': 'Importa lista',
@@ -937,6 +964,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'A quale giorno aggiungere?',
   'places.all': 'Tutti',
   'places.unplanned': 'Non pianificati',
+  'places.filterTracks': 'Tracce',
   'places.search': 'Cerca luoghi...',
   'places.allCategories': 'Tutte le categorie',
   'places.categoriesSelected': 'categorie',
@@ -1020,6 +1048,15 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'N. volo',
   'reservations.meta.from': 'Da',
   'reservations.meta.to': 'A',
+  'reservations.needsReview': 'Verifica',
+  'reservations.needsReviewHint': 'L\'aeroporto non è stato riconosciuto automaticamente — conferma la posizione.',
+  'reservations.searchLocation': 'Cerca stazione, porto, indirizzo...',
+  'airport.searchPlaceholder': 'Codice o città dell\'aeroporto (es. FRA)',
+  'map.connections': 'Connessioni',
+  'map.showConnections': 'Mostra percorsi prenotati',
+  'map.hideConnections': 'Nascondi percorsi prenotati',
+  'settings.bookingLabels': 'Etichette percorsi prenotati',
+  'settings.bookingLabelsHint': 'Mostra i nomi di stazioni / aeroporti sulla mappa. Se disattivato, viene mostrata solo l\'icona.',
   'reservations.meta.trainNumber': 'N. treno',
   'reservations.meta.platform': 'Binario',
   'reservations.meta.seat': 'Posto',
@@ -1038,7 +1075,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Alloggio',
   'reservations.type.restaurant': 'Ristorante',
   'reservations.type.train': 'Treno',
-  'reservations.type.car': 'Auto a noleggio',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Crociera',
   'reservations.type.event': 'Evento',
   'reservations.type.tour': 'Tour',
@@ -1099,6 +1136,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Fine',
   'reservations.span.ongoing': 'In corso',
   'reservations.validation.endBeforeStart': 'La data/ora di fine deve essere successiva alla data/ora di inizio',
+  'reservations.addBooking': 'Aggiungi prenotazione',
 
   // Budget
   'budget.title': 'Budget',
@@ -1701,6 +1739,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Luoghi riordinati',
   'undo.optimize': 'Percorso ottimizzato',
   'undo.deletePlace': 'Luogo eliminato',
+  'undo.deletePlaces': 'Luoghi eliminati',
   'undo.moveDay': 'Luogo spostato in altro giorno',
   'undo.lock': 'Blocco luogo modificato',
   'undo.importGpx': 'Importazione GPX',
@@ -1759,7 +1798,11 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Non assegnato',
   'todo.noCategory': 'Nessuna categoria',
   'todo.hasDescription': 'Ha descrizione',
-  'todo.addItem': 'Aggiungi nuova attività...',
+  'todo.addItem': 'Nuova attività',
+  'todo.sidebar.sortBy': 'Ordina per',
+  'todo.priority': 'Priorità',
+  'todo.newCategoryLabel': 'nuova',
+  'budget.categoriesLabel': 'categorie',
   'todo.newCategory': 'Nome categoria',
   'todo.addCategory': 'Aggiungi categoria',
   'todo.newItem': 'Nuova attività',
@@ -2245,6 +2288,11 @@ const it: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Una nota personale da parte mia',
   'system_notice.v3_thankyou.body': 'Prima di andare avanti — voglio prendermi un momento.\n\nTREK è nato come un progetto secondario che ho costruito per i miei viaggi. Non avrei mai immaginato che sarebbe cresciuto fino a diventare qualcosa di cui 4.000 di voi si fidano per pianificare le proprie avventure. Ogni stella, ogni issue, ogni richiesta di funzionalità — le leggo tutte, e sono loro a tenermi in piedi nelle notti tarde tra un lavoro a tempo pieno e l\'università.\n\nVoglio che sappiate: TREK sarà sempre open source, sempre self-hosted, sempre vostro. Nessun tracciamento, nessun abbonamento, nessuna fregatura. Solo uno strumento creato da qualcuno che ama viaggiare tanto quanto voi.\n\nUn ringraziamento speciale a [jubnl](https://github.com/jubnl) — sei diventato un collaboratore incredibile. Molto di ciò che rende la 3.0 fantastica porta la tua impronta. Grazie per aver creduto in questo progetto quando era ancora acerbo.\n\nE a ognuno di voi che ha segnalato un bug, tradotto una stringa, condiviso TREK con un amico o semplicemente lo ha usato per pianificare un viaggio — **grazie**. Voi siete il motivo per cui tutto questo esiste.\n\nA molte altre avventure insieme.\n\n— Maurice\n\n---\n\n[Unisciti alla community su Discord](https://discord.gg/7Q6M6jDwzf)\n\nSe TREK rende i tuoi viaggi migliori, un [piccolo caffè](https://ko-fi.com/mauriceboe) aiuta sempre a tenere le luci accese.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Trasporti',
+  'transport.addManual': 'Trasporto manuale',
 }
 
 export default it

client/src/i18n/translations/nl.ts

@@ -10,6 +10,9 @@ const nl: Record<string, string> = {
   'common.add': 'Toevoegen',
   'common.loading': 'Laden...',
   'common.import': 'Importeren',
+  'common.select': 'Selecteren',
+  'common.selectAll': 'Alles selecteren',
+  'common.deselectAll': 'Alles deselecteren',
   'common.error': 'Fout',
   'common.unknownError': 'Onbekende fout',
   'common.tooManyAttempts': 'Te veel pogingen. Probeer het later opnieuw.',
@@ -308,6 +311,16 @@ const nl: Record<string, string> = {
   'settings.about.featureRequest': 'Feature aanvragen',
   'settings.about.featureRequestHint': 'Stel een nieuwe functie voor',
   'settings.about.wikiHint': 'Documentatie en handleidingen',
+  'settings.about.supporters.badge': 'Maandelijkse Steuners',
+  'settings.about.supporters.title': 'Reisgezelschap voor TREK',
+  'settings.about.supporters.subtitle': 'Terwijl jij je volgende route plant, plannen deze mensen mee aan de toekomst van TREK. Hun maandelijkse bijdrage gaat rechtstreeks naar ontwikkeling en echte uren — zodat TREK Open Source blijft.',
+  'settings.about.supporters.since': 'steuner sinds {date}',
+  'settings.about.supporters.tierEmpty': 'Wees de eerste',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK is een zelf-gehoste reisplanner die je helpt je reizen te organiseren van het eerste idee tot de laatste herinnering. Dagplanning, budget, paklijsten, foto\'s en nog veel meer — alles op één plek, op je eigen server.',
   'settings.about.madeWith': 'Gemaakt met',
   'settings.about.madeBy': 'door Maurice en een groeiende open-source community.',
@@ -854,6 +867,7 @@ const nl: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transport',
   'trip.tabs.reservations': 'Boekingen',
   'trip.tabs.reservationsShort': 'Boek',
   'trip.tabs.packing': 'Paklijst',
@@ -876,6 +890,8 @@ const nl: Record<string, string> = {
   'trip.toast.reservationAdded': 'Reservering toegevoegd',
   'trip.toast.deleted': 'Verwijderd',
   'trip.confirm.deletePlace': 'Weet je zeker dat je deze plaats wilt verwijderen?',
+  'trip.confirm.deletePlaces': '{count} plaatsen verwijderen?',
+  'trip.toast.placesDeleted': '{count} plaatsen verwijderd',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Geen plaatsen gepland voor deze dag',
@@ -920,6 +936,17 @@ const nl: Record<string, string> = {
   'places.importFileError': 'Importeren mislukt',
   'places.importAllSkipped': 'Alle plaatsen waren al in de reis.',
   'places.gpxImported': '{count} plaatsen geïmporteerd uit GPX',
+  'places.gpxImportTypes': 'Wat wil je importeren?',
+  'places.gpxImportWaypoints': 'Waypoints',
+  'places.gpxImportRoutes': 'Routes',
+  'places.gpxImportTracks': 'Tracks (met routegeometrie)',
+  'places.gpxImportNoneSelected': 'Selecteer minstens één type om te importeren.',
+  'places.kmlImportTypes': 'Wat wil je importeren?',
+  'places.kmlImportPoints': 'Punten (Placemarks)',
+  'places.kmlImportPaths': 'Paden (LineStrings)',
+  'places.kmlImportNoneSelected': 'Selecteer minstens één type.',
+  'places.selectionCount': '{count} geselecteerd',
+  'places.deleteSelected': 'Selectie verwijderen',
   'places.kmlKmzImported': '{count} plaatsen geïmporteerd uit KMZ/KML',
   'places.urlResolved': 'Plaats geïmporteerd van URL',
   'places.importList': 'Lijst importeren',
@@ -936,6 +963,7 @@ const nl: Record<string, string> = {
   'places.assignToDay': 'Aan welke dag toevoegen?',
   'places.all': 'Alle',
   'places.unplanned': 'Ongepland',
+  'places.filterTracks': 'Tracks',
   'places.search': 'Plaatsen zoeken...',
   'places.allCategories': 'Alle categorieën',
   'places.categoriesSelected': 'categorieën',
@@ -1019,6 +1047,15 @@ const nl: Record<string, string> = {
   'reservations.meta.flightNumber': 'Vluchtnr.',
   'reservations.meta.from': 'Van',
   'reservations.meta.to': 'Naar',
+  'reservations.needsReview': 'Controleren',
+  'reservations.needsReviewHint': 'Luchthaven kon niet automatisch worden herkend — bevestig de locatie.',
+  'reservations.searchLocation': 'Station, haven, adres zoeken...',
+  'airport.searchPlaceholder': 'Luchthavencode of stad (bijv. FRA)',
+  'map.connections': 'Verbindingen',
+  'map.showConnections': 'Boekingsroutes tonen',
+  'map.hideConnections': 'Boekingsroutes verbergen',
+  'settings.bookingLabels': 'Routelabels voor boekingen',
+  'settings.bookingLabelsHint': 'Toon station- / luchthavennamen op de kaart. Indien uit, alleen het icoon.',
   'reservations.meta.trainNumber': 'Treinnr.',
   'reservations.meta.platform': 'Perron',
   'reservations.meta.seat': 'Stoel',
@@ -1037,7 +1074,7 @@ const nl: Record<string, string> = {
   'reservations.type.hotel': 'Accommodatie',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Trein',
-  'reservations.type.car': 'Huurauto',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Cruise',
   'reservations.type.event': 'Evenement',
   'reservations.type.tour': 'Rondleiding',
@@ -1098,6 +1135,7 @@ const nl: Record<string, string> = {
   'reservations.span.end': 'Einde',
   'reservations.span.ongoing': 'Lopend',
   'reservations.validation.endBeforeStart': 'Einddatum/-tijd moet na de startdatum/-tijd liggen',
+  'reservations.addBooking': 'Boeking toevoegen',
 
   // Budget
   'budget.title': 'Budget',
@@ -1699,6 +1737,7 @@ const nl: Record<string, string> = {
   'undo.reorder': 'Locaties hergeordend',
   'undo.optimize': 'Route geoptimaliseerd',
   'undo.deletePlace': 'Locatie verwijderd',
+  'undo.deletePlaces': 'Plaatsen verwijderd',
   'undo.moveDay': 'Locatie naar andere dag verplaatst',
   'undo.lock': 'Vergrendeling locatie gewijzigd',
   'undo.importGpx': 'GPX-import',
@@ -1758,7 +1797,11 @@ const nl: Record<string, string> = {
   'todo.unassigned': 'Niet toegewezen',
   'todo.noCategory': 'Geen categorie',
   'todo.hasDescription': 'Heeft beschrijving',
-  'todo.addItem': 'Nieuwe taak toevoegen...',
+  'todo.addItem': 'Nieuwe taak',
+  'todo.sidebar.sortBy': 'Sorteren op',
+  'todo.priority': 'Prioriteit',
+  'todo.newCategoryLabel': 'nieuw',
+  'budget.categoriesLabel': 'categorieën',
   'todo.newCategory': 'Categorienaam',
   'todo.addCategory': 'Categorie toevoegen',
   'todo.newItem': 'Nieuwe taak',
@@ -2244,6 +2287,11 @@ const nl: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Een persoonlijk woord van mij',
   'system_notice.v3_thankyou.body': 'Voordat je verdergaat — ik wil even stilstaan.\n\nTREK begon als een zijproject dat ik bouwde voor mijn eigen reizen. Ik had nooit gedacht dat het zou uitgroeien tot iets waar 4.000 van jullie op vertrouwen om avonturen te plannen. Elke ster, elke issue, elk functieverzoek — ik lees ze allemaal, en ze houden me op de been tijdens de late avonden tussen een fulltime baan en de universiteit.\n\nIk wil dat jullie weten: TREK zal altijd open source zijn, altijd self-hosted, altijd van jullie. Geen tracking, geen abonnementen, geen addertjes. Gewoon een tool gebouwd door iemand die net zo veel van reizen houdt als jullie.\n\nSpeciale dank aan [jubnl](https://github.com/jubnl) — je bent een ongelooflijke medewerker geworden. Zo veel van wat 3.0 geweldig maakt draagt jouw vingerafdruk. Bedankt dat je in dit project geloofde toen het nog ruw was.\n\nEn aan ieder van jullie die een bug meldde, een string vertaalde, TREK deelde met een vriend of het simpelweg gebruikte om een reis te plannen — **bedankt**. Jullie zijn de reden dat dit bestaat.\n\nOp nog vele avonturen samen.\n\n— Maurice\n\n---\n\n[Sluit je aan bij de community op Discord](https://discord.gg/7Q6M6jDwzf)\n\nAls TREK je reizen beter maakt, houdt een [klein kopje koffie](https://ko-fi.com/mauriceboe) altijd de lichten aan.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transport',
+  'transport.addManual': 'Handmatig transport',
 }
 
 export default nl

client/src/i18n/translations/pl.ts

@@ -281,6 +281,16 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Zaproponuj funkcję',
   'settings.about.featureRequestHint': 'Zaproponuj nową funkcję',
   'settings.about.wikiHint': 'Dokumentacja i poradniki',
+  'settings.about.supporters.badge': 'Miesięczni Patroni',
+  'settings.about.supporters.title': 'Towarzystwo podróży dla TREK',
+  'settings.about.supporters.subtitle': 'Gdy planujesz kolejną trasę, te osoby planują razem ze mną przyszłość TREK. Ich comiesięczny wkład idzie bezpośrednio na rozwój i realnie przepracowane godziny — aby TREK pozostał Open Source.',
+  'settings.about.supporters.since': 'patron od {date}',
+  'settings.about.supporters.tierEmpty': 'Bądź pierwszy',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   '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.',
@@ -822,6 +832,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transport',
   'trip.tabs.reservations': 'Rezerwacje',
   'trip.tabs.reservationsShort': 'Rezerwacje',
   'trip.tabs.packing': 'Lista pakowania',
@@ -843,6 +854,8 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Rezerwacja została dodana',
   'trip.toast.deleted': 'Usunięto',
   'trip.confirm.deletePlace': 'Czy na pewno chcesz usunąć to miejsce?',
+  'trip.confirm.deletePlaces': 'Usunąć {count} miejsc?',
+  'trip.toast.placesDeleted': '{count} miejsc usunięto',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Brak miejsc zaplanowanych na ten dzień',
@@ -887,6 +900,17 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import nie powiódł się',
   'places.importAllSkipped': 'Wszystkie miejsca były już w podróży.',
   'places.gpxImported': '{count} miejsc zaimportowanych z GPX',
+  'places.gpxImportTypes': 'Co chcesz zaimportować?',
+  'places.gpxImportWaypoints': 'Punkty trasy',
+  'places.gpxImportRoutes': 'Trasy',
+  'places.gpxImportTracks': 'Trasy GPS (ze śladem)',
+  'places.gpxImportNoneSelected': 'Wybierz co najmniej jeden typ do importu.',
+  'places.kmlImportTypes': 'Co chcesz zaimportować?',
+  'places.kmlImportPoints': 'Punkty (Placemarks)',
+  'places.kmlImportPaths': 'Ścieżki (LineStrings)',
+  'places.kmlImportNoneSelected': 'Wybierz co najmniej jeden typ.',
+  'places.selectionCount': '{count} zaznaczono',
+  'places.deleteSelected': 'Usuń wybrane',
   'places.kmlKmzImported': 'Zaimportowano {count} miejsc z KMZ/KML',
   'places.urlResolved': 'Miejsce zaimportowane z URL',
   'places.kmlKmzSummaryValues': 'Placemarks: {total} • Zaimportowano: {created} • Pominięto: {skipped}',
@@ -894,6 +918,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Do którego dnia dodać?',
   'places.all': 'Wszystkie',
   'places.unplanned': 'Niezaplanowane',
+  'places.filterTracks': 'Trasy',
   'places.search': 'Szukaj miejsc...',
   'places.allCategories': 'Wszystkie kategorie',
   'places.categoriesSelected': 'kategorii',
@@ -995,6 +1020,15 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.restaurant': 'Restauracja',
   'reservations.type.train': 'Pociąg',
   'reservations.type.car': 'Samochód',
+  'reservations.needsReview': 'Sprawdź',
+  'reservations.needsReviewHint': 'Nie udało się automatycznie dopasować lotniska — potwierdź lokalizację.',
+  'reservations.searchLocation': 'Szukaj stacji, portu, adresu...',
+  'airport.searchPlaceholder': 'Kod lotniska lub miasto (np. FRA)',
+  'map.connections': 'Połączenia',
+  'map.showConnections': 'Pokaż trasy rezerwacji',
+  'map.hideConnections': 'Ukryj trasy rezerwacji',
+  'settings.bookingLabels': 'Etykiety tras rezerwacji',
+  'settings.bookingLabelsHint': 'Pokazuje nazwy stacji / lotnisk na mapie. Gdy wyłączone, wyświetlana jest tylko ikona.',
   'reservations.type.cruise': 'Rejs',
   'reservations.type.event': 'Wydarzenie',
   'reservations.type.tour': 'Wycieczka',
@@ -1055,6 +1089,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   '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',
+  'reservations.addBooking': 'Dodaj rezerwację',
 
   // Budget
   'budget.title': 'Budżet',
@@ -1586,6 +1621,9 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'collab.polls.delete': 'Usuń',
   'collab.polls.closedSection': 'Zamknięte',
   'common.import': 'Importuj',
+  'common.select': 'Wybierz',
+  'common.selectAll': 'Zaznacz wszystko',
+  'common.deselectAll': 'Odznacz wszystko',
   'common.saved': 'Zapisano',
   'trips.reminder': 'Przypomnienie',
   'trips.reminderNone': 'Brak',
@@ -1759,6 +1797,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Kolejność zmieniona',
   'undo.optimize': 'Trasa zoptymalizowana',
   'undo.deletePlace': 'Miejsce usunięte',
+  'undo.deletePlaces': 'Miejsca usunięte',
   'undo.moveDay': 'Miejsce przeniesione',
   'undo.lock': 'Blokada przełączona',
   'undo.importGpx': 'Import GPX',
@@ -1811,7 +1850,11 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nieprzypisane',
   'todo.noCategory': 'Brak kategorii',
   'todo.hasDescription': 'Ma opis',
-  'todo.addItem': 'Dodaj nowe zadanie...',
+  'todo.addItem': 'Nowe zadanie',
+  'todo.sidebar.sortBy': 'Sortuj wg',
+  'todo.priority': 'Priorytet',
+  'todo.newCategoryLabel': 'nowa',
+  'budget.categoriesLabel': 'kategorie',
   'todo.newCategory': 'Nazwa kategorii',
   'todo.addCategory': 'Dodaj kategorię',
   'todo.newItem': 'Nowe zadanie',
@@ -2237,6 +2280,11 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Osobiste słowo ode mnie',
   'system_notice.v3_thankyou.body': 'Zanim pójdziesz dalej — chcę się na chwilę zatrzymać.\n\nTREK zaczął się jako poboczny projekt, który zbudowałem na własne podróże. Nigdy nie wyobrażałem sobie, że wyrośnie na coś, czemu 4000 z was ufa przy planowaniu swoich przygód. Każda gwiazdka, każdy issue, każda prośba o funkcję — czytam je wszystkie i to one trzymają mnie na nogach podczas późnych nocy między pracą na pełny etat a uczelnią.\n\nChcę, żebyście wiedzieli: TREK zawsze będzie open source, zawsze self-hosted, zawsze wasz. Bez śledzenia, bez subskrypcji, bez haczyków. Po prostu narzędzie zbudowane przez kogoś, kto kocha podróżowanie tak samo jak wy.\n\nSzczególne podziękowania dla [jubnl](https://github.com/jubnl) — stałeś się niesamowitym współpracownikiem. Tak wiele z tego, co czyni wersję 3.0 wspaniałą, nosi twój ślad. Dziękuję, że uwierzyłeś w ten projekt, gdy był jeszcze surowy.\n\nI każdemu z was, kto zgłosił błąd, przetłumaczył tekst, podzielił się TREK z przyjacielem lub po prostu użył go do zaplanowania podróży — **dziękuję**. To wy jesteście powodem, dla którego to istnieje.\n\nZa wiele kolejnych wspólnych przygód.\n\n— Maurice\n\n---\n\n[Dołącz do społeczności na Discordzie](https://discord.gg/7Q6M6jDwzf)\n\nJeśli TREK sprawia, że Twoje podróże są lepsze, [mała kawa](https://ko-fi.com/mauriceboe) zawsze pomaga utrzymać światła włączone.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transport',
+  'transport.addManual': 'Ręczny transport',
 }
 
 export default pl

client/src/i18n/translations/ru.ts

@@ -10,6 +10,9 @@ const ru: Record<string, string> = {
   'common.add': 'Добавить',
   'common.loading': 'Загрузка...',
   'common.import': 'Импорт',
+  'common.select': 'Выбрать',
+  'common.selectAll': 'Выбрать всё',
+  'common.deselectAll': 'Снять выделение со всех',
   'common.error': 'Ошибка',
   'common.unknownError': 'Неизвестная ошибка',
   'common.tooManyAttempts': 'Слишком много попыток. Попробуйте позже.',
@@ -308,6 +311,16 @@ const ru: Record<string, string> = {
   'settings.about.featureRequest': 'Предложить функцию',
   'settings.about.featureRequestHint': 'Предложите новую функцию',
   'settings.about.wikiHint': 'Документация и руководства',
+  'settings.about.supporters.badge': 'Ежемесячные спонсоры',
+  'settings.about.supporters.title': 'Спутники TREK',
+  'settings.about.supporters.subtitle': 'Пока ты планируешь следующий маршрут, эти люди планируют вместе со мной будущее TREK. Их ежемесячный взнос идёт напрямую в разработку и реально потраченные часы — чтобы TREK оставался Open Source.',
+  'settings.about.supporters.since': 'спонсор с {date}',
+  'settings.about.supporters.tierEmpty': 'Стань первым',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK — это самостоятельно размещаемый планировщик путешествий, который помогает организовать поездки от первой идеи до последнего воспоминания. Планирование по дням, бюджет, списки вещей, фото и многое другое — всё в одном месте, на вашем собственном сервере.',
   'settings.about.madeWith': 'Сделано с',
   'settings.about.madeBy': 'Морисом и растущим open-source сообществом.',
@@ -854,6 +867,7 @@ const ru: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': 'План',
+  'trip.tabs.transports': 'Транспорт',
   'trip.tabs.reservations': 'Бронирования',
   'trip.tabs.reservationsShort': 'Брони',
   'trip.tabs.packing': 'Список вещей',
@@ -876,6 +890,8 @@ const ru: Record<string, string> = {
   'trip.toast.reservationAdded': 'Бронирование добавлено',
   'trip.toast.deleted': 'Удалено',
   'trip.confirm.deletePlace': 'Вы уверены, что хотите удалить это место?',
+  'trip.confirm.deletePlaces': 'Удалить {count} мест?',
+  'trip.toast.placesDeleted': '{count} мест удалено',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'На этот день мест не запланировано',
@@ -920,6 +936,17 @@ const ru: Record<string, string> = {
   'places.importFileError': 'Ошибка импорта',
   'places.importAllSkipped': 'Все места уже были в поездке.',
   'places.gpxImported': '{count} мест импортировано из GPX',
+  'places.gpxImportTypes': 'Что импортировать?',
+  'places.gpxImportWaypoints': 'Путевые точки',
+  'places.gpxImportRoutes': 'Маршруты',
+  'places.gpxImportTracks': 'Треки (с геометрией пути)',
+  'places.gpxImportNoneSelected': 'Выберите хотя бы один тип для импорта.',
+  'places.kmlImportTypes': 'Что вы хотите импортировать?',
+  'places.kmlImportPoints': 'Точки (Placemarks)',
+  'places.kmlImportPaths': 'Маршруты (LineStrings)',
+  'places.kmlImportNoneSelected': 'Выберите хотя бы один тип.',
+  'places.selectionCount': '{count} выбрано',
+  'places.deleteSelected': 'Удалить выбранные',
   'places.kmlKmzImported': '{count} мест импортировано из KMZ/KML',
   'places.urlResolved': 'Место импортировано из URL',
   'places.importList': 'Импорт списка',
@@ -936,6 +963,7 @@ const ru: Record<string, string> = {
   'places.assignToDay': 'Добавить в какой день?',
   'places.all': 'Все',
   'places.unplanned': 'Незапланированные',
+  'places.filterTracks': 'Треки',
   'places.search': 'Поиск мест...',
   'places.allCategories': 'Все категории',
   'places.categoriesSelected': 'категорий',
@@ -1019,6 +1047,15 @@ const ru: Record<string, string> = {
   'reservations.meta.flightNumber': 'Номер рейса',
   'reservations.meta.from': 'Откуда',
   'reservations.meta.to': 'Куда',
+  'reservations.needsReview': 'Проверить',
+  'reservations.needsReviewHint': 'Аэропорт не удалось определить автоматически — подтвердите местоположение.',
+  'reservations.searchLocation': 'Искать станцию, порт, адрес...',
+  'airport.searchPlaceholder': 'Код аэропорта или город (напр. FRA)',
+  'map.connections': 'Соединения',
+  'map.showConnections': 'Показать маршруты бронирований',
+  'map.hideConnections': 'Скрыть маршруты бронирований',
+  'settings.bookingLabels': 'Подписи маршрутов бронирований',
+  'settings.bookingLabelsHint': 'Отображает названия станций / аэропортов на карте. Если выключено, показывается только значок.',
   'reservations.meta.trainNumber': 'Номер поезда',
   'reservations.meta.platform': 'Платформа',
   'reservations.meta.seat': 'Место',
@@ -1037,7 +1074,7 @@ const ru: Record<string, string> = {
   'reservations.type.hotel': 'Жильё',
   'reservations.type.restaurant': 'Ресторан',
   'reservations.type.train': 'Поезд',
-  'reservations.type.car': 'Аренда авто',
+  'reservations.type.car': 'Автомобиль',
   'reservations.type.cruise': 'Круиз',
   'reservations.type.event': 'Мероприятие',
   'reservations.type.tour': 'Экскурсия',
@@ -1098,6 +1135,7 @@ const ru: Record<string, string> = {
   'reservations.span.end': 'Конец',
   'reservations.span.ongoing': 'Продолжается',
   'reservations.validation.endBeforeStart': 'Дата/время окончания должны быть позже даты/времени начала',
+  'reservations.addBooking': 'Добавить бронирование',
 
   // Budget
   'budget.title': 'Бюджет',
@@ -1696,6 +1734,7 @@ const ru: Record<string, string> = {
   'undo.reorder': 'Места переупорядочены',
   'undo.optimize': 'Маршрут оптимизирован',
   'undo.deletePlace': 'Место удалено',
+  'undo.deletePlaces': 'Места удалены',
   'undo.moveDay': 'Место перемещено в другой день',
   'undo.lock': 'Блокировка места изменена',
   'undo.importGpx': 'Импорт GPX',
@@ -1755,7 +1794,11 @@ const ru: Record<string, string> = {
   'todo.unassigned': 'Не назначено',
   'todo.noCategory': 'Без категории',
   'todo.hasDescription': 'Есть описание',
-  'todo.addItem': 'Добавить новую задачу...',
+  'todo.addItem': 'Новая задача',
+  'todo.sidebar.sortBy': 'Сортировать по',
+  'todo.priority': 'Приоритет',
+  'todo.newCategoryLabel': 'новая',
+  'budget.categoriesLabel': 'категорий',
   'todo.newCategory': 'Название категории',
   'todo.addCategory': 'Добавить категорию',
   'todo.newItem': 'Новая задача',
@@ -2244,6 +2287,11 @@ const ru: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': 'Личное слово от меня',
   'system_notice.v3_thankyou.body': 'Прежде чем продолжить — хочу остановиться на мгновение.\n\nTREK начинался как сторонний проект, который я создал для собственных поездок. Я никогда не думал, что он вырастет во что-то, чему 4 000 из вас доверяют планирование своих приключений. Каждая звёздочка, каждый issue, каждый запрос на фичу — я читаю их все, и именно они поддерживают меня в поздние ночи между основной работой и университетом.\n\nХочу, чтобы вы знали: TREK всегда будет open source, всегда self-hosted, всегда вашим. Никакого отслеживания, никаких подписок, никаких подвохов. Просто инструмент, созданный человеком, который любит путешествовать так же, как и вы.\n\nОсобая благодарность [jubnl](https://github.com/jubnl) — ты стал невероятным соратником. Многое из того, что делает версию 3.0 великолепной, несёт твой отпечаток. Спасибо, что поверил в этот проект, когда он был ещё сырым.\n\nИ каждому из вас, кто сообщил об ошибке, перевёл строку, поделился TREK с другом или просто использовал его для планирования поездки — **спасибо**. Вы — причина, по которой всё это существует.\n\nЗа множество новых приключений вместе.\n\n— Maurice\n\n---\n\n[Присоединяйся к сообществу в Discord](https://discord.gg/7Q6M6jDwzf)\n\nЕсли TREK делает твои путешествия лучше, [маленький кофе](https://ko-fi.com/mauriceboe) всегда помогает держать свет включённым.',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Транспорт',
+  'transport.addManual': 'Ручной транспорт',
 }
 
 export default ru

client/src/i18n/translations/zh.ts

@@ -10,6 +10,9 @@ const zh: Record<string, string> = {
   'common.add': '添加',
   'common.loading': '加载中...',
   'common.import': '导入',
+  'common.select': '选择',
+  'common.selectAll': '全选',
+  'common.deselectAll': '取消全选',
   'common.error': '错误',
   'common.unknownError': '未知错误',
   'common.tooManyAttempts': '尝试次数过多，请稍后再试。',
@@ -308,6 +311,16 @@ const zh: Record<string, string> = {
   'settings.about.featureRequest': '功能建议',
   'settings.about.featureRequestHint': '建议一个新功能',
   'settings.about.wikiHint': '文档和指南',
+  'settings.about.supporters.badge': '月度支持者',
+  'settings.about.supporters.title': '与 TREK 同行的伙伴',
+  'settings.about.supporters.subtitle': '当你在规划下一段路线时，这些人也在一起规划 TREK 的未来。他们每月的支持直接用于开发与真实投入的时间——让 TREK 保持开源。',
+  'settings.about.supporters.since': '{date} 起的支持者',
+  'settings.about.supporters.tierEmpty': '成为第一个',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK 是一个自托管的旅行规划工具，帮助你从最初的想法到最后的回忆，全程组织你的旅行。日程规划、预算、行李清单、照片等——一切尽在一处，在你自己的服务器上。',
   'settings.about.madeWith': '用',
   'settings.about.madeBy': '由 Maurice 和不断壮大的开源社区打造。',
@@ -854,6 +867,7 @@ const zh: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': '计划',
+  'trip.tabs.transports': '交通',
   'trip.tabs.reservations': '预订',
   'trip.tabs.reservationsShort': '预订',
   'trip.tabs.packing': '行李清单',
@@ -876,6 +890,8 @@ const zh: Record<string, string> = {
   'trip.toast.reservationAdded': '预订已添加',
   'trip.toast.deleted': '已删除',
   'trip.confirm.deletePlace': '确定要删除这个地点吗？',
+  'trip.confirm.deletePlaces': '删除 {count} 个地点？',
+  'trip.toast.placesDeleted': '已删除 {count} 个地点',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': '当天暂无计划',
@@ -920,6 +936,17 @@ const zh: Record<string, string> = {
   'places.importFileError': '导入失败',
   'places.importAllSkipped': '所有地点已在行程中。',
   'places.gpxImported': '已从 GPX 导入 {count} 个地点',
+  'places.gpxImportTypes': '要导入什么？',
+  'places.gpxImportWaypoints': '路点',
+  'places.gpxImportRoutes': '路线',
+  'places.gpxImportTracks': '轨迹（含路径几何）',
+  'places.gpxImportNoneSelected': '请至少选择一种导入类型。',
+  'places.kmlImportTypes': '要导入什么？',
+  'places.kmlImportPoints': '点（Placemarks）',
+  'places.kmlImportPaths': '路径（LineStrings）',
+  'places.kmlImportNoneSelected': '请至少选择一种类型。',
+  'places.selectionCount': '已选 {count} 项',
+  'places.deleteSelected': '删除所选',
   'places.kmlKmzImported': '已从 KMZ/KML 导入 {count} 个地点',
   'places.urlResolved': '已从 URL 导入地点',
   'places.importList': '列表导入',
@@ -936,6 +963,7 @@ const zh: Record<string, string> = {
   'places.assignToDay': '添加到哪一天？',
   'places.all': '全部',
   'places.unplanned': '未规划',
+  'places.filterTracks': '路线',
   'places.search': '搜索地点...',
   'places.allCategories': '所有分类',
   'places.categoriesSelected': '个分类',
@@ -1019,6 +1047,15 @@ const zh: Record<string, string> = {
   'reservations.meta.flightNumber': '航班号',
   'reservations.meta.from': '出发',
   'reservations.meta.to': '到达',
+  'reservations.needsReview': '待确认',
+  'reservations.needsReviewHint': '无法自动匹配机场 — 请确认位置。',
+  'reservations.searchLocation': '搜索车站、港口、地址...',
+  'airport.searchPlaceholder': '机场代码或城市（如 FRA）',
+  'map.connections': '连接',
+  'map.showConnections': '显示预订路线',
+  'map.hideConnections': '隐藏预订路线',
+  'settings.bookingLabels': '预订路线标签',
+  'settings.bookingLabelsHint': '在地图上显示车站 / 机场名称。关闭时仅显示图标。',
   'reservations.meta.trainNumber': '车次',
   'reservations.meta.platform': '站台',
   'reservations.meta.seat': '座位',
@@ -1037,7 +1074,7 @@ const zh: Record<string, string> = {
   'reservations.type.hotel': '住宿',
   'reservations.type.restaurant': '餐厅',
   'reservations.type.train': '火车',
-  'reservations.type.car': '租车',
+  'reservations.type.car': '汽车',
   'reservations.type.cruise': '邮轮',
   'reservations.type.event': '活动',
   'reservations.type.tour': '旅游团',
@@ -1098,6 +1135,7 @@ const zh: Record<string, string> = {
   'reservations.span.end': '结束',
   'reservations.span.ongoing': '进行中',
   'reservations.validation.endBeforeStart': '结束日期/时间必须晚于开始日期/时间',
+  'reservations.addBooking': '添加预订',
 
   // Budget
   'budget.title': '预算',
@@ -1696,6 +1734,7 @@ const zh: Record<string, string> = {
   'undo.reorder': '地点已重新排序',
   'undo.optimize': '路线已优化',
   'undo.deletePlace': '地点已删除',
+  'undo.deletePlaces': '地点已删除',
   'undo.moveDay': '地点已移至另一天',
   'undo.lock': '地点锁定已切换',
   'undo.importGpx': 'GPX 导入',
@@ -1755,7 +1794,11 @@ const zh: Record<string, string> = {
   'todo.unassigned': '未分配',
   'todo.noCategory': '无分类',
   'todo.hasDescription': '有描述',
-  'todo.addItem': '添加新任务...',
+  'todo.addItem': '新建任务',
+  'todo.sidebar.sortBy': '排序方式',
+  'todo.priority': '优先级',
+  'todo.newCategoryLabel': '新建',
+  'budget.categoriesLabel': '类别',
   'todo.newCategory': '分类名称',
   'todo.addCategory': '添加分类',
   'todo.newItem': '新任务',
@@ -2244,6 +2287,11 @@ const zh: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': '来自我的一封私人信',
   'system_notice.v3_thankyou.body': '在你继续之前——我想停下来说几句。\n\nTREK 最初只是我为自己的旅行而做的一个业余项目。我从未想过它会成长为 4,000 人信赖的冒险规划工具。每一颗星标、每一个 issue、每一个功能请求——我都会读，它们在全职工作和大学学业之间的深夜里支撑着我继续前行。\n\n我想让你们知道：TREK 将永远开源，永远可自托管，永远属于你们。没有追踪，没有订阅，没有任何附加条件。只是一个热爱旅行的人为同样热爱旅行的你们打造的工具。\n\n特别感谢 [jubnl](https://github.com/jubnl)——你已经成为一位不可思议的合作者。3.0 版本中许多精彩之处都留下了你的印记。感谢你在这个项目还很粗糙的时候就选择了相信它。\n\n也感谢你们每一位——报告了 bug、翻译了文本、向朋友分享了 TREK，或者只是用它规划了一次旅行——**谢谢你们**。你们是这一切存在的原因。\n\n愿我们一起踏上更多的冒险旅程。\n\n— Maurice\n\n---\n\n[加入 Discord 社区](https://discord.gg/7Q6M6jDwzf)\n\n如果 TREK 让你的旅行更美好，一杯[小小的咖啡](https://ko-fi.com/mauriceboe)能让这盏灯一直亮着。',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': '交通',
+  'transport.addManual': '手动添加交通',
 }
 
 export default zh

client/src/i18n/translations/zhTw.ts

@@ -10,6 +10,9 @@ const zhTw: Record<string, string> = {
   'common.add': '新增',
   'common.loading': '載入中...',
   'common.import': '匯入',
+  'common.select': '選擇',
+  'common.selectAll': '全選',
+  'common.deselectAll': '取消全選',
   'common.error': '錯誤',
   'common.unknownError': '未知錯誤',
   'common.tooManyAttempts': '嘗試次數過多，請稍後再試。',
@@ -367,6 +370,16 @@ const zhTw: Record<string, string> = {
   'settings.about.featureRequest': '功能建議',
   'settings.about.featureRequestHint': '建議新功能',
   'settings.about.wikiHint': '文件與指南',
+  'settings.about.supporters.badge': '月度支持者',
+  'settings.about.supporters.title': '與 TREK 同行的夥伴',
+  'settings.about.supporters.subtitle': '當你規劃下一段路線時，這些人也在一起規劃 TREK 的未來。他們每月的支持直接用於開發與實際投入的時間——讓 TREK 保持開源。',
+  'settings.about.supporters.since': '自 {date} 起的支持者',
+  'settings.about.supporters.tierEmpty': '成為第一個',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK 是一款自架旅遊規劃器，幫助您從最初構想到最後回憶，整理每次旅行。日程規劃、預算、行李清單、照片及更多功能——全部集中在您自己的伺服器上。',
   'settings.about.madeWith': '以',
   'settings.about.madeBy': '由 Maurice 及不斷成長的開源社群製作。',
@@ -914,6 +927,7 @@ const zhTw: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': '計劃',
+  'trip.tabs.transports': '交通',
   'trip.tabs.reservations': '預訂',
   'trip.tabs.reservationsShort': '預訂',
   'trip.tabs.packing': '行李清單',
@@ -936,6 +950,8 @@ const zhTw: Record<string, string> = {
   'trip.toast.reservationAdded': '預訂已新增',
   'trip.toast.deleted': '已刪除',
   'trip.confirm.deletePlace': '確定要刪除這個地點嗎？',
+  'trip.confirm.deletePlaces': '刪除 {count} 個地點？',
+  'trip.toast.placesDeleted': '已刪除 {count} 個地點',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': '當天暫無計劃',
@@ -980,6 +996,17 @@ const zhTw: Record<string, string> = {
   'places.importFileError': '匯入失敗',
   'places.importAllSkipped': '所有地點已在行程中。',
   'places.gpxImported': '已從 GPX 匯入 {count} 個地點',
+  'places.gpxImportTypes': '要匯入什麼？',
+  'places.gpxImportWaypoints': '路點',
+  'places.gpxImportRoutes': '路線',
+  'places.gpxImportTracks': '軌跡（含路徑幾何）',
+  'places.gpxImportNoneSelected': '請至少選擇一種匯入類型。',
+  'places.kmlImportTypes': '要匯入什麼？',
+  'places.kmlImportPoints': '點（Placemarks）',
+  'places.kmlImportPaths': '路徑（LineStrings）',
+  'places.kmlImportNoneSelected': '請至少選擇一種類型。',
+  'places.selectionCount': '已選 {count} 項',
+  'places.deleteSelected': '刪除所選',
   'places.kmlKmzImported': '已從 KMZ/KML 匯入 {count} 個地點',
   'places.urlResolved': '已從 URL 匯入地點',
   'places.importList': '列表匯入',
@@ -996,6 +1023,7 @@ const zhTw: Record<string, string> = {
   'places.assignToDay': '新增到哪一天？',
   'places.all': '全部',
   'places.unplanned': '未規劃',
+  'places.filterTracks': '路線',
   'places.search': '搜尋地點...',
   'places.allCategories': '所有分類',
   'places.categoriesSelected': '個分類',
@@ -1079,6 +1107,15 @@ const zhTw: Record<string, string> = {
   'reservations.meta.flightNumber': '航班號',
   'reservations.meta.from': '出發',
   'reservations.meta.to': '到達',
+  'reservations.needsReview': '待確認',
+  'reservations.needsReviewHint': '無法自動匹配機場 — 請確認位置。',
+  'reservations.searchLocation': '搜尋車站、港口、地址...',
+  'airport.searchPlaceholder': '機場代碼或城市（例如 FRA）',
+  'map.connections': '連接',
+  'map.showConnections': '顯示預訂路線',
+  'map.hideConnections': '隱藏預訂路線',
+  'settings.bookingLabels': '預訂路線標籤',
+  'settings.bookingLabelsHint': '在地圖上顯示車站 / 機場名稱。關閉時僅顯示圖示。',
   'reservations.meta.trainNumber': '車次',
   'reservations.meta.platform': '站臺',
   'reservations.meta.seat': '座位',
@@ -1097,7 +1134,7 @@ const zhTw: Record<string, string> = {
   'reservations.type.hotel': '住宿',
   'reservations.type.restaurant': '餐廳',
   'reservations.type.train': '火車',
-  'reservations.type.car': '租車',
+  'reservations.type.car': '汽車',
   'reservations.type.cruise': '郵輪',
   'reservations.type.event': '活動',
   'reservations.type.tour': '旅遊團',
@@ -1158,6 +1195,7 @@ const zhTw: Record<string, string> = {
   'reservations.span.end': '結束',
   'reservations.span.ongoing': '進行中',
   'reservations.validation.endBeforeStart': '結束日期/時間必須晚於開始日期/時間',
+  'reservations.addBooking': '新增預訂',
 
   // Budget
   'budget.title': '預算',
@@ -1756,6 +1794,7 @@ const zhTw: Record<string, string> = {
   'undo.reorder': '地點已重新排序',
   'undo.optimize': '路線已最佳化',
   'undo.deletePlace': '地點已刪除',
+  'undo.deletePlaces': '地點已刪除',
   'undo.moveDay': '地點已移至另一天',
   'undo.lock': '地點鎖定已切換',
   'undo.importGpx': 'GPX 匯入',
@@ -1776,7 +1815,11 @@ const zhTw: Record<string, string> = {
   'todo.unassigned': '未指派',
   'todo.noCategory': '無分類',
   'todo.hasDescription': '有說明',
-  'todo.addItem': '新增任務...',
+  'todo.addItem': '新增任務',
+  'todo.sidebar.sortBy': '排序方式',
+  'todo.priority': '優先順序',
+  'todo.newCategoryLabel': '新增',
+  'budget.categoriesLabel': '類別',
   'todo.newCategory': '分類名稱',
   'todo.addCategory': '新增分類',
   'todo.newItem': '新任務',
@@ -2245,6 +2288,11 @@ const zhTw: Record<string, string> = {
   // System notices — personal thank you
   'system_notice.v3_thankyou.title': '來自我的一封私人信',
   'system_notice.v3_thankyou.body': '在你繼續之前——我想停下來說幾句。\n\nTREK 最初只是我為自己的旅行而做的一個業餘專案。我從未想過它會成長為 4,000 人信賴的冒險規劃工具。每一顆星標、每一個 issue、每一個功能請求——我都會讀，它們在全職工作和大學學業之間的深夜裡支撐著我繼續前行。\n\n我想讓你們知道：TREK 將永遠開源，永遠可自託管，永遠屬於你們。沒有追蹤，沒有訂閱，沒有任何附加條件。只是一個熱愛旅行的人為同樣熱愛旅行的你們打造的工具。\n\n特別感謝 [jubnl](https://github.com/jubnl)——你已經成為一位不可思議的合作者。3.0 版本中許多精彩之處都留下了你的印記。感謝你在這個專案還很粗糙的時候就選擇了相信它。\n\n也感謝你們每一位——回報了 bug、翻譯了文字、向朋友分享了 TREK，或者只是用它規劃了一次旅行——**謝謝你們**。你們是這一切存在的原因。\n\n願我們一起踏上更多的冒險旅程。\n\n— Maurice\n\n---\n\n[加入 Discord 社群](https://discord.gg/7Q6M6jDwzf)\n\n如果 TREK 讓你的旅行更美好，一杯[小小的咖啡](https://ko-fi.com/mauriceboe)能讓這盞燈一直亮著。',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': '交通',
+  'transport.addManual': '手動新增交通',
 }
 
 export default zhTw

client/src/pages/DashboardPage.test.tsx

@@ -416,15 +416,10 @@ describe('DashboardPage', () => {
         expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
       });
 
-      // Find settings button — it's the gear icon button without title or text
+      // Find settings button — the gear icon button (icon-only, no visible label)
       const allBtns = screen.getAllByRole('button');
-      const settingsButton = allBtns.find(
-        btn => {
-          const title = btn.getAttribute('title');
-          const text = btn.textContent?.trim() || '';
-          // Settings gear: no title, no meaningful text, not the notification bell
-          return !title && !text && btn.querySelector('.lucide-settings');
-        }
+      const settingsButton = allBtns.find(btn =>
+        btn.querySelector('.lucide-settings') && !btn.textContent?.trim()
       );
 
       expect(settingsButton).toBeDefined();
@@ -646,14 +641,10 @@ describe('DashboardPage', () => {
         expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
       });
 
-      // Open widget settings
+      // Open widget settings — gear icon button (icon-only, no visible label)
       const allBtns = screen.getAllByRole('button');
-      const settingsButton = allBtns.find(
-        btn => {
-          const title = btn.getAttribute('title');
-          const text = btn.textContent?.trim() || '';
-          return !title && !text && btn.querySelector('.lucide-settings');
-        }
+      const settingsButton = allBtns.find(btn =>
+        btn.querySelector('.lucide-settings') && !btn.textContent?.trim()
       );
 
       expect(settingsButton).toBeDefined();

client/src/pages/DashboardPage.tsx

@@ -897,61 +897,76 @@ export default function DashboardPage(): React.ReactElement {
             </button>
           </div>
 
-          {/* Desktop header */}
-          <div className="hidden md:flex" style={{ alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
-            <div>
-              <h1 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: 'var(--text-primary)' }}>{t('dashboard.title')}</h1>
-              <p style={{ margin: '3px 0 0', fontSize: 13, color: '#9ca3af' }}>
+          {/* Desktop header — unified toolbar */}
+          <div className="hidden md:block" style={{ marginBottom: 20 }}>
+            <div style={{
+              background: 'var(--bg-tertiary)', borderRadius: 18,
+              border: '1px solid var(--border-primary)',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+              padding: '14px 16px 14px 22px',
+              display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
+            }}>
+              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+                {t('dashboard.title')}
+              </h2>
+              <div style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
                 {isLoading ? t('common.loading')
                   : trips.length > 0 ? `${t(trips.length !== 1 ? 'dashboard.subtitle.activeMany' : 'dashboard.subtitle.activeOne', { count: trips.length })}${archivedTrips.length > 0 ? t('dashboard.subtitle.archivedSuffix', { count: archivedTrips.length }) : ''}`
                   : t('dashboard.subtitle.empty')}
-              </p>
-            </div>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
-              {/* View mode toggle */}
-              <button
-                onClick={toggleViewMode}
-                title={viewMode === 'grid' ? t('dashboard.listView') : t('dashboard.gridView')}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  padding: '0 14px', height: 37,
-                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
-                  cursor: 'pointer', color: 'var(--text-faint)', fontFamily: 'inherit',
-                  transition: 'background 0.15s, border-color 0.15s',
-                }}
-                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.borderColor = 'var(--text-faint)' }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.borderColor = 'var(--border-primary)' }}
-              >
-                {viewMode === 'grid' ? <List size={15} /> : <LayoutGrid size={15} />}
-              </button>
-              {/* Widget settings */}
-              <button
-                onClick={() => setShowWidgetSettings(s => s ? false : true)}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  padding: '0 14px', height: 37,
-                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
-                  cursor: 'pointer', color: 'var(--text-faint)', fontFamily: 'inherit',
-                  transition: 'background 0.15s, border-color 0.15s',
-                }}
-                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.borderColor = 'var(--text-faint)' }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.borderColor = 'var(--border-primary)' }}
-              >
-                <Settings size={15} />
-              </button>
-              {can('trip_create') && <button
-                onClick={() => { setEditingTrip(null); setShowForm(true) }}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px',
-                  background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 12,
-                  fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-                }}
-                onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
-              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-            >
-              <Plus size={15} /> {t('dashboard.newTrip')}
-              </button>}
+              </span>
+
+              <div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
+                <button
+                  onClick={toggleViewMode}
+                  title={viewMode === 'grid' ? t('dashboard.listView') : t('dashboard.gridView')}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                    padding: '7px 11px', borderRadius: 99,
+                    background: 'transparent', color: 'var(--text-muted)',
+                    transition: 'all 0.15s ease',
+                  }}
+                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' }}
+                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' }}
+                >
+                  {viewMode === 'grid' ? <List size={15} /> : <LayoutGrid size={15} />}
+                </button>
+                <button
+                  onClick={() => setShowWidgetSettings(s => s ? false : true)}
+                  title={t('dashboard.widgets') || 'Widgets'}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                    padding: '7px 11px', borderRadius: 99,
+                    background: showWidgetSettings ? 'var(--bg-card)' : 'transparent',
+                    color: showWidgetSettings ? 'var(--text-primary)' : 'var(--text-muted)',
+                    boxShadow: showWidgetSettings ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
+                    transition: 'all 0.15s ease',
+                  }}
+                  onMouseEnter={e => { if (!showWidgetSettings) { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' } }}
+                  onMouseLeave={e => { if (!showWidgetSettings) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' } }}
+                >
+                  <Settings size={15} />
+                </button>
+                {can('trip_create') && (
+                  <button
+                    onClick={() => { setEditingTrip(null); setShowForm(true) }}
+                    style={{
+                      appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                      display: 'inline-flex', alignItems: 'center', gap: 6,
+                      padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                      background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                      marginLeft: 2,
+                      transition: 'opacity 0.15s ease',
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+                    onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                  >
+                    <Plus size={14} strokeWidth={2.5} /> {t('dashboard.newTrip')}
+                  </button>
+                )}
+              </div>
             </div>
           </div>
 

client/src/pages/JourneyPage.tsx

@@ -150,39 +150,41 @@ export default function JourneyPage() {
             )}
           </div>
 
-          {/* Header — desktop */}
-          <div className="hidden md:flex items-start justify-between px-8 pt-10 pb-7">
-            <div>
-              <h1 className="text-[32px] font-extrabold tracking-[-0.025em] text-zinc-900 dark:text-white leading-none">{t('journey.title')}</h1>
-              <p className="text-[13px] text-zinc-500 mt-1.5">{t("journey.frontpage.subtitle")}</p>
-            </div>
-            <div className="flex items-center gap-2">
-              {searchOpen && (
-                <input
-                  value={searchQuery}
-                  onChange={e => setSearchQuery(e.target.value)}
-                  onKeyDown={e => { if (e.key === 'Escape') { setSearchQuery(''); setSearchOpen(false) } }}
-                  placeholder={t('journey.search.placeholder')}
-                  autoFocus
-                  className="w-52 px-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-[10px] text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white focus:border-zinc-400 focus:outline-none"
-                />
-              )}
-              <button
-                onClick={() => {
-                  setSearchOpen(s => !s)
-                  if (searchOpen) setSearchQuery('')
-                }}
-                className={`w-9 h-9 rounded-[10px] border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-zinc-500 transition-colors ${searchOpen ? 'bg-zinc-100 dark:bg-zinc-700' : 'bg-white dark:bg-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-700'}`}
-              >
-                {searchOpen ? <X size={15} /> : <Search size={15} />}
-              </button>
-              <button
-                onClick={() => openCreateModal()}
-                className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-[10px] bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[13px] font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-all hover:-translate-y-px"
-              >
-                <Plus size={14} />
-                {t('journey.frontpage.createJourney')}
-              </button>
+          {/* Header — desktop (unified toolbar) */}
+          <div className="hidden md:block px-8 pt-10 pb-7">
+            <div style={{
+              background: 'var(--bg-tertiary)', borderRadius: 18,
+              border: '1px solid var(--border-primary)',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+              padding: '14px 16px 14px 22px',
+              display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
+            }}>
+              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+                {t('journey.title')}
+              </h2>
+              <div style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
+                {t('journey.frontpage.subtitle')}
+              </span>
+
+              <div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
+                <button
+                  onClick={() => openCreateModal()}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                    background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                    marginLeft: 2,
+                    transition: 'opacity 0.15s ease',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                >
+                  <Plus size={14} strokeWidth={2.5} />
+                  {t('journey.frontpage.createJourney')}
+                </button>
+              </div>
             </div>
           </div>
 

client/src/pages/TripPlannerPage.tsx

@@ -14,6 +14,7 @@ import PlaceFormModal from '../components/Planner/PlaceFormModal'
 import TripFormModal from '../components/Trips/TripFormModal'
 import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
+import { TransportModal } from '../components/Planner/TransportModal'
 // MemoriesPanel moved to Journey addon
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
@@ -23,7 +24,7 @@ import BudgetPanel from '../components/Budget/BudgetPanel'
 import CollabPanel from '../components/Collab/CollabPanel'
 import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
-import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users } from 'lucide-react'
+import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users, Train } from 'lucide-react'
 import { useTranslation } from '../i18n'
 import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client'
 import { accommodationRepo } from '../repo/accommodationRepo'
@@ -36,36 +37,102 @@ import { useRouteCalculation } from '../hooks/useRouteCalculation'
 import { usePlaceSelection } from '../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../hooks/usePlannerHistory'
 import type { Accommodation, TripMember, Day, Place, Reservation, PackingItem, TodoItem } from '../types'
-import { ListTodo } from 'lucide-react'
+import { ListTodo, Upload, Plus } 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 [importPackingSignal, setImportPackingSignal] = useState(0)
+  const [addTodoSignal, setAddTodoSignal] = useState(0)
   const { t } = useTranslation()
+
+  const tabs = [
+    { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck, count: packingItems.length },
+    { id: 'todo' as const, label: t('todo.subtab.todo'), icon: ListTodo, count: todoItems.length },
+  ]
+
   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 style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
+        <div style={{
+          background: 'var(--bg-tertiary)', borderRadius: 18,
+          padding: '14px 16px 14px 22px',
+          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
+        }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+            {t('trip.tabs.lists')}
+          </h2>
+          <div className="hidden md:block" style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+          <div style={{ display: 'inline-flex', gap: 4, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
+            {tabs.map(tab => {
+              const active = subTab === tab.id
+              const Icon = tab.icon
+              return (
+                <button key={tab.id} onClick={() => setSubTabPersist(tab.id)}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    padding: '6px 12px', borderRadius: 99, fontSize: 13, whiteSpace: 'nowrap',
+                    background: active ? 'var(--bg-card)' : 'transparent',
+                    color: active ? 'var(--text-primary)' : 'var(--text-muted)',
+                    fontWeight: active ? 500 : 400,
+                    boxShadow: active ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
+                    transition: 'all 0.15s ease',
+                  }}
+                >
+                  <Icon size={13} style={{ color: active ? 'var(--text-primary)' : 'var(--text-faint)' }} />
+                  <span className="hidden sm:inline">{tab.label}</span>
+                  <span style={{
+                    fontSize: 10, fontWeight: 600,
+                    background: active ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
+                    color: 'var(--text-faint)',
+                    padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
+                  }}>{tab.count}</span>
+                </button>
+              )
+            })}
+          </div>
+
+          {subTab === 'packing' && (
+            <button onClick={() => setImportPackingSignal(s => s + 1)} style={{
+              appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+              background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+              marginLeft: 'auto',
+              transition: 'opacity 0.15s ease',
+            }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Upload size={14} strokeWidth={2.5} />
+              <span className="hidden sm:inline">{t('packing.import')}</span>
+            </button>
+          )}
+          {subTab === 'todo' && (
+            <button onClick={() => setAddTodoSignal(s => s + 1)} style={{
+              appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+              background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+              marginLeft: 'auto',
+              transition: 'opacity 0.15s ease',
+            }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Plus size={14} strokeWidth={2.5} />
+              <span className="hidden sm:inline">{t('todo.addItem')}</span>
+            </button>
+          )}
+        </div>
+      </div>
+      <div style={{ padding: '16px 28px 0' }} className="max-md:!px-4">
+        {subTab === 'packing' && <PackingListPanel tripId={tripId} items={packingItems} openImportSignal={importPackingSignal} inlineHeader={false} />}
+        {subTab === 'todo' && <TodoListPanel tripId={tripId} items={todoItems} addItemSignal={addTodoSignal} />}
       </div>
-      {subTab === 'packing' && <PackingListPanel tripId={tripId} items={packingItems} />}
-      {subTab === 'todo' && <TodoListPanel tripId={tripId} items={todoItems} />}
     </div>
   )
 }
@@ -126,8 +193,11 @@ export default function TripPlannerPage(): React.ReactElement | null {
     }).catch(() => {})
   }, [])
 
+  const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise', 'bus'])
+
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan'), icon: Map },
+    { id: 'transports', label: t('trip.tabs.transports'), icon: Train },
     { id: 'buchungen', label: t('trip.tabs.reservations'), shortLabel: t('trip.tabs.reservationsShort'), icon: Ticket },
     ...(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 }] : []),
@@ -166,9 +236,41 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const [showMembersModal, setShowMembersModal] = useState<boolean>(false)
   const [showReservationModal, setShowReservationModal] = useState<boolean>(false)
   const [editingReservation, setEditingReservation] = useState<Reservation | null>(null)
+  const [bookingForAssignmentId, setBookingForAssignmentId] = useState<number | null>(null)
+  const [showTransportModal, setShowTransportModal] = useState<boolean>(false)
+  const [editingTransport, setEditingTransport] = useState<Reservation | null>(null)
+  const [transportModalDayId, setTransportModalDayId] = useState<number | null>(null)
   const [fitKey, setFitKey] = useState<number>(0)
+  const initialFitTripId = useRef<number | null>(null)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
   const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
+  const [deletePlaceIds, setDeletePlaceIds] = useState<number[] | null>(null)
+
+  useEffect(() => {
+    if (!trip) return
+    if (initialFitTripId.current === trip.id) return
+    const hasGeoPlaces = places.some(p => p.lat != null && p.lng != null)
+    if (!hasGeoPlaces) return
+    initialFitTripId.current = trip.id
+    setFitKey(k => k + 1)
+  }, [trip, places])
+
+  const connectionsStorageKey = tripId ? `trek:visible-connections:${tripId}` : null
+  const [visibleConnections, setVisibleConnections] = useState<number[]>(() => {
+    if (typeof window === 'undefined' || !connectionsStorageKey) return []
+    try {
+      const stored = window.localStorage.getItem(connectionsStorageKey)
+      return stored ? JSON.parse(stored) as number[] : []
+    } catch { return [] }
+  })
+  useEffect(() => {
+    if (typeof window === 'undefined' || !connectionsStorageKey) return
+    window.localStorage.setItem(connectionsStorageKey, JSON.stringify(visibleConnections))
+  }, [connectionsStorageKey, visibleConnections])
+  const toggleConnection = useCallback((id: number) => {
+    setVisibleConnections(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
+  }, [])
+  const [mapTransportDetail, setMapTransportDetail] = useState<Reservation | null>(null)
 
   const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
   useEffect(() => {
@@ -250,6 +352,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
     return places.filter(p => {
       if (!p.lat || !p.lng) return false
+      if (mapPlacesFilter === 'tracks' && !p.route_geometry) return false
       if (mapCategoryFilter.size > 0) {
         if (p.category_id == null) {
           if (!mapCategoryFilter.has('uncategorized')) return false
@@ -363,6 +466,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     try {
       await tripActions.deletePlace(tripId, deletePlaceId)
       if (selectedPlaceId === deletePlaceId) setSelectedPlaceId(null)
+      updateRouteForDay(selectedDayId)
       toast.success(t('trip.toast.placeDeleted'))
       if (capturedPlace) {
         pushUndo(t('undo.deletePlace'), async () => {
@@ -382,7 +486,38 @@ export default function TripPlannerPage(): React.ReactElement | null {
         })
       }
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
-  }, [deletePlaceId, tripId, toast, selectedPlaceId, pushUndo])
+  }, [deletePlaceId, tripId, toast, selectedPlaceId, selectedDayId, updateRouteForDay, pushUndo])
+
+  const confirmDeletePlaces = useCallback(async (ids?: number[]) => {
+    const targetIds = ids ?? deletePlaceIds
+    if (!targetIds?.length) return
+    const state = useTripStore.getState()
+    const capturedPlaces = state.places.filter(p => targetIds.includes(p.id))
+    const capturedAssignments = Object.entries(state.assignments).flatMap(([dayId, as]) =>
+      as.filter(a => a.place?.id != null && targetIds.includes(a.place.id)).map(a => ({ dayId: Number(dayId), placeId: a.place!.id, orderIndex: a.order_index }))
+    )
+    try {
+      await tripActions.deletePlacesMany(tripId, targetIds)
+      if (selectedPlaceId != null && targetIds.includes(selectedPlaceId)) setSelectedPlaceId(null)
+      if (!ids) setDeletePlaceIds(null)
+      updateRouteForDay(selectedDayId)
+      toast.success(t('trip.toast.placesDeleted', { count: capturedPlaces.length }))
+      if (capturedPlaces.length > 0) {
+        pushUndo(t('undo.deletePlaces'), async () => {
+          for (const place of capturedPlaces) {
+            const newPlace = await tripActions.addPlace(tripId, {
+              name: place.name, description: place.description,
+              lat: place.lat, lng: place.lng, address: place.address,
+              category_id: place.category_id, icon: place.icon, price: place.price,
+            })
+            for (const a of capturedAssignments.filter(x => x.placeId === place.id)) {
+              await tripActions.assignPlaceToDay(tripId, a.dayId, newPlace.id, a.orderIndex)
+            }
+          }
+        })
+      }
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
+  }, [deletePlaceIds, tripId, toast, selectedPlaceId, selectedDayId, updateRouteForDay, pushUndo])
 
   const handleAssignToDay = useCallback(async (placeId, dayId, position) => {
     const target = dayId || selectedDayId
@@ -408,6 +543,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     const capturedOrderIndex = capturedAssignment?.order_index ?? 0
     try {
       await tripActions.removeAssignment(tripId, dayId, assignmentId)
+      updateRouteForDay(dayId)
       if (capturedPlaceId != null) {
         const capturedDayId = dayId
         const capturedPos = capturedOrderIndex
@@ -431,17 +567,11 @@ export default function TripPlannerPage(): React.ReactElement | null {
             await tripActions.reorderAssignments(tripId, capturedDayId, capturedPrevIds)
           })
         })
-        .catch(() => {})
-      // Update route immediately from orderedIds
-      const dayItems = useTripStore.getState().assignments[String(dayId)] || []
-      const ordered = orderedIds.map(id => dayItems.find(a => a.id === id)).filter(Boolean)
-      const waypoints = ordered.map(a => a.place).filter(p => p?.lat && p?.lng)
-      if (waypoints.length >= 2) setRoute(waypoints.map(p => [p.lat, p.lng]))
-      else setRoute(null)
-      setRouteInfo(null)
+        .catch(err => toast.error(err instanceof Error ? err.message : t('trip.toast.reorderError')))
+      updateRouteForDay(dayId)
     }
     catch { toast.error(t('trip.toast.reorderError')) }
-  }, [tripId, toast, pushUndo])
+  }, [tripId, toast, pushUndo, updateRouteForDay])
 
   const handleUpdateDayTitle = useCallback(async (dayId, title) => {
     try { await tripActions.updateDayTitle(tripId, dayId, title) }
@@ -471,6 +601,21 @@ export default function TripPlannerPage(): React.ReactElement | null {
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
+  const handleSaveTransport = async (data) => {
+    try {
+      if (editingTransport) {
+        await tripActions.updateReservation(tripId, editingTransport.id, data)
+        toast.success(t('trip.toast.reservationUpdated'))
+      } else {
+        await tripActions.addReservation(tripId, data)
+        toast.success(t('trip.toast.reservationAdded'))
+      }
+      setShowTransportModal(false)
+      setEditingTransport(null)
+      setTransportModalDayId(null)
+    } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
+  }
+
   const handleDeleteReservation = async (id) => {
     try {
       await tripActions.deleteReservation(tripId, id)
@@ -628,6 +773,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
               rightWidth={rightCollapsed ? 0 : rightWidth}
               hasInspector={!!selectedPlace}
               hasDayDetail={!!showDayDetail && !selectedPlace}
+              reservations={reservations}
+              showReservationStats={settings.route_calculation !== false}
+              visibleConnectionIds={visibleConnections}
+              onReservationClick={(rid) => {
+                const r = reservations.find(x => x.id === rid)
+                if (r) setMapTransportDetail(r)
+              }}
             />
 
 
@@ -672,9 +824,16 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   onReorder={handleReorder}
                   onUpdateDayTitle={handleUpdateDayTitle}
                   onAssignToDay={handleAssignToDay}
-                  onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText, walkingText: r.walkingText, drivingText: r.drivingText }) } else { setRoute(null); setRouteInfo(null) } }}
+                  onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo({ distance: r.distanceText, duration: r.durationText, walkingText: r.walkingText, drivingText: r.drivingText }) } else { setRoute(null); setRouteInfo(null) } }}
                   reservations={reservations}
+                  visibleConnectionIds={visibleConnections}
+                  onToggleConnection={toggleConnection}
+                  externalTransportDetail={mapTransportDetail}
+                  onExternalTransportDetailHandled={() => setMapTransportDetail(null)}
                   onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true) }}
+                  onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true) } : undefined}
+                  onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true) } : undefined}
+                  onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true) } : undefined}
                   onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }}
                   onRemoveAssignment={handleRemoveAssignment}
                   onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true) }}
@@ -686,6 +845,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   canUndo={canUndo}
                   lastActionLabel={lastActionLabel}
                   onUndo={handleUndo}
+                  onRouteRefresh={() => { if (selectedDayId) updateRouteForDay(selectedDayId) }}
+                  onAddBookingToAssignment={can('day_edit', trip) ? (dayId, assignmentId) => { tripActions.setSelectedDay(dayId); setBookingForAssignmentId(assignmentId); setEditingReservation(null); setShowReservationModal(true) } : undefined}
                 />
                 {!leftCollapsed && (
                   <div
@@ -745,6 +906,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                     onAssignToDay={handleAssignToDay}
                     onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true) }}
                     onDeletePlace={(placeId) => handleDeletePlace(placeId)}
+                    onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)}
                     onCategoryFilterChange={setMapCategoryFilter}
                     onPlacesFilterChange={setMapPlacesFilter}
                     pushUndo={pushUndo}
@@ -902,8 +1064,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId); setMobileSidebarOpen(null) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} />
-                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} />
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId); setMobileSidebarOpen(null) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} />
+                      : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} />
                     }
                   </div>
                 </div>
@@ -913,11 +1075,29 @@ export default function TripPlannerPage(): React.ReactElement | null {
           </div>
         )}
 
-        {activeTab === 'buchungen' && (
-          <div style={{ height: '100%', maxWidth: 1800, margin: '0 auto', width: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', overscrollBehavior: 'contain', paddingBottom: 'var(--bottom-nav-h)' }}>
+        {activeTab === 'transports' && (
+          <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', overscrollBehavior: 'contain', paddingBottom: 'var(--bottom-nav-h)' }}>
             <ReservationsPanel
               tripId={tripId}
-              reservations={reservations}
+              reservations={reservations.filter(r => TRANSPORT_TYPES.has(r.type))}
+              days={days}
+              assignments={assignments}
+              files={files}
+              onAdd={() => { setEditingTransport(null); setShowTransportModal(true) }}
+              onEdit={(r) => { setEditingTransport(r); setShowTransportModal(true) }}
+              onDelete={handleDeleteReservation}
+              onNavigateToFiles={() => handleTabChange('dateien')}
+              titleKey="transport.title"
+              addManualKey="transport.addManual"
+            />
+          </div>
+        )}
+
+        {activeTab === 'buchungen' && (
+          <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', overscrollBehavior: 'contain', paddingBottom: 'var(--bottom-nav-h)' }}>
+            <ReservationsPanel
+              tripId={tripId}
+              reservations={reservations.filter(r => !TRANSPORT_TYPES.has(r.type))}
               days={days}
               assignments={assignments}
               files={files}
@@ -930,13 +1110,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
         )}
 
         {activeTab === 'listen' && (
-          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1800, margin: '0 auto', width: '100%', padding: '8px 0', paddingBottom: 'calc(var(--bottom-nav-h) + 8px)' }}>
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', width: '100%', paddingBottom: 'var(--bottom-nav-h)' }}>
             <ListsContainer tripId={tripId} packingItems={packingItems} todoItems={todoItems} />
           </div>
         )}
 
         {activeTab === 'finanzplan' && (
-          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', maxWidth: 1800, margin: '0 auto', width: '100%', padding: '8px 0', paddingBottom: 'calc(var(--bottom-nav-h) + 8px)' }}>
+          <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', width: '100%', paddingBottom: 'var(--bottom-nav-h)' }}>
             <BudgetPanel tripId={tripId} tripMembers={tripMembers} />
           </div>
         )}
@@ -968,7 +1148,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
       <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
       <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
-      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} />
+      <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
+      {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} />}
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}
@@ -976,6 +1157,13 @@ export default function TripPlannerPage(): React.ReactElement | null {
         title={t('common.delete')}
         message={t('trip.confirm.deletePlace')}
       />
+      <ConfirmDialog
+        isOpen={!!deletePlaceIds?.length}
+        onClose={() => setDeletePlaceIds(null)}
+        onConfirm={confirmDeletePlaces}
+        title={t('common.delete')}
+        message={t('trip.confirm.deletePlaces', { count: deletePlaceIds?.length ?? 0 })}
+      />
     </div>
   )
 }

client/src/pages/VacayPage.tsx

@@ -138,19 +138,15 @@ export default function VacayPage(): React.ReactElement {
 
       <div style={{ paddingTop: 'var(--nav-h)' }}>
         <div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-4 sm:mb-5">
+          {/* Mobile + tablet header (filter toggle lives here) */}
+          <div className="lg:hidden flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
                 <CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
               </div>
-              <div>
-                <h1 className="text-lg sm:text-xl font-bold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.catalog.vacay.name')}</h1>
-                <p className="text-xs hidden sm:block" style={{ color: 'var(--text-muted)' }}>{t('vacay.subtitle')}</p>
-              </div>
+              <h1 className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>{t('admin.addons.catalog.vacay.name')}</h1>
             </div>
             <div className="flex items-center gap-2">
-              {/* Mobile sidebar toggle */}
               <button
                 onClick={() => setShowMobileSidebar(true)}
                 className="lg:hidden flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors"
@@ -164,11 +160,46 @@ export default function VacayPage(): React.ReactElement {
                 style={{ background: 'var(--bg-secondary)', color: 'var(--text-muted)' }}
               >
                 <Settings size={14} />
-                <span className="hidden sm:inline">{t('vacay.settings')}</span>
               </button>
             </div>
           </div>
 
+          {/* Desktop header — unified toolbar (sidebar is always visible at this width) */}
+          <div className="hidden lg:block" style={{ marginBottom: 20 }}>
+            <div style={{
+              background: 'var(--bg-tertiary)', borderRadius: 18,
+              border: '1px solid var(--border-primary)',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+              padding: '14px 16px 14px 22px',
+              display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
+            }}>
+              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+                {t('admin.addons.catalog.vacay.name')}
+              </h2>
+              <div style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
+                {t('vacay.subtitle')}
+              </span>
+              <div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
+                <button
+                  onClick={() => setShowSettings(true)}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                    background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                    marginLeft: 2,
+                    transition: 'opacity 0.15s ease',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                >
+                  <Settings size={14} strokeWidth={2.5} /> {t('vacay.settings')}
+                </button>
+              </div>
+            </div>
+          </div>
+
           {/* Main layout */}
           <div className="flex gap-4 items-start">
             {/* Desktop Sidebar */}

client/src/repo/placeRepo.ts

@@ -84,4 +84,26 @@ export const placeRepo = {
     offlineDb.places.delete(Number(id))
     return result
   },
+
+  async deleteMany(tripId: number | string, ids: number[]): Promise<unknown> {
+    if (!navigator.onLine) {
+      await offlineDb.places.bulkDelete(ids)
+      for (const id of ids) {
+        const mutId = generateUUID()
+        await mutationQueue.enqueue({
+          id: mutId,
+          tripId: Number(tripId),
+          method: 'DELETE',
+          url: `/trips/${tripId}/places/${id}`,
+          body: undefined,
+          resource: 'places',
+          entityId: id,
+        })
+      }
+      return { deleted: ids, count: ids.length }
+    }
+    const result = await placesApi.bulkDelete(tripId, ids)
+    await offlineDb.places.bulkDelete(ids)
+    return result
+  },
 }

client/src/services/photoService.ts

@@ -12,6 +12,29 @@ const listeners = new Map<string, Set<(entry: PhotoEntry) => void>>()
 // Separate thumb listeners — called when thumbDataUrl becomes available after initial load
 const thumbListeners = new Map<string, Set<(thumb: string) => void>>()
 
+// Concurrency limiter — at most N photo API requests in flight at once.
+// Prevents flooding the server (and external APIs it calls) when many places appear at once.
+const MAX_CONCURRENT = 5
+let activeRequests = 0
+const requestQueue: Array<() => void> = []
+
+function acquireRequestSlot(): Promise<void> {
+  if (activeRequests < MAX_CONCURRENT) {
+    activeRequests++
+    return Promise.resolve()
+  }
+  return new Promise(resolve => requestQueue.push(resolve))
+}
+
+function releaseRequestSlot(): void {
+  const next = requestQueue.shift()
+  if (next) {
+    next()
+  } else {
+    activeRequests--
+  }
+}
+
 function notify(key: string, entry: PhotoEntry) {
   listeners.get(key)?.forEach(fn => fn(entry))
   listeners.delete(key)
@@ -99,37 +122,39 @@ export function fetchPhoto(
   }
 
   inFlight.add(cacheKey)
-  mapsApi.placePhoto(photoId, lat, lng, name)
-    .then(async (data: { photoUrl?: string }) => {
-      const photoUrl = data.photoUrl || null
-      if (!photoUrl) {
+  acquireRequestSlot().then(() =>
+    mapsApi.placePhoto(photoId, lat, lng, name)
+      .then(async (data: { photoUrl?: string }) => {
+        const photoUrl = data.photoUrl || null
+        if (!photoUrl) {
+          const entry: PhotoEntry = { photoUrl: null, thumbDataUrl: null }
+          cache.set(cacheKey, entry)
+          callback?.(entry)
+          notify(cacheKey, entry)
+          return
+        }
+
+        // Store URL first — sidebar can show immediately
+        const entry: PhotoEntry = { photoUrl, thumbDataUrl: null }
+        cache.set(cacheKey, entry)
+        callback?.(entry)
+        notify(cacheKey, entry)
+
+        // Generate base64 thumb in background
+        const thumb = await urlToBase64(photoUrl)
+        if (thumb) {
+          entry.thumbDataUrl = thumb
+          notifyThumb(cacheKey, thumb)
+        }
+      })
+      .catch(() => {
         const entry: PhotoEntry = { photoUrl: null, thumbDataUrl: null }
         cache.set(cacheKey, entry)
         callback?.(entry)
         notify(cacheKey, entry)
-        return
-      }
-
-      // Store URL first — sidebar can show immediately
-      const entry: PhotoEntry = { photoUrl, thumbDataUrl: null }
-      cache.set(cacheKey, entry)
-      callback?.(entry)
-      notify(cacheKey, entry)
-
-      // Generate base64 thumb in background
-      const thumb = await urlToBase64(photoUrl)
-      if (thumb) {
-        entry.thumbDataUrl = thumb
-        notifyThumb(cacheKey, thumb)
-      }
-    })
-    .catch(() => {
-      const entry: PhotoEntry = { photoUrl: null, thumbDataUrl: null }
-      cache.set(cacheKey, entry)
-      callback?.(entry)
-      notify(cacheKey, entry)
-    })
-    .finally(() => { inFlight.delete(cacheKey) })
+      })
+      .finally(() => { inFlight.delete(cacheKey); releaseRequestSlot() })
+  )
 }
 
 export function getAllThumbs(): Record<string, string> {

client/src/services/weatherQueue.ts

@@ -0,0 +1,25 @@
+import { weatherApi } from '../api/client'
+
+const MAX_CONCURRENT = 3
+let active = 0
+const queue: Array<() => void> = []
+
+function acquire(): Promise<void> {
+  if (active < MAX_CONCURRENT) { active++; return Promise.resolve() }
+  return new Promise(resolve => queue.push(resolve))
+}
+
+function release(): void {
+  const next = queue.shift()
+  if (next) next()
+  else active--
+}
+
+export async function fetchWeather(lat: number, lng: number, date: string) {
+  await acquire()
+  try {
+    return await weatherApi.get(lat, lng, date)
+  } finally {
+    release()
+  }
+}

client/src/store/slices/placesSlice.ts

@@ -12,6 +12,7 @@ export interface PlacesSlice {
   addPlace: (tripId: number | string, placeData: Partial<Place>) => Promise<Place>
   updatePlace: (tripId: number | string, placeId: number, placeData: Partial<Place>) => Promise<Place>
   deletePlace: (tripId: number | string, placeId: number) => Promise<void>
+  deletePlacesMany: (tripId: number | string, placeIds: number[]) => Promise<void>
 }
 
 export const createPlacesSlice = (set: SetState, get: GetState): PlacesSlice => ({
@@ -80,4 +81,28 @@ export const createPlacesSlice = (set: SetState, get: GetState): PlacesSlice =>
       throw new Error(getApiErrorMessage(err, 'Error deleting place'))
     }
   },
+
+  deletePlacesMany: async (tripId, placeIds) => {
+    if (placeIds.length === 0) return
+    try {
+      await placeRepo.deleteMany(tripId, placeIds)
+      const idSet = new Set(placeIds)
+      set(state => {
+        const updatedAssignments = { ...state.assignments }
+        let changed = false
+        for (const [dayId, items] of Object.entries(state.assignments)) {
+          if (items.some((a: Assignment) => a.place?.id != null && idSet.has(a.place.id))) {
+            updatedAssignments[dayId] = items.filter((a: Assignment) => !idSet.has(a.place?.id!))
+            changed = true
+          }
+        }
+        return {
+          places: state.places.filter(p => !idSet.has(p.id)),
+          ...(changed ? { assignments: updatedAssignments } : {}),
+        }
+      })
+    } catch (err: unknown) {
+      throw new Error(getApiErrorMessage(err, 'Error deleting places'))
+    }
+  },
 })

client/src/types.ts

@@ -137,6 +137,20 @@ export interface BudgetMember {
   paid: boolean
 }
 
+export interface ReservationEndpoint {
+  id?: number
+  reservation_id?: number
+  role: 'from' | 'to' | 'stop'
+  sequence: number
+  name: string
+  code: string | null
+  lat: number
+  lng: number
+  timezone: string | null
+  local_time: string | null
+  local_date: string | null
+}
+
 export interface Reservation {
   id: number
   trip_id: number
@@ -153,11 +167,14 @@ export interface Reservation {
   notes: string | null
   url: string | null
   day_id?: number | null
+  end_day_id?: number | null
   place_id?: number | null
   assignment_id?: number | null
   accommodation_id?: number | null
   day_plan_position?: number | null
   metadata?: Record<string, string> | string | null
+  needs_review?: number
+  endpoints?: ReservationEndpoint[]
   created_at: string
 }
 
@@ -196,6 +213,7 @@ export interface Settings {
   show_place_description: boolean
   route_calculation?: boolean
   blur_booking_codes?: boolean
+  map_booking_labels?: boolean
 }
 
 export interface AssignmentsMap {

client/tests/integration/hooks/useRouteCalculation.test.ts

@@ -2,6 +2,7 @@ import { renderHook, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useRouteCalculation } from '../../../src/hooks/useRouteCalculation';
 import { useSettingsStore } from '../../../src/store/settingsStore';
+import { useTripStore } from '../../../src/store/tripStore';
 import { buildAssignment, buildPlace } from '../../helpers/factories';
 import type { TripStoreState } from '../../../src/store/tripStore';
 import type { RouteSegment } from '../../../src/types';
@@ -17,6 +18,10 @@ vi.mock('../../../src/components/Map/RouteCalculator', () => ({
 const { calculateSegments } = await import('../../../src/components/Map/RouteCalculator');
 
 function buildMockStore(assignments: Record<string, ReturnType<typeof buildAssignment>[]> = {}): Partial<TripStoreState> {
+  // Also populate the real Zustand store so updateRouteForDay (which reads from
+  // useTripStore.getState()) sees the same assignments as the hook's tripStore param.
+  // Reset reservations and days to empty so transport-split logic doesn't interfere.
+  useTripStore.setState({ assignments, reservations: [], days: [] } as any);
   return { assignments } as Partial<TripStoreState>;
 }
 
@@ -35,6 +40,8 @@ describe('useRouteCalculation', () => {
     vi.clearAllMocks();
     // Default: route_calculation disabled
     useSettingsStore.setState({ settings: { route_calculation: false } as any });
+    // Reset trip store assignments so each test starts clean
+    useTripStore.setState({ assignments: {} } as any);
     (calculateSegments as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_SEGMENTS);
   });
 
@@ -71,9 +78,9 @@ describe('useRouteCalculation', () => {
     );
 
     await act(async () => {});
+    // route is an array of segments; no transport → single segment with all places
     expect(result.current.route).toEqual([
-      [p1.lat, p1.lng],
-      [p2.lat, p2.lng],
+      [[p1.lat, p1.lng], [p2.lat, p2.lng]],
     ]);
   });
 
@@ -133,8 +140,7 @@ describe('useRouteCalculation', () => {
 
     // After sort: a2 (order_index=0) first, then a1 (order_index=1)
     expect(result.current.route).toEqual([
-      [p2.lat, p2.lng],
-      [p1.lat, p1.lng],
+      [[p2.lat, p2.lng], [p1.lat, p1.lng]],
     ]);
   });
 
@@ -266,7 +272,7 @@ describe('useRouteCalculation', () => {
     expect(result.current.setRouteInfo).toBeTypeOf('function');
   });
 
-  it('FE-HOOK-ROUTE-013: hook uses tripStoreRef — late store updates reflected correctly', async () => {
+  it('FE-HOOK-ROUTE-013: route recalculates when assignments change via store update', async () => {
     useSettingsStore.setState({ settings: { route_calculation: true } as any });
 
     const p1 = buildPlace({ lat: 10, lng: 10 });
@@ -283,14 +289,13 @@ describe('useRouteCalculation', () => {
     await act(async () => {});
 
     expect(result.current.route).toEqual([
-      [p1.lat, p1.lng],
-      [p2.lat, p2.lng],
+      [[p1.lat, p1.lng], [p2.lat, p2.lng]],
     ]);
 
-    // Now add a third place
+    // Now add a third place — update both the local store object and the Zustand store
     const p3 = buildPlace({ lat: 30, lng: 30 });
     const a3 = buildAssignment({ day_id: 5, order_index: 2, place: p3 });
-    storeData = buildMockStore({ '5': [a1, a2, a3] });
+    storeData = buildMockStore({ '5': [a1, a2, a3] }); // also calls useTripStore.setState
 
     await act(async () => {
       rerender();
@@ -299,9 +304,7 @@ describe('useRouteCalculation', () => {
     await act(async () => {});
 
     expect(result.current.route).toEqual([
-      [p1.lat, p1.lng],
-      [p2.lat, p2.lng],
-      [p3.lat, p3.lng],
+      [[p1.lat, p1.lng], [p2.lat, p2.lng], [p3.lat, p3.lng]],
     ]);
   });
 });

client/tests/unit/services/photoService.test.ts

@@ -134,6 +134,8 @@ describe('fetchPhoto — in-flight deduplication', () => {
     svc.fetchPhoto('k', 'pid', undefined, undefined, undefined, cb1);
     svc.fetchPhoto('k', 'pid', undefined, undefined, undefined, cb2);
 
+    // acquireRequestSlot() is async (Promise.resolve), so flush microtasks before asserting
+    await flush();
     expect(mockPlacePhoto).toHaveBeenCalledTimes(1);
 
     resolve({ photoUrl: 'https://example.com/photo.jpg' });

scripts/analyze-devtool-profiler.cjs

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+// Chrome Performance Trace Analyzer — outputs a compact summary
+// Usage: node analyze-trace.js <trace.json>
+
+const fs = require('fs')
+const path = require('path')
+
+const file = process.argv[2]
+if (!file) { console.error('Usage: node analyze-trace.js <trace.json>'); process.exit(1) }
+
+console.log(`Reading ${path.basename(file)} (${(fs.statSync(file).size / 1e6).toFixed(1)} MB)...`)
+const raw = fs.readFileSync(file, 'utf8')
+console.log('Parsing...')
+const trace = JSON.parse(raw)
+const events = Array.isArray(trace) ? trace : (trace.traceEvents || [])
+console.log(`Total events: ${events.length.toLocaleString()}\n`)
+
+// ── 1. Long Tasks (> 50ms on main thread) ────────────────────────────────────
+const LONG_TASK_MS = 50
+const tasks = events
+  .filter(e => e.ph === 'X' && e.dur && e.dur > LONG_TASK_MS * 1000)
+  .sort((a, b) => b.dur - a.dur)
+  .slice(0, 30)
+
+console.log(`═══ TOP LONG TASKS (>${LONG_TASK_MS}ms) ═══`)
+for (const t of tasks) {
+  const ms = (t.dur / 1000).toFixed(1)
+  const name = t.name || '(unknown)'
+  const cat = t.cat || ''
+  console.log(`  ${ms.padStart(8)}ms  ${name}  [${cat}]`)
+}
+
+// ── 2. Summarise all complete events by name ──────────────────────────────────
+const byName = new Map()
+for (const e of events) {
+  if (e.ph !== 'X' || !e.dur) continue
+  const key = e.name
+  const existing = byName.get(key)
+  if (existing) {
+    existing.totalMs += e.dur / 1000
+    existing.count++
+    if (e.dur > existing.maxMs * 1000) existing.maxMs = e.dur / 1000
+  } else {
+    byName.set(key, { totalMs: e.dur / 1000, count: 1, maxMs: e.dur / 1000 })
+  }
+}
+const topByTotal = [...byName.entries()]
+  .sort((a, b) => b[1].totalMs - a[1].totalMs)
+  .slice(0, 40)
+
+console.log('\n═══ TOP EVENTS BY TOTAL TIME ═══')
+console.log('  Total(ms)   Max(ms)   Count   Name')
+for (const [name, s] of topByTotal) {
+  console.log(
+    `  ${s.totalMs.toFixed(1).padStart(9)}   ${s.maxMs.toFixed(1).padStart(7)}   ${String(s.count).padStart(5)}   ${name}`
+  )
+}
+
+// ── 3. React-specific events ──────────────────────────────────────────────────
+const reactKeywords = ['react', 'React', 'setState', 'useState', 'useMemo', 'useEffect',
+  'reconcil', 'Reconcil', 'render', 'Render', 'commit', 'Commit', 'fiber', 'Fiber',
+  'Marker', 'MapView', 'photoUrl', 'createPlace', 'markers']
+const reactEvents = [...byName.entries()]
+  .filter(([name]) => reactKeywords.some(k => name.includes(k)))
+  .sort((a, b) => b[1].totalMs - a[1].totalMs)
+  .slice(0, 30)
+
+if (reactEvents.length > 0) {
+  console.log('\n═══ REACT / MAP EVENTS ═══')
+  for (const [name, s] of reactEvents) {
+    console.log(`  ${s.totalMs.toFixed(1).padStart(9)}ms total   ${s.maxMs.toFixed(1).padStart(7)}ms max   ${s.count}x   ${name}`)
+  }
+}
+
+// ── 4. V8 / JS heavy hitters ─────────────────────────────────────────────────
+const jsEvents = [...byName.entries()]
+  .filter(([, s]) => s.totalMs > 20)
+  .filter(([name]) => {
+    const cat = (events.find(e => e.name === name)?.cat || '')
+    return cat.includes('v8') || cat.includes('devtools.timeline') || name.includes('JS') || name.includes('Compile') || name.includes('GC')
+  })
+  .sort((a, b) => b[1].totalMs - a[1].totalMs)
+  .slice(0, 20)
+
+if (jsEvents.length > 0) {
+  console.log('\n═══ V8 / JS EVENTS (>20ms total) ═══')
+  for (const [name, s] of jsEvents) {
+    console.log(`  ${s.totalMs.toFixed(1).padStart(9)}ms   ${s.count}x   ${name}`)
+  }
+}
+
+// ── 5. CPU profile — top self-time functions ─────────────────────────────────
+const profileChunks = events.filter(e => e.name === 'ProfileChunk')
+if (profileChunks.length > 0) {
+  const selfTime = new Map()
+  for (const chunk of profileChunks) {
+    const nodes = chunk.args?.data?.cpuProfile?.nodes || []
+    const samples = chunk.args?.data?.cpuProfile?.samples || []
+    const timeDeltas = chunk.args?.data?.timeDeltas || []
+    // Build node map
+    const nodeMap = new Map(nodes.map(n => [n.id, n]))
+    // Accumulate self time per node
+    for (let i = 0; i < samples.length; i++) {
+      const nodeId = samples[i]
+      const dt = (timeDeltas[i] || 0) / 1000 // µs → ms
+      const node = nodeMap.get(nodeId)
+      if (!node) continue
+      const fn = node.callFrame?.functionName || '(anonymous)'
+      const url = node.callFrame?.url || ''
+      const line = node.callFrame?.lineNumber || 0
+      const key = `${fn} @ ${url.split('/').slice(-2).join('/')}:${line}`
+      selfTime.set(key, (selfTime.get(key) || 0) + dt)
+    }
+  }
+  const topSelf = [...selfTime.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 40)
+
+  console.log('\n═══ CPU PROFILE — TOP SELF-TIME FUNCTIONS ═══')
+  for (const [name, ms] of topSelf) {
+    console.log(`  ${ms.toFixed(1).padStart(8)}ms   ${name}`)
+  }
+}
+
+// ── 6. Paint / Layout costs ───────────────────────────────────────────────────
+const renderCats = ['Layout', 'UpdateLayoutTree', 'Paint', 'CompositeLayers', 'RasterTask']
+console.log('\n═══ RENDERING COSTS ═══')
+for (const cat of renderCats) {
+  const s = byName.get(cat)
+  if (s) console.log(`  ${s.totalMs.toFixed(1).padStart(9)}ms total   ${s.maxMs.toFixed(1).padStart(7)}ms max   ${s.count}x   ${cat}`)
+}
+
+console.log('\nDone.')

scripts/analyze-react-profiler.cjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+const fs = require('fs')
+const path = require('path')
+
+const file = process.argv[2]
+if (!file) { console.error('Usage: node analyze-react-profiler.cjs <profile.json>'); process.exit(1) }
+
+const raw = JSON.parse(fs.readFileSync(path.resolve(file), 'utf8'))
+const root = raw.dataForRoots[0]
+const commits = root.commitData
+
+// snapshots: array of [fiberId, {displayName, ...}]
+const nameMap = new Map()
+for (const snap of root.snapshots) {
+  const id = snap[0]
+  const data = snap[1]
+  if (data?.displayName) nameMap.set(id, data.displayName)
+}
+
+console.log(`Commits: ${commits.length}   Tracked components: ${nameMap.size}`)
+
+// Probe the unit of fiberActualDurations against the known commit duration
+// fiberActualDurations contains durations for the subtree — the root fiber's
+// actual duration should be >= commit.duration.  Find a plausible scale factor.
+const c0 = commits[0]
+const knownDur = c0.duration  // already in ms per React DevTools spec
+const rootId = root.rootID ?? 1
+// Check a few values to pick scale
+const sampleDurs = c0.fiberActualDurations.slice(0, 10).map(e => e[1])
+console.log(`\nDebug — commit[0].duration=${knownDur}ms, first 5 raw fiberActualDurations values:`, sampleDurs.slice(0,5))
+// If max sample > 10*knownDur, values are in units of 1/100 ms; otherwise already ms
+const maxSample = Math.max(...c0.fiberActualDurations.map(e => e[1]))
+const scale = maxSample > knownDur * 10 ? 0.01 : 1
+
+console.log(`Unit scale: ${scale === 0.01 ? '1/100 ms (dividing by 100)' : 'ms (no conversion)'}\n`)
+
+// --- 1. Commit summary ---
+const fmt = (v) => v == null ? '    -' : (v * 1).toFixed(1).padStart(7)
+console.log('=== Commit summary ===')
+console.log('  #   t(s)    dur(ms)  passive(ms)  effects(ms)  priority')
+const sorted = [...commits].map((c, i) => ({ i, ...c })).sort((a, b) => b.duration - a.duration)
+for (const c of sorted.slice(0, 15)) {
+  const ts = (c.timestamp / 1000).toFixed(3)
+  console.log(`  ${String(c.i).padStart(2)}  ${ts}  ${fmt(c.duration)}  ${fmt(c.passiveEffectDuration)}     ${fmt(c.effectDuration)}    ${c.priorityLevel ?? ''}`)
+}
+
+// --- 2. Aggregate self + actual duration per component ---
+const selfTotals   = new Map()   // name → { total, count, max }
+const actualTotals = new Map()
+
+for (const commit of commits) {
+  for (const [id, raw] of commit.fiberActualDurations) {
+    const dur = raw * scale
+    const name = nameMap.get(id) ?? `(fiber#${id})`
+    const e = actualTotals.get(name) ?? { total: 0, count: 0, max: 0 }
+    e.total += dur; e.count += 1; e.max = Math.max(e.max, dur)
+    actualTotals.set(name, e)
+  }
+  for (const [id, raw] of commit.fiberSelfDurations) {
+    const dur = raw * scale
+    const name = nameMap.get(id) ?? `(fiber#${id})`
+    const e = selfTotals.get(name) ?? { total: 0, count: 0, max: 0 }
+    e.total += dur; e.count += 1; e.max = Math.max(e.max, dur)
+    selfTotals.set(name, e)
+  }
+}
+
+const ranked = [...selfTotals.entries()]
+  .sort((a, b) => b[1].total - a[1].total)
+  .filter(([, s]) => s.total > 0.5)
+
+console.log('\n=== Top 40 components by SELF render time (excludes children) ===')
+console.log('  Component                                        Self total   Renders  Self max   Actual total')
+for (const [name, s] of ranked.slice(0, 40)) {
+  const actual = actualTotals.get(name) ?? { total: 0 }
+  console.log(
+    `  ${name.padEnd(48)} ${s.total.toFixed(1).padStart(8)} ms` +
+    `  ${String(s.count).padStart(6)}x` +
+    `  ${s.max.toFixed(1).padStart(7)} ms` +
+    `  ${actual.total.toFixed(1).padStart(10)} ms`
+  )
+}
+
+console.log('\n=== Most frequently re-rendering components (top 20) ===')
+const byCount = [...selfTotals.entries()].sort((a, b) => b[1].count - a[1].count)
+console.log('  Component                                        Renders  Self total')
+for (const [name, s] of byCount.slice(0, 20)) {
+  console.log(`  ${name.padEnd(48)} ${String(s.count).padStart(6)}x  ${s.total.toFixed(1).padStart(8)} ms`)
+}
+
+const totalPassive = commits.reduce((a, c) => a + (c.passiveEffectDuration ?? 0), 0)
+const totalCommit  = commits.reduce((a, c) => a + c.duration, 0)
+console.log(`\n=== Totals ===`)
+console.log(`  Total commit render time:   ${totalCommit.toFixed(1)} ms  (${commits.length} commits)`)
+console.log(`  Total passive effect time:  ${totalPassive.toFixed(1)} ms  (useEffect)`)
+console.log(`  Avg commit duration:        ${(totalCommit / commits.length).toFixed(1)} ms`)

server/package-lock.json

@@ -54,6 +54,7 @@
         "@vitest/coverage-v8": "^3.2.4",
         "nodemon": "^3.1.0",
         "supertest": "^7.2.2",
+        "tz-lookup": "^6.1.25",
         "vitest": "^3.2.4"
       }
     },
@@ -1189,9 +1190,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1206,9 +1204,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1223,9 +1218,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1240,9 +1232,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1257,9 +1246,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1274,9 +1260,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1291,9 +1274,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1308,9 +1288,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1325,9 +1302,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1342,9 +1316,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1359,9 +1330,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1376,9 +1344,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1393,9 +1358,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5867,6 +5829,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/tz-lookup": {
+      "version": "6.1.25",
+      "resolved": "https://registry.npmjs.org/tz-lookup/-/tz-lookup-6.1.25.tgz",
+      "integrity": "sha512-fFewT9o1uDzsW1QnUU1ValqaihFnwiUiiHr1S79/fxOzKXYYvX+EHeRnpvQJ9B3Qg67wPXT6QF2Esc4pFOrvLg==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",

server/package.json

@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "nodemon": "^3.1.0",
     "supertest": "^7.2.2",
+    "tz-lookup": "^6.1.25",
     "vitest": "^3.2.4"
   }
 }

server/scripts/build-airports.mjs

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+// Build server/assets/airports.json from OurAirports (davidmegginson.github.io/ourairports-data).
+// License: Public Domain. Keeps large/medium airports with an IATA code; timezone derived from coords via tz-lookup.
+
+import fs from 'node:fs'
+import path from 'node:path'
+import https from 'node:https'
+import { fileURLToPath } from 'node:url'
+import tzLookup from 'tz-lookup'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const OUT = path.join(__dirname, '..', 'assets', 'airports.json')
+const SRC = 'https://davidmegginson.github.io/ourairports-data/airports.csv'
+
+function fetchText(url) {
+  return new Promise((resolve, reject) => {
+    https.get(url, (res) => {
+      if (res.statusCode !== 200) return reject(new Error(`HTTP ${res.statusCode}`))
+      let data = ''
+      res.setEncoding('utf8')
+      res.on('data', chunk => { data += chunk })
+      res.on('end', () => resolve(data))
+    }).on('error', reject)
+  })
+}
+
+function parseCsv(text) {
+  const rows = []
+  let row = []
+  let cur = ''
+  let inQuotes = false
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') { cur += '"'; i++ } else { inQuotes = false }
+      } else {
+        cur += ch
+      }
+    } else {
+      if (ch === '"') inQuotes = true
+      else if (ch === ',') { row.push(cur); cur = '' }
+      else if (ch === '\n') { row.push(cur); rows.push(row); row = []; cur = '' }
+      else if (ch === '\r') { /* skip */ }
+      else cur += ch
+    }
+  }
+  if (cur.length > 0 || row.length > 0) { row.push(cur); rows.push(row) }
+  return rows
+}
+
+const raw = await fetchText(SRC)
+const rows = parseCsv(raw)
+const header = rows[0]
+const idx = (name) => header.indexOf(name)
+const TYPE = idx('type')
+const NAME = idx('name')
+const LAT = idx('latitude_deg')
+const LNG = idx('longitude_deg')
+const COUNTRY = idx('iso_country')
+const MUNICIPALITY = idx('municipality')
+const SERVICE = idx('scheduled_service')
+const ICAO = idx('icao_code')
+const IATA = idx('iata_code')
+
+const KEEP = new Set(['large_airport', 'medium_airport'])
+const airports = []
+let skippedNoTz = 0
+
+for (let i = 1; i < rows.length; i++) {
+  const r = rows[i]
+  if (!r || r.length < header.length) continue
+  if (!KEEP.has(r[TYPE])) continue
+  const iata = r[IATA]?.trim().toUpperCase()
+  if (!iata || iata.length !== 3) continue
+  if (r[SERVICE] !== 'yes') continue
+  const lat = Number(r[LAT])
+  const lng = Number(r[LNG])
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) continue
+
+  let tz = null
+  try { tz = tzLookup(lat, lng) } catch { skippedNoTz++; continue }
+  if (!tz) { skippedNoTz++; continue }
+
+  airports.push({
+    iata,
+    icao: r[ICAO]?.trim().toUpperCase() || null,
+    name: r[NAME],
+    city: r[MUNICIPALITY] || '',
+    country: r[COUNTRY] || '',
+    lat: Math.round(lat * 1e6) / 1e6,
+    lng: Math.round(lng * 1e6) / 1e6,
+    tz,
+  })
+}
+
+const seen = new Map()
+for (const a of airports) {
+  const existing = seen.get(a.iata)
+  if (!existing) { seen.set(a.iata, a); continue }
+  if (existing.icao && !a.icao) continue
+  if (!existing.icao && a.icao) seen.set(a.iata, a)
+}
+const unique = Array.from(seen.values()).sort((a, b) => a.iata.localeCompare(b.iata))
+
+fs.writeFileSync(OUT, JSON.stringify(unique))
+const size = fs.statSync(OUT).size
+console.log(`Wrote ${unique.length} airports to ${OUT} (${(size / 1024).toFixed(1)} KB); skipped ${skippedNoTz} without timezone`)

server/src/app.ts

@@ -23,6 +23,7 @@ import tagsRoutes from './routes/tags';
 import categoriesRoutes from './routes/categories';
 import adminRoutes from './routes/admin';
 import mapsRoutes from './routes/maps';
+import airportsRoutes from './routes/airports';
 import filesRoutes from './routes/files';
 import reservationsRoutes from './routes/reservations';
 import dayNotesRoutes from './routes/dayNotes';
@@ -278,6 +279,7 @@ export function createApp(): express.Application {
   app.use('/api/integrations/memories', memoriesRoutes);
   app.use('/api/photos', photoRoutes);
   app.use('/api/maps', mapsRoutes);
+  app.use('/api/airports', airportsRoutes);
   app.use('/api/weather', weatherRoutes);
   app.use('/api/settings', settingsRoutes);
   app.use('/api/system-notices', systemNoticesRoutes);

server/src/db/database.ts

@@ -128,4 +128,11 @@ function isOwner(tripId: number | string, userId: number): boolean {
   return !!db.prepare('SELECT id FROM trips WHERE id = ? AND user_id = ?').get(tripId, userId);
 }
 
+try {
+  const { backfillFlightEndpoints } = require('../services/airportService');
+  backfillFlightEndpoints();
+} catch (err) {
+  console.error('[DB] Flight endpoint backfill failed:', err);
+}
+
 export { db, closeDb, reinitialize, getPlaceWithTags, canAccessTrip, isOwner };

server/src/db/migrations.ts

@@ -1682,6 +1682,62 @@ function runMigrations(db: Database.Database): void {
       );
       CREATE INDEX IF NOT EXISTS idx_trek_photo_cache_meta_fetched_at ON trek_photo_cache_meta (fetched_at);
     `),
+    // Migration 109: Reservation endpoints (from/to points for flights, trains, ferries, car rentals) — #384 + #587
+    () => {
+      db.exec(`
+        CREATE TABLE IF NOT EXISTS reservation_endpoints (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          reservation_id INTEGER NOT NULL REFERENCES reservations(id) ON DELETE CASCADE,
+          role TEXT NOT NULL,
+          sequence INTEGER NOT NULL DEFAULT 0,
+          name TEXT NOT NULL,
+          code TEXT,
+          lat REAL NOT NULL,
+          lng REAL NOT NULL,
+          timezone TEXT,
+          local_time TEXT,
+          local_date TEXT,
+          created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+        )
+      `);
+      db.exec('CREATE INDEX IF NOT EXISTS idx_reservation_endpoints_reservation_id ON reservation_endpoints(reservation_id)');
+      try { db.exec('ALTER TABLE reservations ADD COLUMN needs_review INTEGER NOT NULL DEFAULT 0'); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+    },
+    // Migration 110 — link transport reservations to days via day_id / end_day_id
+    () => {
+      try {
+        db.exec('ALTER TABLE reservations ADD COLUMN end_day_id INTEGER REFERENCES days(id) ON DELETE SET NULL');
+      } catch (err: any) {
+        if (!err.message?.includes('duplicate column name')) throw err;
+      }
+
+      db.exec(`
+        UPDATE reservations
+        SET day_id = (
+          SELECT d.id FROM days d
+          WHERE d.trip_id = reservations.trip_id
+            AND d.date = substr(reservations.reservation_time, 1, 10)
+          LIMIT 1
+        )
+        WHERE type IN ('flight','train','car','cruise','bus')
+          AND reservation_time IS NOT NULL
+          AND day_id IS NULL
+      `);
+
+      db.exec(`
+        UPDATE reservations
+        SET end_day_id = (
+          SELECT d.id FROM days d
+          WHERE d.trip_id = reservations.trip_id
+            AND d.date = substr(reservations.reservation_end_time, 1, 10)
+          LIMIT 1
+        )
+        WHERE type IN ('flight','train','car','cruise','bus')
+          AND reservation_end_time IS NOT NULL
+          AND end_day_id IS NULL
+          AND substr(reservations.reservation_end_time, 1, 10) != substr(reservations.reservation_time, 1, 10)
+      `);
+    },
   ];
 
   if (currentVersion < migrations.length) {

server/src/db/schema.ts

@@ -165,6 +165,7 @@ function createTables(db: Database.Database): void {
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       trip_id INTEGER NOT NULL REFERENCES trips(id) ON DELETE CASCADE,
       day_id INTEGER REFERENCES days(id) ON DELETE SET NULL,
+      end_day_id INTEGER REFERENCES days(id) ON DELETE SET NULL,
       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,

server/src/routes/airports.ts

@@ -0,0 +1,19 @@
+import express, { Request, Response } from 'express';
+import { authenticate } from '../middleware/auth';
+import { searchAirports, findByIata } from '../services/airportService';
+
+const router = express.Router();
+
+router.get('/search', authenticate, (req: Request, res: Response) => {
+  const q = typeof req.query.q === 'string' ? req.query.q : '';
+  if (!q) return res.json([]);
+  res.json(searchAirports(q));
+});
+
+router.get('/:iata', authenticate, (req: Request, res: Response) => {
+  const airport = findByIata(req.params.iata);
+  if (!airport) return res.status(404).json({ error: 'Airport not found' });
+  res.json(airport);
+});
+
+export default router;

server/src/routes/places.ts

@@ -12,11 +12,13 @@ import {
   getPlace,
   updatePlace,
   deletePlace,
+  deletePlacesMany,
   importGpx,
   importMapFile,
   importGoogleList,
   importNaverList,
   searchPlaceImage,
+  type KmlImportOptions,
 } from '../services/placeService';
 import { onPlaceCreated, onPlaceUpdated, onPlaceDeleted } from '../services/journeyService';
 
@@ -65,9 +67,18 @@ router.post('/import/gpx', authenticate, requireTripAccess, uploadMulter.single(
   const file = req.file as Express.Multer.File | undefined;
   if (!file) return res.status(400).json({ error: 'No file uploaded' });
 
-  const result = importGpx(tripId, file.buffer);
+  const parseBool = (v: unknown, defaultVal: boolean) => v === undefined || v === null ? defaultVal : String(v) === 'true';
+  const importWaypoints = parseBool(req.body.importWaypoints, true);
+  const importRoutes = parseBool(req.body.importRoutes, true);
+  const importTracks = parseBool(req.body.importTracks, true);
+
+  if (!importWaypoints && !importRoutes && !importTracks) {
+    return res.status(400).json({ error: 'No import types selected' });
+  }
+
+  const result = importGpx(tripId, file.buffer, { importWaypoints, importRoutes, importTracks });
   if (!result) {
-    return res.status(400).json({ error: 'No waypoints found in GPX file' });
+    return res.status(400).json({ error: 'No matching places found in GPX file' });
   }
 
   res.status(201).json({ places: result.places, count: result.count, skipped: result.skipped });
@@ -86,8 +97,18 @@ router.post('/import/map', authenticate, requireTripAccess, uploadMulter.single(
   const file = req.file as Express.Multer.File | undefined;
   if (!file) return res.status(400).json({ error: 'No file uploaded' });
 
+  const parseBool = (v: unknown, defaultVal: boolean) => v === undefined || v === null ? defaultVal : String(v) === 'true';
+  const importPoints = parseBool(req.body.importPoints, true);
+  const importPaths = parseBool(req.body.importPaths, true);
+
+  if (!importPoints && !importPaths) {
+    return res.status(400).json({ error: 'No import types selected' });
+  }
+
+  const kmlOpts: KmlImportOptions = { importPoints, importPaths };
+
   try {
-    const result = await importMapFile(tripId, file.buffer, file.originalname);
+    const result = await importMapFile(tripId, file.buffer, file.originalname, kmlOpts);
     if (result.summary?.totalPlacemarks === 0) {
       return res.status(400).json({ error: 'No valid Placemarks found in map file', summary: result.summary });
     }
@@ -201,6 +222,30 @@ router.put('/:id', authenticate, requireTripAccess, validateStringLengths({ name
   try { onPlaceUpdated(place.id); } catch {}
 });
 
+// Bulk delete (must be before /:id)
+router.post('/bulk-delete', authenticate, requireTripAccess, (req: Request, res: Response) => {
+  const authReq = req as AuthRequest;
+  if (!checkPermission('place_edit', authReq.user.role, authReq.trip!.user_id, authReq.user.id, authReq.trip!.user_id !== authReq.user.id))
+    return res.status(403).json({ error: 'No permission' });
+
+  const { tripId } = req.params;
+  const { ids } = req.body as { ids?: unknown };
+  if (!Array.isArray(ids) || ids.some(v => typeof v !== 'number'))
+    return res.status(400).json({ error: 'ids must be an array of numbers' });
+
+  const idList = ids as number[];
+  if (idList.length === 0) return res.json({ deleted: [], count: 0 });
+
+  for (const id of idList) { try { onPlaceDeleted(id); } catch {} }
+  const deleted = deletePlacesMany(tripId, idList);
+
+  res.json({ deleted, count: deleted.length });
+  const socketId = req.headers['x-socket-id'] as string;
+  for (const id of deleted) {
+    broadcast(tripId, 'place:deleted', { placeId: id }, socketId);
+  }
+});
+
 router.delete('/:id', authenticate, requireTripAccess, (req: Request, res: Response) => {
   const authReq = req as AuthRequest;
   if (!checkPermission('place_edit', authReq.user.role, authReq.trip!.user_id, authReq.user.id, authReq.trip!.user_id !== authReq.user.id))

server/src/routes/reservations.ts

@@ -31,7 +31,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, create_budget_entry } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, end_day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry, endpoints, needs_review } = req.body;
 
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -43,8 +43,9 @@ router.post('/', authenticate, (req: Request, res: Response) => {
 
   const { reservation, accommodationCreated } = createReservation(tripId, {
     title, reservation_time, reservation_end_time, location,
-    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    confirmation_number, notes, day_id, end_day_id, place_id, assignment_id,
+    status, type, accommodation_id, metadata, create_accommodation,
+    endpoints, needs_review
   });
 
   if (accommodationCreated) {
@@ -101,7 +102,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, create_budget_entry } = req.body;
+  const { title, reservation_time, reservation_end_time, location, confirmation_number, notes, day_id, end_day_id, place_id, assignment_id, status, type, accommodation_id, metadata, create_accommodation, create_budget_entry, endpoints, needs_review } = req.body;
 
   const trip = verifyTripAccess(tripId, authReq.user.id);
   if (!trip) return res.status(404).json({ error: 'Trip not found' });
@@ -114,8 +115,9 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
 
   const { reservation, accommodationChanged } = updateReservation(id, tripId, {
     title, reservation_time, reservation_end_time, location,
-    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    confirmation_number, notes, day_id, end_day_id, place_id, assignment_id,
+    status, type, accommodation_id, metadata, create_accommodation,
+    endpoints, needs_review
   }, current);
 
   if (accommodationChanged) {

server/src/services/airportService.ts

@@ -0,0 +1,109 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { db } from '../db/database';
+
+export interface Airport {
+  iata: string;
+  icao: string | null;
+  name: string;
+  city: string;
+  country: string;
+  lat: number;
+  lng: number;
+  tz: string;
+}
+
+let cache: Airport[] | null = null;
+let byIata: Map<string, Airport> | null = null;
+
+function load(): Airport[] {
+  if (cache) return cache;
+  const file = path.join(__dirname, '..', '..', 'assets', 'airports.json');
+  if (!fs.existsSync(file)) {
+    console.warn('[airports] airports.json missing — run `node scripts/build-airports.mjs`');
+    cache = [];
+    byIata = new Map();
+    return cache;
+  }
+  const raw = fs.readFileSync(file, 'utf8');
+  cache = JSON.parse(raw) as Airport[];
+  byIata = new Map(cache.map(a => [a.iata, a]));
+  return cache;
+}
+
+export function findByIata(code: string): Airport | null {
+  load();
+  return byIata!.get(code.toUpperCase()) ?? null;
+}
+
+export function searchAirports(query: string, limit = 12): Airport[] {
+  const all = load();
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+
+  const upper = q.toUpperCase();
+  if (q.length === 3) {
+    const exact = byIata!.get(upper);
+    if (exact) return [exact];
+  }
+
+  const matches: Array<{ a: Airport; score: number }> = [];
+  for (const a of all) {
+    let score = 0;
+    if (a.iata === upper) score = 100;
+    else if (a.icao === upper) score = 90;
+    else if (a.iata.startsWith(upper)) score = 70;
+    else if (a.city.toLowerCase().startsWith(q)) score = 60;
+    else if (a.name.toLowerCase().startsWith(q)) score = 50;
+    else if (a.city.toLowerCase().includes(q)) score = 30;
+    else if (a.name.toLowerCase().includes(q)) score = 20;
+    if (score > 0) matches.push({ a, score });
+  }
+  matches.sort((x, y) => y.score - x.score || x.a.iata.localeCompare(y.a.iata));
+  return matches.slice(0, limit).map(m => m.a);
+}
+
+export function backfillFlightEndpoints(): void {
+  const pending = db.prepare(`
+    SELECT r.id, r.metadata, r.reservation_time, r.reservation_end_time
+    FROM reservations r
+    WHERE r.type = 'flight'
+      AND NOT EXISTS (SELECT 1 FROM reservation_endpoints e WHERE e.reservation_id = r.id)
+  `).all() as { id: number; metadata: string | null; reservation_time: string | null; reservation_end_time: string | null }[];
+
+  if (pending.length === 0) return;
+
+  load();
+  const insert = db.prepare(`
+    INSERT INTO reservation_endpoints (reservation_id, role, sequence, name, code, lat, lng, timezone, local_time, local_date)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);
+  const markReview = db.prepare('UPDATE reservations SET needs_review = 1 WHERE id = ?');
+
+  let filled = 0;
+  let flagged = 0;
+  for (const r of pending) {
+    if (!r.metadata) { markReview.run(r.id); flagged++; continue; }
+    let meta: any;
+    try { meta = JSON.parse(r.metadata); } catch { markReview.run(r.id); flagged++; continue; }
+
+    const dep = meta.departure_airport ? findByIata(String(meta.departure_airport).slice(0, 3)) : null;
+    const arr = meta.arrival_airport ? findByIata(String(meta.arrival_airport).slice(0, 3)) : null;
+
+    if (!dep || !arr) { markReview.run(r.id); flagged++; continue; }
+
+    const split = (iso: string | null) => {
+      if (!iso) return { date: null as string | null, time: null as string | null };
+      const [date, time] = iso.split('T');
+      return { date: date || null, time: time ? time.slice(0, 5) : null };
+    };
+    const depParts = split(r.reservation_time);
+    const arrParts = split(r.reservation_end_time);
+
+    insert.run(r.id, 'from', 0, dep.city ? `${dep.city} (${dep.iata})` : dep.name, dep.iata, dep.lat, dep.lng, dep.tz, depParts.time, depParts.date);
+    insert.run(r.id, 'to', 1, arr.city ? `${arr.city} (${arr.iata})` : arr.name, arr.iata, arr.lat, arr.lng, arr.tz, arrParts.time, arrParts.date);
+    filled++;
+  }
+
+  console.log(`[airports] Backfill: ${filled} filled, ${flagged} flagged for review`);
+}

server/src/services/atlasService.ts

@@ -264,6 +264,54 @@ function getPlacesForTrips(tripIds: number[]): Place[] {
   return db.prepare(`SELECT * FROM places WHERE trip_id IN (${placeholders})`).all(...tripIds) as Place[];
 }
 
+// ── Country resolution (batch DB cache + sync fallback + background geocoding) ──
+
+function resolvePlaceCountries(places: Place[]): Map<number, string> {
+  const out = new Map<number, string>();
+  const geoPlaces = places.filter(p => p.lat && p.lng);
+  const placeIds = geoPlaces.map(p => p.id);
+
+  const cached = placeIds.length > 0
+    ? (db.prepare(
+        `SELECT place_id, country_code FROM place_regions WHERE place_id IN (${placeIds.map(() => '?').join(',')})`
+      ).all(...placeIds) as { place_id: number; country_code: string }[])
+    : [];
+  const cachedMap = new Map(cached.map(r => [r.place_id, r.country_code]));
+
+  const uncachedForGeocode: Place[] = [];
+  for (const p of places) {
+    const fromDb = cachedMap.get(p.id);
+    if (fromDb) { out.set(p.id, fromDb); continue; }
+    const sync = resolveCountryCodeSync(p);
+    if (sync) { out.set(p.id, sync); continue; }
+    if (p.lat && p.lng && !geocodingInFlight.has(p.id)) {
+      uncachedForGeocode.push(p);
+    }
+  }
+
+  if (uncachedForGeocode.length > 0) {
+    const insertStmt = db.prepare(
+      'INSERT OR REPLACE INTO place_regions (place_id, country_code, region_code, region_name) VALUES (?, ?, ?, ?)'
+    );
+    for (const p of uncachedForGeocode) geocodingInFlight.add(p.id);
+    void (async () => {
+      try {
+        for (const place of uncachedForGeocode) {
+          try {
+            const info = await reverseGeocodeRegion(place.lat!, place.lng!);
+            if (info) insertStmt.run(place.id, info.country_code, info.region_code, info.region_name);
+          } catch { /* continue */ }
+          finally { geocodingInFlight.delete(place.id); }
+        }
+      } catch {
+        for (const p of uncachedForGeocode) geocodingInFlight.delete(p.id);
+      }
+    })();
+  }
+
+  return out;
+}
+
 // ── getStats ────────────────────────────────────────────────────────────────
 
 export async function getStats(userId: number) {
@@ -279,9 +327,10 @@ export async function getStats(userId: number) {
   const places = getPlacesForTrips(tripIds);
 
   interface CountryEntry { code: string; places: { id: number; name: string; lat: number | null; lng: number | null }[]; tripIds: Set<number> }
+  const placeCountries = resolvePlaceCountries(places);
   const countrySet = new Map<string, CountryEntry>();
   for (const place of places) {
-    const code = await resolveCountryCode(place);
+    const code = placeCountries.get(place.id);
     if (code) {
       if (!countrySet.has(code)) {
         countrySet.set(code, { code, places: [], tripIds: new Set() });

server/src/services/kmlImport.ts

@@ -6,6 +6,7 @@ export interface ParsedKmlPlacemark {
   lat: number | null;
   lng: number | null;
   folderName: string | null;
+  routeGeometry: string | null;
 }
 
 export interface KmlPlacemarkNode {
@@ -97,6 +98,26 @@ export function sanitizeKmlDescription(value: unknown): string | null {
   return decoded || null;
 }
 
+export function parseKmlLineStringCoordinates(value: unknown): Array<{ lat: number; lng: number; ele: number | null }> | null {
+  const coordinates = asTrimmedString(value);
+  if (!coordinates) return null;
+
+  const points = coordinates
+    .trim()
+    .split(/\s+/)
+    .map(coord => {
+      const parts = coord.split(',');
+      const lng = Number.parseFloat(parts[0] ?? '');
+      const lat = Number.parseFloat(parts[1] ?? '');
+      const eleRaw = parts[2] != null ? Number.parseFloat(parts[2]) : NaN;
+      if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
+      return { lat, lng, ele: Number.isFinite(eleRaw) ? eleRaw : null };
+    })
+    .filter((p): p is { lat: number; lng: number; ele: number | null } => p !== null);
+
+  return points.length >= 2 ? points : null;
+}
+
 export function parseKmlPointCoordinates(value: unknown): { lat: number; lng: number } | null {
   const coordinates = asTrimmedString(value);
   if (!coordinates) return null;
@@ -167,13 +188,25 @@ export function extractKmlPlacemarkNodes(kmlRoot: any): KmlPlacemarkNode[] {
 }
 
 export function parsePlacemarkNode(node: KmlPlacemarkNode): ParsedKmlPlacemark {
-  const coordinates = parseKmlPointCoordinates(node.placemark?.Point?.coordinates);
+  const pointCoords = parseKmlPointCoordinates(node.placemark?.Point?.coordinates);
+
+  let routeGeometry: string | null = null;
+  let pathFirstPt: { lat: number; lng: number } | null = null;
+  if (!pointCoords) {
+    const linePts = parseKmlLineStringCoordinates(node.placemark?.LineString?.coordinates);
+    if (linePts) {
+      pathFirstPt = { lat: linePts[0].lat, lng: linePts[0].lng };
+      const hasAllEle = linePts.every(p => p.ele !== null);
+      routeGeometry = JSON.stringify(linePts.map(p => hasAllEle ? [p.lat, p.lng, p.ele] : [p.lat, p.lng]));
+    }
+  }
 
   return {
     name: asTrimmedString(node.placemark?.name),
     description: sanitizeKmlDescription(node.placemark?.description),
-    lat: coordinates?.lat ?? null,
-    lng: coordinates?.lng ?? null,
+    lat: pointCoords?.lat ?? pathFirstPt?.lat ?? null,
+    lng: pointCoords?.lng ?? pathFirstPt?.lng ?? null,
     folderName: node.folderName,
+    routeGeometry,
   };
 }

server/src/services/mapsService.ts

@@ -71,6 +71,30 @@ const UA = 'TREK Travel Planner (https://github.com/mauriceboe/TREK)';
 // ── Photo cache (disk-backed) ────────────────────────────────────────────────
 import * as placePhotoCache from './placePhotoCache';
 
+// ── Concurrency limiter for outbound photo fetches ───────────────────────────
+// Caps simultaneous Wikimedia/Google photo requests so a bulk import of hundreds
+// of places cannot monopolise the event loop or trigger external API rate limits.
+const MAX_CONCURRENT_PHOTO_FETCHES = 5;
+let photoFetchActive = 0;
+const photoFetchQueue: Array<() => void> = [];
+
+function acquirePhotoFetchSlot(): Promise<void> {
+  if (photoFetchActive < MAX_CONCURRENT_PHOTO_FETCHES) {
+    photoFetchActive++;
+    return Promise.resolve();
+  }
+  return new Promise(resolve => photoFetchQueue.push(resolve));
+}
+
+function releasePhotoFetchSlot(): void {
+  const next = photoFetchQueue.shift();
+  if (next) {
+    next();
+  } else {
+    photoFetchActive--;
+  }
+}
+
 // ── API key retrieval ────────────────────────────────────────────────────────
 
 export function getMapsKey(userId: number): string | null {
@@ -597,6 +621,8 @@ export async function getPlacePhoto(
   }
 
   const fetchPromise = (async (): Promise<{ filePath: string; attribution: string | null } | null> => {
+    await acquirePhotoFetchSlot();
+    try {
     const apiKey = getMapsKey(userId);
     const isCoordLookup = placeId.startsWith('coords:');
 
@@ -676,6 +702,9 @@ export async function getPlacePhoto(
     }
 
     return { filePath: cached.filePath, attribution };
+    } finally {
+      releasePhotoFetchSlot();
+    }
   })();
 
   placePhotoCache.setInFlight(placeId, fetchPromise);

server/src/services/placePhotoCache.ts

@@ -10,11 +10,14 @@ const ERROR_TTL = 5 * 60 * 1000;
 // In-flight dedup — prevents stampedes when multiple requests hit the same uncached placeId simultaneously
 const inFlight = new Map<string, Promise<{ filePath: string; attribution: string | null } | null>>();
 
-function ensureDir(): void {
-  if (!fs.existsSync(GOOGLE_PHOTO_DIR)) {
-    fs.mkdirSync(GOOGLE_PHOTO_DIR, { recursive: true });
-  }
-}
+// In-memory set of placeIds whose file is confirmed on disk this session.
+// Avoids a synchronous fs.existsSync() call on every cache hit after the first verification.
+const knownOnDisk = new Set<string>();
+
+// Ensure upload dir exists once at startup — avoids sync FS calls inside put() on every write.
+try {
+  fs.mkdirSync(GOOGLE_PHOTO_DIR, { recursive: true });
+} catch { /* already exists */ }
 
 function filePath(placeId: string): string {
   // Hash to avoid filename collisions — coords:lat:lng pseudo-IDs contain characters that
@@ -41,10 +44,15 @@ export function get(placeId: string): CachedPhoto | null {
   if (!row) return null;
 
   const fp = filePath(placeId);
-  if (!fs.existsSync(fp)) {
-    // File missing (e.g. volume wiped) — clear row so it refetches
-    db.prepare('DELETE FROM google_place_photo_meta WHERE place_id = ?').run(placeId);
-    return null;
+
+  if (!knownOnDisk.has(placeId)) {
+    // First time this placeId is checked this session — verify the file exists on disk.
+    // (Guards against volume wipes or manual deletion between server restarts.)
+    if (!fs.existsSync(fp)) {
+      db.prepare('DELETE FROM google_place_photo_meta WHERE place_id = ?').run(placeId);
+      return null;
+    }
+    knownOnDisk.add(placeId);
   }
 
   return { photoUrl: proxyUrl(placeId), filePath: fp, attribution: row.attribution };
@@ -60,19 +68,21 @@ export function getErrored(placeId: string): boolean {
 }
 
 export function markError(placeId: string): void {
+  knownOnDisk.delete(placeId);
   db.prepare(
     'INSERT OR REPLACE INTO google_place_photo_meta (place_id, attribution, fetched_at, error_at) VALUES (?, NULL, ?, ?)'
   ).run(placeId, Date.now(), Date.now());
 }
 
 export async function put(placeId: string, bytes: Buffer, attribution: string | null): Promise<CachedPhoto> {
-  ensureDir();
   const fp = filePath(placeId);
   const tmp = fp + '.tmp';
 
   await fsPromises.writeFile(tmp, bytes);
   await fsPromises.rename(tmp, fp);
 
+  knownOnDisk.add(placeId);
+
   db.prepare(
     'INSERT OR REPLACE INTO google_place_photo_meta (place_id, attribution, fetched_at, error_at) VALUES (?, ?, ?, NULL)'
   ).run(placeId, attribution, Date.now());
@@ -90,6 +100,9 @@ export function setInFlight(placeId: string, promise: Promise<{ filePath: string
 }
 
 export function serveFilePath(placeId: string): string | null {
+  if (knownOnDisk.has(placeId)) return filePath(placeId);
   const fp = filePath(placeId);
-  return fs.existsSync(fp) ? fp : null;
+  if (!fs.existsSync(fp)) return null;
+  knownOnDisk.add(placeId);
+  return fp;
 }

server/src/services/placeService.ts

@@ -240,6 +240,22 @@ export function deletePlace(tripId: string, placeId: string): boolean {
   return true;
 }
 
+export function deletePlacesMany(tripId: string, ids: number[]): number[] {
+  if (ids.length === 0) return [];
+  const selectStmt = db.prepare('SELECT id FROM places WHERE id = ? AND trip_id = ?');
+  const deleteStmt = db.prepare('DELETE FROM places WHERE id = ?');
+  const deleted: number[] = [];
+  const run = db.transaction((list: number[]) => {
+    for (const id of list) {
+      if (!selectStmt.get(id, tripId)) continue;
+      deleteStmt.run(id);
+      deleted.push(id);
+    }
+  });
+  run(ids);
+  return deleted;
+}
+
 // ---------------------------------------------------------------------------
 // Import GPX
 // ---------------------------------------------------------------------------
@@ -326,7 +342,20 @@ function trackInsertedInDedupSet(
   }
 }
 
-export function importGpx(tripId: string, fileBuffer: Buffer) {
+export interface GpxImportOptions {
+  importWaypoints?: boolean;
+  importRoutes?: boolean;
+  importTracks?: boolean;
+}
+
+export interface KmlImportOptions {
+  importPoints?: boolean;
+  importPaths?: boolean;
+}
+
+export function importGpx(tripId: string, fileBuffer: Buffer, opts: GpxImportOptions = {}) {
+  const { importWaypoints = true, importRoutes = true, importTracks = true } = opts;
+
   const parsed = gpxParser.parse(fileBuffer.toString('utf-8'));
   const gpx = parsed?.gpx;
   if (!gpx) return null;
@@ -338,41 +367,46 @@ export function importGpx(tripId: string, fileBuffer: Buffer) {
   const waypoints: WaypointEntry[] = [];
 
   // 1) Parse <wpt> elements (named waypoints / POIs)
-  for (const wpt of gpx.wpt ?? []) {
-    const lat = num(wpt['@_lat']);
-    const lng = num(wpt['@_lon']);
-    if (lat === null || lng === null) continue;
-    waypoints.push({ lat, lng, name: str(wpt.name) || `Waypoint ${waypoints.length + 1}`, description: str(wpt.desc) });
+  if (importWaypoints) {
+    for (const wpt of gpx.wpt ?? []) {
+      const lat = num(wpt['@_lat']);
+      const lng = num(wpt['@_lon']);
+      if (lat === null || lng === null) continue;
+      waypoints.push({ lat, lng, name: str(wpt.name) || `Waypoint ${waypoints.length + 1}`, description: str(wpt.desc) });
+    }
   }
 
-  // 2) If no <wpt>, try <rte> route points as individual places
-  if (waypoints.length === 0) {
+  // 2) Parse <rte> routes as polyline-places (one place per route with route_geometry)
+  if (importRoutes) {
     for (const rte of gpx.rte ?? []) {
-      for (const rtept of rte.rtept ?? []) {
-        const lat = num(rtept['@_lat']);
-        const lng = num(rtept['@_lon']);
-        if (lat === null || lng === null) continue;
-        waypoints.push({ lat, lng, name: str(rtept.name) || `Route Point ${waypoints.length + 1}`, description: str(rtept.desc) });
-      }
+      const pts = (rte.rtept ?? [])
+        .map((pt: Record<string, unknown>) => ({ lat: num(pt['@_lat']), lng: num(pt['@_lon']), ele: num(pt['ele']) }))
+        .filter((p: { lat: number | null; lng: number | null; ele: number | null }) => p.lat !== null && p.lng !== null) as Array<{ lat: number; lng: number; ele: number | null }>;
+      if (pts.length === 0) continue;
+      const hasAllEle = pts.every(p => p.ele !== null);
+      const routeGeometry = pts.map(p => hasAllEle ? [p.lat, p.lng, p.ele] : [p.lat, p.lng]);
+      waypoints.push({ lat: pts[0].lat, lng: pts[0].lng, name: str(rte.name) || 'GPX Route', description: str(rte.desc), routeGeometry: JSON.stringify(routeGeometry) });
     }
   }
 
-  // 3) Extract full track geometry from <trk> (always, even if <wpt> were found)
-  for (const trk of gpx.trk ?? []) {
-    const trackPoints: { lat: number; lng: number; ele: number | null }[] = [];
-    for (const seg of trk.trkseg ?? []) {
-      for (const pt of seg.trkpt ?? []) {
-        const lat = num(pt['@_lat']);
-        const lng = num(pt['@_lon']);
-        if (lat === null || lng === null) continue;
-        trackPoints.push({ lat, lng, ele: num(pt.ele) });
+  // 3) Extract full track geometry from <trk>
+  if (importTracks) {
+    for (const trk of gpx.trk ?? []) {
+      const trackPoints: { lat: number; lng: number; ele: number | null }[] = [];
+      for (const seg of trk.trkseg ?? []) {
+        for (const pt of seg.trkpt ?? []) {
+          const lat = num(pt['@_lat']);
+          const lng = num(pt['@_lon']);
+          if (lat === null || lng === null) continue;
+          trackPoints.push({ lat, lng, ele: num(pt.ele) });
+        }
       }
+      if (trackPoints.length === 0) continue;
+      const start = trackPoints[0];
+      const hasAllEle = trackPoints.every(p => p.ele !== null);
+      const routeGeometry = trackPoints.map(p => hasAllEle ? [p.lat, p.lng, p.ele] : [p.lat, p.lng]);
+      waypoints.push({ lat: start.lat, lng: start.lng, name: str(trk.name) || 'GPX Track', description: str(trk.desc), routeGeometry: JSON.stringify(routeGeometry) });
     }
-    if (trackPoints.length === 0) continue;
-    const start = trackPoints[0];
-    const hasAllEle = trackPoints.every(p => p.ele !== null);
-    const routeGeometry = trackPoints.map(p => hasAllEle ? [p.lat, p.lng, p.ele] : [p.lat, p.lng]);
-    waypoints.push({ lat: start.lat, lng: start.lng, name: str(trk.name) || 'GPX Track', description: str(trk.desc), routeGeometry: JSON.stringify(routeGeometry) });
   }
 
   if (waypoints.length === 0) return null;
@@ -401,7 +435,8 @@ export function importGpx(tripId: string, fileBuffer: Buffer) {
   return { places: created, count: created.length, skipped };
 }
 
-export function importKmlPlaces(tripId: string, fileBuffer: Buffer): PlaceImportResult {
+export function importKmlPlaces(tripId: string, fileBuffer: Buffer, opts: KmlImportOptions = {}): PlaceImportResult {
+  const { importPoints = true, importPaths = true } = opts;
   const decoded = decodeUtf8WithWarning(fileBuffer);
 
   const validationResult = XMLValidator.validate(decoded.text);
@@ -430,19 +465,32 @@ export function importKmlPlaces(tripId: string, fileBuffer: Buffer): PlaceImport
   let dupCount = 0;
 
   const insertStmt = db.prepare(`
-    INSERT INTO places (trip_id, name, description, lat, lng, category_id, transport_mode)
-    VALUES (?, ?, ?, ?, ?, ?, 'walking')
+    INSERT INTO places (trip_id, name, description, lat, lng, category_id, transport_mode, route_geometry)
+    VALUES (?, ?, ?, ?, ?, ?, 'walking', ?)
   `);
 
   const insertAll = db.transaction(() => {
     let fallbackIndex = 1;
     for (const node of placemarkNodes) {
       const parsedPlacemark = parsePlacemarkNode(node);
+      const isPath = parsedPlacemark.routeGeometry !== null;
 
-      // KML geometry support is intentionally limited to <Placemark><Point> coordinates.
+      // Unsupported geometry type (polygon, multi-geometry, no geometry, etc.)
       if (parsedPlacemark.lat === null || parsedPlacemark.lng === null) {
         summary.skippedCount += 1;
-        summary.errors.push(`Skipped Placemark ${fallbackIndex}: missing Point coordinates.`);
+        summary.errors.push(`Skipped Placemark ${fallbackIndex}: unsupported geometry type.`);
+        fallbackIndex += 1;
+        continue;
+      }
+
+      // Type filtering: respect importPoints / importPaths opts
+      if (isPath && !importPaths) {
+        summary.skippedCount += 1;
+        fallbackIndex += 1;
+        continue;
+      }
+      if (!isPath && !importPoints) {
+        summary.skippedCount += 1;
         fallbackIndex += 1;
         continue;
       }
@@ -466,6 +514,7 @@ export function importKmlPlaces(tripId: string, fileBuffer: Buffer): PlaceImport
         parsedPlacemark.lat,
         parsedPlacemark.lng,
         categoryId,
+        parsedPlacemark.routeGeometry,
       );
 
       const place = getPlaceWithTags(Number(result.lastInsertRowid));
@@ -514,15 +563,15 @@ export async function unpackKmzToKml(
   return preferredEntry.buffer();
 }
 
-export async function importKmzPlaces(tripId: string, kmzBuffer: Buffer): Promise<PlaceImportResult> {
+export async function importKmzPlaces(tripId: string, kmzBuffer: Buffer, opts: KmlImportOptions = {}): Promise<PlaceImportResult> {
   const kmlBuffer = await unpackKmzToKml(kmzBuffer);
-  return importKmlPlaces(tripId, kmlBuffer);
+  return importKmlPlaces(tripId, kmlBuffer, opts);
 }
 
-export async function importMapFile(tripId: string, fileBuffer: Buffer, filename: string): Promise<PlaceImportResult> {
+export async function importMapFile(tripId: string, fileBuffer: Buffer, filename: string, opts: KmlImportOptions = {}): Promise<PlaceImportResult> {
   const ext = filename.toLowerCase().split('.').pop();
-  if (ext === 'kmz') return importKmzPlaces(tripId, fileBuffer);
-  if (ext === 'kml') return importKmlPlaces(tripId, fileBuffer);
+  if (ext === 'kmz') return importKmzPlaces(tripId, fileBuffer, opts);
+  if (ext === 'kml') return importKmlPlaces(tripId, fileBuffer, opts);
   throw new Error(`Unsupported map file format: .${ext}. Please upload a .kml or .kmz file.`);
 }
 

server/src/services/reservationService.ts

@@ -1,10 +1,59 @@
 import { db, canAccessTrip } from '../db/database';
 import { Reservation } from '../types';
 
+export interface ReservationEndpoint {
+  id?: number;
+  reservation_id?: number;
+  role: 'from' | 'to' | 'stop';
+  sequence: number;
+  name: string;
+  code: string | null;
+  lat: number;
+  lng: number;
+  timezone: string | null;
+  local_time: string | null;
+  local_date: string | null;
+}
+
+type EndpointInput = Omit<ReservationEndpoint, 'id' | 'reservation_id' | 'sequence'> & { sequence?: number };
+
 export function verifyTripAccess(tripId: string | number, userId: number) {
   return canAccessTrip(tripId, userId);
 }
 
+function loadEndpointsByTrip(tripId: string | number): Map<number, ReservationEndpoint[]> {
+  const rows = db.prepare(`
+    SELECT e.* FROM reservation_endpoints e
+    JOIN reservations r ON e.reservation_id = r.id
+    WHERE r.trip_id = ?
+    ORDER BY e.reservation_id, e.sequence
+  `).all(tripId) as ReservationEndpoint[];
+  const map = new Map<number, ReservationEndpoint[]>();
+  for (const r of rows) {
+    const list = map.get(r.reservation_id!) ?? [];
+    list.push(r);
+    map.set(r.reservation_id!, list);
+  }
+  return map;
+}
+
+function loadEndpoints(reservationId: number): ReservationEndpoint[] {
+  return db.prepare(
+    'SELECT * FROM reservation_endpoints WHERE reservation_id = ? ORDER BY sequence'
+  ).all(reservationId) as ReservationEndpoint[];
+}
+
+const saveEndpoints = db.transaction((reservationId: number, endpoints: EndpointInput[]) => {
+  db.prepare('DELETE FROM reservation_endpoints WHERE reservation_id = ?').run(reservationId);
+  const insert = db.prepare(`
+    INSERT INTO reservation_endpoints (reservation_id, role, sequence, name, code, lat, lng, timezone, local_time, local_date)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);
+  endpoints.forEach((e, i) => {
+    insert.run(reservationId, e.role, e.sequence ?? i, e.name, e.code ?? null, e.lat, e.lng, e.timezone ?? null, e.local_time ?? null, e.local_date ?? null);
+  });
+});
+
 export function listReservations(tripId: string | number) {
   const reservations = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
@@ -18,7 +67,6 @@ export function listReservations(tripId: string | number) {
     ORDER BY r.reservation_time ASC, r.created_at ASC
   `).all(tripId) as any[];
 
-  // Attach per-day positions for multi-day reservations
   const dayPositions = db.prepare(`
     SELECT rdp.reservation_id, rdp.day_id, rdp.position
     FROM reservation_day_positions rdp
@@ -32,15 +80,18 @@ export function listReservations(tripId: string | number) {
     posMap.get(dp.reservation_id)![dp.day_id] = dp.position;
   }
 
+  const endpointsMap = loadEndpointsByTrip(tripId);
+
   for (const r of reservations) {
     r.day_positions = posMap.get(r.id) || null;
+    r.endpoints = endpointsMap.get(r.id) || [];
   }
 
   return reservations;
 }
 
 export function getReservationWithJoins(id: string | number) {
-  return db.prepare(`
+  const row = db.prepare(`
     SELECT r.*, d.day_number, p.name as place_name, r.assignment_id,
       ap.place_id as accommodation_place_id, acc_p.name as accommodation_name
     FROM reservations r
@@ -49,7 +100,10 @@ export function getReservationWithJoins(id: string | number) {
     LEFT JOIN day_accommodations ap ON r.accommodation_id = ap.id
     LEFT JOIN places acc_p ON ap.place_id = acc_p.id
     WHERE r.id = ?
-  `).get(id);
+  `).get(id) as any;
+  if (!row) return undefined;
+  row.endpoints = loadEndpoints(row.id);
+  return row;
 }
 
 interface CreateAccommodation {
@@ -69,6 +123,7 @@ interface CreateReservationData {
   confirmation_number?: string;
   notes?: string;
   day_id?: number;
+  end_day_id?: number;
   place_id?: number;
   assignment_id?: number;
   status?: string;
@@ -76,13 +131,16 @@ interface CreateReservationData {
   accommodation_id?: number;
   metadata?: any;
   create_accommodation?: CreateAccommodation;
+  endpoints?: EndpointInput[];
+  needs_review?: boolean;
 }
 
 export function createReservation(tripId: string | number, data: CreateReservationData): { reservation: any; accommodationCreated: boolean } {
   const {
     title, reservation_time, reservation_end_time, location,
-    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    confirmation_number, notes, day_id, end_day_id, place_id, assignment_id,
+    status, type, accommodation_id, metadata, create_accommodation,
+    endpoints, needs_review
   } = data;
 
   let accommodationCreated = false;
@@ -101,11 +159,12 @@ export function createReservation(tripId: string | number, data: CreateReservati
   }
 
   const result = db.prepare(`
-    INSERT INTO reservations (trip_id, day_id, place_id, assignment_id, title, reservation_time, reservation_end_time, location, confirmation_number, notes, status, type, accommodation_id, metadata)
-    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    INSERT INTO reservations (trip_id, day_id, end_day_id, place_id, assignment_id, title, reservation_time, reservation_end_time, location, confirmation_number, notes, status, type, accommodation_id, metadata, needs_review)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `).run(
     tripId,
     day_id || null,
+    end_day_id ?? null,
     place_id || null,
     assignment_id || null,
     title,
@@ -117,9 +176,14 @@ export function createReservation(tripId: string | number, data: CreateReservati
     status || 'pending',
     type || 'other',
     resolvedAccommodationId,
-    metadata ? JSON.stringify(metadata) : null
+    metadata ? JSON.stringify(metadata) : null,
+    needs_review ? 1 : 0
   );
 
+  if (endpoints && endpoints.length > 0) {
+    saveEndpoints(Number(result.lastInsertRowid), endpoints);
+  }
+
   // Sync check-in/out to accommodation if linked
   if (accommodation_id && metadata) {
     const meta = typeof metadata === 'string' ? JSON.parse(metadata) : metadata;
@@ -180,6 +244,7 @@ interface UpdateReservationData {
   confirmation_number?: string;
   notes?: string;
   day_id?: number;
+  end_day_id?: number | null;
   place_id?: number;
   assignment_id?: number;
   status?: string;
@@ -187,13 +252,16 @@ interface UpdateReservationData {
   accommodation_id?: number;
   metadata?: any;
   create_accommodation?: CreateAccommodation;
+  endpoints?: EndpointInput[];
+  needs_review?: boolean;
 }
 
 export function updateReservation(id: string | number, tripId: string | number, data: UpdateReservationData, current: Reservation): { reservation: any; accommodationChanged: boolean } {
   const {
     title, reservation_time, reservation_end_time, location,
-    confirmation_number, notes, day_id, place_id, assignment_id,
-    status, type, accommodation_id, metadata, create_accommodation
+    confirmation_number, notes, day_id, end_day_id, place_id, assignment_id,
+    status, type, accommodation_id, metadata, create_accommodation,
+    endpoints, needs_review
   } = data;
 
   let accommodationChanged = false;
@@ -229,12 +297,14 @@ export function updateReservation(id: string | number, tripId: string | number,
       confirmation_number = ?,
       notes = ?,
       day_id = ?,
+      end_day_id = ?,
       place_id = ?,
       assignment_id = ?,
       status = COALESCE(?, status),
       type = COALESCE(?, type),
       accommodation_id = ?,
-      metadata = ?
+      metadata = ?,
+      needs_review = COALESCE(?, needs_review)
     WHERE id = ?
   `).run(
     title || null,
@@ -244,15 +314,21 @@ export function updateReservation(id: string | number, tripId: string | number,
     confirmation_number !== undefined ? (confirmation_number || null) : current.confirmation_number,
     notes !== undefined ? (notes || null) : current.notes,
     day_id !== undefined ? (day_id || null) : current.day_id,
+    end_day_id !== undefined ? (end_day_id ?? null) : (current as any).end_day_id ?? null,
     place_id !== undefined ? (place_id || null) : current.place_id,
     assignment_id !== undefined ? (assignment_id || null) : current.assignment_id,
     status || null,
     type || null,
     resolvedAccId,
     metadata !== undefined ? (metadata ? JSON.stringify(metadata) : null) : current.metadata,
+    needs_review === undefined ? null : (needs_review ? 1 : 0),
     id
   );
 
+  if (endpoints !== undefined) {
+    saveEndpoints(Number(id), endpoints);
+  }
+
   // Sync check-in/out to accommodation if linked
   const resolvedMeta = metadata !== undefined ? metadata : (current.metadata ? JSON.parse(current.metadata as string) : null);
   if (resolvedAccId && resolvedMeta) {

server/src/services/weatherService.ts

@@ -95,6 +95,7 @@ const WMO_DESCRIPTION_EN: Record<number, string> = {
 // ── Cache management ────────────────────────────────────────────────────
 
 const weatherCache = new Map<string, { data: WeatherResult; expiresAt: number }>();
+const inFlight = new Map<string, Promise<WeatherResult>>();
 const CACHE_MAX_ENTRIES = 1000;
 const CACHE_PRUNE_TARGET = 500;
 const CACHE_CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
@@ -146,7 +147,7 @@ export function estimateCondition(tempAvg: number, precipMm: number): string {
 
 // ── getWeather ──────────────────────────────────────────────────────────
 
-export async function getWeather(
+async function _getWeatherImpl(
   lat: string,
   lng: string,
   date: string | undefined,
@@ -281,9 +282,27 @@ export async function getWeather(
   return result;
 }
 
+export async function getWeather(
+  lat: string,
+  lng: string,
+  date: string | undefined,
+  lang: string,
+): Promise<WeatherResult> {
+  const ck = cacheKey(lat, lng, date);
+  const cached = getCached(ck);
+  if (cached) return cached;
+
+  const inFlightKey = `${ck}:${lang}`;
+  const existing = inFlight.get(inFlightKey);
+  if (existing) return existing;
+  const promise = _getWeatherImpl(lat, lng, date, lang);
+  inFlight.set(inFlightKey, promise);
+  try { return await promise; } finally { inFlight.delete(inFlightKey); }
+}
+
 // ── getDetailedWeather ──────────────────────────────────────────────────
 
-export async function getDetailedWeather(
+async function _getDetailedWeatherImpl(
   lat: string,
   lng: string,
   date: string,
@@ -434,6 +453,24 @@ export async function getDetailedWeather(
   return result;
 }
 
+export async function getDetailedWeather(
+  lat: string,
+  lng: string,
+  date: string,
+  lang: string,
+): Promise<WeatherResult> {
+  const ck = `detailed_${cacheKey(lat, lng, date)}`;
+  const cached = getCached(ck);
+  if (cached) return cached;
+
+  const inFlightKey = `${ck}:${lang}`;
+  const existing = inFlight.get(inFlightKey);
+  if (existing) return existing;
+  const promise = _getDetailedWeatherImpl(lat, lng, date, lang);
+  inFlight.set(inFlightKey, promise);
+  try { return await promise; } finally { inFlight.delete(inFlightKey); }
+}
+
 // ── ApiError ────────────────────────────────────────────────────────────
 
 export class ApiError extends Error {

server/src/types.ts

@@ -139,10 +139,25 @@ export interface BudgetItemMember {
   budget_item_id?: number;
 }
 
+export interface ReservationEndpoint {
+  id: number;
+  reservation_id: number;
+  role: 'from' | 'to' | 'stop';
+  sequence: number;
+  name: string;
+  code: string | null;
+  lat: number;
+  lng: number;
+  timezone: string | null;
+  local_time: string | null;
+  local_date: string | null;
+}
+
 export interface Reservation {
   id: number;
   trip_id: number;
   day_id?: number | null;
+  end_day_id?: number | null;
   place_id?: number | null;
   assignment_id?: number | null;
   title: string;
@@ -155,6 +170,8 @@ export interface Reservation {
   type: string;
   accommodation_id?: number | null;
   metadata?: string | null;
+  needs_review?: number;
+  endpoints?: ReservationEndpoint[];
   created_at?: string;
   day_number?: number;
   place_name?: string;

server/tests/integration/places.test.ts

@@ -771,7 +771,7 @@ describe('KML/KMZ Import', () => {
     expect(res.body.summary.totalPlacemarks).toBe(3);
     expect(res.body.summary.skippedCount).toBe(1);
     expect(Array.isArray(res.body.summary.errors)).toBe(true);
-    expect(res.body.summary.errors.join(' ')).toContain('missing Point coordinates');
+    expect(res.body.summary.errors.join(' ')).toContain('unsupported geometry type');
 
     const nested = res.body.places.find((p: any) => p.name === 'Nested Place');
     expect(nested).toBeDefined();
@@ -862,7 +862,7 @@ describe('GPX Import — edge cases', () => {
       .set('Cookie', authCookie(user.id))
       .attach('file', emptyGpx, { filename: 'empty.gpx', contentType: 'application/gpx+xml' });
     expect(res.status).toBe(400);
-    expect(res.body.error).toMatch(/no waypoints/i);
+    expect(res.body.error).toMatch(/no matching places/i);
   });
 });
 

server/tests/unit/services/placeService.test.ts

@@ -277,19 +277,24 @@ describe('importGpx', () => {
     expect(result.places[1].name).toBe('London');
   });
 
-  it('PLACE-SVC-022 — falls back to <rte> route points when no <wpt> elements exist', () => {
+  it('PLACE-SVC-022 — imports <rte> as a single polyline-place with routeGeometry', () => {
     const { user } = createUser(testDb);
     const trip = createTrip(testDb, user.id);
     const gpx = Buffer.from(`<?xml version="1.0"?><gpx version="1.1">
       <rte>
+        <name>My Route</name>
         <rtept lat="48.8566" lon="2.3522"><name>Start</name></rtept>
         <rtept lat="51.5074" lon="-0.1278"><name>End</name></rtept>
       </rte>
     </gpx>`);
     const result = importGpx(String(trip.id), gpx) as any;
-    expect(result.places).toHaveLength(2);
-    expect(result.places[0].name).toBe('Start');
-    expect(result.places[1].name).toBe('End');
+    expect(result.places).toHaveLength(1);
+    expect(result.places[0].name).toBe('My Route');
+    expect(result.places[0].lat).toBe(48.8566);
+    expect(result.places[0].lng).toBe(2.3522);
+    expect(result.places[0].route_geometry).toBeTruthy();
+    const coords = JSON.parse(result.places[0].route_geometry);
+    expect(coords).toHaveLength(2);
   });
 
   it('PLACE-SVC-023 — imports <trk> track as a single place with routeGeometry', () => {