From fc6ce31659b4795bf1b4c3fe695a21003595ac93 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:35:59 +0700
Subject: [PATCH] Add unified icon system to navigation

- Chips: colored circle with entity icon (product/hub/supplier)
- Active tokens: outline style with icon in circle
- Quote segments: labeled with colored circle icons
---
 app/components/navigation/MainNavigation.vue | 64 +++++++++++++++-----
 1 file changed, 49 insertions(+), 15 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index e118640..7a04da5 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -40,24 +40,39 @@
                 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>
+                <div class="flex items-center gap-1.5 text-xs text-base-content/60">
+                  <span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.product }">
+                    <Icon name="lucide:shopping-bag" size="10" class="text-white" />
+                  </span>
+                  {{ $t('catalog.quote.product') }}
+                </div>
+                <div class="font-medium truncate mt-0.5">{{ 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>
+                <div class="flex items-center gap-1.5 text-xs text-base-content/60">
+                  <span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.hub }">
+                    <Icon name="lucide:warehouse" size="10" class="text-white" />
+                  </span>
+                  {{ $t('catalog.quote.hub') }}
+                </div>
+                <div class="font-medium truncate mt-0.5">{{ 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>
+                <div class="flex items-center gap-1.5 text-xs text-base-content/60">
+                  <span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 bg-base-content/30">
+                    <Icon name="lucide:scale" size="10" class="text-white" />
+                  </span>
+                  {{ $t('catalog.quote.quantity') }}
+                </div>
+                <div class="font-medium mt-0.5">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
               </button>
             </div>
             <!-- Search button -->
@@ -82,18 +97,23 @@
 
             <!-- Tokens + input inline -->
             <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
-              <!-- Active filter tokens -->
+              <!-- Active filter tokens (outline style with icon in circle) -->
               <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) }"
+                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border-2 cursor-pointer hover:opacity-80 transition-all flex-shrink-0"
+                :style="{ borderColor: getTokenColor(token.type), color: 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>
+                <span
+                  class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
+                  :style="{ backgroundColor: getTokenColor(token.type) }"
+                >
+                  <Icon :name="getTokenIcon(token.type)" size="12" class="text-white" />
+                </span>
+                <span class="max-w-28 truncate font-medium text-sm">{{ token.label }}</span>
                 <button
-                  class="hover:text-error"
+                  class="hover:text-error ml-0.5"
                   @click.stop="$emit('remove-token', token.type)"
                 >
                   <Icon name="lucide:x" size="14" />
@@ -112,7 +132,7 @@
             </div>
           </div>
 
-          <!-- Chips below -->
+          <!-- Chips below (with colored circle icons) -->
           <div
             v-if="availableChips.length > 0"
             class="flex items-center justify-center gap-2"
@@ -120,10 +140,15 @@
             <button
               v-for="chip in availableChips"
               :key="chip.type"
-              class="btn btn-xs btn-ghost gap-1"
+              class="btn btn-xs btn-ghost gap-1.5 pr-3"
               @click="$emit('start-select', chip.type)"
             >
-              <Icon name="lucide:plus" size="12" />
+              <span
+                class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
+                :style="{ backgroundColor: getTokenColor(chip.type) }"
+              >
+                <Icon :name="getTokenIcon(chip.type)" size="12" class="text-white" />
+              </span>
               {{ chip.label }}
             </button>
           </div>
@@ -339,5 +364,14 @@ const selectModeIcon = computed(() => {
 const getTokenColor = (type: string) => {
   return entityColors[type as keyof typeof entityColors] || entityColors.product
 }
+
+const getTokenIcon = (type: string) => {
+  const icons: Record<string, string> = {
+    product: 'lucide:shopping-bag',
+    hub: 'lucide:warehouse',
+    supplier: 'lucide:factory'
+  }
+  return icons[type] || 'lucide:tag'
+}
 </script>