Reorder whole days and insert a day (#589) (#1148)

* feat(days): reorder whole days and insert a day at a position Adds reorderDays + insertDay to the day service and a PUT /days/reorder route (plus an optional position on create). Day rows stay stable so a day's assignments, notes, bookings and accommodations ride along by id; on a dated trip the calendar dates stay pinned to their slots while the content moves across them, and each booking's date is re-stamped onto its day's new date (time-of-day preserved) so day_id stays consistent. Renumbering uses the two-phase write to avoid the UNIQUE(trip_id, day_number) collision, and a move that would invert an accommodation's check-in/out span is rejected. * feat(planner): reorder days from a toolbar popup, and add days A new toolbar button opens a popup listing the days; drag a row by its grip or use the up/down arrows to reorder, and add a day from there. Reorders apply optimistically with rollback and sync over WebSocket; the day headers are left untouched, so the existing place drop-targets are unaffected. * i18n: add day-reorder strings across all languages
2026-06-19 13:21:46 +00:00 · 2026-06-12 00:17:49 +02:00
parent 1378c95078
commit f46cc8a98e
34 changed files with 872 additions and 9 deletions
@@ -18,7 +18,7 @@ import {
  type TripAddMemberRequest, type AssignmentReorderRequest,
  type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
  type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest,
+  type DayCreateRequest, type DayUpdateRequest, type DayReorderRequest,
  type PlaceCreateRequest, type PlaceUpdateRequest,
  type ReservationCreateRequest, type ReservationUpdateRequest,
  type AccommodationCreateRequest, type AccommodationUpdateRequest,
@@ -341,6 +341,7 @@ export const daysApi = {
  create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
  update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
  delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }

 export const placesApi = {
@@ -51,6 +51,8 @@ interface DayPlanSidebarProps {
  onDayDetail: (day: Day) => void
  accommodations?: Accommodation[]
  onReorder: (dayId: number, orderedIds: number[]) => void
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
  onUpdateDayTitle: (dayId: number, title: string) => void
  onRouteCalculated: (route: RouteResult | null) => void
  onAssignToDay: (placeId: number, dayId: number, position?: number) => void
@@ -96,7 +98,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
  trip, days, places, categories, assignments,
  selectedDayId, selectedPlaceId, selectedAssignmentId,
  onSelectDay, onPlaceClick, onDayDetail, accommodations = [],
-  onReorder, onUpdateDayTitle, onRouteCalculated,
+  onReorder, onReorderDays, onAddDay, onUpdateDayTitle, onRouteCalculated,
  onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
  reservations = [],
  visibleConnectionIds = [],
@@ -866,6 +868,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
    onDayDetail,
    accommodations,
    onReorder,
+    onReorderDays,
+    onAddDay,
    onUpdateDayTitle,
    onRouteCalculated,
    onAssignToDay,
@@ -1010,6 +1014,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
    onDayDetail,
    accommodations,
    onReorder,
+    onReorderDays,
+    onAddDay,
    onUpdateDayTitle,
    onRouteCalculated,
    onAssignToDay,
@@ -1161,6 +1167,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
        undoHover={undoHover}
        setUndoHover={setUndoHover}
        lastActionLabel={lastActionLabel}
+        canEditDays={canEditDays}
+        onReorderDays={onReorderDays}
+        onAddDay={onAddDay}
      />

      {/* Tagesliste */}
@@ -1,5 +1,7 @@
-import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2 } from 'lucide-react'
+import { useState } from 'react'
+import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown } from 'lucide-react'
 import { downloadTripPDF } from '../PDF/TripPDF'
+import { DayReorderPopup } from './DayReorderPopup'
 import Tooltip from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
@@ -27,13 +29,18 @@ interface DayPlanSidebarToolbarProps {
  undoHover: boolean
  setUndoHover: (v: boolean) => void
  lastActionLabel: string | null
+  canEditDays?: boolean
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
 }

 export function DayPlanSidebarToolbar({
  tripId, trip, days, places, categories, assignments, reservations, dayNotes,
  t, locale, toast, pdfHover, setPdfHover, icsHover, setIcsHover,
  expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
+  canEditDays, onReorderDays, onAddDay,
 }: DayPlanSidebarToolbarProps) {
+  const [reorderOpen, setReorderOpen] = useState(false)
  return (
    <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
@@ -197,6 +204,39 @@ export function DayPlanSidebarToolbar({
            )}
          </div>
        )}
+        {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
+          <div style={{ position: 'relative', flexShrink: 0 }}>
+            <Tooltip label={t('dayplan.reorderDays')} placement="bottom">
+              <button
+                onClick={() => setReorderOpen(v => !v)}
+                aria-label={t('dayplan.reorderDays')}
+                aria-pressed={reorderOpen}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: 30, height: 30, borderRadius: 8,
+                  border: '1px solid var(--border-primary)',
+                  background: reorderOpen ? 'var(--bg-hover)' : 'none',
+                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
+                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
+                }}
+                onMouseEnter={e => { if (!reorderOpen) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!reorderOpen) e.currentTarget.style.background = 'transparent' }}
+              >
+                <ArrowUpDown size={14} strokeWidth={2} />
+              </button>
+            </Tooltip>
+            {reorderOpen && (
+              <DayReorderPopup
+                days={days}
+                t={t}
+                locale={locale}
+                onReorder={onReorderDays}
+                onAddDay={() => onAddDay()}
+                onClose={() => setReorderOpen(false)}
+              />
+            )}
+          </div>
+        )}
      </div>
    </div>
  )
