From 0efc4eddfd1c849dfc7c4cc86dded0e5f05507e0 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 26 Jan 2026 14:36:42 +0700
Subject: [PATCH] Simplify catalog UI - remove chips, add drawer for list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove product/hub chips from QuoteForm.vue (duplicate of toggle)
- Add drawer state to useCatalogSearch.ts (isDrawerOpen, selectDrawerItem, applyDrawerFilter)
- Convert SelectionPanel to drawer with header, scrollable content, and footer
- Add "Список" button to CatalogPage.vue to open drawer
- Add "Применить фильтр" button in drawer footer
- Add slide animations for drawer (left on desktop, up on mobile)
- Update translations: catalog.list, catalog.applyFilter
---
 app/components/catalog/QuoteForm.vue      |  58 -------
 app/components/catalog/SelectionPanel.vue | 183 ++++++++++++----------
 app/components/page/CatalogPage.vue       | 103 ++++++++----
 app/composables/useCatalogSearch.ts       |  51 ++++++
 app/pages/catalog/index.vue               |   2 -
 i18n/locales/ru/catalog.json              |   4 +-
 6 files changed, 233 insertions(+), 168 deletions(-)

diff --git a/app/components/catalog/QuoteForm.vue b/app/components/catalog/QuoteForm.vue
index 37c4222..283843e 100644
--- a/app/components/catalog/QuoteForm.vue
+++ b/app/components/catalog/QuoteForm.vue
@@ -2,64 +2,6 @@
   <div class="flex flex-col gap-4">
     <h3 class="font-semibold text-lg">{{ $t('catalog.quote.title') }}</h3>
 
-    <!-- Product chip -->
-    <div class="form-control">
-      <label class="label py-1">
-        <span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.product') }}</span>
-      </label>
-      <button
-        v-if="productLabel"
-        class="btn btn-outline btn-sm justify-start gap-2"
-        @click="emit('edit-filter', 'product')"
-      >
-        <Icon name="lucide:package" size="16" />
-        <span class="flex-1 text-left truncate">{{ productLabel }}</span>
-        <span
-          class="btn btn-ghost btn-xs btn-circle"
-          @click.stop="emit('remove-filter', 'product')"
-        >
-          <Icon name="lucide:x" size="14" />
-        </span>
-      </button>
-      <button
-        v-else
-        class="btn btn-ghost btn-sm justify-start gap-2 border border-dashed border-base-content/30"
-        @click="emit('edit-filter', 'product')"
-      >
-        <Icon name="lucide:plus" size="16" class="text-base-content/50" />
-        <span class="text-base-content/50">{{ $t('catalog.quote.selectProduct') }}</span>
-      </button>
-    </div>
-
-    <!-- Hub chip -->
-    <div class="form-control">
-      <label class="label py-1">
-        <span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.hub') }}</span>
-      </label>
-      <button
-        v-if="hubLabel"
-        class="btn btn-outline btn-sm justify-start gap-2"
-        @click="emit('edit-filter', 'hub')"
-      >
-        <Icon name="lucide:map-pin" size="16" />
-        <span class="flex-1 text-left truncate">{{ hubLabel }}</span>
-        <span
-          class="btn btn-ghost btn-xs btn-circle"
-          @click.stop="emit('remove-filter', 'hub')"
-        >
-          <Icon name="lucide:x" size="14" />
-        </span>
-      </button>
-      <button
-        v-else
-        class="btn btn-ghost btn-sm justify-start gap-2 border border-dashed border-base-content/30"
-        @click="emit('edit-filter', 'hub')"
-      >
-        <Icon name="lucide:plus" size="16" class="text-base-content/50" />
-        <span class="text-base-content/50">{{ $t('catalog.quote.selectHub') }}</span>
-      </button>
-    </div>
-
     <!-- Quantity input -->
     <div class="form-control">
       <label class="label py-1">
diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 8fe33b0..7f0cbc4 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -1,9 +1,10 @@
 <template>
-  <MapPanel>
-    <template #header>
-      <div class="flex items-center justify-between mb-2">
-        <h3 class="font-semibold text-base text-base-content">{{ title }}</h3>
-        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content" @click="emit('close')">
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="flex-shrink-0 p-4 border-b border-white/10">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-semibold text-base text-white">{{ title }}</h3>
+        <button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="closeDrawer">
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
@@ -11,83 +12,96 @@
         v-model="searchQuery"
         type="text"
         :placeholder="searchPlaceholder"
