From a8612c20b5dcab750eaf57b2876c26d08faee2c4 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 11:49:21 +0700
Subject: [PATCH] Fix header: remove selectMode indicator, align logo and icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove 'Товар:' badge during selection - tags appear only after selection
- Align logo and icons vertically with input (h-12)
- Simplify search input styling
---
 app/components/navigation/MainNavigation.vue | 131 ++++++++-----------
 1 file changed, 56 insertions(+), 75 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 987aa01..3193bda 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,93 +1,74 @@
 <template>
   <header class="bg-base-100 shadow-md">
-    <!-- Single row: Logo + Search Block + Icons -->
-    <div class="flex items-center px-4 lg:px-6 py-3 gap-4">
-      <!-- Left: Logo -->
-      <div class="flex items-center flex-shrink-0">
+    <!-- Single row: Logo + Search + Icons -->
+    <div class="flex items-start px-4 lg:px-6 py-3 gap-4">
+      <!-- Left: Logo (centered with input) -->
+      <div class="flex items-center flex-shrink-0 h-12">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl">Optovia</span>
         </NuxtLink>
       </div>
 
-      <!-- Center: Search block (input + chips together) -->
-      <div class="flex-1 flex justify-center px-4 max-w-3xl mx-auto">
+      <!-- Center: Search input + chips -->
+      <div class="flex-1 flex flex-col items-center px-4 max-w-2xl mx-auto gap-2">
+        <!-- Big rounded input -->
         <div
-          class="w-full bg-base-200/50 rounded-2xl p-4 border border-base-300 shadow-sm hover:shadow-md transition-all"
+          class="flex items-center gap-3 w-full px-5 py-3 border border-base-300 rounded-full bg-base-100 shadow-md hover:shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+          @click="focusInput"
         >
-          <!-- Input row with tokens -->
-          <div
-            class="flex items-center gap-3 px-4 py-3 bg-base-100 rounded-xl border border-base-300 cursor-text"
-            @click="focusInput"
-          >
-            <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
+          <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>
-                <button
-                  class="hover:text-error"
-                  @click.stop="$emit('remove-token', token.type)"
-                >
-                  <Icon name="lucide:x" size="14" />
-                </button>
-              </div>
-
-              <!-- Active selection mode indicator -->
-              <div
-                v-if="selectMode"
-                class="badge badge-lg badge-outline badge-primary gap-1.5 flex-shrink-0"
-              >
-                <Icon :name="selectModeIcon" size="14" />
-                {{ selectModeLabel }}:
-                <button
-                  class="hover:text-error"
-                  @click.stop="$emit('cancel-select')"
-                >
-                  <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 row (inside same block) -->
-          <div
-            v-if="availableChips.length > 0"
-            class="flex items-center justify-center gap-2 mt-3"
-          >
-            <button
-              v-for="chip in availableChips"
-              :key="chip.type"
-              class="btn btn-sm btn-ghost gap-1.5"
-              @click="$emit('start-select', chip.type)"
+          <!-- 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="lucide:plus" size="14" />
-              {{ chip.label }}
-            </button>
+              <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 input -->
+        <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)"
+          >
+            <Icon name="lucide:plus" size="12" />
+            {{ chip.label }}
+          </button>
+        </div>
       </div>
 
-      <!-- Right: AI + Globe + Team + User -->
-      <div class="flex items-center gap-1 flex-shrink-0">
+      <!-- Right: AI + Globe + Team + User (centered with input) -->
+      <div class="flex items-center gap-1 flex-shrink-0 h-12">
         <!-- AI Assistant button -->
         <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
           <Icon name="lucide:bot" size="18" />