From c10c085b70d242ff5e05c306bfd73a56f92b800d Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Wed, 14 Jan 2026 21:48:09 +0700
Subject: [PATCH] feat: new catalog layout with all fixed layers

- Add catalog.vue layout with all layers position:fixed
- Layer 1: MainNavigation (fixed top-0, bg-base-200)
- Layer 2: SubNavigation (fixed top-16, bg-base-200)
- Layer 3: SearchBar (fixed, bg-base-100)
- Layer 4: Map (fixed, right side, to bottom)
- Update hubs page to use new layout with Teleport
- Collapsible header on scroll
---
 app/layouts/catalog.vue          | 278 +++++++++++++++++++++++++++++++
 app/pages/catalog/hubs/index.vue | 251 ++++++++++++++++++++--------
 2 files changed, 457 insertions(+), 72 deletions(-)
 create mode 100644 app/layouts/catalog.vue

diff --git a/app/layouts/catalog.vue b/app/layouts/catalog.vue
new file mode 100644
index 0000000..e964d1d
--- /dev/null
+++ b/app/layouts/catalog.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="min-h-screen bg-base-200">
+    <!-- Layer 1: Collapsed bar (when scrolled) -->
+    <div
+      v-if="isHeaderCollapsed"
+      class="fixed top-0 left-0 right-0 z-50 bg-base-200 border-b border-base-300 h-8 flex items-center px-4 lg:px-6"
+    >
+      <button
+        class="btn btn-ghost btn-xs btn-circle"
+        @click="expandHeader"
+      >
+        <Icon name="lucide:chevron-down" size="16" />
+      </button>
+    </div>
+
+    <!-- Layer 1: MainNavigation (fixed) -->
+    <div
+      v-show="!isHeaderCollapsed"
+      class="fixed top-0 left-0 right-0 z-50"
+    >
+      <MainNavigation
+        class="bg-base-200"
+        :session-checked="sessionChecked"
+        :logged-in="isLoggedIn"
+        :user-avatar-svg="userAvatarSvg"
+        :user-name="userName"
+        :user-initials="userInitials"
+        :theme="theme"
+        :user-data="userData"
+        :is-seller="isSeller"
+        @toggle-theme="toggleTheme"
+        @sign-out="onClickSignOut"
+        @sign-in="signIn()"
+        @switch-team="switchToTeam"
+      />
+    </div>
+
+    <!-- Layer 2: SubNavigation (fixed) -->
+    <div
+      v-show="!isHeaderCollapsed"
+      class="fixed top-16 left-0 right-0 z-40 bg-base-200 border-b border-base-300"
+    >
+      <div class="flex items-center gap-1 py-2 px-4 lg:px-6">
+        <!-- Collapse button -->
+        <button
+          class="btn btn-ghost btn-xs btn-circle mr-1 flex-shrink-0"
+          @click="collapseHeader"
+        >
+          <Icon name="lucide:chevron-up" size="16" />
+        </button>
+
+        <NuxtLink
+          v-for="item in subNavItems"
+          :key="item.path"
+          :to="localePath(item.path)"
+          class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-300"
+          :class="{ 'text-primary bg-primary/10': isSubNavActive(item.path) }"
+        >
+          {{ item.label }}
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Layer 3: SearchBar (fixed) - teleport target -->
+    <div
+      id="catalog-searchbar"
+      class="fixed left-0 right-0 z-30 bg-base-100 border-b border-base-300"
+      :class="isHeaderCollapsed ? 'top-8' : 'top-[6.75rem]'"
+    />
+
+    <!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
+    <div
+      id="catalog-map"
+      class="fixed right-0 bottom-0 w-3/5 z-20 hidden lg:block"
+      :class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
+    />
+
+    <!-- Content area (left side, with padding for fixed header) -->
+    <div
+      class="lg:w-2/5 min-h-screen"
+      :class="isHeaderCollapsed ? 'pt-[6.75rem]' : 'pt-[10.75rem]'"
+    >
+      <div class="px-4 lg:px-6 py-4">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Mobile: Full width content + bottom toggle for map -->
+    <div class="lg:hidden 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>
+
+    <!-- Mobile map view - teleport target -->
+    <div
+      v-if="mobileView === 'map'"
+      id="catalog-map-mobile"
+      class="lg:hidden fixed inset-0 z-20"
+      :class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const runtimeConfig = useRuntimeConfig()
+const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
+const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
+const route = useRoute()
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+// Collapsible header
+const { isCollapsed, expand, collapse } = useScrollCollapse(50)
+const isHeaderCollapsed = computed(() => isCollapsed.value)
+
+const expandHeader = () => expand()
+const collapseHeader = () => collapse()
+
+// Mobile view toggle
+const mobileView = ref<'list' | 'map'>('list')
+
+// Theme state
+const theme = useState<'default' | 'night'>('theme', () => 'default')
+
+// User data state (shared across layouts)
+const userData = useState<{
+  id?: string
+  firstName?: string
+  lastName?: string
+  avatarId?: string
+  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
+  activeTeamId?: string
+  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
+} | null>('me', () => null)
+
+const sessionChecked = ref(false)
+const userAvatarSvg = useState('user-avatar-svg', () => '')
+const lastAvatarSeed = useState('user-avatar-seed', () => '')
+
+const isSeller = computed(() => {
+  return userData.value?.activeTeam?.teamType === 'SELLER'
+})
+
+const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
+
+const userName = computed(() => {
+  return userData.value?.firstName || 'User'
+})
+
+const userInitials = computed(() => {
+  const first = userData.value?.firstName?.charAt(0) || ''
+  const last = userData.value?.lastName?.charAt(0) || ''
+  if (first || last) return (first + last).toUpperCase()
+  return '?'
+})
+
+// SubNavigation items for catalog section
+const subNavItems = computed(() => [
+  { label: t('cabinetNav.offers'), path: '/catalog/offers' },
+  { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
+  { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
+])
+
+const isSubNavActive = (path: string) => {
+  return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
+}
+
+// Provide collapsed state to children
+provide('headerCollapsed', isHeaderCollapsed)
+
+// Avatar generation
+const generateUserAvatar = async (seed: string) => {
+  if (!seed) return
+  try {
+    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
+    if (response.ok) {
+      userAvatarSvg.value = await response.text()
+      lastAvatarSeed.value = seed
+    }
+  } catch (error) {
+    console.error('Error generating avatar:', error)
+  }
+}
+
+const { setActiveTeam } = useActiveTeam()
+const { mutate } = useGraphQL()
+const locationStore = useLocationStore()
+
+const syncUserUi = async () => {
+  if (!userData.value) {
+    locationStore.clear()
+    return
+  }
+
+  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
+    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
+  }
+
+  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'
+
+  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
+    userAvatarSvg.value = ''
+    await generateUserAvatar(seed)
+  }
+
+  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
+}
+
+watch(userData, () => {
+  void syncUserUi()
+}, { immediate: true })
+
+// Check session
+await fetchSession().catch(() => {})
+sessionChecked.value = true
+
+const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
+  if (!team?.id) return
+
+  try {
+    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
+    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')
+
+    if (result.switchTeam?.user && userData.value) {
+      userData.value.activeTeam = team as typeof userData.value.activeTeam
+      userData.value.activeTeamId = team.id
+      if (team.logtoOrgId) {
+        setActiveTeam(team.id, team.logtoOrgId)
+      }
+    }
+  } catch (err) {
+    console.error('Failed to switch team:', err)
+  }
+}
+
+const onClickSignOut = () => {
+  signOut(siteUrl)
+}
+
+const applyTheme = (value: 'default' | 'night') => {
+  if (import.meta.client) {
+    if (value === 'default') {
+      document.documentElement.removeAttribute('data-theme')
+    } else {
+      document.documentElement.setAttribute('data-theme', value)
+    }
+    localStorage.setItem('theme', value)
+  }
+}
+
+onMounted(() => {
+  const stored = import.meta.client ? localStorage.getItem('theme') : null
+  if (stored === 'night' || stored === 'default') {
+    theme.value = stored
+  }
+  applyTheme(theme.value)
+})
+
+watch(theme, (value) => applyTheme(value))
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'night' ? 'default' : 'night'
+}
+</script>
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index c229673..3a29225 100644
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,85 +1,126 @@
 <template>
