From c0f38a25cdc239ca83d53f06afc94fd065b13d55 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:52:06 +0700
Subject: [PATCH] Transform search bar in Quote mode to Airbnb-style segmented
 input

- Remove mode toggle [Explore/Quote] tabs from header
- In Quote mode: show segmented input (Product | Hub | Quantity) + Search button
- In Explore mode: keep regular pill input with chips
- Add productLabel, hubLabel, supplierLabel computed values to useCatalogSearch
- Pass Quote mode props to MainNavigation
---
 app/components/navigation/MainNavigation.vue | 167 +++++++++++--------
 app/composables/useCatalogSearch.ts          |   8 +
 app/layouts/topnav.vue                       |  23 ++-
 3 files changed, 124 insertions(+), 74 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 223e050..82201a1 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -9,84 +9,105 @@
         </NuxtLink>
       </div>
 
-      <!-- Center: Search input + chips -->
+      <!-- Center: Search input (transforms based on mode) -->
       <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
-        <!-- Big pill input -->
-        <div
-          class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
-          @click="focusInput"
-        >
-          <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
-
-          <!-- Tokens + input inline -->
-          <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
-            <!-- Active filter tokens -->
-            <div
-              v-for="token in activeTokens"
-              :key="token.type"
-              class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
-              :style="{ backgroundColor: getTokenColor(token.type) }"
-              @click.stop="$emit('edit-token', token.type)"
-            >
-              <Icon :name="token.icon" size="14" />
-              <span class="max-w-28 truncate">{{ token.label }}</span>
+        <!-- Quote mode: Segmented input like Airbnb -->
+        <template v-if="catalogMode === 'quote'">
+          <div class="flex items-center gap-3 w-full">
+            <div class="flex items-center flex-1 rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
+              <!-- Product segment -->
               <button
-                class="hover:text-error"
-                @click.stop="$emit('remove-token', token.type)"
+                class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
+                @click="$emit('edit-token', 'product')"
               >
-                <Icon name="lucide:x" size="14" />
+                <div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
+                <div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
+              </button>
+              <!-- Hub segment -->
+              <button
+                class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 transition-colors min-w-0"
+                @click="$emit('edit-token', 'hub')"
+              >
+                <div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
+                <div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
+              </button>
+              <!-- Quantity segment -->
+              <button
+                class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-r-full transition-colors min-w-0"
+                @click="$emit('edit-token', 'quantity')"
+              >
+                <div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
+                <div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
               </button>
             </div>
-
-            <!-- Search input -->
-            <input
-              ref="inputRef"
-              v-model="localSearchQuery"
-              type="text"
-              :placeholder="placeholder"
-              class="flex-1 min-w-32 bg-transparent outline-none text-lg"
-              @input="$emit('update:search-query', localSearchQuery)"
-            />
+            <!-- Search button -->
+            <button
+              class="btn btn-primary btn-circle shadow-lg"
+              :disabled="!canSearch"
+              @click="$emit('search')"
+            >
+              <Icon name="lucide:search" size="20" />
+            </button>
           </div>
-        </div>
+        </template>
 
-        <!-- Chips below -->
-        <div
-          v-if="availableChips.length > 0"
-          class="flex items-center justify-center gap-2"
-        >
-          <button
-            v-for="chip in availableChips"
-            :key="chip.type"
-            class="btn btn-xs btn-ghost gap-1"
-            @click="$emit('start-select', chip.type)"
+        <!-- Explore mode: Regular pill input + chips -->
+        <template v-else>
+          <!-- Big pill input -->
+          <div
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            @click="focusInput"
           >
-            <Icon name="lucide:plus" size="12" />
-            {{ chip.label }}
-          </button>
-        </div>
-      </div>
+            <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
 
-      <!-- Catalog mode toggle (only on catalog pages) -->
-      <div v-if="showCatalogModeToggle" class="flex-shrink-0 py-2.5">
-        <div class="tabs tabs-boxed tabs-sm bg-base-200">
-          <button
-            class="tab"
-            :class="{ 'tab-active': catalogMode === 'explore' }"
-            @click="$emit('set-catalog-mode', 'explore')"
+            <!-- Tokens + input inline -->
+            <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
+              <!-- Active filter tokens -->
+              <div
+                v-for="token in activeTokens"
+                :key="token.type"
+                class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
+                :style="{ backgroundColor: getTokenColor(token.type) }"
+                @click.stop="$emit('edit-token', token.type)"
+              >
+                <Icon :name="token.icon" size="14" />
+                <span class="max-w-28 truncate">{{ token.label }}</span>
+                <button
+                  class="hover:text-error"
+                  @click.stop="$emit('remove-token', token.type)"
+                >
+                  <Icon name="lucide:x" size="14" />
+                </button>
+              </div>
+
+              <!-- Search input -->
+              <input
+                ref="inputRef"
+                v-model="localSearchQuery"
+                type="text"
+                :placeholder="placeholder"
+                class="flex-1 min-w-32 bg-transparent outline-none text-lg"
+                @input="$emit('update:search-query', localSearchQuery)"
+              />
+            </div>
+          </div>
+
+          <!-- Chips below -->
+          <div
+            v-if="availableChips.length > 0"
+            class="flex items-center justify-center gap-2"
           >
