diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx index 023ce932..dde92aea 100644 --- a/client/src/components/Planner/DayPlanSidebar.tsx +++ b/client/src/components/Planner/DayPlanSidebar.tsx @@ -23,6 +23,7 @@ import { useSettingsStore } from '../../store/settingsStore' import { useTranslation } from '../../i18n' import { formatDate, formatTime, dayTotalCost, currencyDecimals } from '../../utils/formatters' import { useDayNotes } from '../../hooks/useDayNotes' +import Tooltip from '../shared/Tooltip' import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult } from '../../types' const NOTE_ICONS = [ @@ -1143,9 +1144,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({ } {canEditDays && onAddTransport && ( + + )} {(() => { const dayAccs = accommodations.filter(a => day.id >= a.start_day_id && day.id <= a.end_day_id) @@ -1217,15 +1220,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({ - {canEditDays && } + } - - {selectMode && ( -
- - {t('places.selectionCount', { count: selectedIds.size })} - - - - -
- )} } {/* Filter-Tabs */} -
- {([{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }, hasTracks ? { id: 'tracks', label: t('places.filterTracks') } : null] as const).filter(Boolean).map(f => ( - - ))} -
+ {(() => { + const baseFiltered = places.filter(p => { + if (categoryFilters.size > 0) { + if (p.category_id == null) { + if (!categoryFilters.has('uncategorized')) return false + } else if (!categoryFilters.has(String(p.category_id))) return false + } + if (search && !p.name.toLowerCase().includes(search.toLowerCase()) && + !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false + return true + }) + const counts = { + all: baseFiltered.length, + unplanned: baseFiltered.filter(p => !plannedIds.has(p.id)).length, + tracks: baseFiltered.filter(p => p.route_geometry).length, + } + const tabs = ([ + { id: 'all', label: t('places.all') }, + { id: 'unplanned', label: t('places.unplanned') }, + hasTracks ? { id: 'tracks', label: t('places.filterTracks') } : null, + ] as const).filter(Boolean) as Array<{ id: 'all' | 'unplanned' | 'tracks'; label: string }> + return ( +
+ {tabs.map(f => { + const active = filter === f.id + return ( + + ) + })} +
+ ) + })()} {/* Suchfeld */}
@@ -470,9 +462,9 @@ const PlacesSidebar = React.memo(function PlacesSidebar({ ? (categoryFilters.has('uncategorized') ? t('places.noCategory') : categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories')) : `${categoryFilters.size} ${t('places.categoriesSelected')}` return ( -
+
+ {canEditPlaces && ( + + + + )} {catDropOpen && (
- {/* Anzahl */} -
- {filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })} -
+ {/* Anzahl / Auswahl-Leiste */} + {selectMode ? ( +
+ + {t('places.selectionCount', { count: selectedIds.size })} + + 0 ? t('common.deselectAll') : t('common.selectAll')} placement="bottom"> + + + + + +
+ ) : ( +
+ {filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })} +
+ )} {/* Liste */}
diff --git a/client/src/components/shared/Tooltip.tsx b/client/src/components/shared/Tooltip.tsx new file mode 100644 index 00000000..bb9653f3 --- /dev/null +++ b/client/src/components/shared/Tooltip.tsx @@ -0,0 +1,98 @@ +import React, { useState, useRef, useEffect } from 'react' +import ReactDOM from 'react-dom' + +type Placement = 'top' | 'bottom' | 'left' | 'right' + +interface TooltipProps { + label: string + placement?: Placement + delay?: number + disabled?: boolean + children: React.ReactElement +} + +export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, children }: TooltipProps) { + const [open, setOpen] = useState(false) + const [coords, setCoords] = useState<{ top: number; left: number } | null>(null) + const triggerRef = useRef(null) + const tooltipRef = useRef(null) + const timerRef = useRef(null) + + const show = () => { + if (disabled || !label) return + if (timerRef.current) window.clearTimeout(timerRef.current) + timerRef.current = window.setTimeout(() => setOpen(true), delay) + } + const hide = () => { + if (timerRef.current) window.clearTimeout(timerRef.current) + setOpen(false) + } + + useEffect(() => () => { if (timerRef.current) window.clearTimeout(timerRef.current) }, []) + + useEffect(() => { + if (!open || !triggerRef.current) return + const r = triggerRef.current.getBoundingClientRect() + const tipW = tooltipRef.current?.offsetWidth ?? 0 + const tipH = tooltipRef.current?.offsetHeight ?? 0 + const gap = 6 + let top = 0, left = 0 + if (placement === 'top') { top = r.top - tipH - gap; left = r.left + r.width / 2 - tipW / 2 } + else if (placement === 'bottom') { top = r.bottom + gap; left = r.left + r.width / 2 - tipW / 2 } + else if (placement === 'left') { top = r.top + r.height / 2 - tipH / 2; left = r.left - tipW - gap } + else { top = r.top + r.height / 2 - tipH / 2; left = r.right + gap } + const pad = 6 + left = Math.max(pad, Math.min(left, window.innerWidth - tipW - pad)) + top = Math.max(pad, Math.min(top, window.innerHeight - tipH - pad)) + setCoords({ top, left }) + }, [open, placement, label]) + + const child = React.Children.only(children) + const trigger = React.cloneElement(child, { + ref: (node: HTMLElement | null) => { + triggerRef.current = node + const r = (child as any).ref + if (typeof r === 'function') r(node) + else if (r && typeof r === 'object') r.current = node + }, + onMouseEnter: (e: any) => { show(); child.props.onMouseEnter?.(e) }, + onMouseLeave: (e: any) => { hide(); child.props.onMouseLeave?.(e) }, + onFocus: (e: any) => { show(); child.props.onFocus?.(e) }, + onBlur: (e: any) => { hide(); child.props.onBlur?.(e) }, + }) + + return ( + <> + {trigger} + {open && ReactDOM.createPortal( +
+ {label} +
, + document.body, + )} + + ) +} + +export default Tooltip diff --git a/client/src/i18n/translations/de.ts b/client/src/i18n/translations/de.ts index 9ae9a435..eb7c9b2b 100644 --- a/client/src/i18n/translations/de.ts +++ b/client/src/i18n/translations/de.ts @@ -932,7 +932,7 @@ const de: Record = { // Places Sidebar 'places.addPlace': 'Ort/Aktivität hinzufügen', - 'places.importFile': 'Datei importieren', + 'places.importFile': 'Dateimport', 'places.sidebarDrop': 'Ablegen zum Importieren', 'places.importFileHint': '.gpx-, .kml- oder .kmz-Dateien aus Tools wie Google My Maps, Google Earth oder einem GPS-Tracker importieren.', 'places.importFileDropHere': 'Datei auswählen oder hierher ziehen und ablegen',