feat: Settings page

packages/client/src/App.vue

@@ -8,14 +8,14 @@ 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)
 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) {

packages/client/src/components/common/SideNav.vue

@@ -6,11 +6,10 @@ 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
-const displayedTabs = builtinTab
+const displayedTabs = categorizedTabs
 </script>
 
 <template>
@@ -21,7 +20,7 @@ const displayedTabs = builtinTab
     <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 +33,7 @@ const displayedTabs = builtinTab
         >
           <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 />
@@ -51,16 +50,15 @@ const displayedTabs = builtinTab
       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">
-          <div v-if="idx" my1 h-1px w-full border="b base" />
-          <SideNavItem
-            v-for="tab of tabs"
-            :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>

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">
@@ -47,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>
@@ -67,5 +68,5 @@ function onClick() {
         <Component :is="tab.extraTabVNode" />
       </div>
     </template>
-  </VTooltip>
+  </VueTooltip>
 </template>

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, () => {

packages/client/src/composables/state-tab.ts

@@ -0,0 +1,45 @@
+import type { ModuleBuiltinTab } from '~/types/tab'
+
+export interface TabSettings {
+  hiddenTabCategories: string[]
+  hiddenTabs: string[]
+  pinnedTabs: string[]
+}
+
+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<[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({
+          ...tab,
+          hidden,
+        })
+      }
+      else { data[1].push({ ...tab, hidden }) }
+    })
+    if (hiddenCount === tabs.length)
+      data[0].hidden = true
+    prev.push(data)
+    return prev
+  }, [[{ 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
+})

packages/client/src/composables/state.ts

@@ -1,13 +1,29 @@
 import type { RemovableRef } from '@vueuse/core'
+import type { GraphSettings } from './graph'
+import type { TabSettings } from './state-tab'
 
-export function useDevToolsClientState(): RemovableRef<{
+export const devtoolsClientState: RemovableRef<{
   isFirstVisit: boolean
   route: string
-}> {
-  const state = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
-    isFirstVisit: true,
-    route: '/',
-  })
+  graphSettings: GraphSettings
+  tabSettings: TabSettings
+  expandSidebar: boolean
+}> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
+  isFirstVisit: true,
+  route: '/',
+  graphSettings: {
+    node_modules: false,
+    virtual: false,
+    lib: false,
+  },
+  tabSettings: {
+    hiddenTabCategories: [],
+    hiddenTabs: [],
+    pinnedTabs: [],
+  },
+  expandSidebar: false,
+}, { mergeDefaults: true })
 
-  return state
+export function clearDevtoolsClientState() {
+  devtoolsClientState.value = undefined
 }

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

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