Simplify and optimize MapView, NodePanel, and popup

Code reuse:
- Export getOsmUrl from popup.ts and import it in NodePanel.vue, removing
  the identical duplicate that existed in both files

i18n:
- Fix hardcoded English "by" in popup.ts organizingEntityHtml — now uses
  t('panel.by'), which is already translated in all 9 locales

Code quality:
- Extract getOrganizerNames() in NodePanel.vue so formatOrganizers() and
  hasMoreHosts() share the name-extraction logic instead of duplicating it
- Hoist isTextInput guard in MapView handleKeydown to a single early-return,
  removing the repeated !isTextInput && check from every key branch

Performance:
- Build nodeMap (id → Node) alongside markerMap in MapView; applyMarkerLabels
  now does O(1) map lookups instead of O(n) Array.find per marker
- Replace non-terminating forEach in slidingWindowHandler with a for…of loop
  that breaks on first match, and use nodeMap for O(1) node lookup
- Add descPreview and calLinks computed properties in NodePanel so
  getDescPreview() and calendarLinks() are not called twice per render
- Remove unnecessary document.body.appendChild/removeChild in downloadIcs —
  the anchor element does not need to be in the DOM to trigger a download

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: SableRaf

pcd-website/src/components/MapView.vue

@@ -22,6 +22,7 @@ const listOpen = ref(false);
 let mapInstance: import('leaflet').Map | null = null;
 let leafletRef: typeof import('leaflet') | null = null;
 const markerMap = new Map<string, import('leaflet').Marker>();
+const nodeMap = new Map<string, Node>(); // id → Node, for O(1) lookups
 let openPopupNodeId: string | null = null;
 let slidingWindowHandler: ((e: FocusEvent) => void) | null = null;
 
@@ -205,27 +206,32 @@ function handleKeydown(e: KeyboardEvent) {
         document.getElementById('burger-btn')?.focus();
       }
     }
-  } else if (!isTextInput && /^[0-9]$/.test(e.key)) {
+    return;
+  }
+
+  if (isTextInput) return;
+
+  if (/^[0-9]$/.test(e.key)) {
     e.preventDefault();
     e.stopPropagation();
     if (e.key === '0') {
       mapInstance?.setView([20, 10], 3);
     } else {
       mapInstance?.setZoom(parseInt(e.key));
     }
-  } else if (!isTextInput && (e.key === '+' || e.key === '=' || e.key === 'Add')) {
+  } else if (e.key === '+' || e.key === '=' || e.key === 'Add') {
     e.preventDefault();
     e.stopPropagation();
     mapInstance?.zoomIn();
-  } else if (!isTextInput && (e.key === '-' || e.key === 'Subtract')) {
+  } else if (e.key === '-' || e.key === 'Subtract') {
     e.preventDefault();
     e.stopPropagation();
     mapInstance?.zoomOut();
-  } else if (!isTextInput && (e.key === 'M' || e.key === 'm')) {
+  } else if (e.key === 'M' || e.key === 'm') {
     e.preventDefault();
     listOpen.value = !listOpen.value;
     if (listOpen.value) selectedNode.value = null;
-  } else if (!isTextInput && (e.key === 'L' || e.key === 'l')) {
+  } else if (e.key === 'L' || e.key === 'l') {
     e.preventDefault();
     document.getElementById('map')?.focus();
   }
