Version 1.3.1

package.json

@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",

src/components/ActionBar.vue

@@ -19,7 +19,7 @@ const globalStore = useGlobalStore();
 const modelStore = useModelStore();
 const { structureIsPristine, setDefaultValues } = useStructure();
 const { windowWidth, layoutSize } = useLayout();
-const { saveUserData, resetUserData, userDataHasChanged, canInteractWithServer, canInteractWithSyncedFolder, userDataSaving, userDataSaved, canSave } = useUserData();
+const { saveUserData, resetUserData, cleanUserData, userDataHasChanged, canInteractWithServer, canInteractWithSyncedFolder, userDataSaving, userDataSaved, canSave } = useUserData();
 
 const saveMaxWidth = computed((): string => {
   const long = canInteractWithServer.value && canInteractWithSyncedFolder.value;
@@ -38,7 +38,8 @@ const onSetAsDefaultValues = () => {
     btnIcon: 'mdi-text-box-check-outline',
     btnColor: 'warning',
     callback: () => new Promise(resolve => {
-      setDefaultValues(modelStore.structure, modelStore.userData);
+      const cleanData = cleanUserData();
+      setDefaultValues(modelStore.structure, cleanData);
       resolve();
     })
   })

src/components/FieldItem.vue

@@ -922,4 +922,16 @@ watch(() => field.collapsed, () => {
 .handle {
    cursor: grabbing;
  }
+.v-theme--dark {
+  .CodeMirror {
+    background-color: rgb(var(--v-theme-sheet));
+    color: inherit;
+  }
+  .CodeMirror-cursor {
+    border-left: white solid 1px;
+  }
+  .editor-toolbar button:hover {
+    color: black;
+  }
+}
 </style>

src/components/JSONms.vue

@@ -26,6 +26,7 @@ import FileManager from '@/components/FileManager.vue';
 import {useModelStore} from '@/stores/model';
 import structureMd from "../../docs/structure.md";
 import {useSyncing} from "@/composables/syncing";
+import { useTheme } from 'vuetify'
 
 // Model & Props
 const structure = defineModel<IStructure>({ required: true });
@@ -208,14 +209,18 @@ const onEditJson = () => {
   editJsonContent.value = JSON.stringify(deepToRaw(modelStore.userData), null, globalStore.userSettings.data.editorTabSize);
 }
 
-const onMigrateData = () => {
-  showMigrationDialog.value = true;
+const onCleanJson = (data: any) => {
+  editJsonContent.value = JSON.stringify(data || {}, null, globalStore.userSettings.data.editorTabSize);
 }
 
 const onApplyJsonContent = (json: any) => {
   setUserData(json);
 }
 
+const onMigrateData = () => {
+  showMigrationDialog.value = true;
+}
+
 let oldModel: IStructure | null = null;
 const onStructureChange = (model: IStructure) => {
   if (oldModel) {
@@ -262,6 +267,15 @@ window.addEventListener('fs-change', () => {
   syncFromFolder(structure.value);
 })
 
+const theme = useTheme();
+const toggleDarkMode = () => {
+  theme.change(globalStore.userSettings.data.appearanceDarkMode ? 'dark' : 'light');
+}
+watch(() => [
+  globalStore.userSettings.data.appearanceDarkMode,
+], toggleDarkMode);
+toggleDarkMode();
+
 const refreshUserData = async (): Promise<any> => {
   return fetchUserData().then((response: any) => {
     setUserData(response.data, true);
@@ -486,7 +500,7 @@ if (globalStore.session.loggedIn) {
     v-model="editJsonContent"
     v-model:visible="showEditJson"
     @apply="onApplyJsonContent"
-    @clean="onEditJson"
+    @clean="onCleanJson"
   />
 
   <!-- MIGRATION DIALOG -->

src/components/JsonEditModal.vue

@@ -47,8 +47,8 @@ const onCleanUserData = () => {
     btnIcon: 'mdi-vacuum-outline',
     btnColor: 'warning',
     callback: () => new Promise(resolve => {
-      cleanUserData()
-      emit('clean');
+      const data = cleanUserData()
+      emit('clean', data);
       resolve();
     })
   })

src/components/Logo.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import logo from '@/assets/logo.png'
+import logoLight from '@/assets/logo.png'
+import logoDark from '@/assets/logo-dark.png'
+import {computed} from "vue";
+import {useGlobalStore} from "@/stores/global";
+
+const globalStore = useGlobalStore();
+
+const logo = computed(() => {
+  return globalStore.userSettings.data.appearanceDarkMode ? logoDark : logoLight;
+})
 </script>
 
 <template>

src/components/Sidebar.vue

@@ -199,7 +199,7 @@ watch(() => serverSettings.version, () => {
           Github
         </v-btn>
       </div>
-      <v-footer color="#f9f9f9">
+      <v-footer color="footer">
         <small style="font-size: 0.6rem">JSON.ms v{{ version }}. Licensed under the BSD-3-Clause.</small>
       </v-footer>
     </template>

src/components/SitePreview.vue

@@ -166,10 +166,10 @@ defineExpose({
     >
       <v-card
         class="w-100 fill-height"
+        color="sheet"
         :flat="!globalStore.userSettings.data.layoutSitePreviewPadding"
         :tile="!globalStore.userSettings.data.layoutSitePreviewPadding"
         :style="{
-          backgroundColor: 'white',
           height: globalStore.userSettings.data.layoutSitePreviewKeepRatio ? (layoutSize.preview.height + 'px !important') : undefined,
           width: layoutSize.preview.width + 'px !important',
         }"

src/components/StructureEditor.vue

@@ -12,7 +12,7 @@ import {useGlobalStore} from '@/stores/global';
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
 import {useSyncing} from "@/composables/syncing";
-import {useUserData} from "@/composables/user-data";
+import {LineCounter, parseDocument} from "yaml";
 // import yaml from 'js-yaml';
 
 const emit = defineEmits(['save', 'create', 'change', 'focus', 'blur']);
@@ -29,6 +29,13 @@ const { isFolderSynced, askToSyncFolder, unSyncFolder, lastStateTimestamp } = us
 const showParsingDelay = ref(false);
 const progressBarValue = ref(0);
 const progressBarCompleted = ref(false);
+const animateAnnotationWarning = ref(false);
+const annotations: Ref<{
+  row: number
+  column: number
+  text: string
+  type: string
+}[]> = ref([]);
 const globalStore = useGlobalStore();
 const structureEditor: Ref<VAceEditorInstance | null> = ref(null);
 const blueprintEditorTypings: Ref<VAceEditorInstance | null> = ref(null);
@@ -111,7 +118,10 @@ const value = computed({
   set(value: string) {
     modelStore.setTemporaryContent(value);
     if (globalStore.userSettings.data.editorLiveUpdate) {
-      emit('change', value);
+      printAnnotations(value);
+      if (annotations.value.length === 0) {
+        emit('change', value);
+      }
     } else {
       clearInterval(parseInterval);
       clearInterval(showParseInterval);
@@ -124,7 +134,10 @@ const value = computed({
       parseValueInterval = setTimeout(() => progressBarValue.value = 100, 100);
 
       parseInterval = setTimeout(() => {
-        emit('change', value);
+        printAnnotations(value);
+        if (annotations.value.length === 0) {
+          emit('change', value);
+        }
         progressBarCompleted.value = true;
         setTimeout(() => showParsingDelay.value = true);
         setTimeout(() => {
@@ -177,21 +190,60 @@ const onBlur = () => {
   emit('blur');
 }
 
+const printAnnotations = (content: string) => {
+  const instance = structureEditor.value?.getAceInstance();
+  if (instance) {
+    animateAnnotationWarning.value = false;
+    annotations.value = [];
+    const lineCounter = new LineCounter();
+    const doc = parseDocument(content, {lineCounter});
+    doc.errors.forEach(error => {
+      const line = error.linePos?.[0].line;
+      if (line) {
+        annotations.value.push({
+          row: line - 1,
+          column: 0,
+          text: error.message,
+          type: "error"
+        });
+      }
+    })
+    doc.warnings.forEach(error => {
+      const line = error.linePos?.[0].line;
+      if (line) {
+        annotations.value.push({
+          row: line - 1,
+          column: 0,
+          text: error.message,
+          type: "warning"
+        });
+      }
+    })
+    instance.session.setAnnotations(annotations.value);
+
+    if (annotations.value.length > 0) {
+      animateAnnotationWarning.value = true;
+      setTimeout(() => {
+        animateAnnotationWarning.value = false;
+      }, 200);
+    }
+  }
+}
+
+const goToNextAnnotation = () => {
+  const instance = structureEditor.value?.getAceInstance();
+  if (instance && annotations.value.length > 0) {
+    instance.renderer.scrollToLine(annotations.value[0].row, false, true);
+  }
+}
+
 const scrollToSection = (section: string) => {
   const instance = structureEditor.value?.getAceInstance();
   if (instance) {
-    const annotations = [];
     const line = findNeedleInString(structure.value.content, '  ' + section + ':');
     if (line) {
       instance.renderer.scrollToLine(line - 1, false, true);
-      annotations.push({
-        row: line - 1,
-        column: 0,
-        text: "Current section",
-        type: "info"
-      });
     }
-    instance.session.setAnnotations(annotations);
   }
 }
 
@@ -257,6 +309,7 @@ const tryToAddCommands = () => {
 onMounted(() => {
   tryToAddCommands();
   onChange();
+  printAnnotations(structure.value.content);
 })
 onBeforeUnmount(() => {
   // editor.value?.destroy();
@@ -356,7 +409,7 @@ defineExpose({
 
 function onChange() {
   if (structureEditor.value) {
-//     updateAnnotations(editor.value?.getAceInstance());
+
   }
 }
 
@@ -435,6 +488,9 @@ const structureOptions = computed(() => {
   return { ...options.value, tabSize: 2 };
 });
 
+watch(() => structure.value.hash, () => {
+  printAnnotations(structure.value.content);
+});
 watch(() => globalStore.userSettings.data, () => {
   options.value.fontSize = globalStore.userSettings.data.editorFontSize;
   options.value.tabSize = globalStore.userSettings.data.editorTabSize;
@@ -487,9 +543,33 @@ watch(() => globalStore.userSettings.data, () => {
           />
         </v-list>
       </v-menu>
+
       <v-spacer />
+
       <div class="d-flex align-center pr-1" style="gap: 0.5rem">
+        <v-tooltip
+          v-if="annotations.length > 0"
+          text="There are errors in your YAML structure"
+          location="bottom"
+          color="error"
+        >
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              :class="['annotation-warning', {
+                animate: animateAnnotationWarning
+              }]"
+              size="small"
+              icon
+              @click="goToNextAnnotation"
+            >
+              <v-icon color="error">mdi-alert</v-icon>
+            </v-btn>
+          </template>
+        </v-tooltip>
+
         <slot name="header.end" />
+
         <div
           v-if="!globalStore.userSettings.data.editorLiveUpdate"
           :style="{
@@ -499,16 +579,16 @@ watch(() => globalStore.userSettings.data, () => {
         >
           <v-icon
             v-if="progressBarCompleted"
-            icon="mdi-check-circle"
-            color="secondary"
+            :icon="annotations.length === 0 ? 'mdi-check-circle' : 'mdi-alert-circle'"
+            :color="annotations.length === 0 ? 'secondary' : 'error'"
             size="16"
             class="position-absolute"
             style="top: 1px"
           />
           <v-progress-circular
             v-if="showParsingDelay"
             :model-value="progressBarValue"
-            color="secondary"
+            :color="annotations.length === 0 ? 'secondary' : 'error'"
             size="16"
             width="2"
           />
@@ -684,4 +764,20 @@ watch(() => globalStore.userSettings.data, () => {
 .v-window ::v-deep .v-window__container {
   height: 100% !important;
 }
+.annotation-warning {
+  &.animate {
+    animation: pulse-once 200ms ease-out normal;
+  }
+}
+@keyframes pulse-once {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 </style>

src/components/UserSettingsDialog.vue

@@ -162,6 +162,19 @@ watch(() => visible.value, () => {
         </v-col>
         <v-col cols="12" md="6" class="d-flex flex-column" style="gap: 1rem">
 
+          <v-card title="Appearance">
+            <v-card-text class="d-flex flex-column" style="gap: 1rem">
+              <v-switch
+                v-model="userSettings.appearanceDarkMode"
+                color="primary"
+                label="Dark mode"
+                hint="Switch between light and dark themes to match your environment, reduce eye strain, and stay comfortable anytime."
+                persistent-hint
+                inset
+              />
+            </v-card-text>
+          </v-card>
+
           <v-card title="Data Form">
             <v-card-text class="d-flex flex-column" style="gap: 1rem">
               <v-switch

src/composables/user-data.ts

@@ -281,10 +281,9 @@ export function useUserData() {
     })
   }
 
-  const cleanUserData = () => {
+  const cleanUserData = (): any => {
     const parsedStructure = getParsedStructureData(modelStore.structure);
-    const data = getParsedUserData(parsedStructure, modelStore.userData, true);
-    setUserData(data, true);
+    return getParsedUserData(parsedStructure, modelStore.userData, true);
   }
 
   const setUserData = (data: any, setOriginal = false) => {