Refactor frontend components for improved functionality and accessibility

- Consolidated global error handling in app.vue to redirect users to the login page on API authentication failure.
- Enhanced MapView component by reintroducing event listeners for selected map and marker updates, improving interactivity.
- Updated PasswordInput and various modal components to ensure proper input handling and accessibility compliance.
- Refactored MapControls and MapControlsContent to streamline prop management and enhance user experience.
- Improved error handling in local storage operations within useMapBookmarks and useRecentLocations composables.
- Standardized input elements across forms for consistency in user interaction.

frontend-nuxt/lib/Character.ts

@@ -2,7 +2,7 @@ import type L from 'leaflet'
 import { getColorForCharacterId, type CharacterColors } from '~/lib/characterColors'
 import { HnHMaxZoom } from '~/lib/LeafletCustomTypes'
 
-export type LeafletApi = typeof import('leaflet')
+export type LeafletApi = L
 
 function buildCharacterIconUrl(colors: CharacterColors): string {
   const svg =

frontend-nuxt/lib/Marker.ts

@@ -48,7 +48,7 @@ export interface MarkerIconOptions {
   fallbackIconUrl?: string
 }
 
-export type LeafletApi = typeof import('leaflet')
+export type LeafletApi = L
 
 export function createMarker(
   data: MarkerData,

frontend-nuxt/lib/UniqueList.ts

@@ -39,7 +39,10 @@ export function uniqueListUpdate<T extends Identifiable>(
   if (addCallback) {
     elementsToAdd.forEach((it) => addCallback(it))
   }
-  elementsToRemove.forEach((it) => delete list.elements[String(it.id)])
+  const toRemove = new Set(elementsToRemove.map((it) => String(it.id)))
+  list.elements = Object.fromEntries(
+    Object.entries(list.elements).filter(([id]) => !toRemove.has(id))
+  ) as Record<string, T>
   elementsToAdd.forEach((it) => (list.elements[String(it.id)] = it))
 }
 

frontend-nuxt/lib/__tests__/Character.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
+import type L from 'leaflet'
+import type { Map, LayerGroup } from 'leaflet'
+import { createCharacter, type CharacterData, type CharacterMapViewRef } from '../Character'
+
 vi.mock('leaflet', () => {
   const markerMock = {
     on: vi.fn().mockReturnThis(),
@@ -21,9 +25,6 @@ vi.mock('~/lib/LeafletCustomTypes', () => ({
   HnHMaxZoom: 6,
 }))
 
-import type L from 'leaflet'
-import { createCharacter, type CharacterData, type CharacterMapViewRef } from '../Character'
-
 function getL(): L {
   return require('leaflet').default
 }
@@ -44,12 +45,12 @@ function makeMapViewRef(mapid = 1): CharacterMapViewRef {
     map: {
       unproject: vi.fn(() => ({ lat: 0, lng: 0 })),
       removeLayer: vi.fn(),
-    } as unknown as import('leaflet').Map,
+    } as unknown as Map,
     mapid,
     markerLayer: {
       removeLayer: vi.fn(),
       addLayer: vi.fn(),
-    } as unknown as import('leaflet').LayerGroup,
+    } as unknown as LayerGroup,
   }
 }
 

frontend-nuxt/lib/__tests__/Marker.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
+import L from 'leaflet'
+import type { Map, LayerGroup } from 'leaflet'
+import { createMarker, type MarkerData, type MapViewRef } from '../Marker'
+
 vi.mock('leaflet', () => {
   const markerMock = {
     on: vi.fn().mockReturnThis(),
@@ -14,24 +18,19 @@ vi.mock('leaflet', () => {
   return {
     default: {
       marker: vi.fn(() => markerMock),
-      Icon: class {},
+      Icon: vi.fn(),
     },
     marker: vi.fn(() => markerMock),
-    Icon: class {},
+    Icon: vi.fn(),
   }
 })
 
 vi.mock('~/lib/LeafletCustomTypes', () => ({
   HnHMaxZoom: 6,
   TileSize: 100,
-  ImageIcon: class {
-    constructor(_opts: Record<string, unknown>) {}
-  },
+  ImageIcon: vi.fn(),
 }))
 
-import L from 'leaflet'
-import { createMarker, type MarkerData, type MapViewRef } from '../Marker'
-
 function makeMarkerData(overrides: Partial<MarkerData> = {}): MarkerData {
   return {
     id: 1,
@@ -48,12 +47,12 @@ function makeMapViewRef(): MapViewRef {
   return {
     map: {
       unproject: vi.fn(() => ({ lat: 0, lng: 0 })),
-    } as unknown as import('leaflet').Map,
+    } as unknown as Map,
     mapid: 1,
     markerLayer: {
       removeLayer: vi.fn(),
       addLayer: vi.fn(),
-    } as unknown as import('leaflet').LayerGroup,
+    } as unknown as LayerGroup,
   }
 }