@@ -354,6 +360,7 @@ onMounted(async () => {
 
   // Add markers
   props.nodes.forEach((node) => {
+    nodeMap.set(node.id, node);
     const icon = node.online_event ? onlineMarkerIcon : markerIcon;
     const marker = L.marker([node.lat, node.lng], { icon });
     marker.bindPopup(() => makePopupContent(node), { maxWidth: 340 });
@@ -368,7 +375,7 @@ onMounted(async () => {
   // animates (which shows/hides individual markers as clusters form or dissolve).
   function applyMarkerLabels() {
     markerMap.forEach((marker, id) => {
-      const node = props.nodes.find(n => n.id === id);
+      const node = nodeMap.get(id);
       if (node) {
         marker.getElement()?.setAttribute('aria-label', node.event_name);
       }
@@ -430,11 +437,12 @@ onMounted(async () => {
     if (!target.classList.contains('marker-node')) return;
 
     let foundNode: Node | undefined;
-    markerMap.forEach((marker, id) => {
+    for (const [id, marker] of markerMap) {
       if (marker.getElement() === target) {
-        foundNode = props.nodes.find(n => n.id === id);
+        foundNode = nodeMap.get(id);
+        break;
       }
-    });
+    }
 
     if (foundNode) {
       const lat = foundNode.lat;

pcd-website/src/components/NodePanel.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { createFocusTrap, type FocusTrap } from 'focus-trap';
 import { Icon } from '@iconify/vue';
 import type { Node } from '../lib/nodes';
 import { formatDateRange, formatTimeRange, calendarLinks, onlinePlatformName } from '../lib/format';
+import { getOsmUrl } from '../lib/popup';
 import { PCD_EMAIL } from '../config';
 const props = defineProps<{
   node: Node | null;
@@ -135,31 +136,27 @@ function downloadIcs(node: Node) {
   const a = document.createElement('a');
   a.href = url;
   a.download = `${node.id}.ics`;
-  document.body.appendChild(a);
   a.click();
-  document.body.removeChild(a);
   setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
 
-function getOsmUrl(node: Node): string {
-  const query = node.location_name
-    ? [node.location_name, node.address].filter(Boolean).join(', ')
-    : node.address ?? '';
-  return `https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`;
-}
 
 function getParagraphs(text: string): string[] {
   return text.split(/\n\n+/).filter(Boolean);
 }
 
+function getOrganizerNames(organizers: { name: string }[]): string[] {
+  return organizers.map(o => o.name).filter(Boolean);
+}
+
 function formatOrganizers(organizers: { name: string }[], expanded = false): string {
-  const names = organizers.map(o => o.name).filter(Boolean);
+  const names = getOrganizerNames(organizers);
   if (expanded || names.length <= HOSTS_VISIBLE) return names.join(', ');
   return names.slice(0, HOSTS_VISIBLE).join(', ');
 }
 
 function hasMoreHosts(organizers: { name: string }[]): boolean {
-  return organizers.map(o => o.name).filter(Boolean).length > HOSTS_VISIBLE;
+  return getOrganizerNames(organizers).length > HOSTS_VISIBLE;
 }
 
 function getDescPreview(node: Node): { text: string; hasMore: boolean } {
@@ -189,6 +186,9 @@ function getReportIssueHref(node: Node): string {
   const body = t('panel.email_body', { name: node.event_name, link: getShareUrl(node) });
   return `mailto:${PCD_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
 }
+
+const descPreview = computed(() => props.node ? getDescPreview(props.node) : null);
+const calLinks = computed(() => props.node && !props.node.date_tbd ? calendarLinks(props.node) : null);
 </script>
 
 <template>
@@ -365,15 +365,15 @@ function getReportIssueHref(node: Node): string {
                 </button>
                 <div v-show="calDropdownOpen" class="quick-action-menu" role="menu">
                   <a
-                    :href="calendarLinks(node).googleCalUrl"
+                    :href="calLinks!.googleCalUrl"
                     target="_blank"
                     rel="noopener noreferrer"
                     role="menuitem"
                     :aria-label="t('panel.google_calendar_new_tab')"
                     @click="calDropdownOpen = false"
                   >{{ t('panel.google_calendar') }}</a>
                   <a
-                    :href="calendarLinks(node).outlookCalUrl"
+                    :href="calLinks!.outlookCalUrl"
                     target="_blank"
                     rel="noopener noreferrer"
                     role="menuitem"
@@ -417,10 +417,10 @@ function getReportIssueHref(node: Node): string {
             >{{ para }}</p>
           </template>
           <template v-else>
-            <p>{{ getDescPreview(node).text }}</p>
+            <p>{{ descPreview!.text }}</p>
           </template>
           <button
-            v-if="getDescPreview(node).hasMore"
+            v-if="descPreview!.hasMore"
             class="panel-read-more"
             :aria-expanded="descExpanded"
             @click="descExpanded = !descExpanded"

pcd-website/src/lib/popup.ts

@@ -18,7 +18,7 @@ function t(key: string, params?: Record<string, string>): string {
 
 const POPUP_PREVIEW_LENGTH = 120;
 
-function getOsmUrl(node: Node): string {
+export function getOsmUrl(node: Node): string {
   const query = node.location_name
     ? [node.location_name, node.address].filter(Boolean).join(', ')
     : node.address ?? '';
@@ -43,7 +43,7 @@ export function makePopupContent(node: Node): string {
     : '';
 
   const organizingEntityHtml = node.organization_name
-    ? `<p class="popup-organizing-entity">by ${escapeHtml(node.organization_name)}</p>`
+    ? `<p class="popup-organizing-entity">${t('panel.by')} ${escapeHtml(node.organization_name)}</p>`
     : '';
 
   const onlineBadgeHtml = node.online_event ? `<span class="popup-online-badge">${t('popup.online_event')}</span>` : '';