From afc1c41518c07d97c092860565a607c6445dd90c Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 10:20:11 +0800
Subject: [PATCH 01/10] chore: improve ui

---
 .../src/components/common/SideNavItem.vue     | 11 +++++-----
 packages/ui/src/components/Tooltip.vue        | 22 +++++++++++++++++++
 packages/ui/src/components/index.ts           |  2 ++
 packages/ui/storybook/Tooltip.story.vue       | 19 ++++++++++++++++
 4 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/src/components/Tooltip.vue
 create mode 100644 packages/ui/storybook/Tooltip.story.vue

diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
index f57740d3..786cf2bd 100644
--- a/packages/client/src/components/common/SideNavItem.vue
+++ b/packages/client/src/components/common/SideNavItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { toValue } from '@vueuse/core'
+import { VueTooltip } from '@vue-devtools-next/ui'
 import type { ModuleBuiltinTab } from '~/types'
 
 const props = withDefaults(
@@ -27,17 +28,17 @@ function onClick() {
 </script>
 
 <template>
-  <VTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
+  <VueTooltip :disabled="!minimized" placement="right" :class="{ 'w-full': !minimized }">
     <component
       :is="target === 'main' ? RouterLink : 'button'"
       :to="tabPath"
       :flex="`~ items-center ${minimized ? 'justify-center' : 'justify-between'}`"
-      hover="bg-active"
-      relative block h-10
+      hover="bg-active op-100"
+      relative block h-10 op65
       :w="minimized ? '10' : 'full'" select-none
       :rounded="minimized ? 'xl' : ''"
       :p="minimized ? '1' : 'x3'" text-secondary
-      exact-active-class="!text-primary-600 bg-active"
+      exact-active-class="!text-primary-600 bg-active op-100!"
       @click="onClick"
     >
       <div flex="~ items-center gap-3">
@@ -67,5 +68,5 @@ function onClick() {
         <Component :is="tab.extraTabVNode" />
       </div>
     </template>
-  </VTooltip>
+  </VueTooltip>
 </template>
diff --git a/packages/ui/src/components/Tooltip.vue b/packages/ui/src/components/Tooltip.vue
new file mode 100644
index 00000000..efead6f2
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Placement } from 'floating-vue'
+import { Tooltip } from 'floating-vue'
+
+defineProps<{
+  placement?: Placement
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <Tooltip
+    :disabled="disabled"
+    :placement="placement"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template #popper>
+      <slot name="popper" />
+    </template>
+  </Tooltip>
+</template>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index f4227dda..6848e1b1 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -16,6 +16,7 @@ import Checkbox from './Checkbox.vue'
 import Drawer from './Drawer.vue'
 import Overlay from './Overlay.vue'
 import Notification from './Notification.vue'
+import Tooltip from './Tooltip.vue'
 
 export {
   Badge as VueBadge,
@@ -36,4 +37,5 @@ export {
   Select as VueSelect,
   Switch as VueSwitch,
   Notification as VueNotification,
+  Tooltip as VueTooltip,
 }
diff --git a/packages/ui/storybook/Tooltip.story.vue b/packages/ui/storybook/Tooltip.story.vue
new file mode 100644
index 00000000..eddaee2c
--- /dev/null
+++ b/packages/ui/storybook/Tooltip.story.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { VueButton } from '../src'
+import VueTooltip from '../src/components/Tooltip.vue'
+</script>
+
+<template>
+  <Story>
+    <div class="flex">
+      <VueTooltip>
+        <VueButton>Hover me</VueButton>
+        <template #popper>
+          <div class="p-4">
+            Tooltip content
+          </div>
+        </template>
+      </VueTooltip>
+    </div>
+  </Story>
+</template>

From aaa87ff0bf6390845b86f09deee14c5d14ab113d Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 10:25:45 +0800
Subject: [PATCH 02/10] chore: floatingVue add props

---
 packages/ui/src/components/Dropdown.vue | 12 ++----------
 packages/ui/src/components/Tooltip.vue  |  7 ++-----
 packages/ui/src/types/floating-vue.ts   | 10 ++++++++++
 packages/ui/src/types/index.ts          |  1 +
 4 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/src/types/floating-vue.ts
 create mode 100644 packages/ui/src/types/index.ts

diff --git a/packages/ui/src/components/Dropdown.vue b/packages/ui/src/components/Dropdown.vue
index 4431c911..58d02aa0 100644
--- a/packages/ui/src/components/Dropdown.vue
+++ b/packages/ui/src/components/Dropdown.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts" generic="T">
-import type { Placement } from 'floating-vue'
 import { Dropdown } from 'floating-vue'
 import { computed, provide } from 'vue'
+import type { FloatingVueCommonProps } from '../types'
 import type { ButtonProps } from './Button.vue'
 import VueButton from './Button.vue'
 
 const props = withDefaults(defineProps<{
   label?: string
-  autoHide?: boolean
-  trigger?: 'click' | 'hover'
   buttonProps?: ButtonProps
   buttonClass?: ''
-  distance?: number
-  skidding?: number
-  placement?: Placement
-  disabled?: boolean
-  shown?: boolean
-}>(), {
-  autoHide: true,
+} & FloatingVueCommonProps>(), {
   trigger: 'click',
   buttonClass: '',
   distance: 0,
diff --git a/packages/ui/src/components/Tooltip.vue b/packages/ui/src/components/Tooltip.vue
index efead6f2..cb586b2b 100644
--- a/packages/ui/src/components/Tooltip.vue
+++ b/packages/ui/src/components/Tooltip.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { Placement } from 'floating-vue'
 import { Tooltip } from 'floating-vue'
+import type { FloatingVueCommonProps } from '../types'
 
-defineProps<{
-  placement?: Placement
-  disabled?: boolean
-}>()
+defineProps<FloatingVueCommonProps>()
 </script>
 
 <template>
diff --git a/packages/ui/src/types/floating-vue.ts b/packages/ui/src/types/floating-vue.ts
new file mode 100644
index 00000000..3e95a9a3
--- /dev/null
+++ b/packages/ui/src/types/floating-vue.ts
@@ -0,0 +1,10 @@
+import type { Placement } from 'floating-vue'
+
+export interface FloatingVueCommonProps {
+  trigger?: 'click' | 'hover'
+  distance?: number
+  skidding?: number
+  placement?: Placement
+  disabled?: boolean
+  shown?: boolean
+}
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
new file mode 100644
index 00000000..8ffe5808
--- /dev/null
+++ b/packages/ui/src/types/index.ts
@@ -0,0 +1 @@
+export * from './floating-vue'

From 633cfeb03cdab1aab0b9ab4fa1668bed8f124afa Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 10:26:07 +0800
Subject: [PATCH 03/10] chore: export types

---
 packages/ui/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 6b621848..18d9ac9e 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -8,6 +8,7 @@ import { VTooltip } from 'floating-vue'
 
 export * from './components'
 export * from './composables'
+export * from './types'
 
 export {
   VTooltip,

From 400d7ba43af67f65634b489e1cae56b73ca4037d Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 12:36:45 +0800
Subject: [PATCH 04/10] chore: setup tabs settings

---
 packages/client/src/composables/settings.ts |   0
 packages/client/src/main.ts                 |   2 +
 packages/client/src/pages/settings.vue      | 113 ++++++++++++++++++++
 packages/ui/src/components/Switch.vue       |   2 +-
 4 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/composables/settings.ts
 create mode 100644 packages/client/src/pages/settings.vue

diff --git a/packages/client/src/composables/settings.ts b/packages/client/src/composables/settings.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index 4f88cac5..1a57ad59 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -17,6 +17,7 @@ import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
 import Graph from '~/pages/graph.vue'
 import Index from '~/pages/index.vue'
+import Settings from '~/pages/settings.vue'
 
 import 'uno.css'
 import '~/assets/styles/main.css'
@@ -39,6 +40,7 @@ const routes = [
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
+  { path: '/settings', component: Settings },
 ]
 
 // @TODO: find a better way to handle it
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
new file mode 100644
index 00000000..62430fa8
--- /dev/null
+++ b/packages/client/src/pages/settings.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { VueCard, VueSwitch } from '@vue-devtools-next/ui'
+
+// TODO: plugin tabs
+const categories = builtinTab
+
+const hiddenTabCategories = ref<string[]>([''])
+const hiddenTabs = ref<string[]>([])
+const pinnedTabs = ref<string[]>([])
+
+function toggleTab(name: string, v: boolean) {
+  if (v)
+    hiddenTabs.value = hiddenTabs.value.filter(i => i !== name)
+  else
+    hiddenTabs.value.push(name)
+}
+
+function toggleTabCategory(name: string, v: boolean) {
+  if (v)
+    hiddenTabCategories.value = hiddenTabCategories.value.filter(i => i !== name)
+  else
+    hiddenTabCategories.value.push(name)
+}
+
+function togglePinTab(name: string) {
+  if (pinnedTabs.value.includes(name))
+    pinnedTabs.value = pinnedTabs.value.filter(i => i !== name)
+  else
+    pinnedTabs.value.push(name)
+}
+
+function pinMove(name: string, delta: number) {
+  const index = pinnedTabs.value.indexOf(name)
+  if (index === -1)
+    return
+
+  const newIndex = index + delta
+  if (newIndex < 0 || newIndex >= pinnedTabs.value.length)
+    return
+
+  const newPinnedTabs = [...pinnedTabs.value]
+  newPinnedTabs.splice(index, 1)
+  newPinnedTabs.splice(newIndex, 0, name)
+  pinnedTabs.value = newPinnedTabs
+}
+</script>
+
+<template>
+  <div px8 py6 of-auto w-full h-full>
+    <IconTitle
+      class="mb-5 text-xl op75"
+      icon="i-carbon-settings-adjust"
+      text="DevTools Settings"
+    />
+    <div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
+      <div flex="~ col gap-2">
+        <h3 text-lg>
+          Tabs
+        </h3>
+        <template v-for="[name, tabs] of categories" :key="name">
+          <VueCard
+            v-if="tabs.length" p3 flex="~ col gap-1"
+            :class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''"
+          >
+            <VueSwitch
+              :model-value="!hiddenTabCategories.includes(name)"
+              class="flex row-reverse py1 pl2 pr1"
+              @update:model-value="(v: boolean) => toggleTabCategory(name, v)"
+            >
+              <div flex="~ gap-2" flex-auto items-center justify-start>
+                <span capitalize op75>{{ name }}</span>
+              </div>
+            </VueSwitch>
+
+            <div mx--1 my1 h-1px border="b base" op75 />
+
+            <template v-for="tab of tabs" :key="tab.name">
+              <VueSwitch
+                class="flex row-reverse py1 pl2 pr1 n-primary"
+                :model-value="!hiddenTabs.includes(tab.name)"
+                :class="hiddenTabs.includes(tab.name) ? 'op35' : ''"
+                @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
+              >
+                <div flex="~ gap-2" text-sm flex-auto items-center justify-start pr-4>
+                  <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
+                  <span>{{ tab.title }}</span>
+                  <div flex-auto />
+                  <template v-if="pinnedTabs.includes(tab.name)">
+                    <NButton
+                      icon="i-carbon-caret-up"
+                      :disabled="pinnedTabs.indexOf(tab.name) === 0"
+                      :border="false"
+                      @click="pinMove(tab.name, -1)"
+                    />
+                    <NButton
+                      icon="i-carbon-caret-down"
+                      :disabled="pinnedTabs.indexOf(tab.name) === pinnedTabs.length - 1"
+                      :border="false"
+                      @click="pinMove(tab.name, 1)"
+                    />
+                  </template>
+                  <button class="px1 py1 text-sm hover:bg-active flex items-center" @click.stop>
+                    <div :class="pinnedTabs.includes(tab.name) ? ' i-carbon-pin-filled rotate--45' : ' i-carbon-pin op45'" />
+                  </button>
+                </div>
+              </VueSwitch>
+            </template>
+          </VueCard>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/Switch.vue b/packages/ui/src/components/Switch.vue
index d90c9490..a32d4c62 100644
--- a/packages/ui/src/components/Switch.vue
+++ b/packages/ui/src/components/Switch.vue
@@ -28,7 +28,7 @@ const toggleValue = useToggle(value)
       }"
       class="$ui-base w32px h16px rounded-8px transition-colors
             relative bg-primary-100 dark:bg-gray-700 group
-            [&.selected]:bg-primary-500
+            [&.selected]:bg-primary-500!
       "
     >
       <div

From 2f3ea0a0714395cc544e602154d975d0b89573b5 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 13:48:32 +0800
Subject: [PATCH 05/10] fix: cleanup states

---
 packages/client/src/App.vue              |  2 +-
 packages/client/src/composables/graph.ts | 10 ++++----
 packages/client/src/composables/state.ts | 21 +++++++++-------
 packages/client/src/pages/index.vue      |  2 +-
 packages/client/src/pages/settings.vue   | 32 ++++++++++++++----------
 5 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 8232566c..d2045b54 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -8,7 +8,7 @@ useColorMode()
 const router = useRouter()
 const route = useRoute()
 const { connected } = useDevToolsState()
-const clientState = useDevToolsClientState()
+const clientState = devtoolsClientState
 
 const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
 const viewModeSwitchVisible = computed(() => viewMode.value === 'overlay' && isInChromePanel)
diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts
index bb53d71a..26c081a7 100644
--- a/packages/client/src/composables/graph.ts
+++ b/packages/client/src/composables/graph.ts
@@ -1,7 +1,6 @@
 import type { ModuleInfo } from '@vue-devtools-next/core'
 import { DataSet } from 'vis-network/standalone'
 import type { Edge, Node, Options } from 'vis-network'
-import type { RemovableRef } from '@vueuse/core'
 
 // #region file types
 export const fileTypes = {
@@ -86,10 +85,11 @@ export interface GraphSettings {
   lib: boolean
 }
 
-export const graphSettings: RemovableRef<GraphSettings> = useLocalStorage<GraphSettings>('vue-devtools-next-graph-settings', {
-  node_modules: false,
-  virtual: false,
-  lib: false,
+export const graphSettings = computed({
+  get: () => devtoolsClientState.value.graphSettings,
+  set: (value: GraphSettings) => {
+    devtoolsClientState.value.graphSettings = value
+  },
 })
 
 watch(graphSettings, () => {
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index fae4d45b..d87b3fd0 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -1,13 +1,16 @@
 import type { RemovableRef } from '@vueuse/core'
+import type { GraphSettings } from './graph'
 
-export function useDevToolsClientState(): RemovableRef<{
+export const devtoolsClientState: RemovableRef<{
   isFirstVisit: boolean
   route: string
-}> {
-  const state = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
-    isFirstVisit: true,
-    route: '/',
-  })
-
-  return state
-}
+  graphSettings: GraphSettings
+}> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
+  isFirstVisit: true,
+  route: '/',
+  graphSettings: {
+    node_modules: false,
+    virtual: false,
+    lib: false,
+  },
+}, { mergeDefaults: true })
diff --git a/packages/client/src/pages/index.vue b/packages/client/src/pages/index.vue
index fb3798a3..8021c27a 100644
--- a/packages/client/src/pages/index.vue
+++ b/packages/client/src/pages/index.vue
@@ -2,7 +2,7 @@
 import { VueButton } from '@vue-devtools-next/ui'
 
 const router = useRouter()
-const clientState = useDevToolsClientState()
+const clientState = devtoolsClientState
 
 function visit() {
   clientState.value.isFirstVisit = false
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 62430fa8..d3378ee5 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -86,20 +86,26 @@ function pinMove(name: string, delta: number) {
                   <span>{{ tab.title }}</span>
                   <div flex-auto />
                   <template v-if="pinnedTabs.includes(tab.name)">
-                    <NButton
-                      icon="i-carbon-caret-up"
-                      :disabled="pinnedTabs.indexOf(tab.name) === 0"
-                      :border="false"
-                      @click="pinMove(tab.name, -1)"
-                    />
-                    <NButton
-                      icon="i-carbon-caret-down"
-                      :disabled="pinnedTabs.indexOf(tab.name) === pinnedTabs.length - 1"
-                      :border="false"
-                      @click="pinMove(tab.name, 1)"
-                    />
+                    <button
+                      class="px1 py1 text-sm hover:bg-active flex items-center"
+                      @click.stop="() => {
+                        if (pinnedTabs.indexOf(tab.name) === 0) return
+                        pinMove(tab.name, -1)
+                      }"
+                    >
+                      <div class="i-carbon-caret-up" />
+                    </button>
+                    <button
+                      class="px1 py1 text-sm hover:bg-active flex items-center"
+                      @click.stop="() => {
+                        if (pinnedTabs.indexOf(tab.name) === pinnedTabs.length - 1) return
+                        pinMove(tab.name, 1)
+                      }"
+                    >
+                      <div class="i-carbon-caret-down" />
+                    </button>
                   </template>
-                  <button class="px1 py1 text-sm hover:bg-active flex items-center" @click.stop>
+                  <button class="px1 py1 text-sm hover:bg-active flex items-center" @click.stop="togglePinTab(tab.name)">
                     <div :class="pinnedTabs.includes(tab.name) ? ' i-carbon-pin-filled rotate--45' : ' i-carbon-pin op45'" />
                   </button>
                 </div>

From 0b9d31a6555b28260c6eb8ec7b36ee93a2fa28a7 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 14:43:18 +0800
Subject: [PATCH 06/10] feat: dynamic sidebar

---
 .../client/src/components/common/SideNav.vue  |  7 ++--
 packages/client/src/composables/settings.ts   |  0
 packages/client/src/composables/state-tab.ts  | 35 +++++++++++++++++++
 packages/client/src/composables/state.ts      |  7 ++++
 packages/client/src/pages/settings.vue        | 17 ++++-----
 5 files changed, 53 insertions(+), 13 deletions(-)
 delete mode 100644 packages/client/src/composables/settings.ts
 create mode 100644 packages/client/src/composables/state-tab.ts

diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index 02f6e058..69055d91 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -10,7 +10,7 @@ const sidebarExpanded = ref(false)
 const sidebarScrollable = ref(false)
 
 // @TODO: dynamic tabs
-const displayedTabs = builtinTab
+const displayedTabs = categorizedTabs
 </script>
 
 <template>
@@ -53,9 +53,10 @@ const displayedTabs = builtinTab
     >
       <template v-for="[name, tabs], idx of displayedTabs" :key="name">
         <template v-if="tabs.length">
-          <div v-if="idx" my1 h-1px w-full border="b base" />
+          <!-- if is not the first nonempty list, render the top divider -->
+          <div v-if="idx && displayedTabs[0][1].length" my1 h-1px w-full border="b base" />
           <SideNavItem
-            v-for="tab of tabs"
+            v-for="tab of tabs.filter(item => !item.hidden)"
             :key="tab.name"
             :tab="tab"
             :minimized="!sidebarExpanded"
diff --git a/packages/client/src/composables/settings.ts b/packages/client/src/composables/settings.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
new file mode 100644
index 00000000..7c4f1c8a
--- /dev/null
+++ b/packages/client/src/composables/state-tab.ts
@@ -0,0 +1,35 @@
+import type { ModuleBuiltinTab } from '~/types/tab'
+
+export interface TabSettings {
+  hiddenTabCategories: string[]
+  hiddenTabs: string[]
+  pinnedTabs: string[]
+}
+
+export interface CategorizedTab extends ModuleBuiltinTab {
+  hidden: boolean
+}
+
+export const categorizedTabs = computed(() => {
+  const { hiddenTabCategories, hiddenTabs, pinnedTabs } = devtoolsClientState.value.tabSettings
+  // TODO: custom tabs
+  const tabs = builtinTab.reduce<[string, CategorizedTab[]][]>((prev, [category, tabs]) => {
+    const data: [string, CategorizedTab[]] = [category, []]
+    tabs.forEach((tab) => {
+      const hidden = hiddenTabs.includes(tab.name) || hiddenTabCategories.includes(category)
+
+      if (pinnedTabs.includes(tab.name)) {
+        prev[0][1].push({
+          ...tab,
+          hidden,
+        })
+      }
+      else { data[1].push({ ...tab, hidden }) }
+    })
+    prev.push(data)
+    return prev
+  }, [['pinned', []]])
+  // sort pinned tabs by pinned order
+  tabs[0][1].sort((a, b) => pinnedTabs.indexOf(a.name) - pinnedTabs.indexOf(b.name))
+  return tabs
+})
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index d87b3fd0..da2a449e 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -1,10 +1,12 @@
 import type { RemovableRef } from '@vueuse/core'
 import type { GraphSettings } from './graph'
+import type { TabSettings } from './state-tab'
 
 export const devtoolsClientState: RemovableRef<{
   isFirstVisit: boolean
   route: string
   graphSettings: GraphSettings
+  tabSettings: TabSettings
 }> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
   isFirstVisit: true,
   route: '/',
@@ -13,4 +15,9 @@ export const devtoolsClientState: RemovableRef<{
     virtual: false,
     lib: false,
   },
+  tabSettings: {
+    hiddenTabCategories: [],
+    hiddenTabs: [],
+    pinnedTabs: [],
+  },
 }, { mergeDefaults: true })
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index d3378ee5..acf12a21 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { VueCard, VueSwitch } from '@vue-devtools-next/ui'
 
-// TODO: plugin tabs
-const categories = builtinTab
+const categories = categorizedTabs
 
-const hiddenTabCategories = ref<string[]>([''])
-const hiddenTabs = ref<string[]>([])
-const pinnedTabs = ref<string[]>([])
+const { hiddenTabCategories, hiddenTabs, pinnedTabs } = toRefs(devtoolsClientState.value.tabSettings)
 
 function toggleTab(name: string, v: boolean) {
   if (v)
@@ -64,7 +61,7 @@ function pinMove(name: string, delta: number) {
           >
             <VueSwitch
               :model-value="!hiddenTabCategories.includes(name)"
-              class="flex row-reverse py1 pl2 pr1"
+              class="flex row-reverse py1 pl2 pr1 hover:bg-active"
               @update:model-value="(v: boolean) => toggleTabCategory(name, v)"
             >
               <div flex="~ gap-2" flex-auto items-center justify-start>
@@ -76,7 +73,7 @@ function pinMove(name: string, delta: number) {
 
             <template v-for="tab of tabs" :key="tab.name">
               <VueSwitch
-                class="flex row-reverse py1 pl2 pr1 n-primary"
+                class="flex row-reverse py1 pl2 pr1 n-primary hover:bg-active"
                 :model-value="!hiddenTabs.includes(tab.name)"
                 :class="hiddenTabs.includes(tab.name) ? 'op35' : ''"
                 @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
@@ -87,7 +84,7 @@ function pinMove(name: string, delta: number) {
                   <div flex-auto />
                   <template v-if="pinnedTabs.includes(tab.name)">
                     <button
-                      class="px1 py1 text-sm hover:bg-active flex items-center"
+                      class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65"
                       @click.stop="() => {
                         if (pinnedTabs.indexOf(tab.name) === 0) return
                         pinMove(tab.name, -1)
@@ -96,7 +93,7 @@ function pinMove(name: string, delta: number) {
                       <div class="i-carbon-caret-up" />
                     </button>
                     <button
-                      class="px1 py1 text-sm hover:bg-active flex items-center"
+                      class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65"
                       @click.stop="() => {
                         if (pinnedTabs.indexOf(tab.name) === pinnedTabs.length - 1) return
                         pinMove(tab.name, 1)
@@ -105,7 +102,7 @@ function pinMove(name: string, delta: number) {
                       <div class="i-carbon-caret-down" />
                     </button>
                   </template>
-                  <button class="px1 py1 text-sm hover:bg-active flex items-center" @click.stop="togglePinTab(tab.name)">
+                  <button class="px1 py1 text-sm hover:(bg-active op100) flex items-center op65" @click.stop="togglePinTab(tab.name)">
                     <div :class="pinnedTabs.includes(tab.name) ? ' i-carbon-pin-filled rotate--45' : ' i-carbon-pin op45'" />
                   </button>
                 </div>

From f9d922f49671ca367a42823e58bfff8fb94abf47 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 15:41:29 +0800
Subject: [PATCH 07/10] fix: navbar

---
 .../client/src/components/common/SideNav.vue  | 20 +++++------
 packages/client/src/composables/state-tab.ts  | 16 +++++++--
 packages/client/src/pages/settings.vue        | 33 ++++++++++++++++---
 3 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index 69055d91..aed781c5 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -51,17 +51,15 @@ const displayedTabs = categorizedTabs
       flex="~ auto col gap-0.5 items-center" w-full p1 class="no-scrollbar"
       :class="sidebarExpanded ? '' : 'of-x-hidden of-y-auto'"
     >
-      <template v-for="[name, tabs], idx of displayedTabs" :key="name">
-        <template v-if="tabs.length">
-          <!-- if is not the first nonempty list, render the top divider -->
-          <div v-if="idx && displayedTabs[0][1].length" my1 h-1px w-full border="b base" />
-          <SideNavItem
-            v-for="tab of tabs.filter(item => !item.hidden)"
-            :key="tab.name"
-            :tab="tab"
-            :minimized="!sidebarExpanded"
-          />
-        </template>
+      <template v-for="[name, tabs], idx of displayedTabs.filter(([{ hidden }, items]) => items.length && !hidden)" :key="name">
+        <!-- if is not the first nonempty list, render the top divider -->
+        <div v-if="idx" my1 h-1px w-full border="b base" />
+        <SideNavItem
+          v-for="tab of tabs.filter(item => !item.hidden)"
+          :key="tab.name"
+          :tab="tab"
+          :minimized="!sidebarExpanded"
+        />
       </template>
       <div flex-auto />
     </div>
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index 7c4f1c8a..e5fa487c 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -10,13 +10,21 @@ export interface CategorizedTab extends ModuleBuiltinTab {
   hidden: boolean
 }
 
+export interface CategorizedCategory {
+  name: string
+  hidden: boolean
+}
+
 export const categorizedTabs = computed(() => {
   const { hiddenTabCategories, hiddenTabs, pinnedTabs } = devtoolsClientState.value.tabSettings
   // TODO: custom tabs
-  const tabs = builtinTab.reduce<[string, CategorizedTab[]][]>((prev, [category, tabs]) => {
-    const data: [string, CategorizedTab[]] = [category, []]
+  const tabs = builtinTab.reduce<[CategorizedCategory, CategorizedTab[]][]>((prev, [category, tabs]) => {
+    const data: [CategorizedCategory, CategorizedTab[]] = [{ hidden: false, name: category }, []]
+    let hiddenCount = 0
     tabs.forEach((tab) => {
       const hidden = hiddenTabs.includes(tab.name) || hiddenTabCategories.includes(category)
+      if (hidden)
+        hiddenCount += 1
 
       if (pinnedTabs.includes(tab.name)) {
         prev[0][1].push({
@@ -26,9 +34,11 @@ export const categorizedTabs = computed(() => {
       }
       else { data[1].push({ ...tab, hidden }) }
     })
+    if (hiddenCount === tabs.length)
+      data[0].hidden = true
     prev.push(data)
     return prev
-  }, [['pinned', []]])
+  }, [[{ name: 'pinned', hidden: false }, []]])
   // sort pinned tabs by pinned order
   tabs[0][1].sort((a, b) => pinnedTabs.indexOf(a.name) - pinnedTabs.indexOf(b.name))
   return tabs
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index acf12a21..1f1ffe64 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VueCard, VueSwitch } from '@vue-devtools-next/ui'
+import { VueButton, VueCard, VueDarkToggle, VueSwitch } from '@vue-devtools-next/ui'
 
 const categories = categorizedTabs
 
@@ -54,10 +54,10 @@ function pinMove(name: string, delta: number) {
         <h3 text-lg>
           Tabs
         </h3>
-        <template v-for="[name, tabs] of categories" :key="name">
+        <template v-for="[{ name, hidden }, tabs] of categories" :key="name">
           <VueCard
             v-if="tabs.length" p3 flex="~ col gap-1"
-            :class="hiddenTabCategories.includes(name) ? 'op50 grayscale' : ''"
+            :class="hidden ? 'op50 grayscale' : ''"
           >
             <VueSwitch
               :model-value="!hiddenTabCategories.includes(name)"
@@ -75,7 +75,7 @@ function pinMove(name: string, delta: number) {
               <VueSwitch
                 class="flex row-reverse py1 pl2 pr1 n-primary hover:bg-active"
                 :model-value="!hiddenTabs.includes(tab.name)"
-                :class="hiddenTabs.includes(tab.name) ? 'op35' : ''"
+                :class="tab.hidden ? 'op35' : ''"
                 @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
               >
                 <div flex="~ gap-2" text-sm flex-auto items-center justify-start pr-4>
@@ -111,6 +111,31 @@ function pinMove(name: string, delta: number) {
           </VueCard>
         </template>
       </div>
+      <div flex="~ col gap-2">
+        <h3 text-lg>
+          Appearance
+        </h3>
+        <VueCard p4 flex="~ col gap-2">
+          <div>
+            <VueDarkToggle v-slot="{ isDark, toggle }">
+              <VueButton @click="toggle">
+                <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
+              </VueButton>
+            </VueDarkToggle>
+          </div>
+          <div mx--2 my1 h-1px border="b base" op75 />
+          <!-- <NCheckbox v-model="sidebarExpanded" n-primary>
+            <span>
+              Expand Sidebar
+            </span>
+          </NCheckbox>
+          <NCheckbox v-model="sidebarScrollable" :disabled="sidebarExpanded" n-primary>
+            <span>
+              Scrollable Sidebar
+            </span>
+          </NCheckbox> -->
+        </VueCard>
+      </div>
     </div>
   </div>
 </template>

From e9161a1dbd927e32a8d7ac68d399607e12c2c1ba Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 15:56:10 +0800
Subject: [PATCH 08/10] feat(button): add outlined styles

---
 packages/client/src/pages/settings.vue |  9 +++++++++
 packages/ui/src/components/Button.vue  | 28 ++++++++++++++++++++++----
 packages/ui/storybook/Button.story.vue | 18 +++++++++--------
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 1f1ffe64..1a7c6ea1 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -135,6 +135,15 @@ function pinMove(name: string, delta: number) {
             </span>
           </NCheckbox> -->
         </VueCard>
+        <h3 mt2 text-lg>
+          Debug
+        </h3>
+        <div flex="~ gap-2">
+          <VueButton>
+            <div i-carbon-breaking-change />
+            Reset Local Settings & State
+          </VueButton>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/ui/src/components/Button.vue b/packages/ui/src/components/Button.vue
index beef9456..07620771 100644
--- a/packages/ui/src/components/Button.vue
+++ b/packages/ui/src/components/Button.vue
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
   size: 'normal',
   flat: false,
+  outlined: false,
 })
 
 const emit = defineEmits<{
@@ -26,6 +27,7 @@ export interface ButtonProps {
   disabled?: boolean
   size?: 'normal' | 'mini'
   flat?: boolean
+  outlined?: boolean
 }
 
 export type ButtonType = 'default' | 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success'
@@ -52,7 +54,7 @@ function handleClick(e: MouseEvent) {
   emit('click', e)
 }
 
-const styles: Record<'common' | 'normal' | 'flat', Record<ButtonType, string>> = {
+const styles: Record<'common' | 'normal' | 'flat' | 'outlined', Record<ButtonType, string>> = {
   common: {
     default: 'active:bg-primary-100-darker dark:active:bg-gray-800-darker',
     primary: 'active:bg-primary-500-darker',
@@ -80,9 +82,26 @@ const styles: Record<'common' | 'normal' | 'flat', Record<ButtonType, string>> =
     info: 'hover:(bg-primary-100 text-info-500) dark:(hover:(bg-gray-800 text-info-400))',
     success: 'hover:(bg-primary-100 text-primary-500) dark:(hover:(bg-primary-800 text-primary-400))',
   },
+  outlined: {
+    default: 'hover:(border-primary-100 text-primary-300)',
+    primary: 'hover:(border-primary-500 text-primary-500)',
+    accent: 'hover:(border-accent-500 text-accent-500)',
+    danger: 'hover:(border-danger-500 text-danger-500)',
+    warning: 'hover:(border-warning-500 text-warning-500)',
+    info: 'hover:(border-info-500 text-info-500)',
+    success: 'hover:(border-primary-500 text-primary-500)',
+  },
 }
 
 const slots = useSlots()
+
+const variantClasses = computed(() => {
+  if (props.flat)
+    return styles.flat[props.type]
+  if (props.outlined)
+    return styles.outlined[props.type]
+  return styles.normal[props.type]
+})
 </script>
 
 <template>
@@ -90,18 +109,19 @@ const slots = useSlots()
     :is="component" v-bind="$attrs"
     role="button" :aria-disabled="disabled"
     class="$ui-base select-none inline-flex no-underline
-       $ui-inline-fcc border-none cursor-pointer py-0 gap5px"
+       $ui-inline-fcc cursor-pointer py-0 gap5px $ui-transition"
     :class="[
       [styles.common[props.type]],
       {
         'rounded-full': props.round === 'full',
         '$ui-base-br': props.round === 'normal',
         'opacity-50 cursor-not-allowed': disabled,
-        'bg-transparent': props.flat,
+        'bg-transparent': props.flat || props.outlined,
       },
       [
+        outlined ? 'b-1 $ui-border-base' : 'border-none',
         size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
-        flat ? styles.flat[props.type] : styles.normal[props.type],
+        variantClasses,
       ],
     ]"
     @click.capture="handleClick"
diff --git a/packages/ui/storybook/Button.story.vue b/packages/ui/storybook/Button.story.vue
index 96924731..97f49b6e 100644
--- a/packages/ui/storybook/Button.story.vue
+++ b/packages/ui/storybook/Button.story.vue
@@ -13,6 +13,7 @@ const state = reactive<{
 })
 
 const flat = ref(false)
+const outlined = ref(false)
 </script>
 
 <template>
@@ -32,34 +33,35 @@ const flat = ref(false)
         }"
       />
       <HstCheckbox v-model="flat" title="Flat" />
+      <HstCheckbox v-model="outlined" title="Outlined" />
     </template>
     <Variant title="Normal Button">
-      <Button :flat="flat" :type="state.type" @click="logEvent('click event', $event)">
+      <Button :flat="flat" :outlined="outlined" :type="state.type" @click="logEvent('click event', $event)">
         Button
       </Button>
     </Variant>
     <Variant title="A Button">
-      <Button :flat="flat" href="https://vuejs.org" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" href="https://vuejs.org" :type="state.type">
         A Button
       </Button>
     </Variant>
     <Variant title="RouterLink Button">
-      <Button :flat="flat" to="router-path" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" to="router-path" :type="state.type">
         RouterLink Button
       </Button>
     </Variant>
     <Variant title="Round Button">
-      <Button :flat="flat" round="full" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" round="full" :type="state.type">
         Round Button
       </Button>
     </Variant>
     <Variant title="Loading Button">
-      <Button :flat="flat" loading :type="state.type">
+      <Button :flat="flat" :outlined="outlined" loading :type="state.type">
         Loading Button
       </Button>
     </Variant>
     <Variant title="With Icon">
-      <Button :flat="flat" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" :type="state.type">
         <template #icon>
           <Icon class="i-carbon-moon" />
         </template>
@@ -67,13 +69,13 @@ const flat = ref(false)
       </Button>
     </Variant>
     <Variant title="With Badge">
-      <Button :flat="flat" :type="state.type">
+      <Button :flat="flat" :outlined="outlined" :type="state.type">
         Badge Button
         <Badge>10</Badge>
       </Button>
     </Variant>
     <Variant title="Mini Button">
-      <Button :flat="flat" :type="state.type" size="mini">
+      <Button :flat="flat" :outlined="outlined" :type="state.type" size="mini">
         <template #icon>
           <Icon icon="i-material-symbols-more-vert" />
         </template>

From 00b87de69965f57e8750cfeea6780cb446d92b14 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 16:37:13 +0800
Subject: [PATCH 09/10] feat: expanded sidebar

---
 packages/client/src/App.vue                   |  2 +-
 .../client/src/components/common/SideNav.vue  |  6 ++--
 .../src/components/common/SideNavItem.vue     |  2 +-
 packages/client/src/composables/state.ts      |  6 ++++
 packages/client/src/pages/settings.vue        | 32 +++++++++++--------
 packages/ui/src/components/Button.vue         | 16 +++++-----
 packages/ui/storybook/Button.story.vue        |  7 ++++
 7 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index d2045b54..a7bc0587 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -15,7 +15,7 @@ const viewModeSwitchVisible = computed(() => viewMode.value === 'overlay' && isI
 const { toggle } = useToggleViewMode()
 
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
-const sidebarExpanded = false
+const sidebarExpanded = computed(() => clientState.value.expandSidebar)
 
 watch(connected, (v) => {
   if (v) {
diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index aed781c5..62d3609d 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -6,7 +6,7 @@ const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
 const buttonMoreTabs = ref<HTMLButtonElement>()
-const sidebarExpanded = ref(false)
+const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = ref(false)
 
 // @TODO: dynamic tabs
@@ -21,7 +21,7 @@ const displayedTabs = categorizedTabs
     <div
       sticky top-0 z-1 w-full p1 bg-base border="b base"
     >
-      <VueDropdown placement="left-start" :distance="6" :skidding="5" trigger="click" :shown="showDocking">
+      <VueDropdown placement="left-start" :distance="6" :skidding="5" trigger="click" :shown="showDocking" class="w-full">
         <button
           ref="buttonDocking"
           flex="~ items-center justify-center gap-2"
@@ -34,7 +34,7 @@ const displayedTabs = categorizedTabs
         >
           <div i-logos-vue h-6 w-6 />
           <template v-if="sidebarExpanded">
-            <span text="lg white" font-600>
+            <span text-lg text-base font-600>
               DevTools
             </span>
             <div flex-auto />
diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
index 786cf2bd..8d52f561 100644
--- a/packages/client/src/components/common/SideNavItem.vue
+++ b/packages/client/src/components/common/SideNavItem.vue
@@ -48,7 +48,7 @@ function onClick() {
           title="Settings"
           :show-title="false"
         />
-        <span v-if="!minimized" overflow-hidden text-ellipsis ws-nowrap>
+        <span v-if="!minimized" text-md overflow-hidden text-ellipsis ws-nowrap>
           {{ tab.title }}
         </span>
       </div>
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index da2a449e..2bea1121 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -7,6 +7,7 @@ export const devtoolsClientState: RemovableRef<{
   route: string
   graphSettings: GraphSettings
   tabSettings: TabSettings
+  expandSidebar: boolean
 }> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
   isFirstVisit: true,
   route: '/',
@@ -20,4 +21,9 @@ export const devtoolsClientState: RemovableRef<{
     hiddenTabs: [],
     pinnedTabs: [],
   },
+  expandSidebar: false,
 }, { mergeDefaults: true })
+
+export function clearDevtoolsClientState() {
+  devtoolsClientState.value = undefined
+}
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 1a7c6ea1..03637bd1 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { VueButton, VueCard, VueDarkToggle, VueSwitch } from '@vue-devtools-next/ui'
+import { VueButton, VueCard, VueCheckbox, VueDarkToggle, VueSwitch } from '@vue-devtools-next/ui'
 
 const categories = categorizedTabs
 
 const { hiddenTabCategories, hiddenTabs, pinnedTabs } = toRefs(devtoolsClientState.value.tabSettings)
+const expandSidebar = computed({
+  get: () => devtoolsClientState.value.expandSidebar,
+  set: v => (devtoolsClientState.value.expandSidebar = v),
+})
 
 function toggleTab(name: string, v: boolean) {
   if (v)
@@ -40,6 +44,14 @@ function pinMove(name: string, delta: number) {
   newPinnedTabs.splice(newIndex, 0, name)
   pinnedTabs.value = newPinnedTabs
 }
+
+async function clearOptions() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Are you sure you to reset all local settings & state? Devtools will reload.')) {
+    clearDevtoolsClientState()
+    window.location.reload()
+  }
+}
 </script>
 
 <template>
@@ -118,28 +130,22 @@ function pinMove(name: string, delta: number) {
         <VueCard p4 flex="~ col gap-2">
           <div>
             <VueDarkToggle v-slot="{ isDark, toggle }">
-              <VueButton @click="toggle">
+              <VueButton outlined type="primary" @click="toggle">
                 <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
               </VueButton>
             </VueDarkToggle>
           </div>
           <div mx--2 my1 h-1px border="b base" op75 />
-          <!-- <NCheckbox v-model="sidebarExpanded" n-primary>
-            <span>
-              Expand Sidebar
-            </span>
-          </NCheckbox>
-          <NCheckbox v-model="sidebarScrollable" :disabled="sidebarExpanded" n-primary>
-            <span>
-              Scrollable Sidebar
-            </span>
-          </NCheckbox> -->
+          <div class="flex items-center gap2 text-sm">
+            <VueCheckbox v-model="expandSidebar" />
+            <span op75>Expand Sidebar</span>
+          </div>
         </VueCard>
         <h3 mt2 text-lg>
           Debug
         </h3>
         <div flex="~ gap-2">
-          <VueButton>
+          <VueButton outlined type="warning" @click="clearOptions">
             <div i-carbon-breaking-change />
             Reset Local Settings & State
           </VueButton>
diff --git a/packages/ui/src/components/Button.vue b/packages/ui/src/components/Button.vue
index 07620771..3c58232d 100644
--- a/packages/ui/src/components/Button.vue
+++ b/packages/ui/src/components/Button.vue
@@ -83,13 +83,13 @@ const styles: Record<'common' | 'normal' | 'flat' | 'outlined', Record<ButtonTyp
     success: 'hover:(bg-primary-100 text-primary-500) dark:(hover:(bg-primary-800 text-primary-400))',
   },
   outlined: {
-    default: 'hover:(border-primary-100 text-primary-300)',
-    primary: 'hover:(border-primary-500 text-primary-500)',
-    accent: 'hover:(border-accent-500 text-accent-500)',
-    danger: 'hover:(border-danger-500 text-danger-500)',
-    warning: 'hover:(border-warning-500 text-warning-500)',
-    info: 'hover:(border-info-500 text-info-500)',
-    success: 'hover:(border-primary-500 text-primary-500)',
+    default: 'hover:(border-primary-100 text-primary-300 active:(ring-primary-100:5 bg-primary-100:5))',
+    primary: 'hover:(border-primary-500 text-primary-500) active:(ring-primary-500:5 bg-primary-500:5)',
+    accent: 'hover:(border-accent-500 text-accent-500) active:(ring-accent-500:5 bg-accent-500:5)',
+    danger: 'hover:(border-danger-500 text-danger-500) active:(ring-danger-500:5 bg-danger-500:5)',
+    warning: 'hover:(border-warning-500 text-warning-500) active:(ring-warning-500:5 bg-warning-500:5)',
+    info: 'hover:(border-info-500 text-info-500) active:(ring-info-500:5 bg-info-500:5)',
+    success: 'hover:(border-primary-500 text-primary-500) active:(ring-primary-500:5 bg-primary-500:5)',
   },
 }
 
@@ -119,7 +119,7 @@ const variantClasses = computed(() => {
         'bg-transparent': props.flat || props.outlined,
       },
       [
-        outlined ? 'b-1 $ui-border-base' : 'border-none',
+        outlined ? 'b-1 $ui-border-base active:ring-3 shadow-sm' : 'border-none',
         size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
         variantClasses,
       ],
diff --git a/packages/ui/storybook/Button.story.vue b/packages/ui/storybook/Button.story.vue
index 97f49b6e..013bb6ea 100644
--- a/packages/ui/storybook/Button.story.vue
+++ b/packages/ui/storybook/Button.story.vue
@@ -81,6 +81,13 @@ const outlined = ref(false)
         </template>
       </Button>
     </Variant>
+    <Variant title="Padding">
+      <div class="p5">
+        <Button :flat="flat" :outlined="outlined" :type="state.type">
+          123
+        </Button>
+      </div>
+    </Variant>
   </Story>
 </template>
 

From 0a4f14ec257d4f314a4e3bcbe7da9578208e97ff Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 25 Nov 2023 16:59:17 +0800
Subject: [PATCH 10/10] chore: remove todo

---
 packages/client/src/components/common/SideNav.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index 62d3609d..e3bedd06 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -9,7 +9,6 @@ const buttonMoreTabs = ref<HTMLButtonElement>()
 const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = ref(false)
 
-// @TODO: dynamic tabs
 const displayedTabs = categorizedTabs
 </script>