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

@@ -9,8 +9,50 @@
         </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">
+        <!-- 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="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')"
+              >
+                <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 button -->
+            <button
+              class="btn btn-primary btn-circle shadow-lg"
+              :disabled="!canSearch"
+              @click="$emit('search')"
+            >
+              <Icon name="lucide:search" size="20" />
+            </button>
+          </div>
+        </template>
+
+        <!-- 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"
@@ -65,28 +107,7 @@
               {{ chip.label }}
             </button>
           </div>
-      </div>
-
-      <!-- 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')"
-          >
-            <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>
+        </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()

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,

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>