feat: debug schema page

Akryum · Feb 5, 2024 · f3fe2f1 · f3fe2f1
1 parent 6f2fcbd
commit f3fe2f1
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/packages/app/components/command-palette/CommandPaletteContent.vue b/packages/app/components/command-palette/CommandPaletteContent.vue
@@ -94,6 +94,12 @@ const routes = computed(() => [
     icon: 'i-ph-bug',
     label: 'Debug',
   },
+  {
+    id: '_route.debug-schema',
+    to: '/debug-schema',
+    icon: 'i-ph-bug',
+    label: 'Debug Schema',
+  },
 ])
 
 // Resource

diff --git a/packages/app/pages/debug-schema.vue b/packages/app/pages/debug-schema.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import SuperJSON from 'superjson'
+
+const { data, refresh } = await useFetch('/api/resources', {
+  transform: data => SuperJSON.parse(data),
+})
+onWindowFocus(refresh)
+
+const { copy } = useCopyToClipboard()
+const toast = useToast()
+
+function copyData() {
+  copy(JSON.stringify(data.value, null, 2))
+  toast.add({
+    title: 'Copied to clipboard',
+    icon: 'i-ph-check-square',
+    color: 'green',
+    timeout: 2000,
+  })
+}
+</script>
+
+<template>
+  <div class="p-2 flex flex-col gap-2 max-w-[1000px] mx-auto">
+    <Head>
+      <Title>Debug Schema info</Title>
+    </Head>
+
+    <div class="flex items-center">
+      <h1 class="text-xl text-primary-500 flex items-center gap-2">
+        <UIcon name="i-ph-bug" class="w-6 h-6" />
+        Debug Schema info
+      </h1>
+      <div class="flex-1" />
+      <UButton
+        icon="i-ph-clipboard"
+        @click="copyData()"
+      >
+        Copy
+      </UButton>
+    </div>
+
+    <MonacoEditor
+      filename="debug-schema.json"
+      :source="JSON.stringify(data, null, 2)"
+      :options="{
+        language: 'json',
+        readOnly: true,
+      }"
+      class="flex-1"
+    />
+  </div>
+</template>
diff --git a/packages/app/pages/debug.vue b/packages/app/pages/debug.vue
@@ -35,6 +35,15 @@ function copyData() {
         Copy
       </UButton>
     </div>
-    <pre class="p-2 bg-gray-500/10 rounded-lg text-xs overflow-y-auto">{{ data }}</pre>
+
+    <MonacoEditor
+      filename="debug.json"
+      :source="JSON.stringify(data, null, 2)"
+      :options="{
+        language: 'json',
+        readOnly: true,
+      }"
+      class="flex-1"
+    />
   </div>
 </template>