From 0caa4deefc41cd5bb9b79500644f7972cce7fb5d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 11 May 2023 13:19:56 +0200
Subject: [PATCH] feat: refactor components, close #227

---
 .../components/OpenGraphMissingTabs.vue       |  1 -
 .../devtools/client/components/SideNav.vue    | 26 +++++++++++------
 .../devtools/client/pages/modules/assets.vue  | 12 ++++----
 .../client/pages/modules/components.vue       | 20 ++++++-------
 .../client/pages/modules/open-graph.vue       | 28 ++++++++++---------
 5 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
index d14a1190f..bc39ad01b 100644
--- a/packages/devtools/client/components/OpenGraphMissingTabs.vue
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -95,7 +95,6 @@ const selectedTab = ref(tabs[0])
               {{ item.name }}
             </NTextExternalLink>
           </div>
-          <!-- TODO: use icons instead, show link to documentation -->
           <div w-full p2 op75>
             {{ item.description }}
           </div>
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
index 507b0c8de..91071f373 100644
--- a/packages/devtools/client/components/SideNav.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -4,12 +4,21 @@ const categories = useCategorizedTabs()
 
 const show = ref(false)
 const panel = ref()
+const button = ref<HTMLButtonElement>()
 
-onClickOutside(panel, () => {
-  show.value = false
-}, {
-  detectIframe: true,
-})
+function toggle() {
+  show.value = !show.value
+}
+
+onClickOutside(
+  panel,
+  (e) => {
+    if (e.target === button.value)
+      return
+    show.value = false
+  },
+  { detectIframe: true },
+)
 </script>
 
 <template>
@@ -20,13 +29,14 @@ onClickOutside(panel, () => {
         :distance="20"
         :triggers="[]"
         :shown="show"
-        :auto-hide="false"
+        :auto-hide="true"
       >
         <button
-          i-logos-nuxt-icon my3 h-6 w-6 pb-2 text-lg
+          ref="button"
+          i-logos-nuxt-icon my3 h-6 w-6 pb-2 text-lg outline-none
           :class="client ? '' : 'saturate-0'"
           :title="client ? 'Nuxt DevTools' : 'DevTools Client not connected, try open it in iframe mode'"
-          @click="show = !show"
+          @click="toggle"
         />
         <template #popper>
           <DockingPanel ref="panel" />
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 32a2ab429..3537ab9c0 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -57,15 +57,13 @@ function refreshAssets() {}
   <div h-full of-auto>
     <Navbar ref="navbar" v-model:search="search" pb2>
       <template #actions>
-        <!-- TODO: Use NIconButton -->
-        <div flex-none flex="~ gap4">
-          <button
+        <div flex-none flex="~ gap2 items-center">
+          <NIconButton
+            text-lg
+            :icon="view === 'grid' ? 'i-carbon-list' : 'i-carbon-grid'"
             title="Toggle view"
             @click="toggleView"
-          >
-            <NIcon v-if="view === 'grid'" icon="i-carbon-list" />
-            <NIcon v-else icon="i-carbon-grid" />
-          </button>
+          />
         </div>
       </template>
       <div op50>
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
index a253cfc85..a3be86c67 100644
--- a/packages/devtools/client/pages/modules/components.vue
+++ b/packages/devtools/client/pages/modules/components.vue
@@ -35,22 +35,20 @@ function toggleView() {
       :is="view === 'list' ? ComponentsList : ComponentsGraph"
       :components="components"
     >
-      <div flex-none flex="~ gap4">
-        <!-- TODO: Use NIconButton -->
-        <button
+      <div flex-none flex="~ gap3">
+        <NIconButton
+          text-lg
+          :icon="view === 'graph' ? 'i-carbon-list' : 'i-carbon-network-4'"
           title="Toggle view"
           @click="toggleView"
-        >
-          <NIcon v-if="view === 'graph'" icon="i-carbon-list" />
-          <NIcon v-else icon="i-carbon-network-4" />
-        </button>
-        <button
+        />
+        <NIconButton
           v-if="client?.inspector?.instance"
+          text-lg
+          icon="i-carbon-select-window"
           title="Inspect Vue components"
           @click="openComponentInspector"
-        >
-          <NIcon icon="i-carbon-select-window" />
-        </button>
+        />
       </div>
     </component>
   </div>
diff --git a/packages/devtools/client/pages/modules/open-graph.vue b/packages/devtools/client/pages/modules/open-graph.vue
index b4d6fcf3f..a9e23e121 100644
--- a/packages/devtools/client/pages/modules/open-graph.vue
+++ b/packages/devtools/client/pages/modules/open-graph.vue
@@ -102,26 +102,28 @@ until(router).toBeTruthy().then((v) => {
           />
         </template>
         <template #actions>
-          <div flex-none flex="~ gap4">
-            <button
+          <div flex-none flex="~ gap2 items-center">
+            <NIconButton
               v-if="routeMatchedFilePath"
+              text-lg
+              icon="carbon:launch"
               title="Open file in editor"
               @click="openInEditor(routeMatchedFilePath)"
-            >
-              <NIcon icon="carbon:launch" />
-            </button>
-            <button
+            />
+
+            <NIconButton
+              text-lg
+              icon="carbon:reset"
               title="Refresh Data"
               @click="refresh"
-            >
-              <NIcon icon="carbon:reset" />
-            </button>
-            <button
+            />
+
+            <NIconButton
+              text-lg
+              :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'"
               title="Toggle Preview"
               @click="showPreview = !showPreview"
-            >
-              <NIcon :icon="showPreview ? 'carbon:side-panel-open' : 'carbon:open-panel-right'" />
-            </button>
+            />
           </div>
         </template>
       </Navbar>