webapp/app/components/layout/ListMapLayout.vue

<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>