-        class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
       />
-    </template>
-
-    <!-- Content -->
-    <div v-if="loading" class="flex items-center justify-center py-8">
-      <span class="loading loading-spinner loading-md" />
     </div>
 
-    <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
-      <Icon name="lucide:search-x" size="32" class="mb-2" />
-      <p>{{ $t('catalog.empty.noResults') }}</p>
-    </div>
+    <!-- Content (scrollable) -->
+    <div class="flex-1 overflow-y-auto p-4">
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <span class="loading loading-spinner loading-md text-white" />
+      </div>
 
-    <div v-else class="flex flex-col gap-2">
-      <!-- Products -->
-      <template v-if="selectMode === 'product'">
+      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
+        <Icon name="lucide:search-x" size="32" class="mb-2" />
+        <p>{{ $t('catalog.empty.noResults') }}</p>
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <!-- Products -->
+        <template v-if="selectMode === 'product'">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.uuid ?? index"
+            @mouseenter="emit('hover', item.uuid ?? null)"
+            @mouseleave="emit('hover', null)"
+          >
+            <ProductCard
+              :product="item"
+              selectable
+              compact
+              :is-selected="drawerSelectedItem?.uuid === item.uuid"
+              @select="onDrawerSelect(item)"
+            />
+          </div>
+        </template>
+
+        <!-- Hubs -->
+        <template v-else-if="selectMode === 'hub'">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.uuid ?? index"
+            @mouseenter="emit('hover', item.uuid ?? null)"
+            @mouseleave="emit('hover', null)"
+          >
+            <HubCard
+              :hub="item"
+              selectable
+              :is-selected="drawerSelectedItem?.uuid === item.uuid"
+              @select="onDrawerSelect(item)"
+            />
+          </div>
+        </template>
+
+        <!-- Suppliers -->
+        <template v-else-if="selectMode === 'supplier'">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.uuid ?? index"
+            @mouseenter="emit('hover', item.uuid ?? null)"
+            @mouseleave="emit('hover', null)"
+          >
+            <SupplierCard
+              :supplier="item"
+              selectable
+              :is-selected="drawerSelectedItem?.uuid === item.uuid"
+              @select="onDrawerSelect(item)"
+            />
+          </div>
+        </template>
+
+        <!-- Infinite scroll sentinel -->
         <div
-          v-for="(item, index) in filteredItems"
-          :key="item.uuid ?? index"
-          @mouseenter="emit('hover', item.uuid ?? null)"
-          @mouseleave="emit('hover', null)"
+          v-if="hasMore && !searchQuery"
+          ref="loadMoreSentinel"
+          class="flex items-center justify-center py-4"
         >
-          <ProductCard
-            :product="item"
-            selectable
-            compact
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
+          <span v-if="loadingMore" class="loading loading-spinner loading-sm text-white/60" />
         </div>
-      </template>
-
-      <!-- Hubs -->
-      <template v-else-if="selectMode === 'hub'">
-        <div
-          v-for="(item, index) in filteredItems"
-          :key="item.uuid ?? index"
-          @mouseenter="emit('hover', item.uuid ?? null)"
-          @mouseleave="emit('hover', null)"
-        >
-          <HubCard
-            :hub="item"
-            selectable
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
-        </div>
-      </template>
-
-      <!-- Suppliers -->
-      <template v-else-if="selectMode === 'supplier'">
-        <div
-          v-for="(item, index) in filteredItems"
-          :key="item.uuid ?? index"
-          @mouseenter="emit('hover', item.uuid ?? null)"
-          @mouseleave="emit('hover', null)"
-        >
-          <SupplierCard
-            :supplier="item"
-            selectable
-            :is-selected="selectedId === item.uuid"
-            @select="onSelect(item)"
-          />
-        </div>
-      </template>
-
-      <!-- Infinite scroll sentinel -->
-      <div
-        v-if="hasMore && !searchQuery"
-        ref="loadMoreSentinel"
-        class="flex items-center justify-center py-4"
-      >
-        <span v-if="loadingMore" class="loading loading-spinner loading-sm text-white/60" />
       </div>
     </div>