@@ -0,0 +1,137 @@
+import { useState } from 'react'
+import { GripVertical, ArrowUp, ArrowDown, Plus } from 'lucide-react'
+import type { Day } from '../../types'
+
+interface DayReorderPopupProps {
+  days: Day[]
+  t: (key: string, params?: Record<string, any>) => string
+  locale: string
+  onReorder: (orderedIds: number[]) => void
+  onAddDay: () => void
+  onClose: () => void
+}
+
+/**
+ * Compact panel for moving whole days around: drag a row by its grip or use the
+ * up/down arrows, and add a day at the end. Day headers stay untouched — this is
+ * the single surface for ordering. Reorders are applied optimistically by the
+ * store, so the list reflects each move immediately.
+ */
+export function DayReorderPopup({ days, t, locale, onReorder, onAddDay, onClose }: DayReorderPopupProps) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [overIndex, setOverIndex] = useState<number | null>(null)
+
+  const ordered = [...days].sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0))
+
+  const label = (day: Day, index: number) => {
+    if (day.title) return day.title
+    if (day.date) {
+      const d = new Date(day.date + 'T00:00:00')
+      return d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
+    }
+    return t('dayplan.dayN', { n: index + 1 })
+  }
+
+  const move = (from: number, to: number) => {
+    if (to < 0 || to >= ordered.length || from === to) return
+    const ids = ordered.map(d => d.id)
+    const [moved] = ids.splice(from, 1)
+    ids.splice(to, 0, moved)
+    onReorder(ids)
+  }
+
+  const cellBtn = {
+    display: 'grid', placeItems: 'center', width: 26, height: 26,
+    border: '1px solid var(--border-faint)', borderRadius: 7,
+    background: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: 0,
+  } as const
+
+  return (
+    <>
+      {/* outside-click catcher */}
+      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 250 }} />
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 251,
+          width: 290, maxHeight: 360, display: 'flex', flexDirection: 'column',
+          background: 'var(--bg-card, white)', color: 'var(--text-primary)',
+          border: '1px solid var(--border-faint)', borderRadius: 12,
+          boxShadow: '0 12px 32px rgba(0,0,0,0.18)', overflow: 'hidden',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '11px 12px 8px' }}>
+          <span style={{ fontSize: 12.5, fontWeight: 600 }}>{t('dayplan.reorderTitle')}</span>
+          <button
+            onClick={onAddDay}
+            className="bg-accent text-accent-text"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 4, padding: '4px 9px',
+              borderRadius: 7, border: 'none', fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <Plus size={13} strokeWidth={2} />
+            {t('dayplan.addDay')}
+          </button>
+        </div>
+        <div style={{ padding: '0 12px 8px', fontSize: 10.5, color: 'var(--text-faint)', lineHeight: 1.35 }}>
+          {t('dayplan.reorderHint')}
+        </div>
+
+        <div className="scroll-container" style={{ overflowY: 'auto', padding: '0 8px 8px', minHeight: 0 }}>
+          {ordered.map((day, index) => (
+            <div
+              key={day.id}
+              draggable
+              onDragStart={() => setDragIndex(index)}
+              onDragEnd={() => { setDragIndex(null); setOverIndex(null) }}
+              onDragOver={e => { e.preventDefault(); if (overIndex !== index) setOverIndex(index) }}
+              onDrop={e => {
+                e.preventDefault()
+                if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)
+                setDragIndex(null); setOverIndex(null)
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px',
+                borderRadius: 8, marginTop: 2,
+                background: overIndex === index && dragIndex !== null && dragIndex !== index ? 'var(--bg-hover)' : 'transparent',
+                opacity: dragIndex === index ? 0.5 : 1,
+                outline: overIndex === index && dragIndex !== null && dragIndex !== index ? '2px dashed var(--border-primary)' : 'none',
+                outlineOffset: -2,
+              }}
+            >
+              <GripVertical size={14} strokeWidth={1.8} style={{ cursor: 'grab', color: 'var(--text-faint)', flexShrink: 0 }} />
+              <span style={{
+                flexShrink: 0, width: 22, height: 22, borderRadius: '50%',
+                background: 'var(--bg-hover)', color: 'var(--text-muted)',
+                display: 'grid', placeItems: 'center', fontSize: 10.5, fontWeight: 700,
+              }}>
+                {index + 1}
+              </span>
+              <span style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {label(day, index)}
+              </span>
+              <button
+                onClick={() => move(index, index - 1)}
+                disabled={index === 0}
+                aria-label={t('dayplan.moveUp')}
+                style={{ ...cellBtn, opacity: index === 0 ? 0.35 : 1, cursor: index === 0 ? 'default' : 'pointer' }}
+              >
+                <ArrowUp size={13} strokeWidth={2} />
+              </button>
+              <button
+                onClick={() => move(index, index + 1)}
+                disabled={index === ordered.length - 1}
+                aria-label={t('dayplan.moveDown')}
+                style={{ ...cellBtn, opacity: index === ordered.length - 1 ? 0.35 : 1, cursor: index === ordered.length - 1 ? 'default' : 'pointer' }}
+              >
+                <ArrowDown size={13} strokeWidth={2} />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
@@ -199,7 +199,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
    route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
    handleSaveReservation, handleSaveTransport, handleDeleteReservation,
    selectedPlace, dayOrderMap, dayPlaces,
    mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,
@@ -355,6 +355,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                  onSelectDay={handleSelectDay}
                  onPlaceClick={handlePlaceClick}
                  onReorder={handleReorder}
+                  onReorderDays={handleReorderDays}
+                  onAddDay={handleAddDay}
                  onUpdateDayTitle={handleUpdateDayTitle}
                  onAssignToDay={handleAssignToDay}
                  onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } else { setRoute(null); setRouteInfo(null) } }}
