From 4d018323e7ef4aed5bccd06653c92f91182998dd Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:40:33 +0700
Subject: [PATCH] Fix catalog issues: quantity input, checkbox position, glass
 header

1. Quantity input in Quote mode: replaced button with inline number input
2. Checkbox position: moved to left side (next to panel) instead of right
3. MapPanel glass header: fixed sticky positioning by moving negative margins to children
---
 app/components/catalog/MapPanel.vue          | 10 +++----
 app/components/navigation/MainNavigation.vue | 29 ++++++++++++++-----
 app/components/page/CatalogPage.vue          | 30 ++++++++++----------
 app/composables/useCatalogSearch.ts          |  6 ++++
 app/layouts/topnav.vue                       |  2 ++
 5 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/app/components/catalog/MapPanel.vue b/app/components/catalog/MapPanel.vue
index f1d7949..83d3e08 100644
--- a/app/components/catalog/MapPanel.vue
+++ b/app/components/catalog/MapPanel.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col h-full -m-4">
-    <!-- Header: белое стекло -->
-    <div class="sticky top-0 z-10 p-4 rounded-t-xl bg-white/90 backdrop-blur-md border-b border-white/20">
+  <div class="flex flex-col h-full">
+    <!-- Header: белое стекло (negative margins to expand beyond parent padding) -->
+    <div class="sticky top-0 z-10 -mx-4 -mt-4 px-4 pt-4 pb-3 rounded-t-xl bg-white/90 backdrop-blur-md border-b border-white/20">
       <slot name="header" />
     </div>
 
-    <!-- Content: тёмный (наследует контейнер) -->
-    <div class="flex-1 px-4 pt-3 pb-4 overflow-y-auto">
+    <!-- Content: тёмный (negative margins to expand beyond parent padding) -->
+    <div class="flex-1 -mx-4 -mb-4 px-4 pt-3 pb-4 overflow-y-auto">
       <slot />
     </div>
   </div>
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 9f0fa23..e5b077e 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -55,14 +55,23 @@
               <div class="text-xs text-base-content/60">{{ $t('catalog.filters.hub') }}</div>
               <div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
             </button>
-            <!-- Quantity segment -->
-            <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
-              @click="$emit('edit-token', 'quantity')"
-            >
+            <!-- Quantity segment (inline input) -->
+            <div class="flex-1 px-4 py-2 min-w-0">
               <div class="text-xs text-base-content/60">{{ $t('catalog.filters.quantity') }}</div>
-              <div class="font-medium text-base-content">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
-            </button>
+              <div class="flex items-center gap-1">
+                <input
+                  v-model="localQuantity"
+                  type="number"
+                  min="0"
+                  step="0.1"
+                  placeholder="—"
+                  class="w-16 font-medium bg-transparent outline-none text-base-content [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  @blur="$emit('update-quantity', localQuantity)"
+                  @keyup.enter="$emit('update-quantity', localQuantity)"
+                />
+                <span v-if="localQuantity" class="text-base-content/60 text-sm">{{ $t('units.t') }}</span>
+              </div>
+            </div>
             <!-- Search button inside -->
             <button
               class="btn btn-primary btn-circle m-1"
@@ -328,6 +337,7 @@ defineEmits([
   'edit-token',
   'remove-token',
   'update:search-query',
+  'update-quantity',
   // Quote mode
   'search',
   'set-catalog-mode'
@@ -340,11 +350,16 @@ const { t } = useI18n()
 
 const inputRef = ref<HTMLInputElement>()
 const localSearchQuery = ref(props.searchQuery || '')
+const localQuantity = ref(props.quantity || '')
 
 watch(() => props.searchQuery, (val) => {
   localSearchQuery.value = val || ''
 })
 
+watch(() => props.quantity, (val) => {
+  localQuantity.value = val || ''
+})
+
 const focusInput = () => {
   inputRef.value?.focus()
 }
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index f161ded..bd841f9 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -38,22 +38,22 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
-    <!-- View toggle + filter checkbox (top RIGHT overlay, below header) -->
-    <div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
-      <!-- Filter by bounds checkbox (when panel is open) -->
-      <label
-        v-if="showPanel"
-        class="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"
-          :checked="filterByBounds"
-          class="checkbox checkbox-xs checkbox-primary"
-          @change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
-        />
-        <span>{{ $t('catalog.search.filterByMap') }}</span>
-      </label>
+    <!-- Filter by bounds checkbox (LEFT, next to panel) -->
+    <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"
+    >
+      <input
+        type="checkbox"
+        :checked="filterByBounds"
+        class="checkbox checkbox-xs checkbox-primary"
+        @change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
+      />
+      <span>{{ $t('catalog.search.filterByMap') }}</span>
+    </label>
 
+    <!-- View toggle (top RIGHT overlay, below header) -->
+    <div class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
       <!-- View mode toggle -->
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
         <button
diff --git a/app/composables/useCatalogSearch.ts b/app/composables/useCatalogSearch.ts
index 81cf90c..a2502c7 100644
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -205,6 +205,11 @@ export function useCatalogSearch() {
     updateQuery({ select: type as SelectMode })
   }
 
+  const setQuantity = (value: string) => {
+    const qty = value ? value : null
+    updateQuery({ qty })
+  }
+
   const clearAll = () => {
     if (isMainPage.value) {
       router.push({ path: localePath('/catalog'), query: {} })
@@ -277,6 +282,7 @@ export function useCatalogSearch() {
     selectItem,
     removeFilter,
     editFilter,
+    setQuantity,
     clearAll,
     setLabel,
     setMapViewMode,
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 160958b..52e35dd 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -33,6 +33,7 @@
         @edit-token="editFilter"
         @remove-token="removeFilter"
         @update:search-query="searchQuery = $event"
+        @update-quantity="setQuantity"
         @search="onSearch"
       />
 
@@ -66,6 +67,7 @@ const {
   cancelSelect,
   removeFilter,
   editFilter,
+  setQuantity,
   catalogMode,
   setCatalogMode,
   productLabel,