From e6290258993d625eee9946a736a204e21c63de3e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Thu, 8 Jan 2026 10:00:59 +0700
Subject: [PATCH] Fix UI issues: 3 columns, SubNav label, back button, sticky
 map, hover flyTo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Homepage roles section now shows 3 columns on medium screens
- SubNavigation catalog offers label changed to "Предложения"
- Removed back button from catalog/offers page
- ListMapLayout: sticky map with full height
- ListMapLayout: hover on card flies to location on map
---
 app/components/layout/ListMapLayout.vue     | 14 +++++++++++---
 app/components/navigation/SubNavigation.vue |  2 +-
 app/pages/catalog/offers/index.vue          |  8 --------
 app/pages/clientarea/addresses/index.vue    |  4 ++++
 app/pages/clientarea/orders/index.vue       |  4 ++++
 app/pages/index.vue                         |  2 +-
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/components/layout/ListMapLayout.vue b/app/components/layout/ListMapLayout.vue
index 85af462..d323cf7 100644
--- a/app/components/layout/ListMapLayout.vue
+++ b/app/components/layout/ListMapLayout.vue
@@ -1,14 +1,14 @@
 <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">
+    <div class="hidden lg:flex flex-1 gap-4 min-h-0 overflow-hidden">
       <!-- Left side: List (scrollable) -->
       <div class="w-2/5 overflow-y-auto pr-2">
         <slot name="list" />
       </div>
 
-      <!-- Right side: Map (sticky) -->
-      <div class="w-3/5 rounded-lg overflow-hidden">
+      <!-- Right side: Map (sticky, full height from SubNav to bottom) -->
+      <div class="w-3/5 h-full rounded-lg overflow-hidden sticky top-0 self-start">
         <ClientOnly>
           <CatalogMap
             ref="mapRef"
@@ -75,6 +75,7 @@ interface MapItem {
 const props = withDefaults(defineProps<{
   items: MapItem[]
   selectedItemId?: string
+  hoveredItemId?: string
   mapId: string
   pointColor?: string
 }>(), {
@@ -136,6 +137,13 @@ watch(() => props.selectedItemId, (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>
diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index deec0b6..8a56b9d 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -25,7 +25,7 @@ const { t } = useI18n()
 
 const sectionItems = computed(() => ({
   catalog: [
-    { label: t('cabinetNav.offers'), path: '/catalog/offers' },
+    { label: 'Предложения', path: '/catalog/offers' },
     { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
     { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
   ],
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 198ba19..57163c7 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -36,14 +36,6 @@
 
     <!-- Offers for selected product -->
     <template v-else>
-      <!-- Back button -->
-      <div class="py-2 px-4 lg:px-0">
-        <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm gap-2">
-          <Icon name="lucide:arrow-left" size="16" />
-          {{ t('common.back') }}
-        </NuxtLink>
-      </div>
-
       <CatalogPage
         :items="items"
         :loading="isLoading"
diff --git a/app/pages/clientarea/addresses/index.vue b/app/pages/clientarea/addresses/index.vue
index 24399a2..9759644 100644
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -15,6 +15,7 @@
       v-else-if="items.length"
       :items="itemsForMap"
       :selected-item-id="selectedAddressId"
+      :hovered-item-id="hoveredAddressId"
       map-id="addresses-map"
       point-color="#10b981"
       @select-item="onSelectAddress"
@@ -42,6 +43,8 @@
                 interactive
                 :class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
                 @click.prevent="onSelectAddress(addr.uuid)"
+                @mouseenter="hoveredAddressId = addr.uuid"
+                @mouseleave="hoveredAddressId = undefined"
               >
                 <div class="flex flex-col gap-1">
                   <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
@@ -92,6 +95,7 @@ const {
 } = useTeamAddresses()
 
 const selectedAddressId = ref<string>()
+const hoveredAddressId = ref<string>()
 
 // Map items for ListMapLayout
 const itemsForMap = computed(() => {
diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 1d43885..6cf9c7e 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -26,6 +26,7 @@
       v-else-if="items.length"
       :items="itemsForMap"
       :selected-item-id="selectedOrderId"
+      :hovered-item-id="hoveredOrderId"
       map-id="orders-map"
       point-color="#6366f1"
       @select-item="onSelectOrder"
@@ -42,6 +43,8 @@
               class="cursor-pointer"
               :class="{ 'ring-2 ring-primary': order.uuid === selectedOrderId }"
               @click="onSelectOrder(order.uuid)"
+              @mouseenter="hoveredOrderId = order.uuid"
+              @mouseleave="hoveredOrderId = undefined"
             >
               <Stack gap="4">
                 <Stack direction="row" justify="between" align="center">
@@ -132,6 +135,7 @@ const {
 const hasError = ref(false)
 const error = ref('')
 const selectedOrderId = ref<string>()
+const hoveredOrderId = ref<string>()
 
 // Map items for ListMapLayout (use source location coordinates)
 const itemsForMap = computed(() => {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9909ac7..1f0587f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -5,7 +5,7 @@
           <Heading :level="2">{{ $t('roles.title') }}</Heading>
           <Text align="center" tone="muted">{{ $t('about.description') }}</Text>
 
-          <Grid :cols="1" :lg="3" :gap="6">
+          <Grid :cols="1" :md="3" :gap="6">
             <Card padding="lg">
               <Stack gap="4" align="center">
                 <IconCircle tone="primary">🏭</IconCircle>