From eb31b8299b95a53bcaf593a6dbf4ef97fcc2db73 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:28:00 +0700
Subject: [PATCH] Refine glass UI capsules and hub card

---
 app/assets/css/tailwind.css                  |  19 ++
 app/components/catalog/HubCard.vue           |   8 +-
 app/components/navigation/MainNavigation.vue | 216 ++++++++++---------
 app/components/page/CatalogPage.vue          |  16 +-
 4 files changed, 143 insertions(+), 116 deletions(-)

diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
index 5bb8133..aa70775 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -36,6 +36,25 @@
   --noise: 0;
 }
 
+@layer components {
+  .glass-topfade {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(255, 255, 255, 0.18) 45%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .glass-soft {
+    @apply bg-white/10 border border-white/10 backdrop-blur-md;
+  }
+
+  .glass-bright {
+    @apply bg-white/30 border border-white/20 backdrop-blur-md;
+  }
+}
+
 @plugin "daisyui/theme" {
   name: "silk";
   default: false;
diff --git a/app/components/catalog/HubCard.vue b/app/components/catalog/HubCard.vue
index d6999f7..89c0a82 100644
--- a/app/components/catalog/HubCard.vue
+++ b/app/components/catalog/HubCard.vue
@@ -19,14 +19,14 @@
         <!-- Title + distance/compass -->
         <div class="flex items-start justify-between gap-2">
           <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
-          <div class="flex items-center gap-2 text-xs text-white/50 whitespace-nowrap">
-            <Text v-if="distanceLabel" size="xs" class="text-white/50">{{ distanceLabel }}</Text>
+          <div class="flex items-center gap-2 text-xs text-base-content/60 whitespace-nowrap">
+            <Text v-if="distanceLabel" size="xs" class="text-base-content/60">{{ distanceLabel }}</Text>
             <div v-if="bearing !== null" class="flex items-center gap-1">
-              <div class="w-6 h-6 rounded-full border border-white/10 bg-white/5 flex items-center justify-center">
+              <div class="w-6 h-6 rounded-full border border-base-content/10 bg-base-200/40 flex items-center justify-center">
                 <Icon
                   name="lucide:arrow-up"
                   size="12"
-                  class="text-white/50"
+                  class="text-base-content/60"
                   :style="{ transform: `rotate(${bearing}deg)` }"
                 />
               </div>
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index aec07e1..e1891c7 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -4,77 +4,81 @@
     :class="headerClasses"
     :style="{ height: `${height}px` }"
   >
-    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/45 via-white/20 to-transparent" />
+    <div class="absolute inset-0 pointer-events-none glass-topfade" />
     <!-- Single row: Logo + Search + Icons -->
     <div class="relative z-10 flex items-center h-full px-4 lg:px-6 gap-4">
       <!-- Left: Logo + Nav links (top aligned) -->
-      <div class="flex items-center gap-6 flex-shrink-0 px-5 py-3 rounded-full border border-white/15 bg-white/12 backdrop-blur-md">
-        <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
-          <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
-        </NuxtLink>
+      <div class="flex items-center flex-shrink-0 rounded-full glass-bright divide-x divide-white/20">
+        <div class="flex items-center gap-2 px-4 py-2">
+          <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
+            <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
+          </NuxtLink>
+        </div>
 
         <!-- Service nav links -->
-        <nav v-if="showModeToggle" class="flex items-center gap-1">
-          <button
-            class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="showActiveMode && catalogMode === 'explore' && !isClientArea
-              ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
-              : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
-            @click="$emit('set-catalog-mode', 'explore')"
-          >
-            {{ $t('catalog.modes.explore') }}
-          </button>
-          <button
-            class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="showActiveMode && catalogMode === 'quote' && !isClientArea
-              ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
-              : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
-            @click="$emit('set-catalog-mode', 'quote')"
-          >
-            {{ $t('catalog.modes.quote') }}
-          </button>
-          <!-- Role switcher: Я клиент + dropdown -->
-          <div v-if="loggedIn" class="flex items-center">
-            <NuxtLink
-              :to="localePath(currentRole === 'SELLER' ? '/clientarea/offers' : '/clientarea/orders')"
+        <div v-if="showModeToggle" class="flex items-center px-3 py-2">
+          <nav class="flex items-center gap-1">
+            <button
               class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-              :class="isClientArea
+              :class="showActiveMode && catalogMode === 'explore' && !isClientArea
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
+              @click="$emit('set-catalog-mode', 'explore')"
             >
-              {{ currentRole === 'SELLER' ? $t('cabinetNav.roles.seller') : $t('cabinetNav.roles.client') }}
-            </NuxtLink>
-
-            <!-- Dropdown для переключения роли (если есть обе роли) -->
-            <div v-if="hasMultipleRoles" class="dropdown dropdown-end">
-              <button
-                tabindex="0"
-                class="p-1 ml-0.5 transition-colors"
-                :class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
+              {{ $t('catalog.modes.explore') }}
+            </button>
+            <button
+              class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
+              :class="showActiveMode && catalogMode === 'quote' && !isClientArea
+                ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+                : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
+              @click="$emit('set-catalog-mode', 'quote')"
+            >
+              {{ $t('catalog.modes.quote') }}
+            </button>
+            <!-- Role switcher: Я клиент + dropdown -->
+            <div v-if="loggedIn" class="flex items-center">
+              <NuxtLink
+                :to="localePath(currentRole === 'SELLER' ? '/clientarea/offers' : '/clientarea/orders')"
+                class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
+                :class="isClientArea
+                  ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
+                  : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
               >
-                <Icon name="lucide:chevron-down" size="14" />
-              </button>
-              <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-48 p-2 shadow-lg border border-base-300">
-                <li>
-                  <a
-                    :class="{ active: currentRole === 'BUYER' }"
-                    @click="$emit('switch-role', 'BUYER')"
-                  >
-                    {{ $t('cabinetNav.roles.client') }}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    :class="{ active: currentRole === 'SELLER' }"
-                    @click="$emit('switch-role', 'SELLER')"
-                  >
-                    {{ $t('cabinetNav.roles.seller') }}
-                  </a>
-                </li>
-              </ul>
+                {{ currentRole === 'SELLER' ? $t('cabinetNav.roles.seller') : $t('cabinetNav.roles.client') }}
+              </NuxtLink>
+
+              <!-- Dropdown для переключения роли (если есть обе роли) -->
+              <div v-if="hasMultipleRoles" class="dropdown dropdown-end">
+                <button
+                  tabindex="0"
+                  class="p-1 ml-0.5 transition-colors"
+                  :class="useWhiteText ? 'text-white/50 hover:text-white' : 'text-base-content/50 hover:text-base-content'"
+                >
+                  <Icon name="lucide:chevron-down" size="14" />
+                </button>
+                <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-48 p-2 shadow-lg border border-base-300">
+                  <li>
+                    <a
+                      :class="{ active: currentRole === 'BUYER' }"
+                      @click="$emit('switch-role', 'BUYER')"
+                    >
+                      {{ $t('cabinetNav.roles.client') }}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      :class="{ active: currentRole === 'SELLER' }"
+                      @click="$emit('switch-role', 'SELLER')"
+                    >
+                      {{ $t('cabinetNav.roles.seller') }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
-          </div>
-        </nav>
+          </nav>
+        </div>
       </div>
 
       <!-- Center: Search input OR Client Area tabs (vertically centered) -->
@@ -84,7 +88,7 @@
 
         <!-- Client Area tabs -->
         <template v-if="isClientArea">
-          <div class="flex items-center gap-1 rounded-full border border-white/35 bg-white/70 backdrop-blur-md p-1">
+          <div class="flex items-center gap-1 rounded-full glass-bright p-1">
             <!-- BUYER tabs -->
             <template v-if="currentRole !== 'SELLER'">
               <NuxtLink
@@ -118,7 +122,7 @@
 
         <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-else-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full border border-white/45 bg-white/55 backdrop-blur-md divide-x divide-base-300/30">
+          <div class="flex items-center w-full rounded-full glass-bright divide-x divide-white/20 overflow-hidden">
             <!-- Product segment -->
             <button
               class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@@ -167,7 +171,7 @@
         <template v-else>
           <!-- Big pill input -->
           <div
-            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/45 bg-white/55 backdrop-blur-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full glass-bright 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" />
@@ -212,51 +216,55 @@
       </div>
 
       <!-- Right: AI + Globe + Team + User (top aligned like logo) -->
-      <div class="flex items-center gap-1 flex-shrink-0 px-4 py-2 rounded-full border border-white/15 bg-white/12 backdrop-blur-md">
-        <!-- AI Assistant button -->
-        <NuxtLink
-          :to="localePath('/clientarea/ai')"
-          class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
-          :class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
-        >
-          <Icon name="lucide:bot" size="18" />
-        </NuxtLink>
-
-        <!-- Globe (language/currency) dropdown -->
-        <div class="dropdown dropdown-end">
-          <button
-            tabindex="0"
+      <div class="flex items-center flex-shrink-0 rounded-full glass-bright divide-x divide-white/20">
+        <div class="flex items-center px-2 py-2">
+          <!-- AI Assistant button -->
+          <NuxtLink
+            :to="localePath('/clientarea/ai')"
             class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
             :class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
           >
-            <Icon name="lucide:globe" size="18" />
-          </button>
-          <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
-            <div class="font-semibold mb-2">{{ $t('common.language') }}</div>
-            <div class="flex gap-2 mb-4">
-              <NuxtLink
-                v-for="loc in locales"
-                :key="loc.code"
-                :to="switchLocalePath(loc.code)"
-                class="btn btn-sm"
-                :class="locale === loc.code ? 'btn-primary' : 'btn-ghost'"
-              >
-                {{ loc.code.toUpperCase() }}
-              </NuxtLink>
-            </div>
-            <div class="font-semibold mb-2">{{ $t('common.theme') }}</div>
+            <Icon name="lucide:bot" size="18" />
+          </NuxtLink>
+        </div>
+
+        <div class="flex items-center px-2 py-2">
+          <!-- Globe (language/currency) dropdown -->
+          <div class="dropdown dropdown-end">
             <button
-              class="btn btn-sm btn-ghost w-full justify-start"
-              @click="$emit('toggle-theme')"
+              tabindex="0"
+              class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
+              :class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
             >
-              <Icon :name="theme === 'night' ? 'lucide:sun' : 'lucide:moon'" size="16" />
-              {{ theme === 'night' ? $t('common.theme_light') : $t('common.theme_dark') }}
+              <Icon name="lucide:globe" size="18" />
             </button>
+            <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
+              <div class="font-semibold mb-2">{{ $t('common.language') }}</div>
+              <div class="flex gap-2 mb-4">
+                <NuxtLink
+                  v-for="loc in locales"
+                  :key="loc.code"
+                  :to="switchLocalePath(loc.code)"
+                  class="btn btn-sm"
+                  :class="locale === loc.code ? 'btn-primary' : 'btn-ghost'"
+                >
+                  {{ loc.code.toUpperCase() }}
+                </NuxtLink>
+              </div>
+              <div class="font-semibold mb-2">{{ $t('common.theme') }}</div>
+              <button
+                class="btn btn-sm btn-ghost w-full justify-start"
+                @click="$emit('toggle-theme')"
+              >
+                <Icon :name="theme === 'night' ? 'lucide:sun' : 'lucide:moon'" size="16" />
+                {{ theme === 'night' ? $t('common.theme_light') : $t('common.theme_dark') }}
+              </button>
+            </div>
           </div>
         </div>
 
         <!-- Team dropdown -->
-        <template v-if="loggedIn && userData?.teams?.length">
+        <div v-if="loggedIn && userData?.teams?.length" class="flex items-center px-2 py-2">
           <div class="dropdown dropdown-end">
             <button
               tabindex="0"
@@ -288,10 +296,10 @@
               </li>
             </ul>
           </div>
-        </template>
+        </div>
 
         <!-- User menu -->
-        <template v-if="sessionChecked">
+        <div v-if="sessionChecked" class="flex items-center px-2 py-2">
           <template v-if="loggedIn">
             <div class="dropdown dropdown-end">
               <div
@@ -341,7 +349,7 @@
               {{ $t('auth.login') }}
             </button>
           </template>
-        </template>
+        </div>
       </div>
     </div>
 
@@ -482,12 +490,12 @@ const getTokenIcon = (type: string) => {
 // Header background classes
 const headerClasses = computed(() => {
   if (props.isHomePage) {
-    return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
+    return 'bg-transparent backdrop-blur-xl'
   }
   if (props.isCollapsed) {
-    return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
+    return 'bg-transparent backdrop-blur-xl'
   }
-  return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
+  return 'bg-transparent backdrop-blur-xl'
 })
 
 // Use white text on dark backgrounds (collapsed or home page with animation)
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 331e995..20ca68c 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -35,7 +35,7 @@
     <!-- View mode loading indicator -->
     <div
       v-if="clusterLoading"
-      class="absolute top-[116px] left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 bg-black/50 backdrop-blur-md rounded-full px-4 py-2 border border-white/20"
+      class="absolute top-[116px] left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 glass-soft rounded-full px-4 py-2"
     >
       <span class="loading loading-spinner loading-sm text-white" />
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
@@ -44,7 +44,7 @@
     <!-- List button (LEFT, opens panel) - hide when panel is open -->
     <button
       v-if="!isPanelOpen"
-      class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 text-white text-sm hover:bg-black/40 transition-colors"
+      class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 glass-soft rounded-full px-3 py-1.5 text-white text-sm hover:bg-white/15 transition-colors"
       @click="openPanel"
     >
       <Icon name="lucide:menu" size="16" />
@@ -54,7 +54,7 @@
     <!-- Filter by bounds checkbox (LEFT, next to panel when open) - only in selection mode -->
     <label
       v-if="selectMode !== null"
-      class="absolute top-[116px] left-[420px] z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
+      class="absolute top-[116px] left-[420px] z-20 hidden lg:flex items-center gap-2 glass-soft rounded-full px-3 py-1.5 cursor-pointer text-white text-sm hover:bg-white/15 transition-colors"
     >
       <input
         type="checkbox"
@@ -69,7 +69,7 @@
     <!-- View toggle (top RIGHT overlay, below header) - hide in info mode or when hideViewToggle -->
     <div v-if="!isInfoMode && !hideViewToggle" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
       <!-- View mode toggle -->
-      <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
+      <div class="flex gap-1 glass-bright rounded-full p-1">
         <button
           class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
           :class="mapViewMode === 'offers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@@ -110,7 +110,7 @@
         class="absolute top-[116px] left-4 bottom-4 z-30 max-w-[calc(100vw-2rem)] hidden lg:block"
         :class="panelWidth"
       >
-        <div class="bg-black/50 backdrop-blur-md rounded-xl shadow-lg border border-white/10 h-full flex flex-col text-white">
+        <div class="glass-soft rounded-2xl shadow-lg h-full flex flex-col text-white">
           <slot name="panel" />
         </div>
       </div>
@@ -122,7 +122,7 @@
       <div class="flex justify-between px-4 mb-2">
         <!-- List button (mobile) -->
         <button
-          class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-2 border border-white/10 text-white text-sm"
+          class="flex items-center gap-2 glass-soft rounded-full px-3 py-2 text-white text-sm"
           @click="openPanel"
         >
           <Icon name="lucide:menu" size="16" />
@@ -130,7 +130,7 @@
         </button>
 
         <!-- Mobile view toggle - hide in info mode or when hideViewToggle -->
-        <div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
+        <div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 glass-bright rounded-full p-1">
           <button
             class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
             :class="mapViewMode === 'offers' ? 'bg-white/20' : 'hover:bg-white/10'"
@@ -165,7 +165,7 @@
       <Transition name="slide-up">
         <div
           v-if="isPanelOpen"
-          class="bg-black/50 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white h-[60vh]"
+          class="glass-soft rounded-t-2xl shadow-lg transition-all duration-300 text-white h-[60vh]"
         >
           <!-- Drag handle / close -->
           <div