From c0b4bd664588332242cd978dc75f6da4c3781596 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 29 Apr 2023 00:04:10 +0200
Subject: [PATCH] feat: improve settings ui

---
 .../client/components/DockingPanel.vue        |  2 +-
 .../devtools/client/components/SideNav.vue    | 45 ++++++---
 packages/devtools/client/pages/settings.vue   | 92 +++++++++++--------
 3 files changed, 87 insertions(+), 52 deletions(-)

diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
index be67e314e..422209bc0 100644
--- a/packages/devtools/client/components/DockingPanel.vue
+++ b/packages/devtools/client/components/DockingPanel.vue
@@ -53,7 +53,7 @@ function refreshPage() {
         </NButton>
       </NDarkToggle>
       <NButton n="sm primary" to="/settings">
-        <div carbon-settings translate-y--1px /> Settings
+        <div carbon-settings-adjust translate-y--1px /> Settings
       </NButton>
     </div>
     <div px3 py2 flex="~ gap2">
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
index 9d1cb7560..9f88292ba 100644
--- a/packages/devtools/client/components/SideNav.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -4,11 +4,11 @@ const categories = useCategorizedTabs()
 </script>
 
 <template>
-  <div border="r base" flex="~ col gap-0.5" z-100 h-full items-center bg-base class="no-scrollbar">
-    <div flex="~ col" sticky top-0 z-1 mb1 items-center pt3 bg-base>
+  <div border="r base" flex="~ col" z-100 h-full items-center of-hidden bg-base>
+    <div flex="~ none col items-center">
       <VDropdown placement="left-start" :distance="20">
         <button
-          i-logos-nuxt-icon h-6 w-6 text-lg
+          i-logos-nuxt-icon my3 h-6 w-6 pb-2 text-lg
           :class="client ? '' : 'saturate-0'"
           :title="client ? 'Nuxt DevTools' : 'DevTools Client not connected, try open it in iframe mode'"
         />
@@ -16,20 +16,37 @@ const categories = useCategorizedTabs()
           <DockingPanel />
         </template>
       </VDropdown>
+      <div h-1px w-8 border="b base" />
     </div>
 
-    <template v-for="[name, tabs] of categories" :key="name">
-      <template v-if="tabs.length">
-        <div my1 h-1px w-8 border="b base" />
-
-        <SideNavItem
-          v-for="tab of tabs"
-          :key="tab.name"
-          :tab="tab"
-        />
+    <div flex="~ auto col gap-0.5 items-center" of-auto class="no-scrollbar" py1>
+      <template v-for="[name, tabs], idx of categories" :key="name">
+        <template v-if="tabs.length">
+          <div v-if="idx" my1 h-1px w-8 border="b base" />
+          <SideNavItem
+            v-for="tab of tabs"
+            :key="tab.name"
+            :tab="tab"
+          />
+        </template>
       </template>
-    </template>
+      <div flex-auto />
+    </div>
 
-    <div flex-auto />
+    <div flex="~ none col items-center">
+      <div h-1px w-8 border="b base" />
+      <NuxtLink
+        to="/settings"
+        flex="~ items-center justify-center"
+        hover="bg-active"
+        relative my1 block h-10 w-10 select-none rounded-xl p1 text-secondary
+        exact-active-class="!text-primary bg-active"
+      >
+        <TabIcon
+          text-xl
+          icon="i-carbon-settings-adjust" title="Settings" :show-title="false"
+        />
+      </NuxtLink>
+    </div>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index 52f3f20e6..716f1836d 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: 'full',
+})
+
 const {
   interactionCloseOnOutsideClick,
   showExperimentalFeatures,
@@ -37,11 +41,59 @@ function toggleTabCategory(name: string, v: boolean) {
   <div px6 py6>
     <NIconTitle
       class="mb-5 text-xl op75"
-      icon="i-carbon-settings"
+      icon="i-carbon-settings-adjust"
       text="DevTools Settings"
     />
-    <div grid="~ cols-2 gap-10">
+    <div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
+      <div flex="~ col gap-1" py3>
+        <h3 mb1 text-lg>
+          Tabs
+        </h3>
+        <template v-for="[name, tabs] of categories" :key="name">
+          <div
+            v-if="tabs.length"
+            flex="~ col gap-1" mx--1
+            :class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''" pt-2
+          >
+            <NSwitch
+              flex="~ row-reverse" px2 py1 n-lime
+              :model-value="!hiddenTabCategories.includes(name)"
+              @update:model-value="v => toggleTabCategory(name, v)"
+            >
+              <div flex="~ gap-2" flex-auto items-center justify-start>
+                <span capitalize op75>{{ name }}</span>
+              </div>
+            </NSwitch>
+            <div flex="~ col gap-1" border="~ base rounded" py3 pl4 pr2>
+              <template v-for="tab of tabs" :key="tab.name">
+                <NSwitch
+                  flex="~ row-reverse" py1 n-primary
+                  :model-value="!hiddenTabs.includes(tab.name)"
+                  @update:model-value="v => toggleTab(tab.name, v)"
+                >
+                  <div flex="~ gap-2" flex-auto items-center justify-start :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
+                    <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
+                    <span>{{ tab.title }}</span>
+                  </div>
+                </NSwitch>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
       <div>
+        <div py3 flex="~ col gap-1" border="b base">
+          <h3 mb1 text-lg>
+            Appearance
+          </h3>
+          <div>
+            <NDarkToggle v-slot="{ toggle, isDark }">
+              <NButton n="primary" @click="toggle()">
+                <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
+              </NButton>
+            </NDarkToggle>
+          </div>
+        </div>
         <div py3 flex="~ col gap-1" border="b base">
           <h3 mb1 text-lg>
             UI Scale
@@ -52,7 +104,7 @@ function toggleTabCategory(name: string, v: boolean) {
             </option>
           </NSelect>
         </div>
-        <div py3 flex="~ col gap-1" border="b base">
+        <div py3 flex="~ col gap-1">
           <h3 mb1 text-lg>
             Features
           </h3>
@@ -67,40 +119,6 @@ function toggleTabCategory(name: string, v: boolean) {
           </NCheckbox>
         </div>
       </div>
-      <div flex="~ col gap-1" max-w-150 py3>
-        <h3 mb1 text-lg>
-          Tabs
-        </h3>
-        <template v-for="[name, tabs] of categories" :key="name">
-          <div
-            v-if="tabs.length"
-            flex="~ col gap-1"
-            :class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''" pt-2
-          >
-            <NSwitch
-              flex="~ row-reverse" py1 n-lime border="b base"
-              :model-value="!hiddenTabCategories.includes(name)"
-              @update:model-value="v => toggleTabCategory(name, v)"
-            >
-              <div flex="~ gap-2" flex-auto items-center justify-start>
-                <span capitalize op75>{{ name }}</span>
-              </div>
-            </NSwitch>
-            <template v-for="tab of tabs" :key="tab.name">
-              <NSwitch
-                flex="~ row-reverse" py1 n-primary
-                :model-value="!hiddenTabs.includes(tab.name)"
-                @update:model-value="v => toggleTab(tab.name, v)"
-              >
-                <div flex="~ gap-2" flex-auto items-center justify-start :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
-                  <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
-                  <span>{{ tab.title }}</span>
-                </div>
-              </NSwitch>
-            </template>
-          </div>
-        </template>
-      </div>
     </div>
   </div>
 </template>