Simplify catalog UI - remove chips, add drawer for list

- 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/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>