Unify CatalogPage: fixed map, hover support, delete ListMapLayout

app/components/layout/ListMapLayout.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Desktop: side-by-side layout -->
-    <div class="hidden lg:flex flex-1 gap-4 min-h-0">
-      <!-- Left side: List (scrollable) -->
-      <div class="w-2/5 overflow-y-auto pr-2">
-        <slot name="list" />
-      </div>
-
-      <!-- Right side: Map (fixed position, full height) -->
-      <div class="w-3/5 relative">
-        <div class="fixed top-28 right-6 w-[calc(60%-3rem)] h-[calc(100vh-8rem)] rounded-lg overflow-hidden">
-          <ClientOnly>
-            <CatalogMap
-              ref="mapRef"
-              :map-id="mapId"
-              :items="itemsWithCoords"
-              :point-color="pointColor"
-              @select-item="onMapSelectItem"
-            />
-          </ClientOnly>
-        </div>
-      </div>
-    </div>
-
-    <!-- Mobile: toggle between list and map -->
-    <div class="lg:hidden flex-1 flex flex-col min-h-0">
-      <!-- Content area -->
-      <div class="flex-1 overflow-y-auto" v-show="mobileView === 'list'">
-        <slot name="list" />
-      </div>
-      <div class="flex-1" v-show="mobileView === 'map'">
-        <ClientOnly>
-          <CatalogMap
-            ref="mobileMapRef"
-            :map-id="`${mapId}-mobile`"
-            :items="itemsWithCoords"
-            :point-color="pointColor"
-            @select-item="onMapSelectItem"
-          />
-        </ClientOnly>
-      </div>
-
-      <!-- Mobile toggle buttons -->
-      <div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
-        <div class="btn-group shadow-lg">
-          <button
-            class="btn btn-sm"
-            :class="{ 'btn-active': mobileView === 'list' }"
-            @click="mobileView = 'list'"
-          >
-            {{ $t('common.list') }}
-          </button>
-          <button
-            class="btn btn-sm"
-            :class="{ 'btn-active': mobileView === 'map' }"
-            @click="mobileView = 'map'"
-          >
-            {{ $t('common.map') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface MapItem {
-  uuid: string
-  latitude?: number | null
-  longitude?: number | null
-  name?: string
-  country?: string
-  [key: string]: any
-}
-
-const props = withDefaults(defineProps<{
-  items: MapItem[]
-  selectedItemId?: string
-  hoveredItemId?: string
-  mapId: string
-  pointColor?: string
-}>(), {
-  pointColor: '#3b82f6'
-})
-
-const emit = defineEmits<{
-  'select-item': [uuid: string]
-  'update:selectedItemId': [uuid: string]
-}>()
-
-// Filter items with valid coordinates
-const itemsWithCoords = computed(() =>
-  props.items.filter(item =>
-    item.latitude != null &&
-    item.longitude != null &&
-    !isNaN(Number(item.latitude)) &&
-    !isNaN(Number(item.longitude))
-  ).map(item => ({
-    uuid: item.uuid,
-    name: item.name || '',
-    latitude: Number(item.latitude),
-    longitude: Number(item.longitude),
-    country: item.country
-  }))
-)
-
-// Mobile view toggle
-const mobileView = ref<'list' | 'map'>('list')
-
-// Map refs
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
-// Handle map item selection
-const onMapSelectItem = (uuid: string) => {
-  emit('select-item', uuid)
-  emit('update:selectedItemId', uuid)
-}
-
-// Fly to a specific item
-const flyTo = (lat: number, lng: number, zoom = 8) => {
-  mapRef.value?.flyTo(lat, lng, zoom)
-  mobileMapRef.value?.flyTo(lat, lng, zoom)
-}
-
-// Fly to item by uuid
-const flyToItem = (uuid: string) => {
-  const item = itemsWithCoords.value.find(i => i.uuid === uuid)
-  if (item) {
-    flyTo(item.latitude, item.longitude, 8)
-  }
-}
-
-// Watch selectedItemId and fly to it
-watch(() => props.selectedItemId, (uuid) => {
-  if (uuid) {
-    flyToItem(uuid)
-  }
-})
-
-// Watch hoveredItemId and fly to it on hover
-watch(() => props.hoveredItemId, (uuid) => {
-  if (uuid) {
-    flyToItem(uuid)
-  }
-})
-
-// Expose methods for parent components
-defineExpose({ flyTo, flyToItem })
-</script>

app/components/page/CatalogPage.vue

@@ -19,6 +19,7 @@
           <!-- Left: List (scrollable) -->
           <div class="w-2/5 overflow-y-auto pr-2">
             <Stack gap="4">
+              <slot name="header" />
               <slot name="filters" />
 
               <Stack gap="3">
@@ -27,6 +28,8 @@
                   :key="item.uuid"
                   :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
                   @click="onItemClick(item)"
+                  @mouseenter="emit('update:hoveredId', item.uuid)"
+                  @mouseleave="emit('update:hoveredId', undefined)"
                 >
                   <slot name="card" :item="item" />
                 </div>
@@ -42,17 +45,19 @@
             </Stack>
           </div>
 
-          <!-- Right: Map -->
-          <div class="w-3/5 rounded-lg overflow-hidden">
-            <ClientOnly>
-              <CatalogMap
-                ref="mapRef"
-                :map-id="mapId"
-                :items="itemsWithCoords"
-                :point-color="pointColor"
-                @select-item="onMapSelect"
-              />
-            </ClientOnly>
+          <!-- Right: Map (fixed position) -->
+          <div class="w-3/5 relative">
+            <div class="fixed top-28 right-6 w-[calc(60%-3rem)] h-[calc(100vh-8rem)] rounded-lg overflow-hidden">
+              <ClientOnly>
+                <CatalogMap
+                  ref="mapRef"
+                  :map-id="mapId"
+                  :items="itemsWithCoords"
+                  :point-color="pointColor"
+                  @select-item="onMapSelect"
+                />
+              </ClientOnly>
+            </div>
           </div>
         </div>
 
@@ -60,6 +65,7 @@
         <div class="lg:hidden flex-1 flex flex-col min-h-0">
           <div class="flex-1 overflow-y-auto py-4" v-show="mobileView === 'list'">
             <Stack gap="4">
+              <slot name="header" />
               <slot name="filters" />
 
               <Stack gap="3">
@@ -68,6 +74,8 @@
                   :key="item.uuid"
                   :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
                   @click="onItemClick(item)"
+                  @mouseenter="emit('update:hoveredId', item.uuid)"
+                  @mouseleave="emit('update:hoveredId', undefined)"
                 >
                   <slot name="card" :item="item" />
                 </div>
@@ -120,6 +128,7 @@
       <!-- Without Map: Simple List -->
       <div v-else class="flex-1 overflow-y-auto py-4">
         <Stack gap="4">
+          <slot name="header" />
           <slot name="filters" />
 
           <Stack gap="3">
@@ -162,6 +171,7 @@ const props = withDefaults(defineProps<{
   mapId?: string
   pointColor?: string
   selectedId?: string
+  hoveredId?: string
 }>(), {
   loading: false,
   withMap: true,
@@ -172,6 +182,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   'select': [item: MapItem]
   'update:selectedId': [uuid: string]
+  'update:hoveredId': [uuid: string | undefined]
 }>()
 
 // Filter items with valid coordinates for map
@@ -229,6 +240,17 @@ watch(() => props.selectedId, (uuid) => {
   }
 })
 
+// Watch hoveredId and fly to it
+watch(() => props.hoveredId, (uuid) => {
+  if (uuid && props.withMap) {
+    const item = itemsWithCoords.value.find(i => i.uuid === uuid)
+    if (item) {
+      mapRef.value?.flyTo(item.latitude, item.longitude, 8)
+      mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
+    }
+  }
+})
+
 // Expose flyTo for external use
 const flyTo = (lat: number, lng: number, zoom = 8) => {
   mapRef.value?.flyTo(lat, lng, zoom)