-  <CatalogPage
-    :items="items"
-    :loading="isLoading"
-    :total-count="total"
-    map-id="hubs-map"
-    point-color="#10b981"
-    use-server-clustering
-    :selected-id="selectedHubId"
-    v-model:hovered-id="hoveredHubId"
-    @select="onSelectHub"
-  >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="activeFilterBadges"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="onRemoveFilter"
-        @search="onSearch"
+  <div>
+    <!-- SearchBar teleported to layout -->
+    <Teleport to="#catalog-searchbar">
+      <div class="px-4 lg:px-6 py-2">
+        <CatalogSearchBar
+          v-model:search-query="searchQuery"
+          :active-filters="activeFilterBadges"
+          :displayed-count="displayItems.length"
+          :total-count="total"
+          @remove-filter="onRemoveFilter"
+          @search="onSearch"
+        >
+          <template #filters>
+            <div class="p-2 space-y-3">
+              <div>
+                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</div>
+                <ul class="menu menu-compact">
+                  <li v-for="filter in filters" :key="filter.id">
+                    <a
+                      :class="{ active: selectedFilter === filter.id }"
+                      @click="selectedFilter = filter.id"
+                    >
+                      {{ filter.label }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div class="divider my-0"></div>
+              <div>
+                <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
+                <ul class="menu menu-compact max-h-48 overflow-y-auto">
+                  <li v-for="filter in countryFilters" :key="filter.id">
+                    <a
+                      :class="{ active: selectedCountry === filter.id }"
+                      @click="selectedCountry = filter.id"
+                    >
+                      {{ filter.label }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
+        </CatalogSearchBar>
+      </div>
+    </Teleport>
+
+    <!-- Map teleported to layout -->
+    <Teleport to="#catalog-map">
+      <div class="h-full w-full relative">
+        <!-- Search with map checkbox -->
+        <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
+          <span class="text-sm">{{ t('catalogMap.searchWithMap') }}</span>
+        </label>
+        <ClientOnly>
+          <CatalogMap
+            ref="mapRef"
+            map-id="hubs-map"
+            :items="useServerClustering ? [] : itemsWithCoords"
+            :clustered-points="useServerClustering ? clusteredNodes : []"
+            :use-server-clustering="useServerClustering"
+            point-color="#10b981"
+            :hovered-item-id="hoveredHubId"
+            :hovered-item="hoveredItem"
+            @select-item="onMapSelect"
+            @bounds-change="onBoundsChange"
+          />
+        </ClientOnly>
+      </div>
+    </Teleport>
+
+    <!-- List content -->
+    <div v-if="isLoading" class="flex items-center justify-center py-8">
+    <Card padding="lg">
+      <Stack align="center" justify="center" gap="3">
+        <Spinner />
+        <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
+      </Stack>
+    </Card>
+  </div>
+
+  <template v-else>
+    <Stack gap="3">
+      <div
+        v-for="item in displayItems"
+        :key="item.uuid"
+        :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedHubId }"
+        @click="onSelectHub(item)"
+        @mouseenter="hoveredHubId = item.uuid"
+        @mouseleave="hoveredHubId = undefined"
       >
-        <template #filters>
-          <div class="p-2 space-y-3">
-            <div>
-              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.transport') }}</div>
-              <ul class="menu menu-compact">
-                <li v-for="filter in filters" :key="filter.id">
-                  <a
-                    :class="{ active: selectedFilter === filter.id }"
-                    @click="selectedFilter = filter.id"
-                  >
-                    {{ filter.label }}
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div class="divider my-0"></div>
-            <div>
-              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('catalogHubsSection.filters.country') }}</div>
-              <ul class="menu menu-compact max-h-48 overflow-y-auto">
-                <li v-for="filter in countryFilters" :key="filter.id">
-                  <a
-                    :class="{ active: selectedCountry === filter.id }"
-                    @click="selectedCountry = filter.id"
-                  >
-                    {{ filter.label }}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
+        <template v-for="country in getCountryForHub(item)" :key="country.name">
+          <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
         </template>