@@ -606,7 +608,7 @@ 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) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} 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} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
+                      ? <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) }} onReorder={handleReorder} onReorderDays={handleReorderDays} onAddDay={handleAddDay} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} 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} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
                      : <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} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
                    }
                  </div>
@@ -541,6 +541,23 @@ export function useTripPlanner() {
    catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
  }, [tripId, toast])

+  const handleReorderDays = useCallback((orderedIds: number[]) => {
+    const prevIds = (useTripStore.getState().days || [])
+      .slice().sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0)).map(d => d.id)
+    tripActions.reorderDays(tripId, orderedIds)
+      .then(() => {
+        pushUndo(t('dayplan.reorderUndo'), async () => {
+          await tripActions.reorderDays(tripId, prevIds)
+        })
+      })
+      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.reorderError')))
+  }, [tripId, toast, pushUndo])
+
+  const handleAddDay = useCallback((position?: number) => {
+    tripActions.insertDay(tripId, position)
+      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.addDayError')))
+  }, [tripId, toast])
+
  const handleSaveReservation = async (data: Record<string, string | number | null> & { title: string }) => {
    try {
      if (editingReservation) {
@@ -661,7 +678,7 @@ export function useTripPlanner() {
    route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
    handleSaveReservation, handleSaveTransport, handleDeleteReservation,
    selectedPlace, dayOrderMap, dayPlaces,
    mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,
@@ -0,0 +1,58 @@
+import { daysApi } from '../../api/client'
+import type { StoreApi } from 'zustand'
+import type { TripStoreState } from '../tripStore'
+import type { Day } from '../../types'
+import { getApiErrorMessage } from '../../types'
+
+type SetState = StoreApi<TripStoreState>['setState']
+type GetState = StoreApi<TripStoreState>['getState']
+
+export interface DaysSlice {
+  reorderDays: (tripId: number | string, orderedIds: number[]) => Promise<void>
+  insertDay: (tripId: number | string, position?: number) => Promise<Day | undefined>
+}
+
+export const createDaysSlice = (set: SetState, get: GetState): DaysSlice => ({
+  // Move whole days. Day rows stay stable (assignments/notes/bookings ride along
+  // by id); only positions change and, on a dated trip, dates stay pinned to
+  // their slots while the content moves across them. Optimistically reorder the
+  // list, then refresh to pull the server-side re-stamped dates + booking times.
+  reorderDays: async (tripId, orderedIds) => {
+    const prevDays = get().days
+    const byId = new Map(prevDays.map(d => [d.id, d]))
+    const sortedDates = prevDays.map(d => d.date).filter((d): d is string => !!d).sort()
+    const optimistic = orderedIds
+      .map((id, i) => {
+        const d = byId.get(id)
+        if (!d) return null
+        return { ...d, day_number: i + 1, date: sortedDates.length ? (sortedDates[i] ?? null) : d.date }
+      })
+      .filter((d): d is NonNullable<typeof d> => d !== null)
+
+    set({ days: optimistic })
+
+    try {
+      await daysApi.reorder(tripId, orderedIds)
+      await get().refreshDays(tripId)
+      await get().loadReservations(tripId)
+    } catch (err: unknown) {
+      set({ days: prevDays })
+      throw new Error(getApiErrorMessage(err, 'Error reordering days'))
+    }
+  },
+
+  // Insert a new empty day at a 1-based position (omit to append). On a dated
+  // trip this extends the trip by one day and re-pins dates server-side.
+  insertDay: async (tripId, position) => {
+    const prevDays = get().days
+    try {
+      const result = await daysApi.create(tripId, { position })
+      await get().refreshDays(tripId)
+      await get().loadReservations(tripId)
+      return result.day
+    } catch (err: unknown) {
+      set({ days: prevDays })
+      throw new Error(getApiErrorMessage(err, 'Error adding day'))
+    }
+  },
+})
@@ -283,6 +283,15 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
          dayNotes: newDayNotes,
        }
      }
+      case 'day:reordered': {
+        // Apply the new order instantly when we know all ids; the authoritative
+        // dates + re-stamped booking times are pulled by the refresh below.
+        const orderedIds = payload.orderedIds as number[] | undefined
+        if (!orderedIds || orderedIds.length !== state.days.length) return {}
+        const byId = new Map(state.days.map(d => [d.id, d]))
+        if (!orderedIds.every(id => byId.has(id))) return {}
+        return { days: orderedIds.map((id, i) => ({ ...byId.get(id)!, day_number: i + 1 })) }
+      }

      // Day Notes
      case 'dayNote:created': {
@@ -442,6 +451,16 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
    }
  })

