From 3211c5a88143ed73730b4921d371d69c68a3f6b7 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 26 Jan 2026 14:52:19 +0700
Subject: [PATCH] Rename drawer to panel, use selectMode for visibility

---
 app/components/page/CatalogPage.vue | 34 +++++++++++++++++++++--------
 app/pages/catalog/index.vue         | 14 +++++-------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 04b11f6..4ea2bd1 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -39,10 +39,10 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
-    <!-- List button (LEFT, opens drawer) -->
+    <!-- List button (LEFT, opens panel) -->
     <button
       class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 text-white text-sm hover:bg-black/40 transition-colors"
-      @click="openDrawer"
+      @click="openPanel"
     >
       <Icon name="lucide:menu" size="16" />
       <span>{{ $t('catalog.list') }}</span>
@@ -98,10 +98,10 @@
       </div>
     </div>
 
-    <!-- Left drawer (slides from left when isDrawerOpen is true) -->
+    <!-- Left panel (slides from left when isPanelOpen is true) -->
     <Transition name="slide-left">
       <div
-        v-if="isDrawerOpen"
+        v-if="isPanelOpen"
         class="absolute top-[116px] left-4 bottom-4 z-30 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
       >
         <div class="bg-black/50 backdrop-blur-md rounded-xl shadow-lg border border-white/10 h-full flex flex-col text-white">
@@ -117,7 +117,7 @@
         <!-- List button (mobile) -->
         <button
           class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-2 border border-white/10 text-white text-sm"
-          @click="openDrawer"
+          @click="openPanel"
         >
           <Icon name="lucide:menu" size="16" />
           <span>{{ $t('catalog.list') }}</span>
@@ -155,16 +155,16 @@
         </div>
       </div>
 
-      <!-- Mobile panel (collapsible) - only when drawer is open -->
+      <!-- Mobile panel (collapsible) - only when panel is open -->
       <Transition name="slide-up">
         <div
-          v-if="isDrawerOpen"
+          v-if="isPanelOpen"
           class="bg-black/50 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white h-[60vh]"
         >
           <!-- Drag handle / close -->
           <div
             class="flex justify-center py-2 cursor-pointer"
-            @click="closeDrawer"
+            @click="closePanel"
           >
             <div class="w-10 h-1 bg-white/30 rounded-full" />
           </div>
@@ -181,7 +181,23 @@
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
-const { mapViewMode, setMapViewMode, isDrawerOpen, openDrawer, closeDrawer } = useCatalogSearch()
+const { mapViewMode, setMapViewMode, selectMode, startSelect, cancelSelect } = useCatalogSearch()
+
+// Panel is open when selectMode is set
+const isPanelOpen = computed(() => selectMode.value !== null)
+
+// Open panel based on current mapViewMode
+const openPanel = () => {
+  const newSelectMode = mapViewMode.value === 'hubs' ? 'hub'
+    : mapViewMode.value === 'suppliers' ? 'supplier'
+    : 'product'
+  startSelect(newSelectMode)
+}
+
+// Close panel
+const closePanel = () => {
+  cancelSelect()
+}
 
 // Point color based on map view mode
 const VIEW_MODE_COLORS = {
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index db489ce..a18f7d9 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -28,7 +28,7 @@
         :loading-more="selectionLoadingMore"
         :has-more="selectionHasMore && !filterByBounds"
         @select="onSelectItem"
-        @close="onCloseDrawer"
+        @close="onClosePanel"
         @load-more="onLoadMore"
         @hover="onHoverItem"
       />
@@ -116,8 +116,7 @@ const {
   cancelSelect,
   openInfo,
   closeInfo,
-  setLabel,
-  closeDrawer
+  setLabel
 } = useCatalogSearch()
 
 // Info panel composable
@@ -378,18 +377,17 @@ const onMapSelect = async (item: any) => {
   setLabel(infoType, itemId, itemName)
 }
 
-// Handle selection from SelectionPanel - open Info and close drawer
+// Handle selection from SelectionPanel - open Info and close panel
 const onSelectItem = (type: string, item: any) => {
   if (item.uuid && item.name) {
     openInfo(type as 'hub' | 'supplier' | 'offer', item.uuid)
     setLabel(type, item.uuid, item.name)
-    closeDrawer()
   }
 }
 
-// Close drawer
-const onCloseDrawer = () => {
-  closeDrawer()
+// Close panel (cancel select mode)
+const onClosePanel = () => {
+  cancelSelect()
 }
 
 // Handle Info panel events