-            <Icon name="lucide:compass" size="14" class="mr-1" />
-            {{ $t('catalog.modes.explore') }}
-          </button>
-          <button
-            class="tab"
-            :class="{ 'tab-active': catalogMode === 'quote' }"
-            @click="$emit('set-catalog-mode', 'quote')"
-          >
-            <Icon name="lucide:search" size="14" class="mr-1" />
-            {{ $t('catalog.modes.quote') }}
-          </button>
-        </div>
+            <button
+              v-for="chip in availableChips"
+              :key="chip.type"
+              class="btn btn-xs btn-ghost gap-1"
+              @click="$emit('start-select', chip.type)"
+            >
+              <Icon name="lucide:plus" size="12" />
+              {{ chip.label }}
+            </button>
+          </div>
+        </template>
       </div>
 
       <!-- Right: AI + Globe + Team + User -->
@@ -232,8 +253,12 @@ const props = defineProps<{
   selectMode?: SelectMode
   searchQuery?: string
   // Catalog mode props
-  showCatalogModeToggle?: boolean
   catalogMode?: CatalogMode
+  // Quote mode props
+  productLabel?: string
+  hubLabel?: string
+  quantity?: string
+  canSearch?: boolean
 }>()
 
 defineEmits([
@@ -247,8 +272,8 @@ defineEmits([
   'edit-token',
   'remove-token',
   'update:search-query',
-  // Catalog mode
-  'set-catalog-mode'
+  // Quote mode
+  'search'
 ])
 
 const localePath = useLocalePath()
diff --git a/app/composables/useCatalogSearch.ts b/app/composables/useCatalogSearch.ts
index 97dea50..81cf90c 100644
--- a/app/composables/useCatalogSearch.ts
+++ b/app/composables/useCatalogSearch.ts
@@ -243,6 +243,11 @@ export function useCatalogSearch() {
     return !!(productId.value && (hubId.value || supplierId.value))
   })
 
+  // Labels for Quote mode display
+  const productLabel = computed(() => getLabel('product', productId.value))
+  const hubLabel = computed(() => getLabel('hub', hubId.value))
+  const supplierLabel = computed(() => getLabel('supplier', supplierId.value))
+
   return {
     // State
     selectMode,
@@ -262,6 +267,9 @@ export function useCatalogSearch() {
     activeTokens,
     availableChips,
     canSearch,
+    productLabel,
+    hubLabel,
+    supplierLabel,
 
     // Actions
     startSelect,
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index e7a693d..7682eee 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -16,8 +16,11 @@
         :available-chips="availableChips"
         :select-mode="selectMode"
         :search-query="searchQuery"
-        :show-catalog-mode-toggle="isCatalogSection"
         :catalog-mode="catalogMode"
+        :product-label="productLabel"
+        :hub-label="hubLabel"
+        :quantity="quantity"
+        :can-search="canSearch"
         @toggle-theme="toggleTheme"
         @sign-out="onClickSignOut"
         @sign-in="signIn()"
@@ -27,7 +30,7 @@
         @edit-token="editFilter"
         @remove-token="removeFilter"
         @update:search-query="searchQuery = $event"
-        @set-catalog-mode="setCatalogMode"
+        @search="onSearch"
       />
 
       <!-- Sub Navigation (section-specific tabs) - only for non-catalog sections -->
@@ -61,7 +64,10 @@ const {
   removeFilter,
   editFilter,
   catalogMode,
-  setCatalogMode
+  productLabel,
+  hubLabel,
+  quantity,
+  canSearch
 } = useCatalogSearch()
 
 // Collapsible header for catalog pages
@@ -234,4 +240,15 @@ watch(theme, (value) => applyTheme(value))
 const toggleTheme = () => {
   theme.value = theme.value === 'night' ? 'cupcake' : 'night'
 }
+
+// Search handler for Quote mode - emits event that page can handle
+const localePath = useLocalePath()
+const router = useRouter()
+const onSearch = () => {
+  // Navigate to catalog page which will handle the search
+  if (!route.path.includes('/catalog')) {
+    router.push({ path: localePath('/catalog'), query: { ...route.query, mode: 'quote' } })
+  }
+  // The page component will react to canSearch becoming true and perform the search
+}
 </script>