fix: minor improvements (#24)

Author: farnabaz

src/app/src/components/content/ContentEditorCode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref, shallowRef, watch } from 'vue'
-import { type DatabasePageItem, type DraftItem, DraftStatus } from '../../types'
+import { computed, onMounted, ref, shallowRef, watch } from 'vue'
+import { ContentFileExtension, type DatabasePageItem, type DraftItem, DraftStatus } from '../../types'
 import type { PropType } from 'vue'
 import { generateContentFromDocument, generateDocumentFromContent, pickReservedKeysFromDocument } from '../../utils/content'
 import { setupMonaco, setupSuggestion, type Editor } from '../../utils/monaco'
@@ -35,6 +35,20 @@ watch(() => props.draftItem.status, (newStatus) => {
   }
 })
 
+const language = computed(() => {
+  switch (document.value?.extension) {
+    case ContentFileExtension.Markdown:
+      return 'mdc';
+    case ContentFileExtension.YAML:
+    case ContentFileExtension.YML:
+      return 'yaml';
+    case ContentFileExtension.JSON:
+      return 'javascript';
+    default:
+      return 'text'
+  }
+})
+
 // Trigger on document changes
 watch(() => document.value?.id, async () => {
   if (document.value?.body) {
@@ -48,7 +62,7 @@ onMounted(async () => {
 
   // create a Monaco editor instance
   editor.value = monaco.createEditor(editorRef.value, {
-    // theme: ui.colorMode.value === 'light' ? 'vs' : 'vs-dark',
+    theme: ui.colorMode.value === 'light' ? 'vitesse-light' : 'vitesse-dark',
     lineNumbers: 'off',
     readOnly: props.readOnly,
     scrollbar: props.readOnly
@@ -89,14 +103,14 @@ onMounted(async () => {
   })
 
   // create and attach a model to the editor
-  editor.value.setModel(monaco.editor.createModel(content.value, 'mdc'))
+  editor.value.setModel(monaco.editor.createModel(content.value, language.value))
 
   // Set the theme based on the color mode
-  // watch(ui.colorMode, () => {
-  //   editor.value?.updateOptions({
-  //     theme: ui.colorMode.value === 'light' ? 'vs' : 'vs-dark',
-  //   })
-  // })
+  watch(ui.colorMode, () => {
+    editor.value?.updateOptions({
+      theme: ui.colorMode.value === 'light' ? 'vitesse-light' : 'vitesse-dark',
+    })
+  })
 })
 
 function setContent(document: DatabasePageItem) {

src/app/src/components/shared/item/ItemCard.vue

@@ -34,7 +34,7 @@ const imageSrc = computed(() => {
   if (props.item.preview) {
     return props.item.preview
   }
-  return 'https://placehold.co/1920x1080/f9fafc/f9fafc'
+  return ''
 })
 
 // ring-(--ui-success) ring-(--ui-info) ring-(--ui-warning) ring-(--ui-error) ring-(--ui-neutral)
@@ -53,12 +53,14 @@ const statusRingColor = computed(() => props.item.status ? `ring-(--ui-${COLOR_U
     >
       <div class="bg-default bg-[linear-gradient(45deg,#e6e9ea_25%,transparent_0),linear-gradient(-45deg,#e6e9ea_25%,transparent_0),linear-gradient(45deg,transparent_75%,#e6e9ea_0),linear-gradient(-45deg,transparent_75%,#e6e9ea_0)] bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0]">
         <Image
+          v-if="imageSrc"
           :src="imageSrc"
           width="426"
           height="240"
           alt="Card placeholder"
           class="z-[-1] rounded-t-lg aspect-video object-cover"
         />
+        <div v-else class="z-[-1] aspect-video bg-muted" />
         <div
           v-if="itemExtensionIcon"
           class="absolute inset-0 flex items-center justify-center"

src/app/src/composables/useDraftDocuments.ts

@@ -57,6 +57,8 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     list.value.push(item)
 
     await hooks.callHook('studio:draft:document:updated')
+    // Rerender host app
+    host.app.requestRerender()
 
     return item
   }

src/app/src/utils/monaco/index.ts

@@ -1,5 +1,7 @@
 import { createSingletonPromise } from '@vueuse/core'
 import type { editor as Editor } from 'modern-monaco/editor-core'
+import themeLight from './theme-light'
+import themeDark from './theme-dark'
 
 export { setupSuggestion } from './mdc-compilation'
 export type { editor as Editor } from 'modern-monaco/editor-core'
@@ -20,6 +22,8 @@ export const setupMonaco = createSingletonPromise(async () => {
   }
 
   const monaco: Monaco = await init()
+  monaco.editor.defineTheme('vitesse-light', themeLight)
+  monaco.editor.defineTheme('vitesse-dark', themeDark)
 
   return {
     monaco,