chore: wip

chore: wip

Author: chrisbbreuer

bun.lock

@@ -55,6 +55,9 @@
     "@stacksjs/server": "workspace:*",
     "@tauri-apps/api": "^1.6.0",
     "@tauri-apps/cli": "^1.6.3",
+    "@types/d3": "^7.4.3",
+    "d3": "^7.9.0",
+    "monaco-editor": "^0.52.2",
     "unified-network": "^0.6.4",
     "vue": "^3.5.13"
   }

storage/framework/core/desktop/package.json

@@ -118,6 +118,7 @@ const sectionContent = {
   app: {
     items: [
       { to: '/deployments', icon: 'i-hugeicons-rocket', text: 'Deployments' },
+      { to: '/cloud', icon: 'i-hugeicons-cloud', text: 'Cloud' },
       { to: '/requests', icon: 'i-hugeicons-api', text: 'Requests' },
       { to: '/realtime', icon: 'i-hugeicons-link-03', text: 'Realtime' },
       { to: '/actions', icon: 'i-hugeicons-function-of-x', text: 'Actions' },

storage/framework/defaults/components/Dashboard/Sidebar.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import * as monaco from 'monaco-editor'
+
+const props = defineProps<{
+  modelValue: string
+  language?: string
+  theme?: string
+  options?: monaco.editor.IStandaloneEditorConstructionOptions
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const editorContainer = ref<HTMLElement>()
+let editor: monaco.editor.IStandaloneCodeEditor | null = null
+
+onMounted(() => {
+  if (!editorContainer.value) return
+
+  editor = monaco.editor.create(editorContainer.value, {
+    value: props.modelValue,
+    language: props.language || 'typescript',
+    theme: props.theme || 'vs-dark',
+    automaticLayout: true,
+    minimap: { enabled: false },
+    ...props.options,
+  })
+
+  editor.onDidChangeModelContent(() => {
+    emit('update:modelValue', editor?.getValue() || '')
+  })
+})
+
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.dispose()
+  }
+})
+
+watch(() => props.modelValue, (newValue) => {
+  if (editor && newValue !== editor.getValue()) {
+    editor.setValue(newValue)
+  }
+})
+
+watch(() => props.language, (newValue) => {
+  if (editor) {
+    monaco.editor.setModelLanguage(editor.getModel()!, newValue || 'typescript')
+  }
+})
+
+watch(() => props.theme, (newValue) => {
+  if (editor) {
+    monaco.editor.setTheme(newValue || 'vs-dark')
+  }
+})
+
+watch(() => props.options, (newValue) => {
+  if (editor) {
+    editor.updateOptions(newValue || {})
+  }
+}, { deep: true })
+</script>
+
+<template>
+  <div ref="editorContainer" class="w-full h-full" />
+</template>