feat: keyboard shortcuts, all-street path mode, global duplicate check

admin/css/maps.css

@@ -25,7 +25,7 @@ h1 {
 
 .gallery {
     display: grid;
-    grid-template-columns: repeat(23, 400px);
+    grid-template-columns: repeat(23, 800px);
     gap: 0;
     width: 100%;
     opacity: 0.5;
@@ -56,7 +56,8 @@ h1 {
     height: auto;
     display: block;
     object-fit: cover;
-    border: 0.1px solid rgba(0, 0, 0, 0.1);
+    border-right: 0.1px solid rgba(0, 0, 0, 1);
+    border-bottom: 0.1px solid rgba(0, 0, 0, 1);
 }
 
 .image-info {
@@ -273,6 +274,113 @@ h1 {
     margin: 6px 0;
 }
 
+/* ==================== STREET PANEL ==================== */
+
+.street-panel-toggle {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 200;
+    width: 22px;
+    height: 48px;
+    border: 1px solid #bbb;
+    border-left: none;
+    border-radius: 0 6px 6px 0;
+    background: rgba(255,255,255,0.92);
+    font-size: 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 2px 0 6px rgba(0,0,0,0.12);
+    padding: 0;
+    transition: background 0.15s;
+}
+.street-panel-toggle:hover { background: #e8f0fe; }
+.street-panel-toggle.open  { background: #d0e4ff; border-color: #2b7cff; }
+
+.street-panel {
+    position: fixed;
+    top: 50%;
+    left: -240px;
+    transform: translateY(-50%);
+    z-index: 199;
+    width: 240px;
+    max-height: 70vh;
+    background: rgba(255,255,255,0.97);
+    border: 1px solid #ccc;
+    border-radius: 0 8px 8px 0;
+    box-shadow: 4px 0 16px rgba(0,0,0,0.13);
+    display: flex;
+    flex-direction: column;
+    transition: left 0.22s ease;
+    overflow: hidden;
+}
+.street-panel.open { left: 22px; }
+
+.street-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px 6px;
+    border-bottom: 1px solid #eee;
+    flex-shrink: 0;
+}
+.street-panel-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: #222;
+}
+.street-panel-radius {
+    font-size: 10px;
+    color: #888;
+    background: #f0f4ff;
+    border-radius: 10px;
+    padding: 1px 7px;
+}
+
+.street-panel-list {
+    overflow-y: auto;
+    flex: 1;
+    padding: 4px 0;
+}
+
+.street-panel-empty {
+    font-size: 11px;
+    color: #aaa;
+    text-align: center;
+    padding: 18px 10px;
+}
+
+.street-panel-item {
+    display: flex;
+    flex-direction: column;
+    padding: 6px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f5f5f5;
+    transition: background 0.1s;
+}
+.street-panel-item:hover { background: #e8f0fe; }
+.street-panel-item.active { background: #d0e4ff; }
+
+.street-panel-item-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1a3a6c;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.street-panel-item-meta {
+    font-size: 10px;
+    color: #888;
+    margin-top: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* ==================== SEARCH ==================== */
 
 .search-btn {

admin/js/api.js

@@ -31,7 +31,10 @@ class ApiClient {
             const data = await response.json();
 
             if (!response.ok) {
-                throw new Error(data.detail || `HTTP ${response.status}`);
+                const err = new Error(data.detail || data.error || `HTTP ${response.status}`);
+                err.status = response.status;
+                err.data = data;   // full response body available as err.data
+                throw err;
             }
 
             return data;

admin/js/maps.js

@@ -19,6 +19,7 @@ window.addEventListener('load', async () => {
     initEditorListener();
     initSettings();
     initSearch();
+    initStreetPanel();
 
     // Test pointr
     const allPointrs = [

admin/js/maps/navigation.js

@@ -3,6 +3,15 @@
 // Global variable to store all streets from database
 let allStreetsData = [];
 
+function escapeHtml(text) {
+    return String(text)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
 // Helper: populate a select, preserving negative-value options (Tạo Mới)
 function populateSelect(selectEl, items, labelKey, valueKey) {
     const negativeOpts = Array.from(selectEl.options).filter(o => parseInt(o.value) < 0);
@@ -106,7 +115,7 @@ function showCreateDistrictModal() {
     });
 }
 
-function showCreateStreetModal(onCreated) {
+function showCreateStreetModal(onCreated, onCancel) {
     const cityId = document.getElementById('Cities').value;
     const districtId = document.getElementById('Districts').value;
     if (!cityId || cityId === 'all' || parseInt(cityId) < 0) {
@@ -121,6 +130,19 @@ function showCreateStreetModal(onCreated) {
     }
     const cityName = document.getElementById('Cities').selectedOptions[0].text;
     const districtName = document.getElementById('Districts').selectedOptions[0].text;
+
+    // Build type dropdown from allStreetsData distinct types
+    const knownTypes = [...new Set((allStreetsData || []).map(s => s.type).filter(Boolean))].sort();
+    const typeOptions = knownTypes.map(t => `<option value="${t}">${t}</option>`).join('');
+    const typeField = knownTypes.length > 0
+        ? `<select id="f_type">
+              <option value="">-- Không có --</option>
+              ${typeOptions}
+              <option value="__custom__">-- Nhập mới... --</option>
+           </select>
+           <input type="text" id="f_type_custom" placeholder="Nhập loại đường..." style="display:none;margin-top:4px;">`
+        : `<input type="text" id="f_type" placeholder="VD: Đường, Phố, Đại lộ...">`;
+
     openModal(`
         <div class="modal-content">
             <h2>Tạo Street mới</h2>
@@ -130,23 +152,48 @@ function showCreateStreetModal(onCreated) {
                     <input type="text" id="f_name" placeholder="VD: Nguyễn Huệ" required>
                 </label>
                 <label>Loại đường
-                    <input type="text" id="f_type" placeholder="VD: Đường, Phố, Đại lộ...">
+                    ${typeField}
                 </label>
                 <div class="modal-error" id="modalError"></div>
                 <div class="modal-actions">
-                    <button type="button" class="btn-cancel" onclick="closeModal()">Huỷ</button>
+                    <button type="button" class="btn-cancel" id="createStreetCancel">Huỷ</button>
                     <button type="submit" class="btn-submit">Tạo</button>
                 </div>
             </form>
         </div>
     `);
+
+    // Show/hide custom type input
+    const typeSelect = document.getElementById('f_type');
+    const typeCustom = document.getElementById('f_type_custom');
+    if (typeSelect && typeSelect.tagName === 'SELECT') {
+        typeSelect.addEventListener('change', () => {
+            if (typeCustom) typeCustom.style.display = typeSelect.value === '__custom__' ? 'block' : 'none';
+        });
+    }
+
+    document.getElementById('createStreetCancel').addEventListener('click', () => {
+        closeModal();
+        if (typeof onCancel === 'function') try { onCancel(); } catch (_) {}
+    });
+
     document.getElementById('createForm').addEventListener('submit', async (e) => {
         e.preventDefault();
         const name = document.getElementById('f_name').value.trim();
-        const type = document.getElementById('f_type').value.trim();
+        const typeEl = document.getElementById('f_type');
+        let type = typeEl ? typeEl.value.trim() : '';
+        if (type === '__custom__') {
+            type = (document.getElementById('f_type_custom')?.value || '').trim();
+        }
         if (!name) return;
         try {
             const street = await apiClient.createStreet(name, districtId, cityId, type || null);
+            // Inject into allStreetsData immediately so showSaveAllModal can find it
+            if (typeof allStreetsData !== 'undefined' && Array.isArray(allStreetsData)) {
+                if (!allStreetsData.find(s => s.id === street.id)) {
+                    allStreetsData.push(street);
+                }
+            }
             closeModal();
             await loadStreets(districtId, cityId);
             document.getElementById('Streets').value = street.id;
@@ -154,7 +201,48 @@ function showCreateStreetModal(onCreated) {
                 try { onCreated(street.id); } catch (_) {}
             }
         } catch (err) {
-            document.getElementById('modalError').textContent = err.message;
+            // 409 duplicate: err.data = { error: 'duplicate', street: { id, name } }
+            const dup = err.status === 409 && err.data?.error === 'duplicate' ? err.data.street : null;
+            if (dup) {
+                const errEl = document.getElementById('modalError');
+                errEl.innerHTML = `Street tương tự đã tồn tại: <strong>${escapeHtml(dup.name)}</strong> (id=${dup.id})`;
+
+                // Show/replace apply button
+                let applyBtn = document.getElementById('applyFoundStreet');
+                if (!applyBtn) {
+                    applyBtn = document.createElement('button');
+                    applyBtn.id = 'applyFoundStreet';
+                    applyBtn.type = 'button';
+                    applyBtn.className = 'btn-submit';
+                    applyBtn.style.marginTop = '8px';
+                    errEl.after(applyBtn);
+                }
+                applyBtn.textContent = `Dùng "${dup.name}" (#${dup.id})`;
+                applyBtn.onclick = async () => {
+                    let foundStreet = (allStreetsData || []).find(s => s.id === dup.id);
+                    if (!foundStreet) {
+                        try {
+                            foundStreet = await apiClient.getStreetById(dup.id);
+                            if (foundStreet && typeof allStreetsData !== 'undefined' && Array.isArray(allStreetsData)) {
+                                allStreetsData.push(foundStreet);
+                            }
+                        } catch (_) {
+                            foundStreet = { id: dup.id, name: dup.name };
+                            if (typeof allStreetsData !== 'undefined' && Array.isArray(allStreetsData)) {
+                                allStreetsData.push(foundStreet);
+                            }
+                        }
+                    }
+                    closeModal();
+                    await loadStreets(districtId, cityId);
+                    document.getElementById('Streets').value = dup.id;
+                    if (typeof onCreated === 'function') {
+                        try { onCreated(dup.id); } catch (_) {}
+                    }
+                };
+            } else {
+                document.getElementById('modalError').textContent = err.message;
+            }
         }
     });
 }
@@ -307,3 +395,135 @@ async function initFilterListeners() {
         if (e.key === 'Escape') closeModal();
     });
 }
+
+// ==================== STREET PANEL ====================
+
+let _streetPanelOpen = false;
+let _streetPanelDebounce = null;
+
+function initStreetPanel() {
+    const toggle = document.getElementById('streetPanelToggle');
+    const panel  = document.getElementById('streetPanel');
+    if (!toggle || !panel) return;
+
+    toggle.addEventListener('click', () => {
+        _streetPanelOpen = !_streetPanelOpen;
+        panel.classList.toggle('open', _streetPanelOpen);
+        toggle.classList.toggle('open', _streetPanelOpen);
+        if (_streetPanelOpen) refreshStreetPanel();
+    });
+
+    // Refresh on scroll (debounced 400ms)
+    document.querySelector('.container').addEventListener('scroll', () => {
+        if (!_streetPanelOpen) return;
+        clearTimeout(_streetPanelDebounce);
+        _streetPanelDebounce = setTimeout(refreshStreetPanel, 400);
+    });
+}
+
+function getScreenCenterLatLon() {
+    const container = document.querySelector('.container');
+    const cx = container.scrollLeft + container.clientWidth  / 2;
+    const cy = container.scrollTop  + container.clientHeight / 2;
+    const sizePer = parseInt(document.getElementById('sSize').value) / 2400;
+    return pixelToLatLon(cx, cy, sizePer);
+}
+
+function haverDistKm(lat1, lon1, lat2, lon2) {
+    const R = 6371;
+    const dLat = (lat2 - lat1) * Math.PI / 180;
+    const dLon = (lon2 - lon1) * Math.PI / 180;
+    const a = Math.sin(dLat / 2) ** 2 +
+              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+              Math.sin(dLon / 2) ** 2;
+    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+function refreshStreetPanel() {
+    const listEl = document.getElementById('streetPanelList');
+    if (!listEl) return;
+
+    const { lat: cLat, lon: cLon } = getScreenCenterLatLon();
+
+    // Collect (streetId → minDist) using loaded pointrs
+    const sidDist = new Map();
+    const checkPtrs = (d) => {
+        if (d.lat == null || d.lon == null) return;
+        const dist = haverDistKm(cLat, cLon, d.lat, d.lon);
+        if (dist > 0.8) return;
+        (d.streets || []).forEach(sid => {
+            if (!sidDist.has(sid) || dist < sidDist.get(sid)) sidDist.set(sid, dist);
+        });
+    };
+    if (typeof pointrReload !== 'undefined') pointrReload.forEach(checkPtrs);
+    if (typeof pointrData   !== 'undefined') pointrData.forEach(checkPtrs);
+
+    if (sidDist.size === 0) {
+        listEl.innerHTML = '<div class="street-panel-empty">Không có street nào trong 2km</div>';
+        return;
+    }
+
+    // Sort by distance, then name
+    const entries = [...sidDist.entries()]
+        .map(([sid, dist]) => ({ sid, dist, street: (allStreetsData || []).find(s => s.id === sid) }))
+        .filter(e => e.street)
+        .sort((a, b) => a.dist - b.dist || (a.street.name || '').localeCompare(b.street.name || ''));
+
+    const currentStreetId = parseInt(document.getElementById('Streets').value) || null;
+
+    listEl.innerHTML = '';
+    entries.forEach(({ sid, dist, street }) => {
+        const item = document.createElement('div');
+        item.className = 'street-panel-item' + (sid === currentStreetId ? ' active' : '');
+        item.dataset.streetId = sid;
+
+        const distStr = dist < 1 ? `${Math.round(dist * 1000)}m` : `${dist.toFixed(1)}km`;
+        const typeStr = street.type ? ` · ${street.type}` : '';
+
+        item.innerHTML = `
+            <span class="street-panel-item-name">${escapeHtml(street.name || '')}</span>
+            <span class="street-panel-item-meta">${distStr}${typeStr}</span>
+        `;
+
+        item.addEventListener('click', () => selectStreetFromPanel(sid));
+        listEl.appendChild(item);
+    });
+}
+
+async function selectStreetFromPanel(streetId) {
+    const street = (allStreetsData || []).find(s => s.id === streetId);
+    if (!street) return;
+
+    const cityId     = street.city_id;
+    const districtId = street.district_id;
+
+    // 1. Set City
+    const citySelect = document.getElementById('Cities');
+    if (cityId && citySelect.value != cityId) {
+        citySelect.value = cityId;
+        localStorage.setItem('maps_city', cityId);
+        await loadDistricts(cityId);
+    }
+
+    // 2. Set District
+    const districtSelect = document.getElementById('Districts');
+    if (districtId && districtSelect.value != districtId) {
+        districtSelect.value = districtId;
+        localStorage.setItem('maps_district', districtId);
+        await loadStreets(districtId, cityId);
+    }
+
+    // 3. Set Street
+    const streetSelect = document.getElementById('Streets');
+    streetSelect.value = streetId;
+    localStorage.setItem('maps_street', String(streetId));
+
+    // Highlight active item in panel
+    document.querySelectorAll('.street-panel-item').forEach(el => {
+        el.classList.toggle('active', parseInt(el.dataset.streetId) === streetId);
+    });
+
+    // Draw path on map
+    if (typeof scrollToStreet === 'function') scrollToStreet(streetId);
+}
+

admin/js/maps/pointr.js

@@ -151,18 +151,36 @@ function collectStreetPointrs(streetId) {
     return pts;
 }
 
+// Geographic distance squared (in degrees²) — good enough for relative comparison within a city
+function _geoDist2(a, b) {
+    const dLat = (a.lat ?? 0) - (b.lat ?? 0);
+    const dLon = (a.lon ?? 0) - (b.lon ?? 0);
+    // scale lon by cos(lat) to approximate equal-distance in both axes
+    const cosLat = Math.cos(((a.lat ?? 0) * Math.PI) / 180);
+    return dLat * dLat + (dLon * dLon * cosLat * cosLat);
+}
+
 function nearestNeighborSort(pts) {
     if (pts.length <= 1) return [...pts];
+
+    // Find the pair of points with the maximum distance (diameter of the set).
+    // One of those endpoints is the natural start of the street path.
+    let maxD = -1, startIdx = 0;
+    for (let i = 0; i < pts.length; i++) {
+        for (let j = i + 1; j < pts.length; j++) {
+            const d = _geoDist2(pts[i], pts[j]);
+            if (d > maxD) { maxD = d; startIdx = i; }
+        }
+    }
+
     const rem = [...pts];
     const result = [];
-    let cur = rem.splice(0, 1)[0];
+    let cur = rem.splice(startIdx, 1)[0];
     result.push(cur);
     while (rem.length > 0) {
         let minD = Infinity, minI = 0;
         for (let i = 0; i < rem.length; i++) {
-            const dx = rem[i].initialClientX - cur.initialClientX;
-            const dy = rem[i].initialClientY - cur.initialClientY;
-            const d = dx * dx + dy * dy;
+            const d = _geoDist2(rem[i], cur);
             if (d < minD) { minD = d; minI = i; }
         }
         cur = rem.splice(minI, 1)[0];
@@ -182,13 +200,9 @@ function clearStreetPath() {
     if (svg) svg.innerHTML = '';
 }
 
-function refreshStreetPath() {
-    const svg = document.getElementById('street-path-svg');
-    if (!svg) return;
-    svg.innerHTML = '';
-    if (!activeStreetPathId) return;
-    const pts = collectStreetPointrs(activeStreetPathId);
-    if (pts.length < 2) return;
+const _PATH_COLORS = ['#2196F3','#E91E63','#4CAF50','#FF9800','#9C27B0','#00BCD4','#FF5722','#8BC34A','#F44336','#3F51B5'];
+
+function _appendPolyline(svg, pts, color) {
     const sorted = nearestNeighborSort(pts);
     const container = document.querySelector('.container');
     const sl = container.scrollLeft;
@@ -196,13 +210,51 @@ function refreshStreetPath() {
     const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
     polyline.setAttribute('points', sorted.map(d => `${d.initialClientX - sl},${d.initialClientY - st}`).join(' '));
     polyline.setAttribute('fill', 'none');
-    polyline.setAttribute('stroke', '#2196F3');
+    polyline.setAttribute('stroke', color);
     polyline.setAttribute('stroke-width', '2');
     polyline.setAttribute('stroke-dasharray', '6,3');
     polyline.setAttribute('opacity', '0.8');
     svg.appendChild(polyline);
 }
 
+function refreshStreetPath() {
+    const svg = document.getElementById('street-path-svg');
+    if (!svg) return;
+    svg.innerHTML = '';
+
+    const showAll = document.getElementById('sIsStreetPath')?.checked;
+
+    if (showAll) {
+        // Draw paths for all streets that have pointrs (Maps → iterate values)
+        const streetIds = new Set();
+        pointrReload.forEach(d => { if (Array.isArray(d.streets)) d.streets.forEach(sid => streetIds.add(sid)); });
+        pointrData.forEach(d => {   if (Array.isArray(d.streets)) d.streets.forEach(sid => streetIds.add(sid)); });
+        let colorIdx = 0;
+        streetIds.forEach(sid => {
+            const pts = collectStreetPointrs(sid);
+            if (pts.length >= 2) {
+                const color = sid === activeStreetPathId
+                    ? '#2196F3'
+                    : _PATH_COLORS[(colorIdx + 1) % _PATH_COLORS.length];
+                colorIdx++;
+                _appendPolyline(svg, pts, color);
+            }
+        });
+        // Also draw active street on top if not already covered
+        if (activeStreetPathId && !streetIds.has(activeStreetPathId)) {
+            const pts = collectStreetPointrs(activeStreetPathId);
+            if (pts.length >= 2) _appendPolyline(svg, pts, '#2196F3');
+        }
+        return;
+    }
+
+    // Default: draw only the active street
+    if (!activeStreetPathId) return;
+    const pts = collectStreetPointrs(activeStreetPathId);
+    if (pts.length < 2) return;
+    _appendPolyline(svg, pts, '#2196F3');
+}
+
 // ==================== POINTR CREATION ====================
 
 function createPointr(clientX, clientY, title = '', lat = null, lon = null) {
@@ -372,12 +424,35 @@ function deletePointr(pointrId) {
 
 // ==================== POINTR MODALS ====================
 
+// Return streets from allStreetsData that have at least one pointr within radiusKm of (lat, lon)
+function getStreetsNearPoint(lat, lon, radiusKm) {
+    if (lat == null || lon == null) return allStreetsData || [];
+    const R = 6371;
+    function haverDist(lat1, lon1, lat2, lon2) {
+        const dLat = (lat2 - lat1) * Math.PI / 180;
+        const dLon = (lon2 - lon1) * Math.PI / 180;
+        const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2;
+        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    }
+    const nearSids = new Set();
+    const check = (d) => {
+        if (d.lat == null || d.lon == null) return;
+        if (haverDist(lat, lon, d.lat, d.lon) <= radiusKm) {
+            (d.streets || []).forEach(sid => nearSids.add(sid));
+        }
+    };
+    pointrReload.forEach(check);
+    pointrData.forEach(check);
+    const nearby = (allStreetsData || []).filter(s => nearSids.has(s.id));
+    return nearby.length > 0 ? nearby : (allStreetsData || []);
+}
+
 function showSetNodeModal(pointrId) {
     const data = pointrData.get(pointrId);
     if (!data) return;
     
     const currentStreets = data.streets || [];
-    const availableStreets = allStreetsData || [];
+    const availableStreets = getStreetsNearPoint(data.lat, data.lon, 0.8);
     
     let tableHTML = `<table class="node-streets-table">
         <thead>
@@ -736,15 +811,6 @@ function showSaveAllModal() {
     });
 }
 
-function escapeHtml(text) {
-    return String(text)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#039;');
-}
-
 // ==================== POINTR MOVEMENT ====================
 
 function movePointr(direction) {
@@ -857,16 +923,16 @@ function handleGalleryClick(e) {
             const data = pointrData.get(pointrId);
             if (data) {
                 data.streets = [parseInt(newStreetId)];
-                // update tooltip
                 const tooltip = data.element ? data.element.querySelector('.pointr-tooltip') : null;
                 if (tooltip) tooltip.textContent = streetName;
             }
-            // update streetPointsList entry
             const sp = streetPointsList.find(p => p.id === pointrId);
             if (sp) sp.streetId = parseInt(newStreetId);
-            // remove temp marker class
             pointr.classList.remove('pointr-temp');
             refreshStreetPath();
+        }, () => {
+            // User cancelled → remove the temp pointr
+            deletePointr(pointrId);
         });
         return;
     }
@@ -896,6 +962,80 @@ function initContainerScrollListener() {
 
 function initKeyboardListener() {
     document.addEventListener('keydown', (e) => {
+        // Skip if focus is inside an input/textarea/select
+        const tag = document.activeElement?.tagName;
+        const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+
+        if (!inInput) {
+            // N -> Create Point
+            if (e.key === 'n' || e.key === 'N') {
+                const ed = document.getElementById('editor');
+                ed.value = 'create'; ed.dispatchEvent(new Event('change'));
+                e.preventDefault();
+                return;
+            }
+            // M -> Move Point
+            if (e.key === 'm' || e.key === 'M') {
+                const ed = document.getElementById('editor');
+                ed.value = 'move'; ed.dispatchEvent(new Event('change'));
+                e.preventDefault();
+                return;
+            }
+            // V -> toggle View All Street Paths (sIsStreetPath)
+            if (e.key === 'v' || e.key === 'V') {
+                const cb = document.getElementById('sIsStreetPath');
+                if (cb) { cb.checked = !cb.checked; refreshStreetPath(); }
+                e.preventDefault();
+                return;
+            }
+            // B -> toggle Street Panel
+            if (e.key === 'b' || e.key === 'B') {
+                document.getElementById('streetPanelToggle')?.click();
+                e.preventDefault();
+                return;
+            }
+            // T -> reset Streets dropdown to "all"
+            if (e.key === 't' || e.key === 'T') {
+                const sel = document.getElementById('Streets');
+                if (sel) { sel.value = 'all'; sel.dispatchEvent(new Event('change')); }
+                e.preventDefault();
+                return;
+            }
+            // + / - -> increase / decrease tile size by 50px
+            if (e.key === '+' || e.key === '=') {
+                const sl = document.getElementById('sSize');
+                if (sl) { sl.value = parseInt(sl.value) + 50; sl.dispatchEvent(new Event('change')); }
+                e.preventDefault();
+                return;
+            }
+            if (e.key === '-' || e.key === '_') {
+                const sl = document.getElementById('sSize');
+                if (sl) { sl.value = Math.max(50, parseInt(sl.value) - 50); sl.dispatchEvent(new Event('change')); }
+                e.preventDefault();
+                return;
+            }
+            // < / > -> decrease / increase opacity by 5
+            if (e.key === '<' || e.key === ',') {
+                const sl = document.getElementById('sOpacity');
+                if (sl) { sl.value = Math.max(0, parseInt(sl.value) - 5); sl.dispatchEvent(new Event('input')); }
+                e.preventDefault();
+                return;
+            }
+            if (e.key === '>' || e.key === '.') {
+                const sl = document.getElementById('sOpacity');
+                if (sl) { sl.value = Math.min(100, parseInt(sl.value) + 5); sl.dispatchEvent(new Event('input')); }
+                e.preventDefault();
+                return;
+            }
+        }
+
+        // Ctrl+S -> Save All modal
+        if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            showSaveAllModal();
+            return;
+        }
+
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
             const editor = document.querySelector('#editor');
             if (editor.value === 'move' && activePointrId) {
@@ -934,11 +1074,20 @@ function initPointrDrag() {
     });
 }
 
+const _EDITOR_CURSORS = { create: 'crosshair', move: 'all-scroll', view: 'default' };
+
+function _applyEditorCursor(mode) {
+    document.querySelector('.container').style.cursor = _EDITOR_CURSORS[mode] || 'default';
+}
+
 function initEditorListener() {
     const editor = document.getElementById('editor');
     editor.addEventListener('change', (e) => {
         document.body.className = `mode-${e.target.value}`;
+        _applyEditorCursor(e.target.value);
         activePointrId = null;
         updateActivePointrVisual();
     });
+    // Apply initial cursor on load
+    _applyEditorCursor(editor.value);
 }

admin/js/maps/settings.js

@@ -72,6 +72,10 @@ function initSettings() {
         if (window._gallerySettings) window._gallerySettings.size = newSize;
     });
 
+    document.getElementById('sIsStreetPath').addEventListener('change', () => {
+        refreshStreetPath();
+    });
+
     document.getElementById('settingsSave').addEventListener('click', () => {
         const items = parseInt(document.getElementById('sItems').value) || 23;
         const newSize = parseInt(document.getElementById('sSize').value) || 400;

admin/maps.html

@@ -38,6 +38,18 @@
         <div id="modal" class="modal"></div>
     </div>
 
+    <!-- Street Panel -->
+    <button id="streetPanelToggle" class="street-panel-toggle" title="Nearby Streets">☰</button>
+    <div id="streetPanel" class="street-panel">
+        <div class="street-panel-header">
+            <span class="street-panel-title">Nearby Streets</span>
+            <span id="streetPanelRadius" class="street-panel-radius">r=2km</span>
+        </div>
+        <div id="streetPanelList" class="street-panel-list">
+            <div class="street-panel-empty">Scroll map to load...</div>
+        </div>
+    </div>
+
     <!-- Search -->
     <button id="searchBtn" class="search-btn" title="Search">🔍</button>
     <div id="searchModal" class="search-modal" style="display:none;">
@@ -66,11 +78,15 @@
         </label>
         <label class="settings-label">
             Size (px)
-            <input type="number" id="sSize" value="400" min="1">
+            <input type="number" id="sSize" value="800" min="1">
         </label>
         <label class="settings-label settings-label--row">
             <input type="checkbox" id="sIsBorder" checked>
-            Border
+            Tile Border
+        </label>
+        <label class="settings-label settings-label--row">
+            <input type="checkbox" id="sIsStreetPath">
+            Street Path
         </label>
         <label class="settings-label">
             Opacity

backend/main.py

@@ -366,12 +366,24 @@ async def search_streets(payload: dict = Body(...)):
 
 @app.post("/api/streets", response_model=Street)
 async def create_street(street: StreetCreate):
-    """Create a new street"""
+    """Create a new street. Returns 409 with {error:'duplicate', street:{id,name}} if similar exists."""
     try:
         return await MapsService.create_street(street)
     except Exception as e:
-        logger.error(f"Error creating street: {str(e)}")
-        raise HTTPException(status_code=500, detail=str(e))
+        msg = str(e)
+        # Structured duplicate signal: "Failed to create street: DUPLICATE_STREET:<id>:<name>"
+        inner = msg.replace("Failed to create street: ", "")
+        if inner.startswith("DUPLICATE_STREET:"):
+            parts = inner.split(":", 2)  # ["DUPLICATE_STREET", "<id>", "<name>"]
+            dup_id   = int(parts[1]) if len(parts) > 1 and parts[1].isdigit() else None
+            dup_name = parts[2] if len(parts) > 2 else ""
+            from fastapi.responses import JSONResponse
+            return JSONResponse(
+                status_code=409,
+                content={"error": "duplicate", "street": {"id": dup_id, "name": dup_name}}
+            )
+        logger.error(f"Error creating street: {msg}")
+        raise HTTPException(status_code=500, detail=msg)
 
 
 @app.get("/api/streets/{street_id}", response_model=Street)

backend/services/maps_service.py

@@ -175,51 +175,23 @@ class MapsService:
                 return prev[-1]
 
             name_norm = _normalize(data.name)
-            city_id = data.city_id
-            district_id = data.district_id
 
-            # Fetch candidate existing streets in same district or city
-            query = supabase.table("Streets").select("id, name, district_id, city_id").order("name")
-            if district_id is not None:
-                query = query.eq("district_id", district_id)
-            elif city_id is not None:
-                query = query.eq("city_id", city_id)
-            existing_res = query.execute()
+            # Fetch ALL streets globally to check for duplicates across all districts/cities
+            existing_res = supabase.table("Streets").select("id, name, district_id, city_id").order("name").execute()
             existing_list = existing_res.data or []
             for item in existing_list:
                 existing_name = item.get('name') or ''
                 en_norm = _normalize(existing_name)
-                # exact or containment
-                if en_norm == name_norm or (name_norm and en_norm and (name_norm in en_norm or en_norm in name_norm)):
-                    raise Exception(f"Similar street exists: {existing_name} (id={item.get('id')})")
-                # small edit distance -> likely duplicate; threshold scales with length
+                if not en_norm:
+                    continue
+                # exact or containment match
+                if en_norm == name_norm or (name_norm and (name_norm in en_norm or en_norm in name_norm)):
+                    raise Exception(f"DUPLICATE_STREET:{item.get('id')}:{existing_name}")
+                # edit distance threshold scales with length
                 max_dist = max(2, int(max(len(en_norm), len(name_norm)) * 0.2))
                 dist = _levenshtein(en_norm, name_norm)
-                # debug log
-                try:
-                    import logging
-                    logging.getLogger(__name__).info(f"create_street: compare '{name_norm}' vs '{en_norm}' -> dist={dist} threshold={max_dist}")
-                except Exception:
-                    pass
                 if dist <= max_dist:
-                    raise Exception(f"Similar street exists: {existing_name} (id={item.get('id')})")
-
-            # Also perform a global fuzzy search to catch similar names in other districts/cities
-            try:
-                global_results = await MapsService.search_streets_by_text(data.name, district_id=None, city_id=None, limit=10)
-                # Accept if any match has a low score (<= 0.15)
-                for r in (global_results or []):
-                    if float(r.get('score', 1.0)) <= 0.15:
-                        raise Exception(f"Similar street exists elsewhere: {r.get('name')} (id={r.get('id')})")
-            except Exception as e:
-                # If search_streets_by_text raised an exception because of DB, re-raise as generic
-                if str(e).startswith('Failed to create street'):
-                    raise
-                # If we raised above due to similarity, pass it up
-                if 'Similar street exists' in str(e) or 'Similar street exists elsewhere' in str(e):
-                    raise
-                # otherwise ignore search errors and proceed with insert
-                pass
+                    raise Exception(f"DUPLICATE_STREET:{item.get('id')}:{existing_name}")
 
             # No similar found -> proceed to insert
             next_id = _next_id("Streets")