From 2f4e067a65995384cc014485ba1066b55e1def97 Mon Sep 17 00:00:00 2001
From: Yannis Biasutti <yannis@biasutti.ch>
Date: Mon, 6 Apr 2026 21:47:35 +0200
Subject: [PATCH] refactor(client): rename kmlKmz vars to keyholeMarkupFile,
 remove unused imports

---
 .../src/components/Planner/PlacesSidebar.tsx  | 104 +++++++++---------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/client/src/components/Planner/PlacesSidebar.tsx b/client/src/components/Planner/PlacesSidebar.tsx
index 74d9beff..37853194 100644
--- a/client/src/components/Planner/PlacesSidebar.tsx
+++ b/client/src/components/Planner/PlacesSidebar.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState, useRef, useMemo, useCallback } from 'react'
-import DOM from 'react-dom'
+import { useState, useRef, useMemo } from 'react'
 import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
-import CustomSelect from '../shared/CustomSelect'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import { placesApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
@@ -48,7 +46,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const toast = useToast()
   const ctxMenu = useContextMenu()
   const gpxInputRef = useRef<HTMLInputElement>(null)
-  const kmlKmzInputRef = useRef<HTMLInputElement>(null)
+  const keyholeMarkupFileInputRef = useRef<HTMLInputElement>(null)
   const trip = useTripStore((s) => s.trip)
   const loadTrip = useTripStore((s) => s.loadTrip)
   const can = useCanDo()
@@ -80,45 +78,45 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [googleListOpen, setGoogleListOpen] = useState(false)
   const [googleListUrl, setGoogleListUrl] = useState('')
   const [googleListLoading, setGoogleListLoading] = useState(false)
-  const [kmlKmzOpen, setKmlKmzOpen] = useState(false)
-  const [kmlKmzLoading, setKmlKmzLoading] = useState(false)
-  const [kmlKmzFile, setKmlKmzFile] = useState<File | null>(null)
-  const [kmlKmzSummary, setKmlKmzSummary] = useState<PlacesImportSummary | null>(null)
-  const [kmlKmzError, setKmlKmzError] = useState('')
+  const [keyholeMarkupFileOpen, setKeyholeMarkupFileOpen] = useState(false)
+  const [keyholeMarkupFileLoading, setKeyholeMarkupFileLoading] = useState(false)
+  const [keyholeMarkupFile, setKeyholeMarkupFileFile] = useState<File | null>(null)
+  const [keyholeMarkupFileSummary, setKeyholeMarkupFileSummary] = useState<PlacesImportSummary | null>(null)
+  const [keyholeMarkupFileError, setKeyholeMarkupFileError] = useState('')
 
-  const resetKmlKmzDialog = () => {
-    setKmlKmzFile(null)
-    setKmlKmzSummary(null)
-    setKmlKmzError('')
-    setKmlKmzLoading(false)
+  const resetKeyholeMarkupFileDialog = () => {
+    setKeyholeMarkupFileFile(null)
+    setKeyholeMarkupFileSummary(null)
+    setKeyholeMarkupFileError('')
+    setKeyholeMarkupFileLoading(false)
   }
 
-  const handleKmlKmzImport = async () => {
-    if (!kmlKmzFile) return
+  const handleKeyholeMarkupFileImport = async () => {
+    if (!keyholeMarkupFile) return
 
-    const ext = kmlKmzFile.name.toLowerCase().split('.').pop()
+    const ext = keyholeMarkupFile.name.toLowerCase().split('.').pop()
     if (ext !== 'kml' && ext !== 'kmz') {
-      setKmlKmzError(t('places.kmlKmzInvalidType'))
+      setKeyholeMarkupFileError(t('places.kmlKmzInvalidType'))
       return
     }
-    if (kmlKmzFile.size > importFileLimitBytes) {
-      setKmlKmzError(t('places.kmlKmzTooLarge', { maxMb: 10 }))
+    if (keyholeMarkupFile.size > importFileLimitBytes) {
+      setKeyholeMarkupFileError(t('places.kmlKmzTooLarge', { maxMb: 10 }))
       return
     }
 
-    setKmlKmzLoading(true)
-    setKmlKmzError('')
-    setKmlKmzSummary(null)
+    setKeyholeMarkupFileLoading(true)
+    setKeyholeMarkupFileError('')
+    setKeyholeMarkupFileSummary(null)
 
     try {
-      const result = await placesApi.importMapFile(tripId, kmlKmzFile)
+      const result = await placesApi.importMapFile(tripId, keyholeMarkupFile)
 
       await loadTrip(tripId)
-      setKmlKmzSummary(result.summary || null)
+      setKeyholeMarkupFileSummary(result.summary || null)
       toast.success(t('places.kmlKmzImported', { count: result.count }))
 
       if (result.summary?.errors?.length > 0) {
-        setKmlKmzError(result.summary.errors.join('\n'))
+        setKeyholeMarkupFileError(result.summary.errors.join('\n'))
       }
 
       if (result.places?.length > 0) {
@@ -133,13 +131,13 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
     } catch (err: any) {
       const responseSummary = err?.response?.data?.summary as PlacesImportSummary | undefined
       if (responseSummary) {
-        setKmlKmzSummary(responseSummary)
+        setKeyholeMarkupFileSummary(responseSummary)
       }
       const message = err?.response?.data?.error || t('places.kmlKmzImportError')
-      setKmlKmzError(message)
+      setKeyholeMarkupFileError(message)
       toast.error(message)
     } finally {
-      setKmlKmzLoading(false)
+      setKeyholeMarkupFileLoading(false)
     }
   }
 
@@ -232,7 +230,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
             <Upload size={11} strokeWidth={2} /> {t('places.importGpx')}
           </button>
           <button
-            onClick={() => { resetKmlKmzDialog(); setKmlKmzOpen(true) }}
+            onClick={() => { resetKeyholeMarkupFileDialog(); setKeyholeMarkupFileOpen(true) }}
             style={{
               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
               flex: 1, padding: '5px 12px', borderRadius: 8,
@@ -589,9 +587,9 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
         </div>,
         document.body
       )}
-      {kmlKmzOpen && ReactDOM.createPortal(
+      {keyholeMarkupFileOpen && ReactDOM.createPortal(
         <div
-          onClick={() => { setKmlKmzOpen(false); resetKmlKmzDialog() }}
+          onClick={() => { setKeyholeMarkupFileOpen(false); resetKeyholeMarkupFileDialog() }}
           style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
         >
           <div
@@ -606,20 +604,20 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
             </div>
 
             <input
-              ref={kmlKmzInputRef}
+              ref={keyholeMarkupFileInputRef}
               type="file"
               accept=".kml,.kmz"
               style={{ display: 'none' }}
               onChange={e => {
                 const file = e.target.files?.[0] || null
-                setKmlKmzFile(file)
-                setKmlKmzSummary(null)
-                setKmlKmzError('')
+                setKeyholeMarkupFileFile(file)
+                setKeyholeMarkupFileSummary(null)
+                setKeyholeMarkupFileError('')
               }}
             />
 
             <button
-              onClick={() => kmlKmzInputRef.current?.click()}
+              onClick={() => keyholeMarkupFileInputRef.current?.click()}
               style={{
                 width: '100%',
                 height: 44,
@@ -639,36 +637,36 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
               }}
             >
               <Upload size={14} strokeWidth={2} />
-              {kmlKmzFile ? t('places.kmlKmzSelectedFile', { name: kmlKmzFile.name }) : t('places.kmlKmzSelectFile')}
+              {keyholeMarkupFile ? t('places.kmlKmzSelectedFile', { name: keyholeMarkupFile.name }) : t('places.kmlKmzSelectFile')}
             </button>
 
-            {kmlKmzSummary && (
+            {keyholeMarkupFileSummary && (
               <div style={{
                 border: '1px solid var(--border-primary)', borderRadius: 10,
                 background: 'var(--bg-tertiary)', padding: 10, marginBottom: 10,
               }}>
                 <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                   {t('places.kmlKmzSummaryValues', {
-                    total: kmlKmzSummary.totalPlacemarks,
-                    created: kmlKmzSummary.createdCount,
-                    skipped: kmlKmzSummary.skippedCount,
+                    total: keyholeMarkupFileSummary.totalPlacemarks,
+                    created: keyholeMarkupFileSummary.createdCount,
+                    skipped: keyholeMarkupFileSummary.skippedCount,
                   })}
                 </div>
-                {kmlKmzSummary.warnings?.length > 0 && (
+                {keyholeMarkupFileSummary.warnings?.length > 0 && (
                   <div style={{ marginTop: 8, fontSize: 12, color: '#b45309', whiteSpace: 'pre-wrap' }}>
-                    {kmlKmzSummary.warnings.join('\n')}
+                    {keyholeMarkupFileSummary.warnings.join('\n')}
                   </div>
                 )}
               </div>
             )}
 
-            {kmlKmzError && (
+            {keyholeMarkupFileError && (
               <div style={{
                 border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10,
                 background: 'rgba(239,68,68,0.08)', padding: '8px 10px',
                 fontSize: 12, color: '#b91c1c', whiteSpace: 'pre-wrap', marginBottom: 10,
               }}>
-                {kmlKmzError}
+                {keyholeMarkupFileError}
               </div>
             )}
 
@@ -678,7 +676,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
 
             <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
               <button
-                onClick={() => { setKmlKmzOpen(false); resetKmlKmzDialog() }}
+                onClick={() => { setKeyholeMarkupFileOpen(false); resetKeyholeMarkupFileDialog() }}
                 style={{
                   padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
                   background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500,
@@ -688,17 +686,17 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
                 {t('common.cancel')}
               </button>
               <button
-                onClick={handleKmlKmzImport}
-                disabled={!kmlKmzFile || kmlKmzLoading}
+                onClick={handleKeyholeMarkupFileImport}
+                disabled={!keyholeMarkupFile || keyholeMarkupFileLoading}
                 style={{
                   padding: '8px 16px', borderRadius: 10, border: 'none',
-                  background: !kmlKmzFile || kmlKmzLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
-                  color: !kmlKmzFile || kmlKmzLoading ? 'var(--text-faint)' : 'var(--accent-text)',
-                  fontSize: 13, fontWeight: 500, cursor: !kmlKmzFile || kmlKmzLoading ? 'default' : 'pointer',
+                  background: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
+                  color: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'var(--text-faint)' : 'var(--accent-text)',
+                  fontSize: 13, fontWeight: 500, cursor: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'default' : 'pointer',
                   fontFamily: 'inherit',
                 }}
               >
-                {kmlKmzLoading ? t('common.loading') : t('common.import')}
+                {keyholeMarkupFileLoading ? t('common.loading') : t('common.import')}
               </button>
             </div>
           </div>