From 999658aee1509fff59cd0f81026cb92419e2116a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 11:36:20 +0700
Subject: [PATCH] UI: Glass effect everywhere, fix nav height, simplify quote
 form

- Fixed nav height (h-20), logo and user menu aligned to top
- Quote form: removed colored circles, simple labels, search button inside pill
- Panels closer to nav (top-4 instead of top-20)
- Glass effect on all overlays (bg-base-100/70 backdrop-blur-md)
- Selection panel sticky headers with glass effect
---
 app/components/catalog/SelectionPanel.vue    |  4 +-
 app/components/navigation/MainNavigation.vue | 95 ++++++++------------
 app/components/page/CatalogPage.vue          | 12 +--
 3 files changed, 47 insertions(+), 64 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 3dec17e..4d93f7e 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-3">
     <!-- Header (sticky at top) -->
-    <div class="flex items-center justify-between sticky top-0 bg-base-300/95 -mx-4 px-4 py-2 -mt-4 z-10">
+    <div class="flex items-center justify-between sticky top-0 bg-base-100/80 backdrop-blur-sm -mx-4 px-4 py-2 -mt-4 z-10">
       <h3 class="font-semibold text-lg">{{ title }}</h3>
       <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
         <Icon name="lucide:x" size="18" />
@@ -9,7 +9,7 @@
     </div>
 
     <!-- Search input (sticky below header) -->
-    <div class="sticky top-10 bg-base-300/95 -mx-4 px-4 pb-2 z-10">
+    <div class="sticky top-10 bg-base-100/80 backdrop-blur-sm -mx-4 px-4 pb-2 z-10">
       <input
         v-model="searchQuery"
         type="text"
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index b05a4bd..c37c0ea 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,16 +1,16 @@
 <template>
-  <header class="bg-base-100 shadow-md">
+  <header class="h-20 bg-base-100/80 backdrop-blur-md shadow-md">
     <!-- Single row: Logo + Search + Icons -->
-    <div class="flex items-start px-4 lg:px-6 py-3 gap-4">
-      <!-- Left: Logo -->
-      <div class="flex items-center flex-shrink-0 py-2.5">
+    <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
+      <!-- Left: Logo (top aligned) -->
+      <div class="flex items-start flex-shrink-0 pt-4">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl">Optovia</span>
         </NuxtLink>
       </div>
 
-      <!-- Mode toggle (between Logo and Search) -->
-      <div v-if="showModeToggle" class="flex items-center flex-shrink-0 py-2.5">
+      <!-- Mode toggle (between Logo and Search, top aligned) -->
+      <div v-if="showModeToggle" class="flex items-start flex-shrink-0 pt-3.5">
         <div class="join">
           <button
             class="btn btn-sm join-item"
@@ -29,59 +29,42 @@
         </div>
       </div>
 
-      <!-- Center: Search input (transforms based on mode) -->
-      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 min-h-[72px] justify-center">
-        <!-- Quote mode: Segmented input like Airbnb -->
+      <!-- Center: Search input (vertically centered) -->
+      <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
+        <!-- Quote mode: Simple segmented input with search inside -->
         <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="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="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="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 -->
+          <div class="flex items-center w-full rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
+            <!-- Product segment -->
             <button
-              class="btn btn-primary btn-circle shadow-lg"
+              class="flex-1 px-4 py-2 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 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 text-left hover:bg-base-200/50 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>
+            <!-- Search button inside -->
+            <button
+              class="btn btn-primary btn-circle m-1"
               :disabled="!canSearch"
               @click="$emit('search')"
             >
-              <Icon name="lucide:search" size="20" />
+              <Icon name="lucide:search" size="18" />
             </button>
           </div>
         </template>
@@ -155,8 +138,8 @@
         </template>
       </div>
 
-      <!-- Right: AI + Globe + Team + User -->
-      <div class="flex items-center gap-1 flex-shrink-0 py-2.5">
+      <!-- Right: AI + Globe + Team + User (top aligned) -->
+      <div class="flex items-start gap-1 flex-shrink-0 pt-3">
         <!-- AI Assistant button -->
         <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
           <Icon name="lucide:bot" size="18" />
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 71d03ef..9175186 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -29,8 +29,8 @@
     </div>
 
     <!-- View toggle (top RIGHT overlay) - works in both modes -->
-    <div class="absolute top-20 right-4 z-20 hidden lg:block">
-      <div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
+    <div class="absolute top-4 right-4 z-20 hidden lg:block">
+      <div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
         <button
           class="btn btn-sm join-item gap-2"
           :class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -67,9 +67,9 @@
     <!-- Left overlay panel (shown when showPanel is true) -->
     <div
       v-if="showPanel"
-      class="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
+      class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
     >
-      <div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-y-auto">
+      <div class="bg-base-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto">
         <slot name="panel" />
       </div>
     </div>
@@ -78,7 +78,7 @@
     <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
       <!-- Mobile view toggle -->
       <div class="flex justify-end px-4 mb-2">
-        <div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
+        <div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
           <button
             class="btn btn-xs join-item gap-1"
             :class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -112,7 +112,7 @@
       <!-- Mobile panel (collapsible) - only when showPanel is true -->
       <div
         v-if="showPanel"
-        class="bg-base-300/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
+        class="bg-base-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 transition-all duration-300"
         :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
       >
         <!-- Drag handle -->