mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 05:11:46 +00:00
jubnl
6a718fccea
Add type-selector UI in the file import modal letting users choose which GPX elements (waypoints, routes, tracks) or KML/KMZ elements (points, paths) to import. KML LineString placemarks are now imported as path places with route_geometry. Performance improvements: - Extract MemoPlaceRow with React.memo and contentVisibility:auto to cut unnecessary re-renders in PlacesSidebar - Add weatherQueue to cap concurrent weather fetches at 3 - Replace sequential per-place deletes with a single bulkDelete API call (new DELETE /places/bulk endpoint + deletePlacesMany service) - Memoize atlas/photo/weather service calls to avoid redundant requests - Add multi-select mode to PlacesSidebar for bulk operations Add large GPX/KML/KMZ fixtures for integration/perf testing and two profiler analysis scripts under scripts/.
102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import React, { useEffect, useCallback } from 'react'
|
|
import { AlertTriangle } from 'lucide-react'
|
|
import { useTranslation } from '../../i18n'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void
|
|
title?: string
|
|
message?: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
danger?: boolean
|
|
}
|
|
|
|
export default function ConfirmDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmLabel,
|
|
cancelLabel,
|
|
danger = true,
|
|
}: ConfirmDialogProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const handleEsc = useCallback((e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}, [onClose])
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.addEventListener('keydown', handleEsc)
|
|
}
|
|
return () => document.removeEventListener('keydown', handleEsc)
|
|
}, [isOpen, handleEsc])
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[10000] flex items-center justify-center px-4"
|
|
style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="rounded-2xl shadow-2xl w-full max-w-sm p-6"
|
|
style={{
|
|
animation: 'modalIn 0.2s ease-out forwards',
|
|
background: 'var(--bg-card)',
|
|
}}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
{danger && (
|
|
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
|
|
<AlertTriangle className="w-5 h-5 text-red-600" />
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|
{title || t('common.confirm')}
|
|
</h3>
|
|
<p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
|
|
style={{
|
|
color: 'var(--text-secondary)',
|
|
border: '1px solid var(--border-secondary)',
|
|
}}
|
|
>
|
|
{cancelLabel || t('common.cancel')}
|
|
</button>
|
|
<button
|
|
onClick={() => { onConfirm(); onClose() }}
|
|
className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors text-white ${
|
|
danger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'
|
|
}`}
|
|
>
|
|
{confirmLabel || t('common.delete')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes modalIn {
|
|
from { opacity: 0; transform: scale(0.95) translateY(-10px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|