v2.6.0 — Collab overhaul, route travel times, chat & notes redesign

## Collab — Complete Redesign - iMessage-style live chat with blue bubbles, grouped messages, date separators - Emoji reactions via right-click (desktop) or double-tap (mobile) - Twemoji (Apple-style) emoji picker with categories - Link previews with OG image/title/description - Soft-delete messages with "deleted a message" placeholder - Message reactions with real-time WebSocket sync - Chat timestamps respect 12h/24h setting and timezone ## Collab Notes - Redesigned note cards with colored header bar (booking-card style) - 2-column grid layout (desktop), 1-column (mobile) - Category settings modal for managing categories with colors - File/image attachments on notes with mini-preview thumbnails - Website links with OG image preview on note cards - File preview portal (lightbox for images, inline viewer for PDF/TXT) - Note files appear in Files tab with "From Collab Notes" badge - Pin highlighting with tinted background - Author avatar chip in header bar with custom tooltip ## Collab Polls - Complete rewrite — clean Apple-style poll cards - Animated progress bars with vote percentages - Blue check circles for own votes, voter avatars - Create poll modal with multi-choice toggle - Active/closed poll sections - Custom tooltips on voter chips ## What's Next Widget - New widget showing upcoming trip activities - Time display with "until" separator - Participant chips per activity - Day grouping (Today, Tomorrow, dates) - Respects 12h/24h and locale settings ## Route Travel Times - Auto-calculated walking + driving times via OSRM (free, no API key) - Floating badge on each route segment between places - Walking person icon + car icon with times - Hides when zoomed out (< zoom 16) - Toggle in Settings > Display to enable/disable ## Other Improvements - Collab addon enabled by default for new installations - Coming Soon removed from Collab in admin settings - Tab state persisted across page reloads (sessionStorage) - Day sidebar expanded/collapsed state persisted - File preview with extension badges (PDF, TXT, etc.) in Files tab - Collab Notes filter tab in Files - Reservations section in Day Detail view - Dark mode fix for invite button text color - Chat scroll hidden (no visible scrollbar) - Mobile: tab icons removed for space, touch-friendly UI - Fixed 6 backend data structure bugs in Collab (polls, chat, notes) - Soft-delete for chat messages (persists in history) - Message reactions table (migration 28) - Note attachments via trip_files with note_id (migration 30) ## Database Migrations - Migration 27: budget_item_members table - Migration 28: collab_message_reactions table - Migration 29: soft-delete column on collab_messages - Migration 30: note_id on trip_files, website on collab_notes
2026-03-25 22:59:39 +01:00
parent 17288f9a0e
commit 068b90ed72
21 changed files with 2367 additions and 2013 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "nomad-client",
-  "version": "2.5.7",
+  "version": "2.6.0",
  "private": true,
  "type": "module",
  "scripts": {
--- a/client/src/api/client.js
+++ b/client/src/api/client.js
@@ -204,6 +204,8 @@ export const collabApi = {
  createNote: (tripId, data) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
  updateNote: (tripId, id, data) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
  deleteNote: (tripId, id) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
+  uploadNoteFile: (tripId, noteId, formData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  deleteNoteFile: (tripId, noteId, fileId) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
  // Polls
  getPolls: (tripId) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
  createPoll: (tripId, data) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
@@ -214,6 +216,8 @@ export const collabApi = {
  getMessages: (tripId, before) => apiClient.get(`/trips/${tripId}/collab/messages${before ? `?before=${before}` : ''}`).then(r => r.data),
  sendMessage: (tripId, data) => apiClient.post(`/trips/${tripId}/collab/messages`, data).then(r => r.data),
  deleteMessage: (tripId, id) => apiClient.delete(`/trips/${tripId}/collab/messages/${id}`).then(r => r.data),
+  reactMessage: (tripId, id, emoji) => apiClient.post(`/trips/${tripId}/collab/messages/${id}/react`, { emoji }).then(r => r.data),
+  linkPreview: (tripId, url) => apiClient.get(`/trips/${tripId}/collab/link-preview?url=${encodeURIComponent(url)}`).then(r => r.data),
 }

 export const backupApi = {
--- a/client/src/components/Admin/AddonManager.jsx
+++ b/client/src/components/Admin/AddonManager.jsx
@@ -118,7 +118,7 @@ export default function AddonManager() {
 }

 function AddonRow({ addon, onToggle, t }) {
-  const isComingSoon = addon.id === 'collab'
+  const isComingSoon = false
  return (
    <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
      {/* Icon */}
--- a/client/src/components/Collab/CollabChat.jsx
+++ b/client/src/components/Collab/CollabChat.jsx
--- a/client/src/components/Collab/CollabNotes.jsx
+++ b/client/src/components/Collab/CollabNotes.jsx
--- a/client/src/components/Collab/CollabPanel.jsx
+++ b/client/src/components/Collab/CollabPanel.jsx
@@ -1,34 +1,101 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useAuthStore } from '../../store/authStore'
+import { useTranslation } from '../../i18n'
+import { MessageCircle, StickyNote, BarChart3, Sparkles } from 'lucide-react'
 import CollabChat from './CollabChat'
 import CollabNotes from './CollabNotes'
 import CollabPolls from './CollabPolls'
+import WhatsNextWidget from './WhatsNextWidget'

-export default function CollabPanel({ tripId }) {
+function useIsDesktop(breakpoint = 1024) {
+  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= breakpoint)
+    window.addEventListener('resize', check)
+    return () => window.removeEventListener('resize', check)
+  }, [breakpoint])
+  return isDesktop
+}
+
+const card = {
+  display: 'flex', flexDirection: 'column',
+  background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)',
+  overflow: 'hidden', minHeight: 0,
+}
+
+export default function CollabPanel({ tripId, tripMembers = [] }) {
  const { user } = useAuthStore()
+  const { t } = useTranslation()
+  const [mobileTab, setMobileTab] = useState('chat')
+  const isDesktop = useIsDesktop()

-  return (
-    <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '16px' }}>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4" style={{ alignItems: 'start' }}>
+  const tabs = [
+    { id: 'chat', label: t('collab.tabs.chat') || 'Chat', icon: MessageCircle },
+    { id: 'notes', label: t('collab.tabs.notes') || 'Notes', icon: StickyNote },
+    { id: 'polls', label: t('collab.tabs.polls') || 'Polls', icon: BarChart3 },
+    { id: 'next', label: t('collab.whatsNext.title') || "What's Next", icon: Sparkles },
+  ]

-          {/* Chat — takes 1 column, full height */}
-          <div style={{ background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)', overflow: 'hidden', height: 500 }}>
-            <CollabChat tripId={tripId} currentUser={user} />
-          </div>
+  if (isDesktop) {
+    return (
+      <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
+        {/* Chat — left, fixed width */}
+        <div style={{ ...card, flex: '0 0 380px' }}>
+          <CollabChat tripId={tripId} currentUser={user} />
+        </div>

-          {/* Notes — takes 1 column */}
-          <div style={{ background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)', overflow: 'hidden', maxHeight: 500, display: 'flex', flexDirection: 'column' }}>
+        {/* Right column: Notes top, Polls + What's Next bottom */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
+          {/* Notes — top */}
+          <div style={{ ...card, flex: 1 }}>
            <CollabNotes tripId={tripId} currentUser={user} />
          </div>

-          {/* Polls — takes 1 column */}
-          <div style={{ background: 'var(--bg-card)', borderRadius: 16, border: '1px solid var(--border-faint)', overflow: 'hidden', maxHeight: 500, display: 'flex', flexDirection: 'column' }}>
-            <CollabPolls tripId={tripId} currentUser={user} />
+          {/* Polls + What's Next — bottom row */}
+          <div style={{ flex: 1, display: 'flex', gap: 12, overflow: 'hidden', minHeight: 0 }}>
+            <div style={{ ...card, flex: 1 }}>
+              <CollabPolls tripId={tripId} currentUser={user} />
+            </div>
+            <div style={{ ...card, flex: 1 }}>
+              <WhatsNextWidget tripMembers={tripMembers} />
+            </div>
          </div>
-
        </div>
      </div>
+    )
+  }
+
+  // Mobile: tab bar + single panel
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'absolute', inset: 0 }}>
+      <div style={{
+        display: 'flex', gap: 2, padding: '8px 12px', borderBottom: '1px solid var(--border-faint)',
+        background: 'var(--bg-card)', flexShrink: 0,
+      }}>
+        {tabs.map(tab => {
+          const Icon = tab.icon
+          const active = mobileTab === tab.id
+          return (
+            <button key={tab.id} onClick={() => setMobileTab(tab.id)} style={{
+              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+              padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
+              background: active ? 'var(--accent)' : 'transparent',
+              color: active ? 'var(--accent-text)' : 'var(--text-muted)',
+              fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
+              transition: 'all 0.15s',
+            }}>
+              {tab.label}
+            </button>
+          )
+        })}
+      </div>
+
+      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+        {mobileTab === 'chat' && <CollabChat tripId={tripId} currentUser={user} />}
+        {mobileTab === 'notes' && <CollabNotes tripId={tripId} currentUser={user} />}
+        {mobileTab === 'polls' && <CollabPolls tripId={tripId} currentUser={user} />}
+        {mobileTab === 'next' && <WhatsNextWidget tripMembers={tripMembers} />}
+      </div>
    </div>
  )
 }
--- a/client/src/components/Collab/CollabPolls.jsx
+++ b/client/src/components/Collab/CollabPolls.jsx
--- a/client/src/components/Collab/WhatsNextWidget.jsx
+++ b/client/src/components/Collab/WhatsNextWidget.jsx
@@ -0,0 +1,189 @@
+import React, { useMemo } from 'react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { MapPin, Clock, Calendar, Users, Sparkles } from 'lucide-react'
+
+function formatTime(timeStr, is12h) {
+  if (!timeStr) return ''
+  const [h, m] = timeStr.split(':').map(Number)
+  if (is12h) {
+    const period = h >= 12 ? 'PM' : 'AM'
+    const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
+    return `${h12}:${String(m).padStart(2, '0')} ${period}`
+  }
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
+function formatDayLabel(date, t, locale) {
+  const d = new Date(date + 'T00:00:00')
+  const now = new Date()
+  const tomorrow = new Date(); tomorrow.setDate(now.getDate() + 1)
+
+  if (d.toDateString() === now.toDateString()) return t('collab.whatsNext.today') || 'Today'
+  if (d.toDateString() === tomorrow.toDateString()) return t('collab.whatsNext.tomorrow') || 'Tomorrow'
+
+  return d.toLocaleDateString(locale || undefined, { weekday: 'short', day: 'numeric', month: 'short' })
+}
+
+export default function WhatsNextWidget({ tripMembers = [] }) {
+  const { days, assignments } = useTripStore()
+  const { t, locale } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+
+  const upcoming = useMemo(() => {
+    const now = new Date()
+    const nowDate = now.toISOString().split('T')[0]
+    const nowTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
+    const items = []
+
+    for (const day of (days || [])) {
+      if (!day.date) continue
+      const dayAssignments = assignments[String(day.id)] || []
+      for (const a of dayAssignments) {
+        if (!a.place) continue
+        // Include: today (future times) + all future days
+        const isFutureDay = day.date > nowDate
+        const isTodayFuture = day.date === nowDate && (!a.place.place_time || a.place.place_time >= nowTime)
+        if (isFutureDay || isTodayFuture) {
+          items.push({
+            id: a.id,
+            name: a.place.name,
+            time: a.place.place_time,
+            endTime: a.place.end_time,
+            date: day.date,
+            dayTitle: day.title,
+            category: a.place.category,
+            participants: (a.participants && a.participants.length > 0)
+              ? a.participants
+              : tripMembers.map(m => ({ user_id: m.id, username: m.username, avatar: m.avatar })),
+            address: a.place.address,
+          })
+        }
+      }
+    }
+
+    items.sort((a, b) => {
+      const da = a.date + (a.time || '99:99')
+      const db = b.date + (b.time || '99:99')
+      return da.localeCompare(db)
+    })
+
+    return items.slice(0, 8)
+  }, [days, assignments, tripMembers])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      {/* Header */}
+      <div style={{
+        padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
+      }}>
+        <Sparkles size={14} color="var(--text-faint)" />
+        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
+          {t('collab.whatsNext.title') || "What's Next"}
+        </span>
+      </div>
+
+      {/* List */}
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '8px 10px' }}>
+        {upcoming.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '48px 20px', textAlign: 'center' }}>
+            <Calendar size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.whatsNext.empty')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.whatsNext.emptyHint')}</div>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {upcoming.map((item, idx) => {
+              const prevItem = upcoming[idx - 1]
+              const showDayHeader = !prevItem || prevItem.date !== item.date
+
+              return (
+                <React.Fragment key={item.id}>
+                  {showDayHeader && (
+                    <div style={{
+                      fontSize: 10, fontWeight: 500, color: 'var(--text-faint)',
+                      textTransform: 'uppercase', letterSpacing: 0.5,
+                      padding: idx === 0 ? '0 4px 4px' : '8px 4px 4px',
+                    }}>
+                      {formatDayLabel(item.date, t, locale)}
+                      {item.dayTitle ? ` — ${item.dayTitle}` : ''}
+                    </div>
+                  )}
+
+                  <div style={{
+                    display: 'flex', gap: 10, padding: '8px 10px', borderRadius: 10,
+                    background: 'var(--bg-secondary)', transition: 'background 0.1s',
+                  }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
+                  >
+                    {/* Time column */}
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 44, flexShrink: 0 }}>
+                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                        {item.time ? formatTime(item.time, is12h) : 'TBD'}
+                      </span>
+                      {item.endTime && (
+                        <>
+                          <span style={{ fontSize: 7, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
+                            {t('collab.whatsNext.until') || 'bis'}
+                          </span>
+                          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                            {formatTime(item.endTime, is12h)}
+                          </span>
+                        </>
+                      )}
+                    </div>
+
+                    {/* Divider */}
+                    <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-faint)', flexShrink: 0, margin: '2px 0' }} />
+
+                    {/* Details */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {item.name}
+                      </div>
+                      {item.address && (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 2 }}>
+                          <MapPin size={9} color="var(--text-faint)" style={{ flexShrink: 0 }} />
+                          <span style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {item.address}
+                          </span>
+                        </div>
+                      )}
+
+                      {/* Participants */}
+                      {item.participants.length > 0 && (
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 5 }}>
+                          {item.participants.map(p => (
+                            <div key={p.user_id} style={{
+                              display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 3px',
+                              borderRadius: 99, background: 'var(--bg-tertiary)', border: '1px solid var(--border-faint)',
+                            }}>
+                              <div style={{
+                                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-secondary)',
+                                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                fontSize: 7, fontWeight: 700, color: 'var(--text-muted)',
+                                overflow: 'hidden', flexShrink: 0,
+                              }}>
+                                {p.avatar
+                                  ? <img src={`/uploads/avatars/${p.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                  : p.username?.[0]?.toUpperCase()
+                                }
+                              </div>
+                              <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </React.Fragment>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/client/src/components/Files/FileManager.jsx
+++ b/client/src/components/Files/FileManager.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import ReactDOM from 'react-dom'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'

@@ -128,6 +128,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
    if (filterType === 'pdf') return f.mime_type === 'application/pdf'
    if (filterType === 'image') return isImage(f.mime_type)
    if (filterType === 'doc') return (f.mime_type || '').includes('word') || (f.mime_type || '').includes('excel') || (f.mime_type || '').includes('text')
+    if (filterType === 'collab') return !!f.note_id
    return true
  })

@@ -243,6 +244,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
          { 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 => (
          <button key={tab.id} onClick={() => setFilterType(tab.id)} style={{
            padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer', fontSize: 12,
@@ -273,7 +275,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
              const linkedReservation = file.reservation_id
                ? (reservations?.find(r => r.id === file.reservation_id) || { title: file.reservation_title })
                : null
-              const fileUrl = file.url || `/uploads/files/${file.filename}`
+              const fileUrl = file.url || (file.filename?.startsWith('files/') ? `/uploads/${file.filename}` : `/uploads/files/${file.filename}`)

              return (
                <div key={file.id} style={{
@@ -296,7 +298,15 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                  >
                    {isImage(file.mime_type)
                      ? <img src={fileUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                      : <FileIcon size={16} style={{ color: 'var(--text-muted)' }} />
+                      : (() => {
+                          const ext = (file.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                          const isPdf = file.mime_type === 'application/pdf'
+                          return (
+                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? '#ef44441a' : 'var(--bg-tertiary)' }}>
+                              <span style={{ fontSize: 9, fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                            </div>
+                          )
+                        })()
                    }
                  </div>

@@ -325,6 +335,12 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                          label={`${t('files.sourceBooking')} · ${linkedReservation.title || t('files.sourceBooking')}`}
                        />
                      )}
+                      {file.note_id && (
+                        <SourceBadge
+                          icon={StickyNote}
+                          label={t('files.sourceCollab') || 'Collab Notes'}
+                        />
+                      )}
                    </div>

                    {file.description && !linkedReservation && (
--- a/client/src/components/Map/MapView.jsx
+++ b/client/src/components/Map/MapView.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react'
+import ReactDOM from 'react-dom'
 import { MapContainer, TileLayer, Marker, Tooltip, Polyline, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
@@ -158,6 +159,50 @@ function MapClickHandler({ onClick }) {
  return null
 }

+// ── Route travel time label ──
+function RouteLabel({ midpoint, walkingText, drivingText }) {
+  const map = useMap()
+  const [visible, setVisible] = useState(map ? map.getZoom() >= 16 : false)
+
+  useEffect(() => {
+    if (!map) return
+    const check = () => setVisible(map.getZoom() >= 16)
+    check()
+    map.on('zoomend', check)
+    return () => map.off('zoomend', check)
+  }, [map])
+
+  if (!visible || !midpoint) return null
+
+  const icon = L.divIcon({
+    className: 'route-info-pill',
+    html: `<div style="
+      display:flex;align-items:center;gap:5px;
+      background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
+      color:#fff;border-radius:99px;padding:3px 9px;
+      font-size:9px;font-weight:600;white-space:nowrap;
+      font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
+      box-shadow:0 2px 12px rgba(0,0,0,0.3);
+      pointer-events:none;
+      position:relative;left:-50%;top:-50%;
+    ">
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="4" r="2"/><path d="M7 21l3-7"/><path d="M10 14l5-5"/><path d="M15 9l-4 7"/><path d="M18 18l-3-7"/></svg>
+        ${walkingText}
+      </span>
+      <span style="opacity:0.3">|</span>
+      <span style="display:flex;align-items:center;gap:2px">
+        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-2-4H7L5 10l-2.5 1.1C1.7 11.3 1 12.1 1 13v3c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
+        ${drivingText}
+      </span>
+    </div>`,
+    iconSize: [0, 0],
+    iconAnchor: [0, 0],
+  })
+
+  return <Marker position={midpoint} icon={icon} interactive={false} zIndexOffset={2000} />
+}
+
 // Module-level photo cache shared with PlaceAvatar
 const mapPhotoCache = new Map()

@@ -165,6 +210,7 @@ export function MapView({
  places = [],
  dayPlaces = [],
  route = null,
+  routeSegments = [],
  selectedPlaceId = null,
  onMarkerClick,
  onMapClick,
@@ -297,13 +343,18 @@ export function MapView({
      </MarkerClusterGroup>

      {route && route.length > 1 && (
-        <Polyline
-          positions={route}
-          color="#111827"
-          weight={3}
-          opacity={0.9}
-          dashArray="6, 5"
-        />
+        <>
+          <Polyline
+            positions={route}
+            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} />
+          ))}
+        </>
      )}
    </MapContainer>
  )
--- a/client/src/components/Map/RouteCalculator.js
+++ b/client/src/components/Map/RouteCalculator.js
@@ -41,12 +41,17 @@ export async function calculateRoute(waypoints, profile = 'driving') {
    duration = route.duration // driving: use OSRM value
  }

+  const walkingDuration = distance / (5000 / 3600) // 5 km/h
+  const drivingDuration = route.duration // OSRM driving value
+
  return {
    coordinates,
    distance,
    duration,
    distanceText: formatDistance(distance),
    durationText: formatDuration(duration),
+    walkingText: formatDuration(walkingDuration),
+    drivingText: formatDuration(drivingDuration),
  }
 }

--- a/client/src/components/Planner/DayPlanSidebar.jsx
+++ b/client/src/components/Planner/DayPlanSidebar.jsx
@@ -92,7 +92,13 @@ export default function DayPlanSidebar({

  const dayNotes = tripStore.dayNotes || {}

-  const [expandedDays, setExpandedDays] = useState(() => new Set(days.map(d => d.id)))
+  const [expandedDays, setExpandedDays] = useState(() => {
+    try {
+      const saved = sessionStorage.getItem(`day-expanded-${tripId}`)
+      if (saved) return new Set(JSON.parse(saved))
+    } catch {}
+    return new Set(days.map(d => d.id))
+  })
  const [editingDayId, setEditingDayId] = useState(null)
  const [editTitle, setEditTitle] = useState('')
  const [isCalculating, setIsCalculating] = useState(false)
@@ -128,9 +134,20 @@ export default function DayPlanSidebar({
    return { placeId, assignmentId: '', noteId: '', fromDayId: 0 }
  }

+  // Only auto-expand genuinely new days (not on initial load from storage)
+  const prevDayCount = React.useRef(days.length)
  useEffect(() => {
-    setExpandedDays(prev => new Set([...prev, ...days.map(d => d.id)]))
-  }, [days.length])
+    if (days.length > prevDayCount.current) {
+      // New days added — expand only those
+      setExpandedDays(prev => {
+        const n = new Set(prev)
+        days.forEach(d => { if (!prev.has(d.id)) n.add(d.id) })
+        try { sessionStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
+        return n
+      })
+    }
+    prevDayCount.current = days.length
+  }, [days.length, tripId])

  useEffect(() => {
    if (editingDayId && inputRef.current) inputRef.current.focus()
@@ -154,6 +171,7 @@ export default function DayPlanSidebar({
    setExpandedDays(prev => {
      const n = new Set(prev)
      n.has(dayId) ? n.delete(dayId) : n.add(dayId)
+      try { sessionStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...n])) } catch {}
      return n
    })
  }
--- a/client/src/i18n/translations/de.js
+++ b/client/src/i18n/translations/de.js
@@ -127,6 +127,9 @@ const de = {
  'settings.language': 'Sprache',
  'settings.temperature': 'Temperatureinheit',
  'settings.timeFormat': 'Zeitformat',
+  'settings.routeCalculation': 'Routenberechnung',
+  'settings.on': 'An',
+  'settings.off': 'Aus',
  'settings.account': 'Konto',
  'settings.username': 'Benutzername',
  'settings.email': 'E-Mail',
@@ -660,6 +663,8 @@ const de = {
  'files.filterPdf': 'PDFs',
  'files.filterImages': 'Bilder',
  'files.filterDocs': 'Dokumente',
+  'files.filterCollab': 'Collab Notizen',
+  'files.sourceCollab': 'Aus Collab Notizen',
  'files.empty': 'Keine Dateien vorhanden',
  'files.emptyHint': 'Lade Dateien hoch, um sie mit deiner Reise zu verknüpfen',
  'files.openTab': 'In neuem Tab öffnen',
@@ -925,6 +930,7 @@ const de = {
  'day.hourlyForecast': 'Stündliche Vorhersage',
  'day.climateHint': 'Historische Durchschnittswerte — echte Vorhersage verfügbar innerhalb von 16 Tagen vor diesem Datum.',
  'day.noWeather': 'Keine Wetterdaten verfügbar. Füge einen Ort mit Koordinaten hinzu.',
+  'day.overview': 'Tagesübersicht',
  'day.accommodation': 'Unterkunft',
  'day.addAccommodation': 'Unterkunft hinzufügen',
  'day.hotelDayRange': 'Auf Tage anwenden',
@@ -940,10 +946,19 @@ const de = {
  'collab.tabs.chat': 'Chat',
  'collab.tabs.notes': 'Notizen',
  'collab.tabs.polls': 'Umfragen',
+  'collab.whatsNext.title': 'Nächste',
+  'collab.whatsNext.today': 'Heute',
+  'collab.whatsNext.tomorrow': 'Morgen',
+  'collab.whatsNext.empty': 'Keine anstehenden Aktivitäten',
+  'collab.whatsNext.until': 'bis',
+  'collab.whatsNext.emptyHint': 'Aktivitäten mit Uhrzeit erscheinen hier',
  'collab.chat.send': 'Senden',
  'collab.chat.placeholder': 'Nachricht eingeben...',
  'collab.chat.empty': 'Starte die Unterhaltung',
  'collab.chat.emptyHint': 'Nachrichten werden mit allen Reiseteilnehmern geteilt',
+  'collab.chat.today': 'Heute',
+  'collab.chat.yesterday': 'Gestern',
+  'collab.chat.deletedMessage': 'hat eine Nachricht gelöscht',
  'collab.chat.loadMore': 'Ältere Nachrichten laden',
  'collab.chat.justNow': 'gerade eben',
  'collab.chat.minutesAgo': 'vor {n} Min.',
@@ -958,6 +973,23 @@ const de = {
  'collab.notes.contentPlaceholder': 'Schreibe etwas...',
  'collab.notes.categoryPlaceholder': 'Kategorie',
  'collab.notes.newCategory': 'Neue Kategorie...',
+  'collab.notes.category': 'Kategorie',
+  'collab.notes.noCategory': 'Keine Kategorie',
+  'collab.notes.color': 'Farbe',
+  'collab.notes.save': 'Speichern',
+  'collab.notes.cancel': 'Abbrechen',
+  'collab.notes.edit': 'Bearbeiten',
+  'collab.notes.delete': 'Löschen',
+  'collab.notes.pin': 'Anheften',
+  'collab.notes.unpin': 'Loslösen',
+  'collab.notes.daysAgo': 'vor {n} T.',
+  'collab.notes.categorySettings': 'Kategorien verwalten',
+  'collab.notes.create': 'Erstellen',
+  'collab.notes.website': 'Website',
+  'collab.notes.websitePlaceholder': 'https://...',
+  'collab.notes.attachFiles': 'Dateien anhängen',
+  'collab.notes.noCategoriesYet': 'Noch keine Kategorien',
+  'collab.notes.emptyDesc': 'Erstelle eine Notiz um loszulegen',
  'collab.polls.title': 'Umfragen',
  'collab.polls.new': 'Neue Umfrage',
  'collab.polls.empty': 'Noch keine Umfragen',
@@ -972,7 +1004,12 @@ const de = {
  'collab.polls.votes': '{n} Stimmen',
  'collab.polls.vote': '{n} Stimme',
  'collab.polls.multipleChoice': 'Mehrfachauswahl',
+  'collab.polls.multiChoice': 'Mehrfachauswahl',
  'collab.polls.deadline': 'Frist',
+  'collab.polls.option': 'Option',
+  'collab.polls.options': 'Optionen',
+  'collab.polls.delete': 'Löschen',
+  'collab.polls.closedSection': 'Geschlossen',
 }

 export default de
--- a/client/src/i18n/translations/en.js
+++ b/client/src/i18n/translations/en.js
@@ -127,6 +127,9 @@ const en = {
  'settings.language': 'Language',
  'settings.temperature': 'Temperature Unit',
  'settings.timeFormat': 'Time Format',
+  'settings.routeCalculation': 'Route Calculation',
+  'settings.on': 'On',
+  'settings.off': 'Off',
  'settings.account': 'Account',
  'settings.username': 'Username',
  'settings.email': 'Email',
@@ -660,6 +663,8 @@ const en = {
  'files.filterPdf': 'PDFs',
  'files.filterImages': 'Images',
  'files.filterDocs': 'Documents',
+  'files.filterCollab': 'Collab Notes',
+  'files.sourceCollab': 'From Collab Notes',
  'files.empty': 'No files yet',
  'files.emptyHint': 'Upload files to attach them to your trip',
  'files.openTab': 'Open in new tab',
@@ -925,6 +930,7 @@ const en = {
  'day.hourlyForecast': 'Hourly Forecast',
  'day.climateHint': 'Historical averages — real forecast available within 16 days of this date.',
  'day.noWeather': 'No weather data available. Add a place with coordinates.',
+  'day.overview': 'Daily Overview',
  'day.accommodation': 'Accommodation',
  'day.addAccommodation': 'Add accommodation',
  'day.hotelDayRange': 'Apply to days',
@@ -940,10 +946,19 @@ const en = {
  'collab.tabs.chat': 'Chat',
  'collab.tabs.notes': 'Notes',
  'collab.tabs.polls': 'Polls',
+  'collab.whatsNext.title': "What's Next",
+  'collab.whatsNext.today': 'Today',
+  'collab.whatsNext.tomorrow': 'Tomorrow',
+  'collab.whatsNext.empty': 'No upcoming activities',
+  'collab.whatsNext.until': 'to',
+  'collab.whatsNext.emptyHint': 'Activities with times will appear here',
  'collab.chat.send': 'Send',
  'collab.chat.placeholder': 'Type a message...',
  'collab.chat.empty': 'Start the conversation',
  'collab.chat.emptyHint': 'Messages are shared with all trip members',
+  'collab.chat.today': 'Today',
+  'collab.chat.yesterday': 'Yesterday',
+  'collab.chat.deletedMessage': 'deleted a message',
  'collab.chat.loadMore': 'Load older messages',
  'collab.chat.justNow': 'just now',
  'collab.chat.minutesAgo': '{n}m ago',
@@ -958,6 +973,23 @@ const en = {
  'collab.notes.contentPlaceholder': 'Write something...',
  'collab.notes.categoryPlaceholder': 'Category',
  'collab.notes.newCategory': 'New category...',
+  'collab.notes.category': 'Category',
+  'collab.notes.noCategory': 'No category',
+  'collab.notes.color': 'Color',
+  'collab.notes.save': 'Save',
+  'collab.notes.cancel': 'Cancel',
+  'collab.notes.edit': 'Edit',
+  'collab.notes.delete': 'Delete',
+  'collab.notes.pin': 'Pin',
+  'collab.notes.unpin': 'Unpin',
+  'collab.notes.daysAgo': '{n}d ago',
+  'collab.notes.categorySettings': 'Manage Categories',
+  'collab.notes.create': 'Create',
+  'collab.notes.website': 'Website',
+  'collab.notes.websitePlaceholder': 'https://...',
+  'collab.notes.attachFiles': 'Attach files',
+  'collab.notes.noCategoriesYet': 'No categories yet',
+  'collab.notes.emptyDesc': 'Create a note to get started',
  'collab.polls.title': 'Polls',
  'collab.polls.new': 'New Poll',
  'collab.polls.empty': 'No polls yet',
@@ -972,7 +1004,12 @@ const en = {
  'collab.polls.votes': '{n} votes',
  'collab.polls.vote': '{n} vote',
  'collab.polls.multipleChoice': 'Multiple choice',
+  'collab.polls.multiChoice': 'Multiple choice',
  'collab.polls.deadline': 'Deadline',
+  'collab.polls.option': 'Option',
+  'collab.polls.options': 'Options',
+  'collab.polls.delete': 'Delete',
+  'collab.polls.closedSection': 'Closed',
 }

 export default en
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -290,6 +290,11 @@ body {
  width: 6px;
  height: 6px;
 }
+::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}

 ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
@@ -305,6 +310,11 @@ body {
  background: var(--scrollbar-hover);
 }

+.route-info-pill { background: none !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
+.chat-scroll { overflow-y: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+.chat-scroll::-webkit-scrollbar { width: 0; background: transparent; }
+
+
 /* Einheitliche Formular-Inputs */
 .form-input {
  width: 100%;
--- a/client/src/pages/SettingsPage.jsx
+++ b/client/src/pages/SettingsPage.jsx
@@ -330,6 +330,35 @@ export default function SettingsPage() {
                ))}
              </div>
            </div>
+          {/* Route Calculation */}
+            <div>
+              <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.routeCalculation')}</label>
+              <div className="flex gap-3">
+                {[
+                  { value: true, label: t('settings.on') || 'On' },
+                  { value: false, label: t('settings.off') || 'Off' },
+                ].map(opt => (
+                  <button
+                    key={String(opt.value)}
+                    onClick={async () => {
+                      try { await updateSetting('route_calculation', opt.value) }
+                      catch (e) { toast.error(e.message) }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                      border: (settings.route_calculation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                      background: (settings.route_calculation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                      color: 'var(--text-primary)',
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
          </Section>

          {/* Account */}
--- a/client/src/pages/TripPlannerPage.jsx
+++ b/client/src/pages/TripPlannerPage.jsx
@@ -23,6 +23,7 @@ import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen
 import { useTranslation } from '../i18n'
 import { joinTrip, leaveTrip, addListener, removeListener } from '../api/websocket'
 import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi } from '../api/client'
+import { calculateRoute } from '../components/Map/RouteCalculator'

 const MIN_SIDEBAR = 200
 const MAX_SIDEBAR = 520
@@ -65,10 +66,14 @@ export default function TripPlannerPage() {
    ...(enabledAddons.collab ? [{ id: 'collab', label: 'Collab' }] : []),
  ]

-  const [activeTab, setActiveTab] = useState('plan')
+  const [activeTab, setActiveTab] = useState(() => {
+    const saved = sessionStorage.getItem(`trip-tab-${tripId}`)
+    return saved || 'plan'
+  })

  const handleTabChange = (tabId) => {
    setActiveTab(tabId)
+    sessionStorage.setItem(`trip-tab-${tripId}`, tabId)
    if (tabId === 'finanzplan') tripStore.loadBudgetItems?.(tripId)
    if (tabId === 'dateien' && (!files || files.length === 0)) tripStore.loadFiles?.(tripId)
  }
@@ -102,7 +107,8 @@ export default function TripPlannerPage() {
  const [showReservationModal, setShowReservationModal] = useState(false)
  const [editingReservation, setEditingReservation] = useState(null)
  const [route, setRoute] = useState(null)
-  const [routeInfo, setRouteInfo] = useState(null)
+  const [routeInfo, setRouteInfo] = useState(null) // unused legacy
+  const [routeSegments, setRouteSegments] = useState([]) // { from, to, walkingText, drivingText }
  const [fitKey, setFitKey] = useState(0)
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(null) // 'left' | 'right' | null

@@ -130,9 +136,21 @@ export default function TripPlannerPage() {
    const handler = useTripStore.getState().handleRemoteEvent
    joinTrip(tripId)
    addListener(handler)
+    // Reload files when collab notes change (attachments sync) — from WebSocket (other users)
+    const collabFileSync = (event) => {
+      if (event?.type === 'collab:note:deleted' || event?.type === 'collab:note:updated') {
+        tripStore.loadFiles?.(tripId)
+      }
+    }
+    addListener(collabFileSync)
+    // Reload files when local collab actions change files (own user)
+    const localFileSync = () => tripStore.loadFiles?.(tripId)
+    window.addEventListener('collab-files-changed', localFileSync)
    return () => {
      leaveTrip(tripId)
      removeListener(handler)
+      removeListener(collabFileSync)
+      window.removeEventListener('collab-files-changed', localFileSync)
    }
  }, [tripId])

@@ -167,17 +185,34 @@ export default function TripPlannerPage() {
    return places.filter(p => p.lat && p.lng)
  }, [places])

-  const updateRouteForDay = useCallback((dayId) => {
-    if (!dayId) { setRoute(null); setRouteInfo(null); return }
+  const routeCalcEnabled = useSettingsStore(s => s.settings.route_calculation) !== false
+
+  const updateRouteForDay = useCallback(async (dayId) => {
+    if (!dayId) { setRoute(null); setRouteSegments([]); return }
    const da = (tripStore.assignments[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(waypoints.map(p => [p.lat, p.lng]))
+      if (!routeCalcEnabled) { setRouteSegments([]); return }
+      // Calculate per-segment travel times
+      const segments = []
+      for (let i = 0; i < waypoints.length - 1; i++) {
+        const from = [waypoints[i].lat, waypoints[i].lng]
+        const to = [waypoints[i + 1].lat, waypoints[i + 1].lng]
+        const mid = [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2]
+        try {
+          const result = await calculateRoute([{ lat: from[0], lng: from[1] }, { lat: to[0], lng: to[1] }], 'walking')
+          segments.push({ mid, from, to, walkingText: result.walkingText, drivingText: result.drivingText })
+        } catch {
+          segments.push({ mid, from, to, walkingText: '?', drivingText: '?' })
+        }
+      }
+      setRouteSegments(segments)
    } else {
      setRoute(null)
+      setRouteSegments([])
    }
-    setRouteInfo(null)
-  }, [tripStore])
+  }, [tripStore, routeCalcEnabled])

  const handleSelectDay = useCallback((dayId, skipFit) => {
    const changed = dayId !== selectedDayId
@@ -411,6 +446,7 @@ export default function TripPlannerPage() {
              places={mapPlaces()}
              dayPlaces={dayPlaces}
              route={route}
+              routeSegments={routeSegments}
              selectedPlaceId={selectedPlaceId}
              onMarkerClick={handleMarkerClick}
              onMapClick={handleMapClick}
@@ -424,19 +460,6 @@ export default function TripPlannerPage() {
              hasInspector={!!selectedPlace}
            />

-            {routeInfo && (
-              <div style={{
-                position: 'absolute', bottom: selectedPlace ? 180 : 20, left: '50%', transform: 'translateX(-50%)',
-                background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(20px)',
-                borderRadius: 99, padding: '6px 20px', zIndex: 30,
-                boxShadow: '0 2px 16px rgba(0,0,0,0.1)',
-                display: 'flex', gap: 12, fontSize: 13, color: '#374151',
-              }}>
-                <span>{routeInfo.distance}</span>
-                <span style={{ color: '#d1d5db' }}>·</span>
-                <span>{routeInfo.duration}</span>
-              </div>
-            )}

            <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
              <button onClick={() => setLeftCollapsed(c => !c)}
@@ -479,7 +502,7 @@ export default function TripPlannerPage() {
                  onReorder={handleReorder}
                  onUpdateDayTitle={handleUpdateDayTitle}
                  onAssignToDay={handleAssignToDay}
-                  onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } 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}
                  onAddReservation={(dayId) => { setEditingReservation(null); tripStore.setSelectedDay(dayId); setShowReservationModal(true) }}
                  onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); setSelectedAssignmentId(null) }}
@@ -696,8 +719,8 @@ export default function TripPlannerPage() {
        )}

        {activeTab === 'collab' && (
-          <div style={{ height: '100%', overflow: 'hidden', overscrollBehavior: 'contain' }}>
-            <CollabPanel tripId={tripId} />
+          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+            <CollabPanel tripId={tripId} tripMembers={tripMembers} />
          </div>
        )}
      </div>
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "nomad-server",
-  "version": "2.5.7",
+  "version": "2.6.0",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
--- a/server/src/db/database.js
+++ b/server/src/db/database.js
@@ -553,7 +553,7 @@ function initDb() {
      `);
      // Ensure collab addon exists for existing installations
      try {
-        _db.prepare("INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES ('collab', 'Collab', 'Notes, polls, and live chat for trip collaboration', 'trip', 'Users', 0, 6)").run();
+        _db.prepare("INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES ('collab', 'Collab', 'Notes, polls, and live chat for trip collaboration', 'trip', 'Users', 1, 6)").run();
      } catch {}
    },
    // 26: Per-assignment times (instead of shared place times)
@@ -583,6 +583,29 @@ function initDb() {
        CREATE INDEX IF NOT EXISTS idx_budget_item_members_user ON budget_item_members(user_id);
      `);
    },
+    // 28: Message reactions
+    () => {
+      _db.exec(`
+        CREATE TABLE IF NOT EXISTS collab_message_reactions (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          message_id INTEGER NOT NULL REFERENCES collab_messages(id) ON DELETE CASCADE,
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          emoji TEXT NOT NULL,
+          created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+          UNIQUE(message_id, user_id, emoji)
+        );
+        CREATE INDEX IF NOT EXISTS idx_collab_reactions_msg ON collab_message_reactions(message_id);
+      `);
+    },
+    // 29: Soft-delete for chat messages
+    () => {
+      try { _db.exec('ALTER TABLE collab_messages ADD COLUMN deleted INTEGER DEFAULT 0'); } catch {}
+    },
+    // 30: Note attachments + website field
+    () => {
+      try { _db.exec('ALTER TABLE trip_files ADD COLUMN note_id INTEGER REFERENCES collab_notes(id) ON DELETE SET NULL'); } catch {}
+      try { _db.exec('ALTER TABLE collab_notes ADD COLUMN website TEXT'); } catch {}
+    },
    // Future migrations go here (append only, never reorder)
  ];

@@ -629,7 +652,7 @@ function initDb() {
      { id: 'documents', name: 'Documents', description: 'Store and manage travel documents', type: 'trip', icon: 'FileText', enabled: 1, sort_order: 2 },
      { id: 'vacay', name: 'Vacay', description: 'Personal vacation day planner with calendar view', type: 'global', icon: 'CalendarDays', enabled: 1, sort_order: 10 },
      { id: 'atlas', name: 'Atlas', description: 'World map of your visited countries with travel stats', type: 'global', icon: 'Globe', enabled: 1, sort_order: 11 },
-      { id: 'collab', name: 'Collab', description: 'Notes, polls, and live chat for trip collaboration', type: 'trip', icon: 'Users', enabled: 0, sort_order: 6 },
+      { id: 'collab', name: 'Collab', description: 'Notes, polls, and live chat for trip collaboration', type: 'trip', icon: 'Users', enabled: 1, sort_order: 6 },
    ];
    const insertAddon = _db.prepare('INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)');
    for (const a of defaultAddons) insertAddon.run(a.id, a.name, a.description, a.type, a.icon, a.enabled, a.sort_order);
--- a/server/src/routes/collab.js
+++ b/server/src/routes/collab.js
@@ -1,22 +1,68 @@
 const express = require('express');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const { v4: uuidv4 } = require('uuid');
 const { db, canAccessTrip } = require('../db/database');
 const { authenticate } = require('../middleware/auth');
 const { broadcast } = require('../websocket');

+const filesDir = path.join(__dirname, '../../uploads/files');
+const noteUpload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => { if (!fs.existsSync(filesDir)) fs.mkdirSync(filesDir, { recursive: true }); cb(null, filesDir) },
+    filename: (req, file, cb) => { cb(null, `${uuidv4()}${path.extname(file.originalname)}`) },
+  }),
+  limits: { fileSize: 50 * 1024 * 1024 },
+});
+
 const router = express.Router({ mergeParams: true });

 function verifyTripAccess(tripId, userId) {
  return canAccessTrip(tripId, userId);
 }

+function avatarUrl(user) {
+  return user.avatar ? `/uploads/avatars/${user.avatar}` : null;
+}
+
+function formatNote(note) {
+  const attachments = db.prepare('SELECT id, filename, original_name, file_size, mime_type FROM trip_files WHERE note_id = ?').all(note.id);
+  return {
+    ...note,
+    avatar_url: avatarUrl(note),
+    attachments: attachments.map(a => ({ ...a, url: `/uploads/${a.filename}` })),
+  };
+}
+
+function loadReactions(messageId) {
+  return db.prepare(`
+    SELECT r.emoji, r.user_id, u.username
+    FROM collab_message_reactions r
+    JOIN users u ON r.user_id = u.id
+    WHERE r.message_id = ?
+  `).all(messageId);
+}
+
+function groupReactions(reactions) {
+  const map = {};
+  for (const r of reactions) {
+    if (!map[r.emoji]) map[r.emoji] = [];
+    map[r.emoji].push({ user_id: r.user_id, username: r.username });
+  }
+  return Object.entries(map).map(([emoji, users]) => ({ emoji, users, count: users.length }));
+}
+
+function formatMessage(msg, reactions) {
+  return { ...msg, user_avatar: avatarUrl(msg), avatar_url: avatarUrl(msg), reactions: reactions || [] };
+}
+
 // ─── NOTES ───────────────────────────────────────────────────────────────────

-// GET /notes - list all notes for trip
+// GET /notes
 router.get('/notes', authenticate, (req, res) => {
  const { tripId } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const notes = db.prepare(`
    SELECT n.*, u.username, u.avatar
@@ -26,42 +72,35 @@ router.get('/notes', authenticate, (req, res) => {
    ORDER BY n.pinned DESC, n.updated_at DESC
  `).all(tripId);

-  res.json({ notes });
+  res.json({ notes: notes.map(formatNote) });
 });

-// POST /notes - create note
+// POST /notes
 router.post('/notes', authenticate, (req, res) => {
  const { tripId } = req.params;
-  const { title, content, category, color } = req.body;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
-
+  const { title, content, category, color, website } = req.body;
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });
  if (!title) return res.status(400).json({ error: 'Title is required' });

  const result = db.prepare(`
-    INSERT INTO collab_notes (trip_id, user_id, title, content, category, color)
-    VALUES (?, ?, ?, ?, ?, ?)
-  `).run(tripId, req.user.id, title, content || null, category || 'General', color || '#6366f1');
+    INSERT INTO collab_notes (trip_id, user_id, title, content, category, color, website)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+  `).run(tripId, req.user.id, title, content || null, category || 'General', color || '#6366f1', website || null);

  const note = db.prepare(`
-    SELECT n.*, u.username, u.avatar
-    FROM collab_notes n
-    JOIN users u ON n.user_id = u.id
-    WHERE n.id = ?
+    SELECT n.*, u.username, u.avatar FROM collab_notes n JOIN users u ON n.user_id = u.id WHERE n.id = ?
  `).get(result.lastInsertRowid);

-  res.status(201).json({ note });
-  broadcast(tripId, 'collab:note:created', { note }, req.headers['x-socket-id']);
+  const formatted = formatNote(note);
+  res.status(201).json({ note: formatted });
+  broadcast(tripId, 'collab:note:created', { note: formatted }, req.headers['x-socket-id']);
 });

-// PUT /notes/:id - update note
+// PUT /notes/:id
 router.put('/notes/:id', authenticate, (req, res) => {
  const { tripId, id } = req.params;
-  const { title, content, category, color, pinned } = req.body;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  const { title, content, category, color, pinned, website } = req.body;
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const existing = db.prepare('SELECT * FROM collab_notes WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!existing) return res.status(404).json({ error: 'Note not found' });
@@ -73,6 +112,7 @@ router.put('/notes/:id', authenticate, (req, res) => {
      category = COALESCE(?, category),
      color = COALESCE(?, color),
      pinned = CASE WHEN ? IS NOT NULL THEN ? ELSE pinned END,
+      website = CASE WHEN ? THEN ? ELSE website END,
      updated_at = CURRENT_TIMESTAMP
    WHERE id = ?
  `).run(
@@ -81,38 +121,77 @@ router.put('/notes/:id', authenticate, (req, res) => {
    category || null,
    color || null,
    pinned !== undefined ? 1 : null, pinned ? 1 : 0,
+    website !== undefined ? 1 : 0, website !== undefined ? website : null,
    id
  );

  const note = db.prepare(`
-    SELECT n.*, u.username, u.avatar
-    FROM collab_notes n
-    JOIN users u ON n.user_id = u.id
-    WHERE n.id = ?
+    SELECT n.*, u.username, u.avatar FROM collab_notes n JOIN users u ON n.user_id = u.id WHERE n.id = ?
  `).get(id);

-  res.json({ note });
-  broadcast(tripId, 'collab:note:updated', { note }, req.headers['x-socket-id']);
+  const formatted = formatNote(note);
+  res.json({ note: formatted });
+  broadcast(tripId, 'collab:note:updated', { note: formatted }, req.headers['x-socket-id']);
 });

-// DELETE /notes/:id - delete note
+// DELETE /notes/:id
 router.delete('/notes/:id', authenticate, (req, res) => {
  const { tripId, id } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const existing = db.prepare('SELECT id FROM collab_notes WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!existing) return res.status(404).json({ error: 'Note not found' });

+  // Delete attached files (physical + DB)
+  const noteFiles = db.prepare('SELECT id, filename FROM trip_files WHERE note_id = ?').all(id);
+  for (const f of noteFiles) {
+    const filePath = path.join(__dirname, '../../uploads', f.filename);
+    try { fs.unlinkSync(filePath) } catch {}
+  }
+  db.prepare('DELETE FROM trip_files WHERE note_id = ?').run(id);
+
  db.prepare('DELETE FROM collab_notes WHERE id = ?').run(id);
  res.json({ success: true });
  broadcast(tripId, 'collab:note:deleted', { noteId: Number(id) }, req.headers['x-socket-id']);
 });

+// POST /notes/:id/files — upload attachment to note
+router.post('/notes/:id/files', authenticate, noteUpload.single('file'), (req, res) => {
+  const { tripId, id } = req.params;
+  if (!verifyTripAccess(Number(tripId), req.user.id)) return res.status(404).json({ error: 'Trip not found' });
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+
+  const note = db.prepare('SELECT id FROM collab_notes WHERE id = ? AND trip_id = ?').get(id, tripId);
+  if (!note) return res.status(404).json({ error: 'Note not found' });
+
+  const result = db.prepare(
+    'INSERT INTO trip_files (trip_id, note_id, filename, original_name, file_size, mime_type) VALUES (?, ?, ?, ?, ?, ?)'
+  ).run(tripId, id, `files/${req.file.filename}`, req.file.originalname, req.file.size, req.file.mimetype);
+
+  const file = db.prepare('SELECT * FROM trip_files WHERE id = ?').get(result.lastInsertRowid);
+  res.status(201).json({ file: { ...file, url: `/uploads/${file.filename}` } });
+  broadcast(Number(tripId), 'collab:note:updated', { note: formatNote(db.prepare('SELECT n.*, u.username, u.avatar FROM collab_notes n JOIN users u ON n.user_id = u.id WHERE n.id = ?').get(id)) }, req.headers['x-socket-id']);
+});
+
+// DELETE /notes/:id/files/:fileId — remove attachment
+router.delete('/notes/:id/files/:fileId', authenticate, (req, res) => {
+  const { tripId, id, fileId } = req.params;
+  if (!verifyTripAccess(Number(tripId), req.user.id)) return res.status(404).json({ error: 'Trip not found' });
+
+  const file = db.prepare('SELECT * FROM trip_files WHERE id = ? AND note_id = ?').get(fileId, id);
+  if (!file) return res.status(404).json({ error: 'File not found' });
+
+  // Delete physical file
+  const filePath = path.join(__dirname, '../../uploads', file.filename);
+  try { fs.unlinkSync(filePath) } catch {}
+
+  db.prepare('DELETE FROM trip_files WHERE id = ?').run(fileId);
+  res.json({ success: true });
+  broadcast(Number(tripId), 'collab:note:updated', { note: formatNote(db.prepare('SELECT n.*, u.username, u.avatar FROM collab_notes n JOIN users u ON n.user_id = u.id WHERE n.id = ?').get(id)) }, req.headers['x-socket-id']);
+});
+
 // ─── POLLS ───────────────────────────────────────────────────────────────────

-// Helper: fetch a poll with aggregated votes
 function getPollWithVotes(pollId) {
  const poll = db.prepare(`
    SELECT p.*, u.username, u.avatar
@@ -123,7 +202,7 @@ function getPollWithVotes(pollId) {

  if (!poll) return null;

-  poll.options = JSON.parse(poll.options);
+  const options = JSON.parse(poll.options);

  const votes = db.prepare(`
    SELECT v.option_index, v.user_id, u.username, u.avatar
@@ -132,73 +211,64 @@ function getPollWithVotes(pollId) {
    WHERE v.poll_id = ?
  `).all(pollId);

-  poll.votes = votes;
-  return poll;
+  // Transform: nest voters into each option (frontend expects options[i].voters)
+  const formattedOptions = options.map((label, idx) => ({
+    label: typeof label === 'string' ? label : label.label || label,
+    voters: votes
+      .filter(v => v.option_index === idx)
+      .map(v => ({ id: v.user_id, user_id: v.user_id, username: v.username, avatar: v.avatar, avatar_url: avatarUrl(v) })),
+  }));
+
+  return {
+    ...poll,
+    avatar_url: avatarUrl(poll),
+    options: formattedOptions,
+    is_closed: !!poll.closed,
+    multiple_choice: !!poll.multiple,
+  };
 }

-// GET /polls - list all polls with votes
+// GET /polls
 router.get('/polls', authenticate, (req, res) => {
  const { tripId } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const rows = db.prepare(`
-    SELECT p.*, u.username, u.avatar
-    FROM collab_polls p
-    JOIN users u ON p.user_id = u.id
-    WHERE p.trip_id = ?
-    ORDER BY p.created_at DESC
+    SELECT id FROM collab_polls WHERE trip_id = ? ORDER BY created_at DESC
  `).all(tripId);

-  const polls = rows.map(poll => {
-    poll.options = JSON.parse(poll.options);
-
-    const votes = db.prepare(`
-      SELECT v.option_index, v.user_id, u.username, u.avatar
-      FROM collab_poll_votes v
-      JOIN users u ON v.user_id = u.id
-      WHERE v.poll_id = ?
-    `).all(poll.id);
-
-    poll.votes = votes;
-    return poll;
-  });
-
+  const polls = rows.map(row => getPollWithVotes(row.id)).filter(Boolean);
  res.json({ polls });
 });

-// POST /polls - create poll
+// POST /polls
 router.post('/polls', authenticate, (req, res) => {
  const { tripId } = req.params;
-  const { question, options, multiple, deadline } = req.body;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
-
+  const { question, options, multiple, multiple_choice, deadline } = req.body;
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });
  if (!question) return res.status(400).json({ error: 'Question is required' });
  if (!Array.isArray(options) || options.length < 2) {
    return res.status(400).json({ error: 'At least 2 options are required' });
  }

+  // Accept both 'multiple' and 'multiple_choice' from frontend
+  const isMultiple = multiple || multiple_choice;
+
  const result = db.prepare(`
    INSERT INTO collab_polls (trip_id, user_id, question, options, multiple, deadline)
    VALUES (?, ?, ?, ?, ?, ?)
-  `).run(tripId, req.user.id, question, JSON.stringify(options), multiple ? 1 : 0, deadline || null);
+  `).run(tripId, req.user.id, question, JSON.stringify(options), isMultiple ? 1 : 0, deadline || null);

  const poll = getPollWithVotes(result.lastInsertRowid);
-
  res.status(201).json({ poll });
  broadcast(tripId, 'collab:poll:created', { poll }, req.headers['x-socket-id']);
 });

-// POST /polls/:id/vote - toggle vote on poll
+// POST /polls/:id/vote
 router.post('/polls/:id/vote', authenticate, (req, res) => {
  const { tripId, id } = req.params;
  const { option_index } = req.body;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const poll = db.prepare('SELECT * FROM collab_polls WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!poll) return res.status(404).json({ error: 'Poll not found' });
@@ -217,27 +287,21 @@ router.post('/polls/:id/vote', authenticate, (req, res) => {
  if (existingVote) {
    db.prepare('DELETE FROM collab_poll_votes WHERE id = ?').run(existingVote.id);
  } else {
-    // If not multiple choice, remove any existing votes by this user first
    if (!poll.multiple) {
      db.prepare('DELETE FROM collab_poll_votes WHERE poll_id = ? AND user_id = ?').run(id, req.user.id);
    }
-    db.prepare(
-      'INSERT INTO collab_poll_votes (poll_id, user_id, option_index) VALUES (?, ?, ?)'
-    ).run(id, req.user.id, option_index);
+    db.prepare('INSERT INTO collab_poll_votes (poll_id, user_id, option_index) VALUES (?, ?, ?)').run(id, req.user.id, option_index);
  }

  const updatedPoll = getPollWithVotes(id);
-
  res.json({ poll: updatedPoll });
  broadcast(tripId, 'collab:poll:voted', { poll: updatedPoll }, req.headers['x-socket-id']);
 });

-// PUT /polls/:id/close - close poll
+// PUT /polls/:id/close
 router.put('/polls/:id/close', authenticate, (req, res) => {
  const { tripId, id } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const poll = db.prepare('SELECT * FROM collab_polls WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!poll) return res.status(404).json({ error: 'Poll not found' });
@@ -245,17 +309,14 @@ router.put('/polls/:id/close', authenticate, (req, res) => {
  db.prepare('UPDATE collab_polls SET closed = 1 WHERE id = ?').run(id);

  const updatedPoll = getPollWithVotes(id);
-
  res.json({ poll: updatedPoll });
  broadcast(tripId, 'collab:poll:closed', { poll: updatedPoll }, req.headers['x-socket-id']);
 });

-// DELETE /polls/:id - delete poll
+// DELETE /polls/:id
 router.delete('/polls/:id', authenticate, (req, res) => {
  const { tripId, id } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const poll = db.prepare('SELECT id FROM collab_polls WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!poll) return res.status(404).json({ error: 'Poll not found' });
@@ -267,66 +328,61 @@ router.delete('/polls/:id', authenticate, (req, res) => {

 // ─── MESSAGES (CHAT) ────────────────────────────────────────────────────────

-// GET /messages - list messages (last 100, with pagination via ?before=id)
+// GET /messages
 router.get('/messages', authenticate, (req, res) => {
  const { tripId } = req.params;
  const { before } = req.query;
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  const query = `
+    SELECT m.*, u.username, u.avatar,
+      rm.text AS reply_text, ru.username AS reply_username
+    FROM collab_messages m
+    JOIN users u ON m.user_id = u.id
+    LEFT JOIN collab_messages rm ON m.reply_to = rm.id
+    LEFT JOIN users ru ON rm.user_id = ru.id
+    WHERE m.trip_id = ?${before ? ' AND m.id < ?' : ''}
+    ORDER BY m.id DESC
+    LIMIT 100
+  `;

-  let messages;
-  if (before) {
-    messages = db.prepare(`
-      SELECT m.*, u.username, u.avatar,
-        rm.text AS reply_text, ru.username AS reply_username
-      FROM collab_messages m
-      JOIN users u ON m.user_id = u.id
-      LEFT JOIN collab_messages rm ON m.reply_to = rm.id
-      LEFT JOIN users ru ON rm.user_id = ru.id
-      WHERE m.trip_id = ? AND m.id < ?
-      ORDER BY m.id DESC
-      LIMIT 100
-    `).all(tripId, before);
-  } else {
-    messages = db.prepare(`
-      SELECT m.*, u.username, u.avatar,
-        rm.text AS reply_text, ru.username AS reply_username
-      FROM collab_messages m
-      JOIN users u ON m.user_id = u.id
-      LEFT JOIN collab_messages rm ON m.reply_to = rm.id
-      LEFT JOIN users ru ON rm.user_id = ru.id
-      WHERE m.trip_id = ?
-      ORDER BY m.id DESC
-      LIMIT 100
-    `).all(tripId);
-  }
+  const messages = before
+    ? db.prepare(query).all(tripId, before)
+    : db.prepare(query).all(tripId);

-  // Return in chronological order (oldest first)
  messages.reverse();
-
-  res.json({ messages });
+  // Batch-load reactions
+  const msgIds = messages.map(m => m.id);
+  const reactionsByMsg = {};
+  if (msgIds.length > 0) {
+    const allReactions = db.prepare(`
+      SELECT r.message_id, r.emoji, r.user_id, u.username
+      FROM collab_message_reactions r
+      JOIN users u ON r.user_id = u.id
+      WHERE r.message_id IN (${msgIds.map(() => '?').join(',')})
+    `).all(...msgIds);
+    for (const r of allReactions) {
+      if (!reactionsByMsg[r.message_id]) reactionsByMsg[r.message_id] = [];
+      reactionsByMsg[r.message_id].push(r);
+    }
+  }
+  res.json({ messages: messages.map(m => formatMessage(m, groupReactions(reactionsByMsg[m.id] || []))) });
 });

-// POST /messages - send message
+// POST /messages
 router.post('/messages', authenticate, (req, res) => {
  const { tripId } = req.params;
  const { text, reply_to } = req.body;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
-
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });
  if (!text || !text.trim()) return res.status(400).json({ error: 'Message text is required' });

-  // Validate reply_to if provided
  if (reply_to) {
    const replyMsg = db.prepare('SELECT id FROM collab_messages WHERE id = ? AND trip_id = ?').get(reply_to, tripId);
    if (!replyMsg) return res.status(400).json({ error: 'Reply target message not found' });
  }

  const result = db.prepare(`
-    INSERT INTO collab_messages (trip_id, user_id, text, reply_to)
-    VALUES (?, ?, ?, ?)
+    INSERT INTO collab_messages (trip_id, user_id, text, reply_to) VALUES (?, ?, ?, ?)
  `).run(tripId, req.user.id, text.trim(), reply_to || null);

  const message = db.prepare(`
@@ -339,27 +395,92 @@ router.post('/messages', authenticate, (req, res) => {
    WHERE m.id = ?
  `).get(result.lastInsertRowid);

-  res.status(201).json({ message });
-  broadcast(tripId, 'collab:message:created', { message }, req.headers['x-socket-id']);
+  const formatted = formatMessage(message);
+  res.status(201).json({ message: formatted });
+  broadcast(tripId, 'collab:message:created', { message: formatted }, req.headers['x-socket-id']);
 });

-// DELETE /messages/:id - delete own message
+// POST /messages/:id/react — toggle emoji reaction
+router.post('/messages/:id/react', authenticate, (req, res) => {
+  const { tripId, id } = req.params;
+  const { emoji } = req.body;
+  if (!verifyTripAccess(Number(tripId), req.user.id)) return res.status(404).json({ error: 'Trip not found' });
+  if (!emoji) return res.status(400).json({ error: 'Emoji is required' });
+
+  const msg = db.prepare('SELECT id FROM collab_messages WHERE id = ? AND trip_id = ?').get(id, tripId);
+  if (!msg) return res.status(404).json({ error: 'Message not found' });
+
+  const existing = db.prepare('SELECT id FROM collab_message_reactions WHERE message_id = ? AND user_id = ? AND emoji = ?').get(id, req.user.id, emoji);
+  if (existing) {
+    db.prepare('DELETE FROM collab_message_reactions WHERE id = ?').run(existing.id);
+  } else {
+    db.prepare('INSERT INTO collab_message_reactions (message_id, user_id, emoji) VALUES (?, ?, ?)').run(id, req.user.id, emoji);
+  }
+
+  const reactions = groupReactions(loadReactions(id));
+  res.json({ reactions });
+  broadcast(Number(tripId), 'collab:message:reacted', { messageId: Number(id), reactions }, req.headers['x-socket-id']);
+});
+
+// DELETE /messages/:id (soft-delete)
 router.delete('/messages/:id', authenticate, (req, res) => {
  const { tripId, id } = req.params;
-
-  const trip = verifyTripAccess(tripId, req.user.id);
-  if (!trip) return res.status(404).json({ error: 'Trip not found' });
+  if (!verifyTripAccess(tripId, req.user.id)) return res.status(404).json({ error: 'Trip not found' });

  const message = db.prepare('SELECT * FROM collab_messages WHERE id = ? AND trip_id = ?').get(id, tripId);
  if (!message) return res.status(404).json({ error: 'Message not found' });
+  if (Number(message.user_id) !== Number(req.user.id)) return res.status(403).json({ error: 'You can only delete your own messages' });

-  if (message.user_id !== req.user.id) {
-    return res.status(403).json({ error: 'You can only delete your own messages' });
-  }
-
-  db.prepare('DELETE FROM collab_messages WHERE id = ?').run(id);
+  db.prepare('UPDATE collab_messages SET deleted = 1 WHERE id = ?').run(id);
  res.json({ success: true });
-  broadcast(tripId, 'collab:message:deleted', { messageId: Number(id) }, req.headers['x-socket-id']);
+  broadcast(tripId, 'collab:message:deleted', { messageId: Number(id), username: message.username || req.user.username }, req.headers['x-socket-id']);
+});
+
+// ─── LINK PREVIEW ────────────────────────────────────────────────────────────
+
+router.get('/link-preview', authenticate, (req, res) => {
+  const { url } = req.query;
+  if (!url) return res.status(400).json({ error: 'URL is required' });
+
+  try {
+    const fetch = require('node-fetch');
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+
+    fetch(url, {
+      signal: controller.signal,
+      headers: { 'User-Agent': 'Mozilla/5.0 (compatible; NOMAD/1.0; +https://github.com/mauriceboe/NOMAD)' },
+    })
+      .then(r => {
+        clearTimeout(timeout);
+        if (!r.ok) throw new Error('Fetch failed');
+        return r.text();
+      })
+      .then(html => {
+        const get = (prop) => {
+          const m = html.match(new RegExp(`<meta[^>]*property=["']og:${prop}["'][^>]*content=["']([^"']*)["']`, 'i'))
+            || html.match(new RegExp(`<meta[^>]*content=["']([^"']*)["'][^>]*property=["']og:${prop}["']`, 'i'));
+          return m ? m[1] : null;
+        };
+        const titleTag = html.match(/<title[^>]*>([^<]*)<\/title>/i);
+        const descMeta = html.match(/<meta[^>]*name=["']description["'][^>]*content=["']([^"']*)["']/i)
+          || html.match(/<meta[^>]*content=["']([^"']*)["'][^>]*name=["']description["']/i);
+
+        res.json({
+          title: get('title') || (titleTag ? titleTag[1].trim() : null),
+          description: get('description') || (descMeta ? descMeta[1].trim() : null),
+          image: get('image') || null,
+          site_name: get('site_name') || null,
+          url,
+        });
+      })
+      .catch(() => {
+        clearTimeout(timeout);
+        res.json({ title: null, description: null, image: null, url });
+      });
+  } catch {
+    res.json({ title: null, description: null, image: null, url });
+  }
 });

 module.exports = router;
--- a/server/src/routes/files.js
+++ b/server/src/routes/files.js
@@ -57,7 +57,7 @@ function verifyTripOwnership(tripId, userId) {
 function formatFile(file) {
  return {
    ...file,
-    url: `/uploads/files/${file.filename}`,
+    url: file.filename?.startsWith('files/') ? `/uploads/${file.filename}` : `/uploads/files/${file.filename}`,
  };
 }