feat: add frosted glass for all top bar popups

src/components/TopBar/TopBar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useMouseInElement } from '@vueuse/core'
 import type { Ref, UnwrapNestedRefs } from 'vue'
-import { onMounted, watch } from 'vue'
 
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
@@ -101,6 +100,16 @@ function closeAllTopBarPopup(exceptionKey?: keyof typeof popupVisible) {
   })
 }
 
+const rightSideInactive = computed(() => {
+  let isInactive = false
+  Object.entries(popupVisible).forEach(([key, value]) => {
+    if (value && key !== 'userPanel') {
+      isInactive = true
+    }
+  })
+  return isInactive
+})
+
 // Channels
 const channels = useDelayedHover({
   beforeEnter: () => closeAllTopBarPopup('channels'),
@@ -524,11 +533,14 @@ defineExpose({
         </div>
 
         <div
+          class="others"
+          :class="{ inactive: rightSideInactive }"
           style="
             backdrop-filter: var(--bew-filter-glass-1);
             box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
           "
           flex h-50px px-6px bg="$bew-elevated"
+          transition="transition-property-colors duration-150"
           text="$bew-text-1" border="1 $bew-border-color" rounded-full
           transform-gpu
         >
@@ -806,6 +818,32 @@ defineExpose({
 }
 
 .right-side {
+  .avatar {
+    --uno: "flex items-center mr-4 relative z-1";
+
+    .avatar-img,
+    .avatar-shadow {
+      --uno: "duration-300";
+
+      &.hover {
+        --uno: "transform scale-230 translate-y-36px";
+      }
+    }
+
+    .avatar-shadow {
+      --uno: "opacity-0";
+
+      &.hover {
+        --uno: "opacity-60";
+      }
+    }
+  }
+
+  .others.inactive,
+  .others:hover {
+    --uno: "important-backdrop-filter-none important-bg-$bew-elevated-solid";
+  }
+
   .unread-num-dot {
     --uno: "absolute top-4px right--4px";
     --uno: "important:px-1 important:py-2 rounded-full";
@@ -838,26 +876,5 @@ defineExpose({
     --un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color));
     --uno: "rounded-full mx-1 important:text-$bew-theme-color important:px-4 hover:important-bg-$bew-theme-color hover:important-text-white flex items-center justify-center important:text-base w-120px border-solid border-$bew-theme-color border-2 important:dark:filter";
   }
-
-  .avatar {
-    --uno: "flex items-center mr-4 relative z-1";
-
-    .avatar-img,
-    .avatar-shadow {
-      --uno: "duration-300";
-
-      &.hover {
-        --uno: "transform scale-230 translate-y-36px";
-      }
-    }
-
-    .avatar-shadow {
-      --uno: "opacity-0";
-
-      &.hover {
-        --uno: "opacity-60";
-      }
-    }
-  }
 }
 </style>

src/components/TopBar/components/FavoritesPop.vue

@@ -137,7 +137,8 @@ defineExpose({
 
 <template>
   <div
-    bg="$bew-elevated-solid"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     w="450px"
     h="430px"
     rounded="$bew-radius"

src/components/TopBar/components/HistoryPop.vue

@@ -167,7 +167,8 @@ function getHistoryList(type: Business, view_at = 0 as number) {
 
 <template>
   <div
-    bg="$bew-elevated-solid"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     w="380px"
     rounded="$bew-radius"
     pos="relative"

src/components/TopBar/components/MomentsPop.vue

@@ -276,7 +276,8 @@ defineExpose({
 
 <template>
   <div
-    bg="$bew-elevated-solid"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     w="380px"
     rounded="$bew-radius"
     pos="relative"

src/components/TopBar/components/MorePop.vue

@@ -17,8 +17,9 @@ const list = computed((): { name: string, url: string, icon: string }[] => [
 
 <template>
   <div
-    style="box-shadow: var(--bew-shadow-3)"
-    bg="$bew-elevated-solid"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
+    shadow="$bew-shadow-3"
     w="180px"
     p="4"
     rounded="$bew-radius"

src/components/TopBar/components/NotificationsPop.vue

@@ -73,7 +73,8 @@ function getUnreadMessageCount() {
 
 <template>
   <div
-    bg="$bew-elevated-solid"
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     w="170px"
     p="4"
     rounded="$bew-radius"

src/components/TopBar/components/UploadPop.vue

@@ -1,7 +1,8 @@
 <template>
   <div
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     flex="~ col"
-    bg="$bew-elevated-solid"
     rounded="$bew-radius"
     p="4"
     w="150px"

src/components/TopBar/components/WatchLaterPop.vue

@@ -51,8 +51,9 @@ function getAllWatchLaterList() {
 
 <template>
   <div
+    style="backdrop-filter: var(--bew-filter-glass-1);"
+    bg="$bew-elevated"
     w="380px"
-    bg="$bew-elevated-solid"
     rounded="$bew-radius"
     pos="relative"
     of="hidden"