refactor: update devtools ui (#76)

* refactor: update devtools ui

* fix: update ui

* feat: add create collection and delete

* feat: imrpove schema detection

* fix: minor bugs

* chore: lint

Author: arashsheyda

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "eslint.useFlatConfig": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": ["class", "ui"],
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

client/app.vue

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      neutral: 'neutral',
+    },
+  },
+})

client/app/app.config.ts

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import { rpc } from './composables/rpc'
+
+const connectionInfo = computedAsync(async () => await rpc.value?.connectionInfo())
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+    <NuxtLayout v-if="connectionInfo?.connectionState === 1">
+      <NuxtPage />
+    </NuxtLayout>
+    <LoadingScreen
+      v-else
+      :info="connectionInfo"
+    />
+  </UApp>
+</template>

client/app/app.vue

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";