+  // A reorder/insert re-pins dates and re-stamps booking times server-side, so
+  // pull the authoritative days + reservations for collaborators.
+  if (type === 'day:reordered') {
+    const tripId = get().trip?.id
+    if (tripId) {
+      get().refreshDays(tripId)
+      get().loadReservations(tripId)
+    }
+  }
+
  // Write the change through to IndexedDB using the post-update state
  writeToDexie(type, payload as Record<string, unknown>, get())
 }
@@ -9,6 +9,7 @@ import { packingRepo } from '../repo/packingRepo'
 import { todoRepo } from '../repo/todoRepo'
 import { createPlacesSlice } from './slices/placesSlice'
 import { createAssignmentsSlice } from './slices/assignmentsSlice'
+import { createDaysSlice } from './slices/daysSlice'
 import { createDayNotesSlice } from './slices/dayNotesSlice'
 import { createPackingSlice } from './slices/packingSlice'
 import { createTodoSlice } from './slices/todoSlice'
@@ -24,6 +25,7 @@ import type {
 import { getApiErrorMessage } from '../types'
 import type { PlacesSlice } from './slices/placesSlice'
 import type { AssignmentsSlice } from './slices/assignmentsSlice'
+import type { DaysSlice } from './slices/daysSlice'
 import type { DayNotesSlice } from './slices/dayNotesSlice'
 import type { PackingSlice } from './slices/packingSlice'
 import type { TodoSlice } from './slices/todoSlice'
@@ -34,6 +36,7 @@ import type { FilesSlice } from './slices/filesSlice'
 export interface TripStoreState
  extends PlacesSlice,
    AssignmentsSlice,
+    DaysSlice,
    DayNotesSlice,
    PackingSlice,
    TodoSlice,
@@ -184,6 +187,7 @@ export const useTripStore = create<TripStoreState>((set, get) => ({

  ...createPlacesSlice(set, get),
  ...createAssignmentsSlice(set, get),
+  ...createDaysSlice(set, get),
  ...createDayNotesSlice(set, get),
  ...createPackingSlice(set, get),
  ...createTodoSlice(set, get),