-  </MapPanel>
+
+    <!-- Footer with Apply button -->
+    <div class="flex-shrink-0 p-4 border-t border-white/10">
+      <button
+        class="btn btn-primary w-full"
+        :disabled="!drawerSelectedItem"
+        @click="onApplyFilter"
+      >
+        {{ $t('catalog.applyFilter') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -104,21 +118,26 @@ const props = defineProps<{
   products?: Item[]
   hubs?: Item[]
   suppliers?: Item[]
-  selectedId?: string
   loading?: boolean
   loadingMore?: boolean
   hasMore?: boolean
 }>()
 
 const emit = defineEmits<{
-  'select': [type: string, item: Item]
-  'close': []
   'load-more': []
   'hover': [uuid: string | null]
 }>()
 
 const { t } = useI18n()
 
+// Get drawer functions from useCatalogSearch
+const {
+  drawerSelectedItem,
+  selectDrawerItem,
+  applyDrawerFilter,
+  closeDrawer
+} = useCatalogSearch()
+
 const searchQuery = ref('')
 const loadMoreSentinel = ref<HTMLElement | null>(null)
 
@@ -187,9 +206,15 @@ const filteredItems = computed(() => {
   )
 })
 
-const onSelect = (item: Item) => {
-  if (props.selectMode && item.uuid) {
-    emit('select', props.selectMode, item)
+// Select item in drawer (doesn't apply filter yet)
+const onDrawerSelect = (item: Item) => {
+  if (item.uuid && item.name) {
+    selectDrawerItem(item.uuid, item.name)
   }
 }
+
+// Apply filter and close drawer
+const onApplyFilter = () => {
+  applyDrawerFilter()
+}
 </script>
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 6eedabd..04b11f6 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -39,10 +39,18 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
-    <!-- Filter by bounds checkbox (LEFT, next to panel) -->
+    <!-- List button (LEFT, opens drawer) -->
+    <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"
+    >
+      <Icon name="lucide:menu" size="16" />
+      <span>{{ $t('catalog.list') }}</span>
+    </button>
+
+    <!-- Filter by bounds checkbox (LEFT, next to list button) -->
     <label
-      v-if="showPanel"
-      class="absolute top-[116px] left-[26rem] 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 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
+      class="absolute top-[116px] left-32 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 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
     >
       <input
         type="checkbox"
@@ -90,20 +98,32 @@
       </div>
     </div>
 
-    <!-- Left overlay panel (shown when showPanel is true, below header) -->
-    <div
-      v-if="showPanel"
-      class="absolute top-[116px] left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
-    >
-      <div class="bg-black/30 backdrop-blur-md rounded-xl shadow-lg border border-white/10 p-4 h-full overflow-y-auto text-white">
-        <slot name="panel" />
+    <!-- Left drawer (slides from left when isDrawerOpen is true) -->
+    <Transition name="slide-left">
+      <div
+        v-if="isDrawerOpen"
+        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">
+          <slot name="panel" />
+        </div>
       </div>
-    </div>
+    </Transition>
 
     <!-- Mobile bottom sheet -->
     <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
-      <!-- Mobile view toggle -->
-      <div class="flex justify-end px-4 mb-2">
+      <!-- Mobile controls: List button + view toggle -->
+      <div class="flex justify-between px-4 mb-2">
+        <!-- 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"
+        >
+          <Icon name="lucide:menu" size="16" />
+          <span>{{ $t('catalog.list') }}</span>
+        </button>
+
+        <!-- Mobile view toggle -->
         <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
           <button
             class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
@@ -135,24 +155,25 @@
         </div>
       </div>
 
-      <!-- Mobile panel (collapsible) - only when showPanel is true -->
-      <div
-        v-if="showPanel"
-        class="bg-black/30 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white"
-        :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
-      >
-        <!-- Drag handle -->
+      <!-- Mobile panel (collapsible) - only when drawer is open -->
+      <Transition name="slide-up">
         <div
-          class="flex justify-center py-2 cursor-pointer"
-          @click="mobilePanelExpanded = !mobilePanelExpanded"
+          v-if="isDrawerOpen"
+          class="bg-black/50 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white h-[60vh]"
         >
-          <div class="w-10 h-1 bg-white/30 rounded-full" />
-        </div>
+          <!-- Drag handle / close -->
+          <div
+            class="flex justify-center py-2 cursor-pointer"
+            @click="closeDrawer"
+          >
+            <div class="w-10 h-1 bg-white/30 rounded-full" />
+          </div>
 
-        <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
-          <slot name="panel" />
+          <div class="px-4 pb-4 overflow-y-auto h-[calc(60vh-2rem)]">
+            <slot name="panel" />
+          </div>
         </div>
-      </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -160,7 +181,7 @@
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
-const { mapViewMode, setMapViewMode } = useCatalogSearch()
+const { mapViewMode, setMapViewMode, isDrawerOpen, openDrawer, closeDrawer } = useCatalogSearch()
 
 // Point color based on map view mode
 const VIEW_MODE_COLORS = {
@@ -320,3 +341,29 @@ const flyTo = (lat: number, lng: number, zoom = 8) => {
 
 defineExpose({ flyTo, currentBounds })
 </script>
+
+<style scoped>
+/* Drawer slide animation (desktop - left) */
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+/* Drawer slide animation (mobile - up) */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>
diff --git a/app/composables/useCatalogSearch.ts b/app/composables/useCatalogSearch.ts
index 868c2d2..a8cc30f 100644
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -260,6 +260,47 @@ export function useCatalogSearch() {
     mapViewCookie.value = mode
   }
 
+  // Drawer state for list view
+  const isDrawerOpen = ref(false)
+  const drawerSelectedItem = ref<{ uuid: string; name: string } | null>(null)
+
+  const openDrawer = () => {
+    isDrawerOpen.value = true
+    drawerSelectedItem.value = null
+
+    // Set selectMode based on mapViewMode so SelectionPanel shows the right list
+    const newSelectMode: SelectMode = mapViewMode.value === 'hubs' ? 'hub'
+      : mapViewMode.value === 'suppliers' ? 'supplier'
+      : 'product'
+    startSelect(newSelectMode)
+  }
+
+  const closeDrawer = () => {
+    isDrawerOpen.value = false
+    drawerSelectedItem.value = null
+    cancelSelect() // Also exit selection mode
+  }
+
+  const selectDrawerItem = (uuid: string, name: string) => {
+    drawerSelectedItem.value = { uuid, name }
+  }
+
+  const applyDrawerFilter = () => {
+    if (!drawerSelectedItem.value) {
+      closeDrawer()
+      return
+    }
+
+    // Determine filter type based on mapViewMode
+    const type = mapViewMode.value === 'hubs' ? 'hub'
+      : mapViewMode.value === 'suppliers' ? 'supplier'
+      : 'product' // offers -> select product from offer
+
+    const { uuid, name } = drawerSelectedItem.value
+    selectItem(type, uuid, name)
+    closeDrawer()
+  }
+
   // Catalog mode: explore (map browsing) or quote (search for offers)
   const catalogMode = computed<CatalogMode>(() => {
     return route.query.mode === 'quote' ? 'quote' : 'explore'
@@ -292,6 +333,10 @@ export function useCatalogSearch() {
     searchQuery,
     mapViewMode,
 
+    // Drawer state
+    isDrawerOpen,
+    drawerSelectedItem,
+
     // Colors
     entityColors,
 
@@ -317,6 +362,12 @@ export function useCatalogSearch() {
     setMapViewMode,
     setCatalogMode,
 
+    // Drawer actions
+    openDrawer,
+    closeDrawer,
+    selectDrawerItem,
+    applyDrawerFilter,
+
     // Labels cache
     filterLabels
   }
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index e852588..844dd66 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -27,8 +27,6 @@
         :loading="selectionLoading"
         :loading-more="selectionLoadingMore"
         :has-more="selectionHasMore && !filterByBounds"
-        @select="onSelectItem"
-        @close="cancelSelect"
         @load-more="onLoadMore"
         @hover="onHoverItem"
       />
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index 4dc8b8f..de375a9 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -75,6 +75,8 @@
       "title": "Исследуйте рынок",
       "subtitle": "Переключайтесь между офферами, хабами и поставщиками"
     },
-    "offers": "предложение | предложения | предложений"
+    "offers": "предложение | предложения | предложений",
+    "list": "Список",
+    "applyFilter": "Применить фильтр"
   }
 }