From b77b98b43eb505ead547217e4093a3804cfdeaaa Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Sun, 8 Oct 2023 11:00:19 -0600
Subject: [PATCH] feat(ui): NNavbar component (#442)

---
 .../src/components/NNavbar.vue}                | 18 ++++++------------
 packages/devtools-ui-kit/src/unocss.ts         |  4 ++++
 .../client/components/ComponentsGraph.vue      |  4 ++--
 .../client/components/ComponentsList.vue       |  4 ++--
 .../devtools/client/pages/modules/assets.vue   |  4 ++--
 .../devtools/client/pages/modules/imports.vue  |  4 ++--
 .../client/pages/modules/open-graph.vue        |  4 ++--
 .../client/pages/modules/server-routes.vue     |  4 ++--
 .../client/pages/modules/virtual-files.vue     |  2 +-
 packages/devtools/client/uno.config.ts         |  2 --
 10 files changed, 23 insertions(+), 27 deletions(-)
 rename packages/{devtools/client/components/Navbar.vue => devtools-ui-kit/src/components/NNavbar.vue} (68%)

diff --git a/packages/devtools/client/components/Navbar.vue b/packages/devtools-ui-kit/src/components/NNavbar.vue
similarity index 68%
rename from packages/devtools/client/components/Navbar.vue
rename to packages/devtools-ui-kit/src/components/NNavbar.vue
index 9b040cef3..195cf647f 100644
--- a/packages/devtools/client/components/Navbar.vue
+++ b/packages/devtools-ui-kit/src/components/NNavbar.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
-defineProps({
-  search: {
-    type: String,
-    default: undefined,
-  },
-  noPadding: {
-    type: Boolean,
-    default: false,
-  },
-})
+defineProps<{
+  search?: string
+  noPadding?: boolean
+}>()
 
 const emit = defineEmits<{
   (event: 'update:search', value: string): void
@@ -20,9 +14,9 @@ function update(event: any) {
 </script>
 
 <template>
-  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
+  <div flex="~ col gap2" border="b base" flex-1 n-navbar-glass :class="[{ p4: !noPadding }]">
     <div flex="~ gap4" items-center>
-      <slot name="search">
+      <slot v-if="search !== undefined" name="search">
         <NTextInput
           placeholder="Search..."
           icon="carbon-search"
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 57df1b38e..6f01396fb 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -154,6 +154,10 @@ export function unocssPreset(): Preset {
       'n-loading': 'flex h-full w-full justify-center items-center',
       'n-panel-grids': 'n-panel-grids-light dark:n-panel-grids-dark',
       'n-panel-grids-center': 'n-panel-grids flex flex-col h-full gap-2 items-center justify-center',
+
+      // glass
+      'n-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
+      'n-navbar-glass': 'sticky z-10 top-0 n-glass-effect',
     },
   }
 }
diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
index 89974f9aa..f8fe279ac 100644
--- a/packages/devtools/client/components/ComponentsGraph.vue
+++ b/packages/devtools/client/components/ComponentsGraph.vue
@@ -200,7 +200,7 @@ function setFilter() {
 </script>
 
 <template>
-  <Navbar ref="navbar" absolute left-0 right-0 top-0>
+  <NNavbar ref="navbar" absolute left-0 right-0 top-0>
     <template #search>
       <div flex="~ gap-4 wrap" w-full>
         <NCheckbox v-model="showPages" n="primary sm">
@@ -225,7 +225,7 @@ function setFilter() {
       <div flex-auto />
       <slot />
     </template>
-  </Navbar>
+  </NNavbar>
 
   <div relative h-full w-full>
     <div ref="container" h-full w-full />
diff --git a/packages/devtools/client/components/ComponentsList.vue b/packages/devtools/client/components/ComponentsList.vue
index d6df7cee8..7c8203fc9 100644
--- a/packages/devtools/client/components/ComponentsList.vue
+++ b/packages/devtools/client/components/ComponentsList.vue
@@ -85,7 +85,7 @@ const filtered = computed(() => {
 </script>
 
 <template>
-  <Navbar v-model:search="search" pb3>
+  <NNavbar v-model:search="search" pb3>
     <template #actions>
       <slot />
     </template>
@@ -101,7 +101,7 @@ const filtered = computed(() => {
         ]"
       />
     </div>
-  </Navbar>
+  </NNavbar>
   <NSectionBlock
     v-if="filtered.user.length"
     icon="carbon-nominal"
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 347e5f1fc..07ee09ebf 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -79,7 +79,7 @@ const navbar = ref<HTMLElement>()
 
 <template>
   <div h-full of-auto>
-    <Navbar ref="navbar" v-model:search="search" pb2>
+    <NNavbar ref="navbar" v-model:search="search" pb2>
       <template #actions>
         <div flex-none flex="~ gap2 items-center">
           <NButton
@@ -95,7 +95,7 @@ const navbar = ref<HTMLElement>()
         <span v-if="search">{{ filtered.length }} matched · </span>
         <span>{{ assets?.length }} assets in total</span>
       </div>
-    </Navbar>
+    </NNavbar>
 
     <AssetDropZone folder="/" />
 
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index 99e902552..d321acd2b 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -75,7 +75,7 @@ const filtered = computed(() => {
 
 <template>
   <div v-if="config" relative h-full of-auto>
-    <Navbar v-model:search="search" pb3>
+    <NNavbar v-model:search="search" pb3>
       <div v-if="importsMetadata" flex="~ gap-2 items-center">
         <NIcon icon="carbon-filter" op50 />
         <NSelectTabs
@@ -88,7 +88,7 @@ const filtered = computed(() => {
           ]"
         />
       </div>
-    </Navbar>
+    </NNavbar>
     <NSectionBlock
       v-if="filtered.user.size"
       :open="filtered.count.user <= DETAILS_MAX_ITEMS"
diff --git a/packages/devtools/client/pages/modules/open-graph.vue b/packages/devtools/client/pages/modules/open-graph.vue
index 995d5407c..31fc2e997 100644
--- a/packages/devtools/client/pages/modules/open-graph.vue
+++ b/packages/devtools/client/pages/modules/open-graph.vue
@@ -95,7 +95,7 @@ until(router).toBeTruthy().then((v) => {
 <template>
   <div flex="~" h-full w-full of-hidden>
     <div h-full flex-auto of-auto>
-      <Navbar>
+      <NNavbar>
         <template #search>
           <NTextInput
             v-model="routeInput"
@@ -135,7 +135,7 @@ until(router).toBeTruthy().then((v) => {
             />
           </div>
         </template>
-      </Navbar>
+      </NNavbar>
       <div flex="~ col">
         <NSectionBlock
           text="Tags"
diff --git a/packages/devtools/client/pages/modules/server-routes.vue b/packages/devtools/client/pages/modules/server-routes.vue
index 2e6097781..b9be49ae3 100644
--- a/packages/devtools/client/pages/modules/server-routes.vue
+++ b/packages/devtools/client/pages/modules/server-routes.vue
@@ -133,7 +133,7 @@ function capitalize(str: string) {
 <template>
   <NSplitPane storage-key="tab-server-routes">
     <template #left>
-      <Navbar v-model:search="search" pb2>
+      <NNavbar v-model:search="search" pb2>
         <template #actions>
           <NButton
             v-tooltip="'Toggle View'"
@@ -156,7 +156,7 @@ function capitalize(str: string) {
           <span v-if="search" op50>{{ filtered.length }} matched · </span>
           <span op50>{{ serverRoutes?.length }} routes in total</span>
         </div>
-      </Navbar>
+      </NNavbar>
 
       <ServerRouteListItem
         v-for="item in view === 'tree' ? filterByCollection : filtered"
diff --git a/packages/devtools/client/pages/modules/virtual-files.vue b/packages/devtools/client/pages/modules/virtual-files.vue
index faf4a8467..0bd89faf6 100644
--- a/packages/devtools/client/pages/modules/virtual-files.vue
+++ b/packages/devtools/client/pages/modules/virtual-files.vue
@@ -63,7 +63,7 @@ const filteredFiles = computed(() => {
 <template>
   <NSplitPane class="virtual-files" storage-key="tab-virtual-files">
     <template #left>
-      <Navbar
+      <NNavbar
         v-model:search="searchString"
         no-padding p3
       />
diff --git a/packages/devtools/client/uno.config.ts b/packages/devtools/client/uno.config.ts
index bad4a0366..1ea5431ff 100644
--- a/packages/devtools/client/uno.config.ts
+++ b/packages/devtools/client/uno.config.ts
@@ -8,8 +8,6 @@ export default defineConfig({
       'bg-base': 'n-bg-base',
       'bg-active': 'n-bg-active',
       'border-base': 'n-border-base',
-      'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
-      'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
       'text-secondary': 'color-black/50 dark:color-white/50',