fix(mobile): give the trip map a way back to every day

The phone map filters down to one day and had no way back out. The chip
rail can only swap one day for another, the second tap on the active chip
is the day sheet, and the seed guard deliberately does not re-seed — so a
day picked on the map stayed picked until you left the trip and came back
(#2257). Desktop has had the deselect since the day header got it.

Its own round control beside the rail, map view only: the plan timeline is
single-day, so there is nothing to widen there, and the day sheet keeps the
one route into it that also exists on the map. It toggles — the first press
parks the day it came from and frames the whole trip, the second puts that
day back with its route, or falls back to the focus day if a remote delete
retired it in between. Leaving the map restores it too, since an empty
timeline would be the worse answer.
This commit is contained in:
Maurice
2026-09-06 13:05:35 +02:00
committed by Maurice
parent bbc32310e9
commit 973ce5f8ff
25 changed files with 158 additions and 12 deletions
+65 -11
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState, type ComponentType, type ReactNode } from 'react'
import { findFocusDayId } from '../../../components/Planner/today'
import {
ChevronDown, ChevronLeft, Download, FileDown, List, Map as MapIcon, MoreHorizontal, PackageCheck,
CalendarDays, ChevronDown, ChevronLeft, Download, FileDown, List, Map as MapIcon, MoreHorizontal, PackageCheck,
Plane, Plus, Rows3, Ticket, TrainFront, Trash2, Upload, Wallet,
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
@@ -262,6 +262,38 @@ export default function MTripShell({
planner.setExpandedDayIds(dayId == null ? null : new Set([dayId]))
}
// The map's day selection: frame the day, draw its route, drop the other days'
// pins. Shared by the chip tap and the all-days toggle so the two cannot drift.
const selectDayOnMap = (dayId: number) => {
planner.handleSelectDay(dayId, false)
planner.autoShowRoute()
focusMapOnDay(dayId)
}
// The day an "all days" deselect came from, so the toggle can put it back.
// A remote day:deleted can retire it while it is parked here, hence the
// membership check before it is trusted.
const lastDayRef = useRef<number | null>(null)
const dayToRestore = (): number | null =>
(lastDayRef.current != null && days.some(d => d.id === lastDayRef.current)
? lastDayRef.current
: findFocusDayId(days) ?? days[0]?.id) ?? null
// Whole trip ⇄ one day on the map (#2257). Its own control rather than a
// second tap on the active chip: that tap already opens the day sheet, the
// only route to it that also exists in map view. Never skipFit — changing
// what the map is filtered to is exactly when it should reframe.
const toggleAllDays = () => {
if (planner.selectedDayId != null) {
lastDayRef.current = planner.selectedDayId
focusMapOnDay(null)
planner.handleSelectDay(null, false)
return
}
const back = dayToRestore()
if (back != null) selectDayOnMap(back)
}
const toggleView = () => {
const next = view === 'plan' ? 'map' : 'plan'
setView(next)
@@ -276,6 +308,13 @@ export default function MTripShell({
// Leaving the map: nothing is filtered while the timeline is up, so the next
// visit starts from the whole trip unless a day is picked again.
focusMapOnDay(null)
// The timeline is single-day and renders empty without one, so an "all days"
// deselect on the map must not follow the user back into the plan. Same day
// the toggle would restore, so the two ways back agree.
if (planner.selectedDayId == null) {
const back = dayToRestore()
if (back != null) planner.handleSelectDay(back, true)
}
}
}
@@ -307,15 +346,10 @@ export default function MTripShell({
const onDayChipTap = (dayId: number) => {
if (dayId === planner.selectedDayId) openSheet('day', { dayId })
else {
planner.handleSelectDay(dayId, view !== 'map')
// In map mode a day tap fits to that day's places, draws its route and drops
// the other days' pins, so the day it framed is the day it shows.
if (view === 'map') {
planner.autoShowRoute()
focusMapOnDay(dayId)
}
}
// In map mode a day tap fits to that day's places, draws its route and drops
// the other days' pins, so the day it framed is the day it shows.
else if (view === 'map') selectDayOnMap(dayId)
else planner.handleSelectDay(dayId, true)
}
const packedCount = packingItems.filter(i => i.checked).length
@@ -347,7 +381,7 @@ export default function MTripShell({
{/* ── Day chips (z-25 — covered by non-plan tab overlays, stays mounted) ── */}
{days.length > 0 && (
<div className="absolute left-4 right-4 z-[25] flex top-[calc(var(--m-safe-top,12px)+50px)]">
<div className="absolute left-4 right-4 z-[25] flex gap-[6px] top-[calc(var(--m-safe-top,12px)+50px)]">
<div className="flex flex-1 items-center gap-[2px] overflow-x-auto rounded-full border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[3px] backdrop-blur-[24px] backdrop-saturate-[1.7]">
{days.map((day, idx) => {
const active = day.id === planner.selectedDayId
@@ -376,6 +410,26 @@ export default function MTripShell({
)
})}
</div>
{/* Drop the day filter and show the whole trip (#2257). Map only: the
plan timeline is single-day, so there is nothing to widen there.
Stays mounted while a day is active rather than appearing on
selection, which would shove the rail sideways under the thumb. */}
{view === 'map' && (
<button
type="button"
onClick={toggleAllDays}
aria-pressed={planner.selectedDayId == null}
aria-label={t('mobileTrip.allDays')}
title={t('mobileTrip.allDays')}
className={`flex w-9 flex-none items-center justify-center rounded-full border border-[color:var(--m-gbr)] backdrop-blur-[24px] backdrop-saturate-[1.7] ${
planner.selectedDayId == null
? 'bg-m-act text-m-actfg shadow-[0_6px_16px_-6px_rgba(0,0,0,.4)]'
: 'bg-[color:var(--m-glass)] text-m-ink'
}`}
>
<CalendarDays size={15} strokeWidth={2.4} aria-hidden="true" />
</button>
)}
</div>
)}
@@ -4,7 +4,7 @@ import { buildPlanner, buildShell } from '../../../helpers/mobileTrip'
import type { MTripShellApi, TripPlanner } from '../../../../src/mobile/screens/trip/MTripShell'
import type { Day, PackingItem, TodoItem } from '../../../../src/types'
// FE-MOB-SHELL-001 to FE-MOB-SHELL-046
// FE-MOB-SHELL-001 to FE-MOB-SHELL-051
const mocks = vi.hoisted(() => ({ planner: {} as TripPlanner }))
@@ -504,6 +504,75 @@ describe('MTripShell', () => {
expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'auto', inline: 'center', block: 'nearest' })
})
})
// #2257 — the map filters down to one day, and until now nothing took that
// filter back off: the chip rail can only swap one day for another, and the
// second tap on the active chip is the day sheet. Its own control, map only.
describe('the all-days toggle (#2257)', () => {
const allDays = () => screen.getByRole('button', { name: 'mobileTrip.allDays' })
const enterMap = () => fireEvent.click(screen.getByRole('button', { name: 'mobileTrip.mapView' }))
it('FE-MOB-SHELL-047: stays off the plan view, where nothing is filtered anyway', () => {
renderShell()
expect(screen.queryByRole('button', { name: 'mobileTrip.allDays' })).not.toBeInTheDocument()
enterMap()
expect(allDays()).toBeInTheDocument()
})
it('FE-MOB-SHELL-048: drops the day and its pin filter so the whole trip comes back', () => {
const { planner } = renderShell()
enterMap()
vi.mocked(planner.setExpandedDayIds).mockClear()
fireEvent.click(allDays())
expect(planner.handleSelectDay).toHaveBeenLastCalledWith(null, false)
expect(planner.setExpandedDayIds).toHaveBeenCalledWith(null)
// The day sheet belongs to the chip, not to this button.
expect(shellApi.sheet).toBeNull()
})
it('FE-MOB-SHELL-049: a second press goes back to the day it came from', () => {
const { planner, rerenderShell } = renderShell()
enterMap()
fireEvent.click(allDays())
// The planner is a fixture, so the commit is replayed by hand.
;(planner as { selectedDayId: number | null }).selectedDayId = null
rerenderShell()
vi.mocked(planner.setExpandedDayIds).mockClear()
vi.mocked(planner.autoShowRoute).mockClear()
fireEvent.click(allDays())
expect(planner.handleSelectDay).toHaveBeenLastCalledWith(11, false)
expect(planner.setExpandedDayIds).toHaveBeenCalledWith(new Set([11]))
expect(planner.autoShowRoute).toHaveBeenCalled()
})
it('FE-MOB-SHELL-050: leaving the map puts a day back, the timeline has no all-days state', () => {
const { planner, rerenderShell } = renderShell()
enterMap()
fireEvent.click(allDays())
;(planner as { selectedDayId: number | null }).selectedDayId = null
rerenderShell()
fireEvent.click(screen.getByRole('button', { name: 'mobileTrip.listView' }))
expect(planner.handleSelectDay).toHaveBeenLastCalledWith(11, true)
})
it('FE-MOB-SHELL-051: the active chip still opens the day sheet on the map', () => {
const { planner } = renderShell()
enterMap()
vi.mocked(planner.handleSelectDay).mockClear()
fireEvent.click(screen.getByRole('button', { name: 'Sat 2' }))
expect(shellApi.sheet).toEqual({ id: 'day', payload: { dayId: 11 } })
expect(planner.handleSelectDay).not.toHaveBeenCalled()
})
})
})
describe('buildShell fixture', () => {
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'المكان',
'mobileTrip.addToDayQuestion': 'إضافة إلى يوم؟',
'mobileTrip.addTransportShort': 'النقل',
'mobileTrip.allDays': 'كل الأيام',
'mobileTrip.assignedDays': 'الأيام المخصصة',
'mobileTrip.assignmentNotes': 'ملاحظات خاصة باليوم',
'mobileTrip.bookingsEmpty': 'لا توجد حجوزات بعد',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Lugar',
'mobileTrip.addToDayQuestion': 'Adicionar a um dia?',
'mobileTrip.addTransportShort': 'Transporte',
'mobileTrip.allDays': 'Todos os dias',
'mobileTrip.assignedDays': 'Dias atribuídos',
'mobileTrip.assignmentNotes': 'Notas específicas do dia',
'mobileTrip.bookingsEmpty': 'Nenhuma reserva ainda',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Lloc',
'mobileTrip.addToDayQuestion': 'Afegeix a un dia?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Tots els dies',
'mobileTrip.assignedDays': 'Dies assignats',
'mobileTrip.assignmentNotes': 'Notes específiques del dia',
'mobileTrip.bookingsEmpty': 'Encara no hi ha reserves',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Místo',
'mobileTrip.addToDayQuestion': 'Přidat do dne?',
'mobileTrip.addTransportShort': 'Doprava',
'mobileTrip.allDays': 'Všechny dny',
'mobileTrip.assignedDays': 'Přiřazené dny',
'mobileTrip.assignmentNotes': 'Poznámky ke dni',
'mobileTrip.bookingsEmpty': 'Zatím žádné rezervace',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Ort',
'mobileTrip.addToDayQuestion': 'Zu einem Tag hinzufügen?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Alle Tage',
'mobileTrip.assignedDays': 'Zugewiesene Tage',
'mobileTrip.assignmentNotes': 'Tagesspezifische Notizen',
'mobileTrip.bookingsEmpty': 'Noch keine Buchungen',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Place',
'mobileTrip.addToDayQuestion': 'Add to a day?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'All Days',
'mobileTrip.assignedDays': 'Assigned Days',
'mobileTrip.assignmentNotes': 'Day-specific notes',
'mobileTrip.bookingsEmpty': 'No bookings yet',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Lugar',
'mobileTrip.addToDayQuestion': '¿Añadir a un día?',
'mobileTrip.addTransportShort': 'Transporte',
'mobileTrip.allDays': 'Todos los días',
'mobileTrip.assignedDays': 'Días asignados',
'mobileTrip.assignmentNotes': 'Notas específicas del día',
'mobileTrip.bookingsEmpty': 'Aún no hay reservas',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Lieu',
'mobileTrip.addToDayQuestion': 'Ajouter à un jour ?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Tous les jours',
'mobileTrip.assignedDays': 'Jours assignés',
'mobileTrip.assignmentNotes': 'Notes propres au jour',
'mobileTrip.bookingsEmpty': 'Aucune réservation',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Μέρος',
'mobileTrip.addToDayQuestion': 'Προσθήκη σε ημέρα;',
'mobileTrip.addTransportShort': 'Μεταφορά',
'mobileTrip.allDays': 'Όλες οι Ημέρες',
'mobileTrip.assignedDays': 'Ανατεθειμένες ημέρες',
'mobileTrip.assignmentNotes': 'Σημειώσεις ημέρας',
'mobileTrip.bookingsEmpty': 'Δεν υπάρχουν κρατήσεις ακόμη',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Hely',
'mobileTrip.addToDayQuestion': 'Hozzáadás egy naphoz?',
'mobileTrip.addTransportShort': 'Közlekedés',
'mobileTrip.allDays': 'Minden nap',
'mobileTrip.assignedDays': 'Hozzárendelt napok',
'mobileTrip.assignmentNotes': 'Napra szóló jegyzetek',
'mobileTrip.bookingsEmpty': 'Még nincsenek foglalások',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Tempat',
'mobileTrip.addToDayQuestion': 'Tambahkan ke hari?',
'mobileTrip.addTransportShort': 'Transportasi',
'mobileTrip.allDays': 'Semua Hari',
'mobileTrip.assignedDays': 'Hari yang ditetapkan',
'mobileTrip.assignmentNotes': 'Catatan khusus hari',
'mobileTrip.bookingsEmpty': 'Belum ada reservasi',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Luogo',
'mobileTrip.addToDayQuestion': 'Aggiungere a un giorno?',
'mobileTrip.addTransportShort': 'Trasporto',
'mobileTrip.allDays': 'Tutti i giorni',
'mobileTrip.assignedDays': 'Giorni assegnati',
'mobileTrip.assignmentNotes': 'Note specifiche del giorno',
'mobileTrip.bookingsEmpty': 'Ancora nessuna prenotazione',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': '場所',
'mobileTrip.addToDayQuestion': '日に追加しますか?',
'mobileTrip.addTransportShort': '移動',
'mobileTrip.allDays': 'すべての日',
'mobileTrip.assignedDays': '割り当てられた日',
'mobileTrip.assignmentNotes': '日別メモ',
'mobileTrip.bookingsEmpty': '予約はまだありません',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': '장소',
'mobileTrip.addToDayQuestion': '하루에 추가할까요?',
'mobileTrip.addTransportShort': '교통',
'mobileTrip.allDays': '모든 날',
'mobileTrip.assignedDays': '배정된 날짜',
'mobileTrip.assignmentNotes': '날짜별 메모',
'mobileTrip.bookingsEmpty': '아직 예약이 없습니다',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Plaats',
'mobileTrip.addToDayQuestion': 'Toevoegen aan een dag?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Alle dagen',
'mobileTrip.assignedDays': 'Toegewezen dagen',
'mobileTrip.assignmentNotes': 'Dagspecifieke notities',
'mobileTrip.bookingsEmpty': 'Nog geen boekingen',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Miejsce',
'mobileTrip.addToDayQuestion': 'Dodać do dnia?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Wszystkie dni',
'mobileTrip.assignedDays': 'Przypisane dni',
'mobileTrip.assignmentNotes': 'Notatki dla dnia',
'mobileTrip.bookingsEmpty': 'Brak rezerwacji',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Место',
'mobileTrip.addToDayQuestion': 'Добавить в день?',
'mobileTrip.addTransportShort': 'Транспорт',
'mobileTrip.allDays': 'Все дни',
'mobileTrip.assignedDays': 'Назначенные дни',
'mobileTrip.assignmentNotes': 'Заметки на день',
'mobileTrip.bookingsEmpty': 'Пока нет бронирований',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Plats',
'mobileTrip.addToDayQuestion': 'Lägg till på en dag?',
'mobileTrip.addTransportShort': 'Transport',
'mobileTrip.allDays': 'Alla dagar',
'mobileTrip.assignedDays': 'Tilldelade dagar',
'mobileTrip.assignmentNotes': 'Dagsspecifika anteckningar',
'mobileTrip.bookingsEmpty': 'Inga bokningar än',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Yer',
'mobileTrip.addToDayQuestion': 'Bir güne eklensin mi?',
'mobileTrip.addTransportShort': 'Ulaşım',
'mobileTrip.allDays': 'Tüm Günler',
'mobileTrip.assignedDays': 'Atanan Günler',
'mobileTrip.assignmentNotes': 'Güne özel notlar',
'mobileTrip.bookingsEmpty': 'Henüz rezervasyon yok',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Місце',
'mobileTrip.addToDayQuestion': 'Додати до дня?',
'mobileTrip.addTransportShort': 'Транспорт',
'mobileTrip.allDays': 'Усі дні',
'mobileTrip.assignedDays': 'Призначені дні',
'mobileTrip.assignmentNotes': 'Нотатки на день',
'mobileTrip.bookingsEmpty': 'Поки немає бронювань',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': 'Địa điểm',
'mobileTrip.addToDayQuestion': 'Thêm vào một ngày?',
'mobileTrip.addTransportShort': 'Di chuyển',
'mobileTrip.allDays': 'Tất cả các ngày',
'mobileTrip.assignedDays': 'Ngày được gán',
'mobileTrip.assignmentNotes': 'Ghi chú theo ngày',
'mobileTrip.bookingsEmpty': 'Chưa có đặt chỗ nào',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': '地點',
'mobileTrip.addToDayQuestion': '新增到某一天?',
'mobileTrip.addTransportShort': '交通',
'mobileTrip.allDays': '所有天',
'mobileTrip.assignedDays': '已分配的天數',
'mobileTrip.assignmentNotes': '按天備註',
'mobileTrip.bookingsEmpty': '暫無預訂',
+1
View File
@@ -6,6 +6,7 @@ const mobileTrip: TranslationStrings = {
'mobileTrip.addPlaceShort': '地点',
'mobileTrip.addToDayQuestion': '添加到某一天?',
'mobileTrip.addTransportShort': '交通',
'mobileTrip.allDays': '所有天',
'mobileTrip.assignedDays': '已分配的天数',
'mobileTrip.assignmentNotes': '按天备注',
'mobileTrip.bookingsEmpty': '暂无预订',