Rename drawer to panel, use selectMode for visibility

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