mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 14:06:27 +00:00
Maurice
1ad2e92142
The bulk of what SonarQube still had open on the reliability side, read site by
site rather than swept. Two clusters are worth calling out because they are
defects, not lint.
**Four regexes could be made to hang the process.** The worst is
`/.+@.+\..+/` in the forgot-password path: three unbounded `.+` that all
overlap, unanchored, on an endpoint that needs no login and whose schema is a
bare z.string() under a 100kb body cap. A thousand '@' characters had not
finished after 100 seconds — one request pins the event loop, and Node has one.
EMAIL_REGEX in auth.helpers is the same shape on register and profile update
(310ms for 8kb). The two tag strippers over an uploaded KML description and over
Commons metadata took 0.52s on a 16k run of '<'. Each rewrite was proven
equivalent by brute force against the original — millions of strings for the
coordinate patterns, 671,876 for the tag stripper — because a subtly different
regex on a parsing path is worse than the finding.
`<[^>]+>` could not be fixed in the pattern: `[^>]` matches `<` too, so the only
unambiguous form changes what happens to malformed markup. It is now a scan in
common/stripHtmlTags.ts, quirks included — `<>` is left alone, `<a<b>` is one
tag — with the equivalence pinned by a test that compares against the old regex
over every string up to length six.
**And roughly 500 places could only be reached with a mouse.** Clickable divs
became real buttons where the markup allowed (52 of them), took
role + tabIndex + Enter/Space where they had to stay divs, and modal backdrops
took role="presentation" — the honest role, since a backdrop is a mouse shortcut
for a Cancel control that is already in the tab order, and making it a button
plants a nameless full-screen tab stop around its own contents.
Alongside those: `.sort()` calls that now say the order they always had, `{n &&
<X/>}` guards that rendered a literal "0" for a zero-byte file and for a place at
latitude 0, an optimistic budget write that stored a boolean where the contract
and both transports use 0/1, and the Number statics.
sonar-project.properties documents the six that were deliberately left: two wiki
patterns with no overlapping quantifier pair whose "fix" would stop parsing
`[see [1]](url)`, four tar header fields bounded at 12-155 bytes by the format,
two djb2 hashes where the 32-bit wrap is the algorithm, two `| 0` that are also
coercing undefined to 0 on a path where the API sends no user_id, and the MCP
session maps Sonar reads as empty because they are filled from another module.
282 lines
18 KiB
TypeScript
282 lines
18 KiB
TypeScript
import { createPortal } from 'react-dom'
|
||
import { Ticket, FileText, ExternalLink, Footprints, ArrowRight, Pencil } from 'lucide-react'
|
||
import Markdown from 'react-markdown'
|
||
import remarkGfm from 'remark-gfm'
|
||
import remarkBreaks from 'remark-breaks'
|
||
import { markdownLinkComponents } from '../shared/markdownLink'
|
||
import { useSettingsStore } from '../../store/settingsStore'
|
||
import { useTripStore } from '../../store/tripStore'
|
||
import { formatTime, splitReservationDateTime } from '../../utils/formatters'
|
||
import { RES_ICONS, TRANSPORT_DETAIL_COLORS } from './DayPlanSidebar.constants'
|
||
import type { Reservation } from '../../types'
|
||
|
||
interface DayPlanSidebarTransportDetailModalProps {
|
||
transportDetail: Reservation | null
|
||
setTransportDetail: (v: Reservation | null) => void
|
||
onNavigateToFiles?: () => void
|
||
/** Opens the edit form for this reservation (shown as a footer action). */
|
||
onEdit?: (res: Reservation) => void
|
||
t: (key: string, params?: Record<string, any>) => string
|
||
locale: string
|
||
timeFormat: string
|
||
}
|
||
|
||
export function DayPlanSidebarTransportDetailModal({
|
||
transportDetail, setTransportDetail, onNavigateToFiles, onEdit, t, locale, timeFormat,
|
||
}: DayPlanSidebarTransportDetailModalProps) {
|
||
if (!transportDetail) return null
|
||
return createPortal(
|
||
<div className="bg-[rgba(0,0,0,0.3)]" style={{
|
||
position: 'fixed', inset: 0, zIndex: 1000,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
backdropFilter: 'blur(3px)',
|
||
}}
|
||
role="button" tabIndex={0} aria-label={t('common.cancel')}
|
||
onClick={() => setTransportDetail(null)}
|
||
onKeyDown={e => {
|
||
if (e.target !== e.currentTarget) return
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setTransportDetail(null) }
|
||
}}>
|
||
<div className="bg-surface-card" role="presentation" style={{
|
||
width: 380, maxHeight: '80vh', overflowY: 'auto',
|
||
borderRadius: 16,
|
||
boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
|
||
display: 'flex', flexDirection: 'column', gap: 14,
|
||
}} onClick={e => e.stopPropagation()}>
|
||
{(() => {
|
||
const res = transportDetail
|
||
const TransportIcon = RES_ICONS[res.type] || Ticket
|
||
const TRANSPORT_COLORS = TRANSPORT_DETAIL_COLORS
|
||
const color = TRANSPORT_COLORS[res.type] || 'var(--text-muted)'
|
||
const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
|
||
|
||
const detailFields = []
|
||
if (res.type === 'flight') {
|
||
if (meta.airline) detailFields.push({ label: t('reservations.meta.airline'), value: meta.airline })
|
||
if (meta.flight_number) detailFields.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
|
||
if (meta.departure_airport) detailFields.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
|
||
if (meta.arrival_airport) detailFields.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
|
||
if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
|
||
} else if (res.type === 'train') {
|
||
if (meta.train_number) detailFields.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
|
||
if (meta.platform) detailFields.push({ label: t('reservations.meta.platform'), value: meta.platform })
|
||
if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
|
||
}
|
||
if (res.confirmation_number) detailFields.push({ label: t('reservations.confirmationCode'), value: res.confirmation_number, sensitive: true })
|
||
// A stopover booking can carry its own reference per segment (#1943); the
|
||
// flat fields above only ever describe the first leg. Marked sensitive so
|
||
// the blur setting covers them like the booking's own code.
|
||
if (Array.isArray(meta.legs) && meta.legs.length > 1) {
|
||
for (const leg of meta.legs) {
|
||
if (!leg?.confirmation_number) continue
|
||
const segment = [leg.from, leg.to].filter(Boolean).join(' → ')
|
||
detailFields.push({ label: segment || t('reservations.confirmationCode'), value: leg.confirmation_number, sensitive: true })
|
||
}
|
||
}
|
||
if (res.location) detailFields.push({ label: t('reservations.locationAddress'), value: res.location })
|
||
|
||
return (
|
||
<>
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<div style={{
|
||
width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
borderRadius: '50%', background: `${color}18`,
|
||
}}>
|
||
<TransportIcon size={18} strokeWidth={1.8} color={color} />
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600 }}>{res.title}</div>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 2 }}>
|
||
{(() => {
|
||
const { date, time } = splitReservationDateTime(res.reservation_time)
|
||
const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
|
||
const dateStr = date
|
||
? new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
|
||
: ''
|
||
const timeStr = time ? formatTime(time, locale, timeFormat) : ''
|
||
const endStr = endTime ? formatTime(endTime, locale, timeFormat) : ''
|
||
const parts: string[] = []
|
||
if (dateStr) parts.push(dateStr)
|
||
if (timeStr) parts.push(timeStr + (endStr ? ` – ${endStr}` : ''))
|
||
return parts.join(', ')
|
||
})()}
|
||
</div>
|
||
</div>
|
||
<div className={res.status === 'confirmed' ? 'bg-[rgba(22,163,74,0.1)] text-[#16a34a]' : 'bg-[rgba(217,119,6,0.1)] text-[#d97706]'} style={{
|
||
padding: '3px 8px', borderRadius: 6, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
|
||
}}>
|
||
{res.status === 'confirmed' ? t('planner.resConfirmed') : t('planner.resPending')}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Detail-Felder */}
|
||
{detailFields.length > 0 && (
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
|
||
{detailFields.map((f, i) => {
|
||
const shouldBlur = f.sensitive && useSettingsStore.getState().settings.blur_booking_codes
|
||
const valueStyle = {
|
||
fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500, wordBreak: 'break-word',
|
||
filter: shouldBlur ? 'blur(5px)' : 'none', transition: 'filter 0.2s',
|
||
cursor: shouldBlur ? 'pointer' : 'default',
|
||
userSelect: shouldBlur ? 'none' : 'auto',
|
||
} as const
|
||
return (
|
||
<div key={i} className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{f.label}</div>
|
||
{/* A hidden booking code is a reveal toggle, so it has to be a real
|
||
button; a plain value stays inert text and out of the tab order. */}
|
||
{shouldBlur ? (
|
||
<button
|
||
type="button"
|
||
onMouseEnter={e => { e.currentTarget.style.filter = 'none' }}
|
||
onMouseLeave={e => { e.currentTarget.style.filter = 'blur(5px)' }}
|
||
onClick={e => { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(5px)' : 'none' }}
|
||
className="text-content"
|
||
style={{ ...valueStyle, display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', padding: 0, fontFamily: 'inherit' }}
|
||
>{f.value}</button>
|
||
) : (
|
||
<div className="text-content" style={valueStyle}>{f.value}</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Public-transit itinerary (#1065) — legs from the transit search */}
|
||
{meta.transit?.legs && Array.isArray(meta.transit.legs) && meta.transit.legs.length > 0 && (
|
||
<>
|
||
{/* journey summary: duration · transfers · walking */}
|
||
<div className="bg-surface-tertiary text-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, flexWrap: 'wrap' }}>
|
||
{meta.transit.duration > 0 && (
|
||
<span>{Math.floor(meta.transit.duration / 3600) > 0 ? `${Math.floor(meta.transit.duration / 3600)} h ${Math.round((meta.transit.duration % 3600) / 60)} min` : t('transit.min', { count: Math.round(meta.transit.duration / 60) })}</span>
|
||
)}
|
||
<span className="text-content-faint">·</span>
|
||
<span>{meta.transit.transfers > 0 ? t('transit.transfers', { count: meta.transit.transfers }) : t('transit.direct')}</span>
|
||
{meta.transit.walk_seconds > 59 && (
|
||
<>
|
||
<span className="text-content-faint">·</span>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Footprints size={13} /> {t('transit.min', { count: Math.round(meta.transit.walk_seconds / 60) })}</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="bg-surface-tertiary" style={{ padding: '10px 12px', borderRadius: 8 }}>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 8 }}>
|
||
{t('transit.itinerary')}
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
{meta.transit.legs.map((leg: { mode?: string; line?: string | null; line_color?: string | null; line_text_color?: string | null; headsign?: string | null; duration?: number; stops?: number; from?: { name?: string; time?: string | null }; to?: { name?: string; time?: string | null } }, i: number) => {
|
||
const isWalk = leg.mode === 'WALK'
|
||
const mins = leg.duration ? Math.round(leg.duration / 60) : null
|
||
return (
|
||
<div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||
{isWalk ? (
|
||
<span className="text-content-faint" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0, paddingTop: 1 }}>
|
||
<Footprints size={12} />
|
||
</span>
|
||
) : (
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', background: leg.line_color || 'var(--bg-hover)', color: leg.line_color ? (leg.line_text_color || '#fff') : 'var(--text-primary)', borderRadius: 5, padding: '1px 6px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
|
||
{leg.line || leg.mode}
|
||
</span>
|
||
)}
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<div className="text-content" style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
|
||
{isWalk
|
||
? <span className="text-content-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span>
|
||
: <>
|
||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.from?.name}</span>
|
||
<ArrowRight size={10} className="text-content-faint" style={{ flexShrink: 0 }} />
|
||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.to?.name}</span>
|
||
</>}
|
||
</div>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', marginTop: 1 }}>
|
||
{[
|
||
leg.from?.time && !isWalk ? `${leg.from.time}${leg.to?.time ? ` – ${leg.to.time}` : ''}` : null,
|
||
mins ? t('transit.min', { count: mins }) : null,
|
||
!isWalk && leg.stops ? t('transit.stops', { count: leg.stops }) : null,
|
||
!isWalk && leg.headsign ? `→ ${leg.headsign}` : null,
|
||
].filter(Boolean).join(' · ')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Notizen */}
|
||
{res.notes && (
|
||
<div className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
|
||
<div className="collab-note-md text-content" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{res.notes}</Markdown></div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Dateien */}
|
||
{(() => {
|
||
const resFiles = (useTripStore.getState().files || []).filter(f =>
|
||
!f.deleted_at && (
|
||
f.reservation_id === res.id ||
|
||
(f.linked_reservation_ids && f.linked_reservation_ids.includes(res.id))
|
||
)
|
||
)
|
||
if (resFiles.length === 0) return null
|
||
return (
|
||
<div>
|
||
<div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6 }}>{t('files.title')}</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
{resFiles.map(f => (
|
||
<button key={f.id}
|
||
type="button"
|
||
onClick={() => { setTransportDetail(null); onNavigateToFiles?.() }}
|
||
className="bg-surface-tertiary"
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
|
||
borderRadius: 8, cursor: 'pointer', border: 'none', textAlign: 'left', fontFamily: 'inherit',
|
||
transition: 'background 0.1s',
|
||
}}
|
||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
|
||
onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
|
||
>
|
||
<FileText size={14} className="text-content-muted" style={{ flexShrink: 0 }} />
|
||
<span className="text-content" style={{ flex: 1, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||
{f.original_name}
|
||
</span>
|
||
<ExternalLink size={11} className="text-content-faint" style={{ flexShrink: 0 }} />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
|
||
{/* Aktionen */}
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
|
||
{onEdit && (
|
||
<button type="button" onClick={() => onEdit(res)} className="bg-surface-tertiary text-content" style={{
|
||
fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
||
border: 'none', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
|
||
display: 'inline-flex', alignItems: 'center', gap: 5,
|
||
}}>
|
||
<Pencil size={12} /> {t('common.edit')}
|
||
</button>
|
||
)}
|
||
<button type="button" onClick={() => setTransportDetail(null)} className="bg-accent text-accent-text" style={{
|
||
fontSize: 'calc(12px * var(--fs-scale-body, 1))',
|
||
border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
|
||
}}>
|
||
{t('common.close')}
|
||
</button>
|
||
</div>
|
||
</>
|
||
)
|
||
})()}
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
)
|
||
}
|