From 38f4c9aecb39dd5e9450e20b488cfd668366ff71 Mon Sep 17 00:00:00 2001 From: Maurice Date: Sat, 18 Apr 2026 11:10:33 +0200 Subject: [PATCH 1/5] refine places sidebar: filter counts, compact select UI, tooltip component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - replace "Auswählen" button with small Check↔X toggle next to category dropdown - move bulk-action bar below search, icon-only buttons (Select all, Delete) - filter tabs as pill buttons with per-filter count badges - shared Tooltip component (portaled, delayed) replaces native title - apply tooltip to select toggle, bulk actions, add note, add transport - rename places.importFile: "Datei importieren" -> "Dateimport" --- .../src/components/Planner/DayPlanSidebar.tsx | 11 +- .../src/components/Planner/PlacesSidebar.tsx | 219 ++++++++++++------ client/src/components/shared/Tooltip.tsx | 98 ++++++++ client/src/i18n/translations/de.ts | 2 +- 4 files changed, 255 insertions(+), 75 deletions(-) create mode 100644 client/src/components/shared/Tooltip.tsx 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', From a19ae9e65368377beb9a55942d304df7c08d14de Mon Sep 17 00:00:00 2001 From: Maurice Date: Sat, 18 Apr 2026 11:21:08 +0200 Subject: [PATCH 2/5] mobile settings polish - settings: hide color-mode icons on mobile, shorten "Automatisch" -> "Auto" - settings: language picker as custom dropdown on mobile - admin permissions: reset button icon-only on mobile, sized to match save - admin places toggles: add flex-shrink-0 + row gap so switches don't collapse - de: settings.notifications label "Benachrichtigungen" -> "Mitteilungen" --- .../src/components/Admin/PermissionsPanel.tsx | 6 +- .../Settings/DisplaySettingsTab.tsx | 81 +++++++++++++++++-- client/src/i18n/translations/de.ts | 4 +- client/src/pages/AdminPage.tsx | 18 ++--- 4 files changed, 91 insertions(+), 18 deletions(-) diff --git a/client/src/components/Admin/PermissionsPanel.tsx b/client/src/components/Admin/PermissionsPanel.tsx index 85a6f2a4..acab4f0c 100644 --- a/client/src/components/Admin/PermissionsPanel.tsx +++ b/client/src/components/Admin/PermissionsPanel.tsx @@ -107,10 +107,12 @@ export default function PermissionsPanel(): React.ReactElement { ) })} @@ -57,7 +73,8 @@ export default function DisplaySettingsTab(): React.ReactElement { {/* Language */}
-
+ {/* Desktop: Button grid */} +
{SUPPORTED_LANGUAGES.map(opt => (
+ {/* Mobile: Custom dropdown */} +
+ {(() => { + const current = SUPPORTED_LANGUAGES.find(o => o.value === settings.language) || SUPPORTED_LANGUAGES[0] + return ( + + ) + })()} + {langOpen && ( +
+ {SUPPORTED_LANGUAGES.map(opt => { + const active = settings.language === opt.value + return ( + + ) + })} +
+ )} +
{/* Temperature */} diff --git a/client/src/i18n/translations/de.ts b/client/src/i18n/translations/de.ts index eb7c9b2b..f14e17f6 100644 --- a/client/src/i18n/translations/de.ts +++ b/client/src/i18n/translations/de.ts @@ -148,7 +148,7 @@ const de: Record = { 'settings.subtitle': 'Konfigurieren Sie Ihre persönlichen Einstellungen', 'settings.tabs.display': 'Anzeige', 'settings.tabs.map': 'Karte', - 'settings.tabs.notifications': 'Benachrichtigungen', + 'settings.tabs.notifications': 'Mitteilungen', 'settings.tabs.integrations': 'Integrationen', 'settings.tabs.account': 'Konto', 'settings.tabs.offline': 'Offline', @@ -182,7 +182,7 @@ const de: Record = { 'settings.bookingLabels': 'Orts-Labels auf Buchungsrouten', 'settings.bookingLabelsHint': 'Zeigt Bahnhofs-/Flughafennamen auf der Karte. Wenn aus, wird nur das Icon angezeigt.', 'settings.blurBookingCodes': 'Buchungscodes verbergen', - 'settings.notifications': 'Benachrichtigungen', + 'settings.notifications': 'Mitteilungen', 'settings.notifyTripInvite': 'Trip-Einladungen', 'settings.notifyBookingChange': 'Buchungsänderungen', 'settings.notifyTripReminder': 'Trip-Erinnerungen', diff --git a/client/src/pages/AdminPage.tsx b/client/src/pages/AdminPage.tsx index 9b976734..31f99000 100644 --- a/client/src/pages/AdminPage.tsx +++ b/client/src/pages/AdminPage.tsx @@ -903,7 +903,7 @@ export default function AdminPage(): React.ReactElement {
)}
+ {(() => { + const allExpanded = days.length > 0 && days.every(d => expandedDays.has(d.id)) + const label = allExpanded ? t('dayplan.collapseAll') : t('dayplan.expandAll') + return ( + + + + ) + })()} {onUndo && (