feat: add more categories

nuxt · Apr 23, 2023 · 3d41495 · 3d41495
1 parent 21919b1
commit 3d41495
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 60 deletions.
diff --git a/packages/devtools-kit/src/_types/common.ts b/packages/devtools-kit/src/_types/common.ts
@@ -3,3 +3,5 @@ export type TabCategory =
   | 'analyze'
   | 'server'
   | 'modules'
+  | 'documentation'
+  | 'advanced'
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
@@ -118,9 +118,11 @@ export function useCategorizedTabs(enabledOnly = true) {
   return computed(() => {
     const categories: Record<TabCategory, (ModuleCustomTab | ModuleBuiltinTab)[]> = {
       app: [],
-      analyze: [],
       server: [],
+      analyze: [],
       modules: [],
+      documentation: [],
+      advanced: [],
     }
 
     for (const tab of tabs.value) {

diff --git a/packages/devtools/client/pages/modules/hooks.vue b/packages/devtools/client/pages/modules/hooks.vue
@@ -2,7 +2,7 @@
 definePageMeta({
   icon: 'carbon-ibm-cloud-direct-link-2-connect',
   title: 'Hooks',
-  category: 'analyze',
+  category: 'advanced',
 })
 
 const serverHooks = useServerHooks()

diff --git a/packages/devtools/client/pages/modules/virtual-files.vue b/packages/devtools/client/pages/modules/virtual-files.vue
@@ -5,7 +5,7 @@ definePageMeta({
   icon: 'i-carbon-border-none',
   title: 'Virtual Files',
   layout: 'full',
-  category: 'analyze',
+  category: 'advanced',
 })
 
 interface VfsData {

diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
@@ -34,70 +34,73 @@ function toggleTabCategory(name: string, v: boolean) {
 </script>
 
 <template>
-  <div max-w-100 px6 py8>
+  <div px6 py6>
     <NIconTitle
-      class="text-xl op75"
+      class="mb-5 text-xl op75"
       icon="i-carbon-settings"
       text="DevTools Settings"
     />
-
-    <div py3 flex="~ col gap-1" border="b base">
-      <h3 mb1 text-lg>
-        UI Scale
-      </h3>
-      <NSelect v-model="scale" n="primary">
-        <option v-for="i of scaleOptions" :key="i[0]" :value="i[1]">
-          {{ i[0] }}
-        </option>
-      </NSelect>
-    </div>
-    <div py3 flex="~ col gap-1" border="b base">
-      <h3 mb1 text-lg>
-        Features
-      </h3>
-      <NCheckbox v-model="interactionCloseOnOutsideClick" n-primary>
-        <span>Close DevTools when clicking outside</span>
-      </NCheckbox>
-      <NCheckbox v-model="showExperimentalFeatures" n-primary>
-        <span>Show experimental features</span>
-      </NCheckbox>
-      <NCheckbox v-model="showHelpButtons" n-primary>
-        <span>Show help buttons</span>
-      </NCheckbox>
-    </div>
-    <div py3 flex="~ col gap-1">
-      <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 grid="~ cols-2 gap-10">
+      <div>
+        <div py3 flex="~ col gap-1" border="b base">
+          <h3 mb1 text-lg>
+            UI Scale
+          </h3>
+          <NSelect v-model="scale" n="primary">
+            <option v-for="i of scaleOptions" :key="i[0]" :value="i[1]">
+              {{ i[0] }}
+            </option>
+          </NSelect>
+        </div>
+        <div py3 flex="~ col gap-1" border="b base">
+          <h3 mb1 text-lg>
+            Features
+          </h3>
+          <NCheckbox v-model="interactionCloseOnOutsideClick" n-primary>
+            <span>Close DevTools when clicking outside</span>
+          </NCheckbox>
+          <NCheckbox v-model="showExperimentalFeatures" n-primary>
+            <span>Show experimental features</span>
+          </NCheckbox>
+          <NCheckbox v-model="showHelpButtons" n-primary>
+            <span>Show help buttons</span>
+          </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
           >
-            <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)"
+              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 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
-                <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
-                <span>{{ tab.title }}</span>
+              <div flex="~ gap-2" flex-auto items-center justify-start>
+                <span capitalize op75>{{ name }}</span>
               </div>
             </NSwitch>
-          </template>
-        </div>
-      </template>
+            <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>
diff --git a/packages/devtools/src/integrations/vite-inspect.ts b/packages/devtools/src/integrations/vite-inspect.ts
@@ -18,7 +18,7 @@ export async function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
     name: 'builtin-vite-inspect',
     title: 'Inspect',
     icon: 'carbon-ibm-watson-discovery',
-    category: 'analyze',
+    category: 'advanced',
     view: {
       type: 'iframe',
       src: `${nuxt.options.app.baseURL}/_nuxt/__inspect/`.replace(/\/\//g, '/'),

diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
@@ -103,7 +103,7 @@ export async function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
       name: 'builtin-vscode',
       title: 'VS Code',
       icon: 'i-bxl-visual-studio',
-      category: 'app',
+      category: 'modules',
       view: !installed
         ? {
             type: 'launch',