-      </CatalogSearchBar>
-    </template>
+        <HubCard :hub="item" />
+      </div>
+    </Stack>
 
-    <template #card="{ item }">
-      <template v-for="country in getCountryForHub(item)" :key="country.name">
-        <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
-      </template>
-      <HubCard :hub="item" />
-    </template>
+    <PaginationLoadMore
+      v-if="displayItems.length > 0"
+      :shown="displayItems.length"
+      :total="total"
+      :can-load-more="canLoadMore"
+      :loading="isLoadingMore"
+      hide-counter
+      @load-more="loadMore"
+      class="mt-4"
+    />
 
-    <template #pagination>
-      <PaginationLoadMore
-        :shown="items.length"
-        :total="total"
-        :can-load-more="canLoadMore"
-        :loading="isLoadingMore"
-        hide-counter
-        @load-more="loadMore"
-      />
-    </template>
-
-    <template #empty>
+    <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
       <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
-    </template>
-  </CatalogPage>
+    </Stack>
+  </template>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
 definePageMeta({
-  layout: 'topnav'
+  layout: 'catalog'
 })
 
 const { t } = useI18n()
@@ -106,6 +147,60 @@ const hoveredHubId = ref<string>()
 // Search bar
 const searchQuery = ref('')
 
+// Map ref
+const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+
+// Server-side clustering
+const useServerClustering = true
+const { clusteredNodes, fetchClusters } = useClusteredNodes()
+
+// Search with map checkbox
+const searchWithMap = ref(false)
+const currentBounds = ref<MapBounds | null>(null)
+
+const onBoundsChange = (bounds: MapBounds) => {
+  currentBounds.value = bounds
+  if (useServerClustering) {
+    fetchClusters(bounds)
+  }
+}
+
+// Filter items with valid coordinates for map
+const itemsWithCoords = computed(() =>
+  items.value.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
+  }))
+)
+
+// Filtered items when searchWithMap is enabled
+const displayItems = computed(() => {
+  if (!searchWithMap.value || !currentBounds.value) return items.value
+  return items.value.filter(item => {
+    if (item.latitude == null || item.longitude == null) return false
+    const { west, east, north, south } = currentBounds.value!
+    const lng = Number(item.longitude)
+    const lat = Number(item.latitude)
+    return lng >= west && lng <= east && lat >= south && lat <= north
+  })
+})
+
+// Hovered item with coordinates for map highlight
+const hoveredItem = computed(() => {
+  if (!hoveredHubId.value) return null
+  const item = items.value.find(i => i.uuid === hoveredHubId.value)
+  if (!item?.latitude || !item?.longitude) return null
+  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
+})
+
 // Active filter badges (non-default filters shown as badges)
 const activeFilterBadges = computed(() => {
   const badges: { id: string; label: string }[] = []
@@ -136,6 +231,18 @@ const onSearch = () => {
 
 const onSelectHub = (hub: any) => {
   selectedHubId.value = hub.uuid
+  // Fly to hub on map
+  if (hub.latitude && hub.longitude) {
+    mapRef.value?.flyTo(Number(hub.latitude), Number(hub.longitude), 8)
+  }
+}
+
+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  const hub = items.value.find(i => i.uuid === uuid)
+  if (hub) {
+    selectedHubId.value = uuid
+  }
 }
 
 // Helper to get country for hub