chore: bump version to 3.0.13 [skip ci]

* fix: hotel day-range clamping in ReservationModal + stale assignment_id on accommodation clear (issues #929, #934)

* ReservationModal hotel start/end pickers now use findIndex-based
  positional clamping instead of raw ID arithmetic, matching the fix
  applied to DayDetailPanel in 8e05ba7. Prevents inverted
  start_day_id/end_day_id on trips with non-monotonic day IDs.

* Clearing accommodation_id on a hotel reservation now forces
  assignment_id to null in the save payload, removing the stale
  day-assignment link that had no UI path to clear.

* Migration: swaps inverted start_day_id/end_day_id pairs in
  day_accommodations where start.day_number > end.day_number,
  recovering existing corrupt rows from the pre-fix picker bug.

* Tests FE-PLANNER-RESMODAL-050/051/052 cover both fixes.

* fix: preserve line breaks and wrap long URLs in notes fields (#930)

Add remark-breaks to all reservation/place notes markdown renderers so
single newlines render as <br>, and add wordBreak/overflowWrap styles
so long unbroken URLs (e.g. booking.com tracking links) wrap correctly.

* fix: delete linked budget item when accommodation or reservation is deleted (#933)

Deleting an accommodation or reservation now removes any budget item
linked via reservation_id, preventing orphan entries in the Budget page.
Also fixes a pre-existing payload-shape bug where budget:deleted was
broadcast with {id} instead of {itemId}, breaking live updates for
collaborators when a reservation price was cleared.

Tests added: ACCOM-006, RESV-009b, BUDGET-004b.

* fix: restore scroll position in mobile Plan and Places sidebars on reopen (issue #932)

Both DayPlanSidebar and PlacesSidebar have their own internal scroll
containers (overflowY: auto). Scroll events don't bubble, so previous
attempts that tracked scrollTop on the outer portal div never fired.

Each sidebar now accepts initialScrollTop and onScrollTopChange props.
The internal scroll container saves its scrollTop via onScrollTopChange
on every scroll event, and restores it via useLayoutEffect on mount
(before the browser paints, so no visible flash).

TripPlannerPage holds the saved values in refs (mobilePlanScrollTopRef,
mobilePlacesScrollTopRef) and passes them through on each portal mount.

* fix(map): prevent auto zoom-out when opening/closing place inspector (issue #921)

Both Leaflet and Mapbox GL renderers now gate fitBounds strictly on fitKey
increments from the parent. Selecting or dismissing a place inspector changes
paddingOpts (via hasInspector) but no longer triggers a re-fit that zoomed
the map out to the full trip extent when no day was selected.

Also removes the zoom-12 visibility gate on Leaflet route info pills so they
render at all zoom levels when a route is active.

* fix: translate mobile bottom-nav tab labels (issue #931)

Replaced hardcoded English labels in BottomNav with t() lookups using the same translation keys as the desktop navbar (nav.myTrips, admin.addons.catalog.*.name).

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 3.0.12
+version: 3.0.13
 description: Minimal Helm chart for TREK app
-appVersion: "3.0.12"
+appVersion: "3.0.13"

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trek-client",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-client",
-      "version": "3.0.12",
+      "version": "3.0.13",
       "dependencies": {
         "@react-pdf/renderer": "^4.3.2",
         "axios": "^1.6.7",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-client",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "private": true,
   "type": "module",
   "scripts": {

client/src/components/Layout/BottomNav.test.tsx

@@ -19,8 +19,10 @@ vi.mock('react-router-dom', async () => {
 import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { useAuthStore } from '../../store/authStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { useAddonStore } from '../../store/addonStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser } from '../../../tests/helpers/factories';
+import { buildUser, buildSettings } from '../../../tests/helpers/factories';
 import BottomNav from './BottomNav';
 
 const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
@@ -39,7 +41,7 @@ describe('BottomNav', () => {
 
   it('FE-COMP-BOTTOMNAV-002: shows Trips nav link', () => {
     render(<BottomNav />);
-    expect(screen.getByText('Trips')).toBeInTheDocument();
+    expect(screen.getByText('My Trips')).toBeInTheDocument();
   });
 
   it('FE-COMP-BOTTOMNAV-003: shows Profile button', () => {
@@ -99,4 +101,39 @@ describe('BottomNav', () => {
     // Sheet should be closed — username no longer visible (only the nav Profile text remains)
     expect(screen.queryByText('testuser')).not.toBeInTheDocument();
   });
+
+  it('FE-COMP-BOTTOMNAV-010: Trips label translates when language is fr', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
+    render(<BottomNav />);
+    expect(screen.getByText('Mes voyages')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-011: Profile label translates when language is fr', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
+    render(<BottomNav />);
+    expect(screen.getByText('Profil')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-012: addon labels translate when language is fr', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
+    seedStore(useAddonStore, {
+      addons: [
+        { id: 'vacay', name: 'Vacay', type: 'global', icon: 'calendar', enabled: true },
+        { id: 'atlas', name: 'Atlas', type: 'global', icon: 'globe', enabled: true },
+        { id: 'journey', name: 'Journey', type: 'global', icon: 'compass', enabled: true },
+      ],
+    });
+    render(<BottomNav />);
+    expect(screen.getByText('Vacances')).toBeInTheDocument();
+    expect(screen.getByText('Atlas')).toBeInTheDocument();
+    expect(screen.getByText('Journal de voyage')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-013: unknown addon id is not rendered', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'foo', name: 'Foo Addon', type: 'global', icon: 'star', enabled: true }],
+    });
+    render(<BottomNav />);
+    expect(screen.queryByText('Foo Addon')).not.toBeInTheDocument();
+  });
 });

client/src/components/Layout/BottomNav.tsx

@@ -7,14 +7,10 @@ import { useTranslation } from '../../i18n'
 import { Plane, CalendarDays, Globe, Compass, User, Settings, Shield, LogOut, X } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
-const BASE_ITEMS: { to: string; label: string; icon: LucideIcon; addonId?: string }[] = [
+const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
-  { to: '/trips', label: 'Trips', icon: Plane },
+  vacay:   { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
-]
+  atlas:   { icon: Globe,        labelKey: 'admin.addons.catalog.atlas.name' },
-
+  journey: { icon: Compass,      labelKey: 'admin.addons.catalog.journey.name' },
-const ADDON_NAV: Record<string, { to: string; label: string; icon: LucideIcon }> = {
-  vacay: { to: '/vacay', label: 'Vacay', icon: CalendarDays },
-  atlas: { to: '/atlas', label: 'Atlas', icon: Globe },
-  journey: { to: '/journey', label: 'Journey', icon: Compass },
 }
 
 export default function BottomNav() {
@@ -25,11 +21,13 @@ export default function BottomNav() {
   const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
   const [showProfile, setShowProfile] = useState(false)
 
-  const items = [...BASE_ITEMS]
+  const items: { to: string; label: string; icon: LucideIcon }[] = [
-  for (const addon of globalAddons) {
+    { to: '/trips', label: t('nav.myTrips'), icon: Plane },
-    const nav = ADDON_NAV[addon.id]
+    ...globalAddons.flatMap(addon => {
-    if (nav) items.push(nav)
+      const nav = ADDON_NAV[addon.id]
-  }
+      return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
+    }),
+  ]
 
   return (
     <>

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

@@ -7,6 +7,16 @@ import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import * as photoService from '../../services/photoService'
 
+const mapMock = vi.hoisted(() => ({
+  panTo: vi.fn(),
+  setView: vi.fn(),
+  fitBounds: vi.fn(),
+  getZoom: vi.fn().mockReturnValue(10),
+  on: vi.fn(),
+  off: vi.fn(),
+  panBy: vi.fn(),
+}))
+
 vi.mock('react-leaflet', () => ({
   MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
   TileLayer: () => <div data-testid="tile-layer" />,
@@ -27,15 +37,7 @@ vi.mock('react-leaflet', () => ({
   Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
   CircleMarker: () => <div data-testid="circle-marker" />,
   Circle: () => <div data-testid="circle" />,
-  useMap: () => ({
+  useMap: () => mapMock,
-    panTo: vi.fn(),
-    setView: vi.fn(),
-    fitBounds: vi.fn(),
-    getZoom: () => 10,
-    on: vi.fn(),
-    off: vi.fn(),
-    panBy: vi.fn(),
-  }),
   useMapEvents: () => ({}),
 }))
 
@@ -79,6 +81,7 @@ function buildMapPlace(overrides: Record<string, any> = {}) {
 }
 
 afterEach(() => {
+  vi.clearAllMocks()
   resetAllStores()
 })
 
@@ -216,4 +219,33 @@ describe('MapView', () => {
     render(<MapView places={places} selectedPlaceId={5} />)
     expect(screen.getByTestId('marker')).toBeTruthy()
   })
+
+  it('FE-COMP-MAPVIEW-018: changing selectedPlaceId/hasInspector does not refit bounds (issue #921)', () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+      buildMapPlace({ id: 2, lat: 48.86, lng: 2.337 }),
+    ]
+    const { rerender } = render(<MapView places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />)
+    const initialCount = mapMock.fitBounds.mock.calls.length
+
+    // Toggle selectedPlaceId on — mimics opening place inspector (hasInspector flips,
+    // paddingOpts memo creates new object). fitBounds must NOT fire again.
+    rerender(<MapView places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />)
+    expect(mapMock.fitBounds).toHaveBeenCalledTimes(initialCount)
+
+    // Toggle selectedPlaceId off — mimics closing inspector via X button.
+    rerender(<MapView places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />)
+    expect(mapMock.fitBounds).toHaveBeenCalledTimes(initialCount)
+  })
+
+  it('FE-COMP-MAPVIEW-019: bumping fitKey triggers a new fitBounds call', () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+    ]
+    const { rerender } = render(<MapView places={places} fitKey={1} />)
+    const afterFirst = mapMock.fitBounds.mock.calls.length
+
+    rerender(<MapView places={places} fitKey={2} />)
+    expect(mapMock.fitBounds.mock.calls.length).toBeGreaterThan(afterFirst)
+  })
 })

client/src/components/Map/MapView.tsx

@@ -186,7 +186,7 @@ function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsC
         }
       }
     } catch {}
-  }, [fitKey, places, paddingOpts, map, hasDayDetail])
+  }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return null
 }
@@ -233,18 +233,7 @@ interface RouteLabelProps {
 }
 
 function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
-  const map = useMap()
+  if (!midpoint) return null
-  const [visible, setVisible] = useState(map ? map.getZoom() >= 12 : false)
-
-  useEffect(() => {
-    if (!map) return
-    const check = () => setVisible(map.getZoom() >= 12)
-    check()
-    map.on('zoomend', check)
-    return () => map.off('zoomend', check)
-  }, [map])
-
-  if (!visible || !midpoint) return null
 
   const icon = L.divIcon({
     className: 'route-info-pill',

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

@@ -0,0 +1,164 @@
+import React from 'react'
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { render } from '../../../tests/helpers/render'
+import { act } from '@testing-library/react'
+import { resetAllStores } from '../../../tests/helpers/store'
+import { buildPlace } from '../../../tests/helpers/factories'
+import { useSettingsStore } from '../../store/settingsStore'
+
+// Stable fake map so fitBounds call counts survive re-renders.
+const glMap = vi.hoisted(() => ({
+  on: vi.fn(),
+  off: vi.fn(),
+  once: vi.fn(),
+  loaded: vi.fn().mockReturnValue(true),
+  fitBounds: vi.fn(),
+  flyTo: vi.fn(),
+  jumpTo: vi.fn(),
+  getZoom: vi.fn().mockReturnValue(10),
+  addControl: vi.fn(),
+  removeControl: vi.fn(),
+  remove: vi.fn(),
+  addSource: vi.fn(),
+  getSource: vi.fn().mockReturnValue(null),
+  addLayer: vi.fn(),
+  setLayoutProperty: vi.fn(),
+  getStyle: vi.fn().mockReturnValue({ layers: [] }),
+  isStyleLoaded: vi.fn().mockReturnValue(true),
+  getCanvasContainer: vi.fn(() => document.createElement('div')),
+}))
+
+vi.mock('mapbox-gl', () => ({
+  default: {
+    accessToken: '',
+    Map: vi.fn(() => glMap),
+    Marker: vi.fn(() => ({
+      setLngLat: vi.fn().mockReturnThis(),
+      addTo: vi.fn().mockReturnThis(),
+      remove: vi.fn(),
+      getElement: vi.fn(() => document.createElement('div')),
+    })),
+    LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
+    NavigationControl: vi.fn(),
+  },
+}))
+vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))
+
+vi.mock('./mapboxSetup', () => ({
+  isStandardFamily: vi.fn(() => false),
+  supportsCustom3d: vi.fn(() => false),
+  wantsTerrain: vi.fn(() => false),
+  addCustom3dBuildings: vi.fn(),
+  addTerrainAndSky: vi.fn(),
+}))
+
+vi.mock('./locationMarkerMapbox', () => ({
+  attachLocationMarker: vi.fn(() => ({ update: vi.fn() })),
+}))
+
+vi.mock('./reservationsMapbox', () => ({
+  ReservationMapboxOverlay: vi.fn().mockImplementation(() => ({ update: vi.fn() })),
+}))
+
+vi.mock('../../hooks/useGeolocation', () => ({
+  useGeolocation: vi.fn(() => ({
+    position: null,
+    mode: 'off',
+    error: null,
+    cycleMode: vi.fn(),
+    setMode: vi.fn(),
+  })),
+}))
+
+vi.mock('../../services/photoService', () => ({
+  getCached: vi.fn(() => null),
+  isLoading: vi.fn(() => false),
+  fetchPhoto: vi.fn(),
+  onThumbReady: vi.fn(() => () => {}),
+  getAllThumbs: vi.fn(() => ({})),
+}))
+
+import { MapViewGL } from './MapViewGL'
+
+function buildMapPlace(overrides: Record<string, any> = {}) {
+  return {
+    ...buildPlace(),
+    category_name: null,
+    category_color: null,
+    category_icon: null,
+    ...overrides,
+  } as any
+}
+
+beforeEach(() => {
+  useSettingsStore.setState({
+    settings: {
+      ...useSettingsStore.getState().settings,
+      map_provider: 'mapbox-gl',
+      mapbox_access_token: 'pk.test_token',
+      mapbox_style: 'mapbox://styles/mapbox/streets-v12',
+      mapbox_3d_enabled: false,
+    },
+  } as any)
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+  resetAllStores()
+})
+
+describe('MapViewGL', () => {
+  it('FE-COMP-MAPVIEWGL-001: opening place inspector does not refit bounds (issue #921)', async () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+      buildMapPlace({ id: 2, lat: 48.86, lng: 2.337 }),
+    ]
+
+    const { rerender } = render(
+      <MapViewGL places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />,
+    )
+    await act(async () => {})
+    const after_initial = glMap.fitBounds.mock.calls.length
+
+    // Selecting a place flips hasInspector → paddingOpts memo changes.
+    // fitBounds must NOT fire again (this was the bug).
+    rerender(
+      <MapViewGL places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />,
+    )
+    await act(async () => {})
+    expect(glMap.fitBounds).toHaveBeenCalledTimes(after_initial)
+  })
+
+  it('FE-COMP-MAPVIEWGL-002: closing inspector does not refit bounds (issue #921)', async () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+    ]
+
+    const { rerender } = render(
+      <MapViewGL places={places} fitKey={1} selectedPlaceId={1} hasInspector={true} />,
+    )
+    await act(async () => {})
+    const after_initial = glMap.fitBounds.mock.calls.length
+
+    // Closing inspector (X button) clears selectedPlaceId → hasInspector=false → new paddingOpts.
+    rerender(
+      <MapViewGL places={places} fitKey={1} selectedPlaceId={null} hasInspector={false} />,
+    )
+    await act(async () => {})
+    expect(glMap.fitBounds).toHaveBeenCalledTimes(after_initial)
+  })
+
+  it('FE-COMP-MAPVIEWGL-003: bumping fitKey triggers a new fitBounds call', async () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+    ]
+
+    const { rerender } = render(<MapViewGL places={places} fitKey={1} />)
+    await act(async () => {})
+    const after_first = glMap.fitBounds.mock.calls.length
+
+    rerender(<MapViewGL places={places} fitKey={2} />)
+    await act(async () => {})
+    expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(after_first)
+  })
+})

