minor: heavily simplify server and app content. unify styling (#4)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #4

app/components/KestrelMap.vue

@@ -7,13 +7,13 @@
     <div
       v-if="contextMenu.type"
       ref="contextMenuRef"
-      class="pointer-events-auto absolute z-[1000] min-w-[120px] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.2)]"
+      class="pointer-events-auto absolute z-[1000] min-w-[120px] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-context"
       :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
     >
       <template v-if="contextMenu.type === 'map'">
         <button
           type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
+          class="kestrel-context-menu-item"
           @click="openAddPoiModal(contextMenu.latlng)"
         >
           Add POI here
@@ -22,14 +22,14 @@
       <template v-else-if="contextMenu.type === 'poi'">
         <button
           type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
+          class="kestrel-context-menu-item"
           @click="openEditPoiModal(contextMenu.poi)"
         >
           Edit
         </button>
         <button
           type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-kestrel-border"
+          class="kestrel-context-menu-item-danger"
           @click="openDeletePoiModal(contextMenu.poi)"
         >
           Delete
@@ -37,176 +37,16 @@
       </template>
     </div>
 
-    <!-- POI modal (Add / Edit) -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div
-          v-if="showPoiModal"
-          class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="poiModalMode === 'delete' ? 'delete-poi-title' : 'poi-modal-title'"
-          @keydown.escape="closePoiModal"
-        >
-          <button
-            type="button"
-            class="absolute inset-0 bg-black/60 transition-opacity"
-            aria-label="Close"
-            @click="closePoiModal"
-          />
-          <!-- Add / Edit form -->
-          <div
-            v-if="poiModalMode === 'add' || poiModalMode === 'edit'"
-            ref="poiModalRef"
-            class="relative w-full max-w-md rounded-lg border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_32px_-8px_rgba(34,201,201,0.25)]"
-            @click.stop
-          >
-            <h2
-              id="poi-modal-title"
-              class="mb-4 text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]"
-            >
-              {{ poiModalMode === 'edit' ? 'Edit POI' : 'Add POI' }}
-            </h2>
-            <form
-              class="space-y-4"
-              @submit.prevent="submitPoiModal"
-            >
-              <div>
-                <label
-                  for="add-poi-label"
-                  class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted"
-                >
-                  Label (optional)
-                </label>
-                <input
-                  id="add-poi-label"
-                  v-model="poiForm.label"
-                  type="text"
-                  placeholder="e.g. Rally point"
-                  class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text placeholder:text-kestrel-muted outline-none transition-colors focus:border-kestrel-accent"
-                  autocomplete="off"
-                >
-              </div>
-              <div>
-                <label
-                  class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted"
-                >
-                  Icon type
-                </label>
-                <div
-                  :ref="el => iconDropdownOpen && (iconDropdownRef.value = el)"
-                  class="relative inline-block w-full"
-                >
-                  <button
-                    type="button"
-                    class="flex w-full min-w-0 items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-left text-sm text-kestrel-text transition-colors hover:border-kestrel-accent/50"
-                    :aria-expanded="iconDropdownOpen"
-                    aria-haspopup="listbox"
-                    :aria-label="`Icon type: ${poiForm.iconType}`"
-                    @click="iconDropdownOpen = !iconDropdownOpen"
-                  >
-                    <span class="flex items-center gap-2 capitalize">
-                      <Icon
-                        :name="POI_ICONIFY_IDS[poiForm.iconType]"
-                        class="size-4 shrink-0"
-                      />
-                      {{ poiForm.iconType }}
-                    </span>
-                    <span
-                      class="text-kestrel-muted transition-transform"
-                      :class="iconDropdownOpen && 'rotate-180'"
-                    >
-                      ▾
-                    </span>
-                  </button>
-                  <Transition
-                    enter-active-class="transition duration-100 ease-out"
-                    enter-from-class="opacity-0 scale-95"
-                    enter-to-class="opacity-100 scale-100"
-                    leave-active-class="transition duration-75 ease-in"
-                    leave-from-class="opacity-100 scale-100"
-                    leave-to-class="opacity-0 scale-95"
-                  >
-                    <div
-                      v-show="iconDropdownOpen"
-                      class="absolute left-0 right-0 top-full z-10 mt-1 rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow [box-shadow:0_4px_12px_-2px_rgba(34,201,201,0.15)]"
-                      role="listbox"
-                    >
-                      <button
-                        v-for="opt in POI_ICON_TYPES"
-                        :key="opt"
-                        type="button"
-                        role="option"
-                        :aria-selected="poiForm.iconType === opt"
-                        class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm capitalize transition-colors"
-                        :class="poiForm.iconType === opt
-                          ? 'bg-kestrel-accent-dim text-kestrel-accent'
-                          : 'text-kestrel-text hover:bg-kestrel-border'"
-                        @click="poiForm.iconType = opt; iconDropdownOpen = false"
-                      >
-                        <Icon
-                          :name="POI_ICONIFY_IDS[opt]"
-                          class="size-4 shrink-0"
-                        />
-                        {{ opt }}
-                      </button>
-                    </div>
-                  </Transition>
-                </div>
-              </div>
-              <div class="flex justify-end gap-2 pt-2">
-                <button
-                  type="button"
-                  class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border"
-                  @click="closePoiModal"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
-                >
-                  {{ poiModalMode === 'edit' ? 'Save changes' : 'Add POI' }}
-                </button>
-              </div>
-            </form>
-          </div>
-          <!-- Delete confirmation -->
-          <div
-            v-if="poiModalMode === 'delete'"
-            ref="poiModalRef"
-            class="relative w-full max-w-sm rounded-lg border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_32px_-8px_rgba(34,201,201,0.25)]"
-            @click.stop
-          >
-            <h2
-              id="delete-poi-title"
-              class="mb-2 text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]"
-            >
-              Delete POI?
-            </h2>
-            <p class="mb-4 text-sm text-kestrel-muted">
-              {{ deletePoi?.label ? `“${deletePoi.label}” will be removed.` : 'This POI will be removed.' }}
-            </p>
-            <div class="flex justify-end gap-2">
-              <button
-                type="button"
-                class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border"
-                @click="closePoiModal"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                class="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
-                @click="confirmDeletePoi"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
+    <PoiModal
+      :show="showPoiModal"
+      :mode="poiModalMode"
+      :form="poiForm"
+      :edit-poi="editPoi"
+      :delete-poi="deletePoi"
+      @close="closePoiModal"
+      @submit="onPoiSubmit"
+      @confirm-delete="confirmDeletePoi"
+    />
   </div>
 </template>
 
@@ -244,14 +84,11 @@ const liveMarkersRef = ref({})
 const contextMenu = ref({ ...CONTEXT_MENU_EMPTY })
 
 const showPoiModal = ref(false)
-const poiModalRef = ref(null)
 const poiModalMode = ref('add') // 'add' | 'edit' | 'delete'
 const addPoiLatlng = ref(null)
 const editPoi = ref(null)
 const deletePoi = ref(null)
 const poiForm = ref({ label: '', iconType: 'pin' })
-const iconDropdownOpen = ref(false)
-const iconDropdownRef = ref(null)
 
 const TILE_URL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
 const TILE_SUBDOMAINS = 'abcd'
@@ -259,11 +96,7 @@ const ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">Op
 const DEFAULT_VIEW = [37.7749, -122.4194]
 const DEFAULT_ZOOM = 17
 const MARKER_ICON_PATH = '/'
-const POI_ICON_TYPES = ['pin', 'flag', 'waypoint']
 const POI_TOOLTIP_CLASS = 'kestrel-poi-tooltip'
-
-/** Tabler icon names (Nuxt Icon / Iconify) – modern technical aesthetic. */
-const POI_ICONIFY_IDS = { pin: 'tabler:map-pin', flag: 'tabler:flag', waypoint: 'tabler:current-location' }
 const POI_ICON_COLORS = { pin: '#22c9c9', flag: '#e53e3e', waypoint: '#a78bfa' }
 
 const ICON_SIZE = 28
@@ -279,8 +112,9 @@ function getPoiIconSvg(type) {
   return shapes[type] || shapes.pin
 }
 
+const VALID_POI_TYPES = ['pin', 'flag', 'waypoint']
 function getPoiIcon(L, poi) {
-  const type = poi.icon_type === 'pin' || poi.icon_type === 'flag' || poi.icon_type === 'waypoint' ? poi.icon_type : 'pin'
+  const type = VALID_POI_TYPES.includes(poi.icon_type) ? poi.icon_type : 'pin'
   const html = getPoiIconSvg(type)
   return L.divIcon({
     className: 'poi-div-icon',
@@ -290,7 +124,7 @@ function getPoiIcon(L, poi) {
   })
 }
 
-const LIVE_ICON_COLOR = '#22c9c9'
+const LIVE_ICON_COLOR = '#22c9c9' /* kestrel-accent – JS string for Leaflet SVG */
 function getLiveSessionIcon(L) {
   const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${LIVE_ICON_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="2" fill="${LIVE_ICON_COLOR}"/></svg>`
   return L.divIcon({
@@ -439,7 +273,7 @@ function updateLiveMarkers() {
   })
 
   const next = sessions.reduce((acc, session) => {
-    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span style="color:#22c9c9">● Live</span>' : ''}</div>`
+    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span class="text-kestrel-accent">● Live</span>' : ''}</div>`
     const existing = prev[session.id]
     if (existing) {
       existing.setLatLng([session.lat, session.lng])
@@ -473,7 +307,6 @@ function openAddPoiModal(latlng) {
   editPoi.value = null
   deletePoi.value = null
   poiForm.value = { label: '', iconType: 'pin' }
-  iconDropdownOpen.value = false
   showPoiModal.value = true
 }
 
@@ -484,7 +317,6 @@ function openEditPoiModal(poi) {
   addPoiLatlng.value = null
   deletePoi.value = null
   poiForm.value = { label: (poi.label ?? '').trim(), iconType: poi.icon_type || 'pin' }
-  iconDropdownOpen.value = false
   showPoiModal.value = true
 }
 
@@ -500,52 +332,38 @@ function openDeletePoiModal(poi) {
 function closePoiModal() {
   showPoiModal.value = false
   poiModalMode.value = 'add'
-  iconDropdownOpen.value = false
   addPoiLatlng.value = null
   editPoi.value = null
   deletePoi.value = null
 }
 
-function onPoiModalDocumentClick(e) {
-  if (!showPoiModal.value) return
-  if (iconDropdownOpen.value && iconDropdownRef.value && !iconDropdownRef.value.contains(e.target)) {
-    iconDropdownOpen.value = false
+async function doPoiFetch(fn) {
+  try {
+    await fn()
+    emit('refreshPois')
+    closePoiModal()
   }
+  catch { /* ignore */ }
 }
 
-async function submitPoiModal() {
+async function onPoiSubmit(payload) {
+  const { label, iconType } = payload
+  const body = { label: (label ?? '').trim(), iconType: iconType || 'pin' }
   if (poiModalMode.value === 'add') {
     const latlng = addPoiLatlng.value
     if (!latlng) return
-    const { label, iconType } = poiForm.value
-    try {
-      await $fetch('/api/pois', { method: 'POST', body: { lat: latlng.lat, lng: latlng.lng, label: (label ?? '').trim(), iconType: iconType || 'pin' } })
-      emit('refreshPois')
-      closePoiModal()
-    }
-    catch { /* ignore */ }
+    await doPoiFetch(() => $fetch('/api/pois', { method: 'POST', body: { ...body, lat: latlng.lat, lng: latlng.lng } }))
     return
   }
   if (poiModalMode.value === 'edit' && editPoi.value) {
-    const { label, iconType } = poiForm.value
-    try {
-      await $fetch(`/api/pois/${editPoi.value.id}`, { method: 'PATCH', body: { label: (label ?? '').trim(), iconType: iconType || 'pin' } })
-      emit('refreshPois')
-      closePoiModal()
-    }
-    catch { /* ignore */ }
+    await doPoiFetch(() => $fetch(`/api/pois/${editPoi.value.id}`, { method: 'PATCH', body }))
   }
 }
 
 async function confirmDeletePoi() {
   const poi = deletePoi.value
   if (!poi?.id) return
-  try {
-    await $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' })
-    emit('refreshPois')
-    closePoiModal()
-  }
-  catch { /* ignore */ }
+  await doPoiFetch(() => $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' }))
 }
 
 function destroyMap() {
@@ -604,7 +422,6 @@ onMounted(async () => {
   leafletRef.value = { L, offlineApi: offline }
   initMapWithLocation()
   document.addEventListener('click', onDocumentClick)
-  document.addEventListener('click', onPoiModalDocumentClick)
 })
 
 function onDocumentClick(e) {
@@ -613,7 +430,6 @@ function onDocumentClick(e) {
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocumentClick)
-  document.removeEventListener('click', onPoiModalDocumentClick)
   destroyMap()
 })
 
@@ -621,158 +437,3 @@ watch(() => props.devices, () => updateMarkers(), { deep: true })
 watch([() => props.pois, () => props.canEditPois], () => updatePoiMarkers(), { deep: true })
 watch(() => props.liveSessions, () => updateLiveMarkers(), { deep: true })
 </script>
-
-<style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-.modal-enter-active .relative,
-.modal-leave-active .relative {
-  transition: transform 0.2s ease;
-}
-.modal-enter-from .relative,
-.modal-leave-to .relative {
-  transform: scale(0.96);
-}
-
-/* Unrendered/loading tiles show black instead of white when panning */
-.kestrel-map-container {
-  background: #000 !important;
-}
-:deep(.leaflet-tile-pane),
-:deep(.leaflet-map-pane),
-:deep(.leaflet-tile-container) {
-  background: #000 !important;
-}
-:deep(img.leaflet-tile) {
-  background: #000 !important;
-  /* Override Leaflet’s plus-lighter so unloaded/empty tiles don’t flash white */
-  mix-blend-mode: normal;
-}
-/* Leaflet injects divIcon HTML into the map; :deep() so these styles apply to that content */
-:deep(.poi-div-icon) {
-  background: none;
-  border: none;
-}
-:deep(.poi-icon-svg) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-/* Dark-themed tooltip for POI labels (Leaflet creates these in the map container) */
-:deep(.kestrel-poi-tooltip) {
-  background: #1e293b;
-  border: 1px solid rgba(34, 201, 201, 0.35);
-  border-radius: 6px;
-  color: #e2e8f0;
-  font-size: 12px;
-  font-family: inherit;
-  padding: 6px 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-:deep(.kestrel-poi-tooltip::before),
-:deep(.kestrel-poi-tooltip::after) {
-  border-top-color: #1e293b;
-  border-bottom-color: #1e293b;
-  border-left-color: #1e293b;
-  border-right-color: #1e293b;
-}
-
-/* Live session popup (content injected by Leaflet) */
-:deep(.kestrel-live-popup-wrap .leaflet-popup-content) {
-  margin: 8px 12px;
-  min-width: 200px;
-}
-:deep(.kestrel-live-popup) {
-  color: #e2e8f0;
-  font-size: 12px;
-}
-:deep(.kestrel-live-popup img) {
-  display: block;
-  max-height: 160px;
-  width: auto;
-  border-radius: 4px;
-  background: #0f172a;
-}
-:deep(.live-session-icon) {
-  animation: live-pulse 1.5s ease-in-out infinite;
-}
-@keyframes live-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-/* Map controls – dark theme with cyan glow (zoom, locate, save/clear tiles) */
-:deep(.leaflet-control-zoom),
-:deep(.leaflet-control-locate),
-:deep(.savetiles.leaflet-bar) {
-  border: 1px solid rgba(34, 201, 201, 0.35) !important;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 0 0 12px -2px rgba(34, 201, 201, 0.15);
-  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
-}
-:deep(.leaflet-control-zoom a),
-:deep(.leaflet-control-locate),
-:deep(.savetiles.leaflet-bar a) {
-  width: 32px !important;
-  height: 32px !important;
-  line-height: 32px !important;
-  background: #0d1424 !important;
-  color: #b8c9e0 !important;
-  border: none !important;
-  border-radius: 0 !important;
-  font-size: 18px !important;
-  font-weight: 600;
-  text-decoration: none !important;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s, text-shadow 0.15s;
-}
-:deep(.leaflet-control-zoom a + a) {
-  border-top: 1px solid rgba(34, 201, 201, 0.2) !important;
-}
-:deep(.leaflet-control-zoom a:hover),
-:deep(.leaflet-control-locate:hover),
-:deep(.savetiles.leaflet-bar a:hover) {
-  background: #111a2e !important;
-  color: #22c9c9 !important;
-  box-shadow: 0 0 16px -2px rgba(34, 201, 201, 0.25);
-  text-shadow: 0 0 8px rgba(34, 201, 201, 0.35);
-}
-:deep(.leaflet-control-locate) {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  cursor: pointer;
-}
-:deep(.leaflet-control-locate svg) {
-  color: currentColor;
-}
-/* Save/Clear tiles – text buttons */
-:deep(.savetiles.leaflet-bar) {
-  display: flex;
-  flex-direction: column;
-}
-:deep(.savetiles.leaflet-bar a) {
-  width: auto !important;
-  min-width: 5.5em;
-  height: auto !important;
-  line-height: 1.25 !important;
-  padding: 6px 10px !important;
-  white-space: nowrap;
-  text-align: center;
-  font-size: 11px !important;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-}
-:deep(.savetiles.leaflet-bar a + a) {
-  border-top: 1px solid rgba(34, 201, 201, 0.2) !important;
-}
-</style>