client/src/components/Map/MapViewGL.tsx

@@ -507,13 +507,10 @@ export function MapViewGL({
     return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
-  // Also fit when the places collection changes so the initial render
+  const prevFitKey = useRef(-1)
-  // zooms to the trip instead of the default center.
-  const placeBoundsKey = useMemo(
-    () => places.filter(p => p.lat && p.lng).map(p => `${p.id}:${p.lat}:${p.lng}`).join('|'),
-    [places]
-  )
   useEffect(() => {
+    if (fitKey === prevFitKey.current) return
+    prevFitKey.current = fitKey
     const map = mapRef.current
     if (!map) return
     const target = dayPlaces.length > 0 ? dayPlaces : places
@@ -533,7 +530,7 @@ export function MapViewGL({
     }
     if (map.loaded()) run()
     else map.once('load', run)
-  }, [fitKey, placeBoundsKey, paddingOpts, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // flyTo selected place
   useEffect(() => {

client/src/components/Planner/DayPlanSidebar.tsx

@@ -2,7 +2,7 @@
 interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; reservationId?: string; fromDayId?: string; phase?: 'single' | 'start' | 'middle' | 'end' }
 declare global { interface Window { __dragData: DragDataPayload | null } }
 
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react'
 import ReactDOM from 'react-dom'
 import { ChevronDown, ChevronRight, ChevronUp, ChevronsDownUp, ChevronsUpDown, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Route as RouteIcon } from 'lucide-react'
 
@@ -191,6 +191,8 @@ interface DayPlanSidebarProps {
   onEditTransport?: (reservation: Reservation) => void
   onEditReservation?: (reservation: Reservation) => void
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
+  initialScrollTop?: number
+  onScrollTopChange?: (top: number) => void
 }
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar({
@@ -219,6 +221,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onEditTransport,
   onEditReservation,
   onAddBookingToAssignment,
+  initialScrollTop,
+  onScrollTopChange,
 }: DayPlanSidebarProps) {
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -271,6 +275,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   } | null>(null)
   const inputRef = useRef(null)
   const dragDataRef = useRef(null)
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+  useLayoutEffect(() => {
+    if (scrollContainerRef.current && initialScrollTop) {
+      scrollContainerRef.current.scrollTop = initialScrollTop
+    }
+  }, [])
   const initedTransportIds = useRef(new Set<number>()) // Speichert Drag-Daten als Backup (dataTransfer geht bei Re-Render verloren)
   // Remember which assignment we last auto-scrolled into view so we don't
   // keep yanking the user back whenever they scroll away while the same
@@ -1118,7 +1128,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       </div>
 
       {/* Tagesliste */}
-      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
         {days.map((day, index) => {
           const isSelected = selectedDayId === day.id
           const isExpanded = expandedDays.has(day.id)

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
 import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye, Route } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
@@ -34,6 +34,8 @@ interface PlacesSidebarProps {
   onCategoryFilterChange?: (categoryIds: Set<string>) => void
   onPlacesFilterChange?: (filter: string) => void
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+  initialScrollTop?: number
+  onScrollTopChange?: (top: number) => void
 }
 
 interface MemoPlaceRowProps {
@@ -145,6 +147,7 @@ const MemoPlaceRow = React.memo(function MemoPlaceRow({
 const PlacesSidebar = React.memo(function PlacesSidebar({
   tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
   onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, onBulkDeletePlaces, onBulkDeleteConfirm, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
+  initialScrollTop, onScrollTopChange,
 }: PlacesSidebarProps) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -159,6 +162,12 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [sidebarDropFile, setSidebarDropFile] = useState<File | null>(null)
   const [sidebarDragOver, setSidebarDragOver] = useState(false)
   const sidebarDragCounter = useRef(0)
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+  useLayoutEffect(() => {
+    if (scrollContainerRef.current && initialScrollTop) {
+      scrollContainerRef.current.scrollTop = initialScrollTop
+    }
+  }, [])
 
   const handleSidebarDragEnter = (e: React.DragEvent) => {
     if (!canEditPlaces) return
@@ -636,7 +645,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
       )}
 
       {/* Liste */}
-      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
         {filtered.length === 0 ? (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
             <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>

client/src/pages/TripPlannerPage.test.tsx

@@ -1474,6 +1474,56 @@ describe('TripPlannerPage', () => {
     });
   });
 
+  describe('FE-PAGE-PLANNER-051: Mobile Plan sidebar stays mounted after onPlaceClick (issue #932)', () => {
+    it('does not unmount the mobile Plan portal when a place is tapped, preserving scroll position', async () => {
+      vi.useFakeTimers();
+      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 375 });
+
+      const place = buildPlace({ id: 1, trip_id: 42, lat: 48.8566, lng: 2.3522 });
+      const assignment = buildAssignment({ id: 10, day_id: 99, place, order_index: 0 });
+      seedTripStore({ id: 42 });
+      seedStore(useTripStore, {
+        places: [place],
+        assignments: { '99': [assignment] },
+      } as any);
+
+      renderPlannerPage(42);
+      act(() => { vi.runAllTimers(); });
+      vi.useRealTimers();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('day-plan-sidebar')).toBeInTheDocument();
+      });
+
+      // Open the mobile Plan portal via the bottom-nav Plan button (selector mirrors FE-PAGE-PLANNER-049).
+      const mobilePlanBtn = Array.from(document.body.querySelectorAll('button')).find(
+        b => b.textContent === 'Plan' && !b.getAttribute('title'),
+      );
+      expect(mobilePlanBtn).toBeTruthy();
+      await act(async () => { fireEvent.click(mobilePlanBtn!); });
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('day-plan-sidebar').length).toBe(2);
+      });
+
+      // The mock factory overwrites capturedDayPlanSidebarProps on each mount,
+      // so current holds the mobile portal instance's props.
+      const mobileOnPlaceClick = capturedDayPlanSidebarProps.current.onPlaceClick;
+      expect(typeof mobileOnPlaceClick).toBe('function');
+
+      await act(async () => {
+        mobileOnPlaceClick(place.id, assignment.id);
+      });
+
+      // Invariant: portal must NOT unmount — both instances persist.
+      // Pre-fix: collapses to 1 (setMobileSidebarOpen(null) destroyed scroll container).
+      // Post-fix: stays at 2, browser preserves scrollTop on the living DOM node.
+      expect(screen.getAllByTestId('day-plan-sidebar').length).toBe(2);
+
+      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1024 });
+    });
+  });
+
   describe('FE-PAGE-PLANNER-037: onExpandedDaysChange covers mapPlaces hidden logic', () => {
     it('calls onExpandedDaysChange to trigger mapPlaces hidden set computation', async () => {
       vi.useFakeTimers();

client/src/pages/TripPlannerPage.tsx

@@ -272,6 +272,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
   const [fitKey, setFitKey] = useState<number>(0)
   const initialFitTripId = useRef<number | null>(null)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState<'left' | 'right' | null>(null)
+  const mobilePlanScrollTopRef = useRef<number>(0)
+  const mobilePlacesScrollTopRef = useRef<number>(0)
   const [deletePlaceId, setDeletePlaceId] = useState<number | null>(null)
   const [deletePlaceIds, setDeletePlaceIds] = useState<number[] | null>(null)
 
@@ -1114,8 +1116,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId); setMobileSidebarOpen(null) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute(r.coordinates); setRouteInfo({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} />
+                      ? <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({ distance: r.distanceText, duration: r.durationText }) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setMobileSidebarOpen(null) }} accommodations={tripAccommodations} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} 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} />
+                      : <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>
                 </div>

server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trek-server",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-server",
-      "version": "3.0.12",
+      "version": "3.0.13",
       "dependencies": {
         "@modelcontextprotocol/sdk": "^1.28.0",
         "archiver": "^6.0.1",

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-server",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "main": "src/index.ts",
   "scripts": {
     "start": "node --import tsx src/index.ts",

server/src/routes/days.ts

@@ -117,10 +117,13 @@ accommodationsRouter.delete('/:id', authenticate, requireTripAccess, (req: Reque
 
   if (!dayService.getAccommodation(id, tripId)) return res.status(404).json({ error: 'Accommodation not found' });
 
-  const { linkedReservationId } = dayService.deleteAccommodation(id);
+  const { linkedReservationId, deletedBudgetItemId } = dayService.deleteAccommodation(id);
   if (linkedReservationId) {
     broadcast(tripId, 'reservation:deleted', { reservationId: linkedReservationId }, req.headers['x-socket-id'] as string);
   }
+  if (deletedBudgetItemId) {
+    broadcast(tripId, 'budget:deleted', { itemId: deletedBudgetItemId }, req.headers['x-socket-id'] as string);
+  }
 
   res.json({ success: true });
   broadcast(tripId, 'accommodation:deleted', { accommodationId: Number(id) }, req.headers['x-socket-id'] as string);

server/src/routes/reservations.ts

@@ -129,7 +129,7 @@ router.put('/:id', authenticate, (req: Request, res: Response) => {
     const linked = db.prepare('SELECT id FROM budget_items WHERE trip_id = ? AND reservation_id = ?').get(tripId, id) as { id: number } | undefined;
     if (linked) {
       deleteBudgetItem(linked.id, tripId);
-      broadcast(tripId, 'budget:deleted', { id: linked.id }, req.headers['x-socket-id'] as string);
+      broadcast(tripId, 'budget:deleted', { itemId: linked.id }, req.headers['x-socket-id'] as string);
     }
   }
 
@@ -179,12 +179,15 @@ router.delete('/:id', authenticate, (req: Request, res: Response) => {
   if (!checkPermission('reservation_edit', authReq.user.role, trip.user_id, authReq.user.id, trip.user_id !== authReq.user.id))
     return res.status(403).json({ error: 'No permission' });
 
-  const { deleted: reservation, accommodationDeleted } = deleteReservation(id, tripId);
+  const { deleted: reservation, accommodationDeleted, deletedBudgetItemId } = deleteReservation(id, tripId);
   if (!reservation) return res.status(404).json({ error: 'Reservation not found' });
 
   if (accommodationDeleted) {
     broadcast(tripId, 'accommodation:deleted', { accommodationId: reservation.accommodation_id }, req.headers['x-socket-id'] as string);
   }
+  if (deletedBudgetItemId) {
+    broadcast(tripId, 'budget:deleted', { itemId: deletedBudgetItemId }, req.headers['x-socket-id'] as string);
+  }
 
   res.json({ success: true });
   broadcast(tripId, 'reservation:deleted', { reservationId: Number(id) }, req.headers['x-socket-id'] as string);

server/src/services/dayService.ts

@@ -292,14 +292,19 @@ export function updateAccommodation(id: string | number, existing: DayAccommodat
   return getAccommodationWithPlace(Number(id));
 }
 
-/** Delete accommodation and its linked reservation. Returns the linked reservation id if one existed. */
+/** Delete accommodation and its linked reservation (and any linked budget item). */
-export function deleteAccommodation(id: string | number): { linkedReservationId: number | null } {
+export function deleteAccommodation(id: string | number): { linkedReservationId: number | null; deletedBudgetItemId: number | null } {
-  // Delete linked reservation
   const linkedRes = db.prepare('SELECT id FROM reservations WHERE accommodation_id = ?').get(Number(id)) as { id: number } | undefined;
+  let deletedBudgetItemId: number | null = null;
   if (linkedRes) {
+    const linkedBudget = db.prepare('SELECT id FROM budget_items WHERE reservation_id = ?').get(linkedRes.id) as { id: number } | undefined;
+    if (linkedBudget) {
+      db.prepare('DELETE FROM budget_items WHERE id = ?').run(linkedBudget.id);
+      deletedBudgetItemId = linkedBudget.id;
+    }
     db.prepare('DELETE FROM reservations WHERE id = ?').run(linkedRes.id);
   }
 
   db.prepare('DELETE FROM day_accommodations WHERE id = ?').run(id);
-  return { linkedReservationId: linkedRes ? linkedRes.id : null };
+  return { linkedReservationId: linkedRes ? linkedRes.id : null, deletedBudgetItemId };
 }

server/src/services/reservationService.ts

@@ -418,9 +418,9 @@ export function updateReservation(id: string | number, tripId: string | number,
   return { reservation, accommodationChanged };
 }
 
-export function deleteReservation(id: string | number, tripId: string | number): { deleted: { id: number; title: string; type: string; accommodation_id: number | null } | undefined; accommodationDeleted: boolean } {
+export function deleteReservation(id: string | number, tripId: string | number): { deleted: { id: number; title: string; type: string; accommodation_id: number | null } | undefined; accommodationDeleted: boolean; deletedBudgetItemId: number | null } {
   const reservation = db.prepare('SELECT id, title, type, accommodation_id FROM reservations WHERE id = ? AND trip_id = ?').get(id, tripId) as { id: number; title: string; type: string; accommodation_id: number | null } | undefined;
-  if (!reservation) return { deleted: undefined, accommodationDeleted: false };
+  if (!reservation) return { deleted: undefined, accommodationDeleted: false, deletedBudgetItemId: null };
 
   let accommodationDeleted = false;
   if (reservation.accommodation_id) {
@@ -428,6 +428,11 @@ export function deleteReservation(id: string | number, tripId: string | number):
     accommodationDeleted = true;
   }
 
+  const linkedBudget = db.prepare('SELECT id FROM budget_items WHERE trip_id = ? AND reservation_id = ?').get(tripId, id) as { id: number } | undefined;
+  if (linkedBudget) {
+    db.prepare('DELETE FROM budget_items WHERE id = ?').run(linkedBudget.id);
+  }
+
   db.prepare('DELETE FROM reservations WHERE id = ?').run(id);
-  return { deleted: reservation, accommodationDeleted };
+  return { deleted: reservation, accommodationDeleted, deletedBudgetItemId: linkedBudget ? linkedBudget.id : null };
 }

server/tests/integration/budget.test.ts

@@ -189,6 +189,25 @@ describe('Delete budget item', () => {
       .set('Cookie', authCookie(user.id));
     expect(list.body.items).toHaveLength(0);
   });
+
+  it('BUDGET-004b — DELETE budget item does NOT delete its linked reservation', async () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id);
+    const reservation = createReservation(testDb, trip.id, { title: 'Hotel Booking', type: 'hotel' });
+
+    const result = testDb.prepare(
+      'INSERT INTO budget_items (trip_id, name, category, total_price, reservation_id) VALUES (?, ?, ?, ?, ?)'
+    ).run(trip.id, 'Hotel Cost', 'Accommodation', 250, reservation.id);
+    const itemId = result.lastInsertRowid as number;
+
+    const del = await request(app)
+      .delete(`/api/trips/${trip.id}/budget/${itemId}`)
+      .set('Cookie', authCookie(user.id));
+    expect(del.status).toBe(200);
+
+    const reservationAfter = testDb.prepare('SELECT id FROM reservations WHERE id = ?').get(reservation.id);
+    expect(reservationAfter).toBeDefined();
+  });
 });
 
 // ─────────────────────────────────────────────────────────────────────────────

server/tests/integration/days.test.ts

@@ -502,4 +502,46 @@ describe('Accommodations', () => {
     ).get(reservationBefore.id);
     expect(reservationAfter).toBeUndefined();
   });
+
+  it('ACCOM-006 — DELETE accommodation also removes its linked budget item (issue #933)', async () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Hotel Budget Trip' });
+    const day1 = createDay(testDb, trip.id, { date: '2026-11-01' });
+    const day2 = createDay(testDb, trip.id, { date: '2026-11-03' });
+    const place = createPlace(testDb, trip.id, { name: 'Grand Hotel' });
+
+    // Create a hotel reservation that creates an accommodation and a linked budget item
+    const createRes = await request(app)
+      .post(`/api/trips/${trip.id}/reservations`)
+      .set('Cookie', authCookie(user.id))
+      .send({
+        title: 'Grand Hotel Stay',
+        type: 'hotel',
+        day_id: day1.id,
+        create_accommodation: { place_id: place.id, start_day_id: day1.id, end_day_id: day2.id },
+        create_budget_entry: { total_price: 450, category: 'Accommodation' },
+      });
+    expect(createRes.status).toBe(201);
+
+    const accommodationId = testDb.prepare(
+      'SELECT id FROM day_accommodations WHERE trip_id = ?'
+    ).get(trip.id) as any;
+    expect(accommodationId).toBeDefined();
+
+    const budgetBefore = testDb.prepare(
+      'SELECT id FROM budget_items WHERE trip_id = ?'
+    ).get(trip.id);
+    expect(budgetBefore).toBeDefined();
+
+    // Delete via the accommodation endpoint (the primary bug path)
+    const delRes = await request(app)
+      .delete(`/api/trips/${trip.id}/accommodations/${accommodationId.id}`)
+      .set('Cookie', authCookie(user.id));
+    expect(delRes.status).toBe(200);
+
+    const budgetAfter = testDb.prepare(
+      'SELECT id FROM budget_items WHERE trip_id = ?'
+    ).get(trip.id);
+    expect(budgetAfter).toBeUndefined();
+  });
 });

server/tests/integration/reservations.test.ts

@@ -452,4 +452,41 @@ describe('Reservation accommodation delete', () => {
     ).get(accom.id);
     expect(accomAfter).toBeUndefined();
   });
+
+  it('RESV-009b — DELETE reservation linked to accommodation also removes its linked budget item (issue #933)', async () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id);
+    const day1 = createDay(testDb, trip.id, { date: '2025-08-01' });
+    const day2 = createDay(testDb, trip.id, { date: '2025-08-03' });
+    const place = createPlace(testDb, trip.id, { name: 'Seaside Resort' });
+
+    const createRes = await request(app)
+      .post(`/api/trips/${trip.id}/reservations`)
+      .set('Cookie', authCookie(user.id))
+      .send({
+        title: 'Seaside Resort Stay',
+        type: 'hotel',
+        day_id: day1.id,
+        create_accommodation: { place_id: place.id, start_day_id: day1.id, end_day_id: day2.id },
+        create_budget_entry: { total_price: 320, category: 'Accommodation' },
+      });
+    expect(createRes.status).toBe(201);
+    const reservationId = createRes.body.reservation.id;
+
+    const budgetBefore = testDb.prepare(
+      'SELECT id FROM budget_items WHERE trip_id = ? AND reservation_id = ?'
+    ).get(trip.id, reservationId);
+    expect(budgetBefore).toBeDefined();
+
+    // Delete via the reservation endpoint
+    const delRes = await request(app)
+      .delete(`/api/trips/${trip.id}/reservations/${reservationId}`)
+      .set('Cookie', authCookie(user.id));
+    expect(delRes.status).toBe(200);
+
+    const budgetAfter = testDb.prepare(
+      'SELECT id FROM budget_items WHERE trip_id = ?'
+    ).get(trip.id);
+    expect(budgetAfter).toBeUndefined();
+  });
 });