feat: preferences dialog

src-electron/menu.js

@@ -100,7 +100,10 @@ export function registerMenu (mainWindow) {
           type: 'separator'
         },
         {
-          label: 'Preferences'
+          label: 'Preferences',
+          click () {
+            mainWindow.webContents.send('dialogAction', 'preferences')
+          }
         },
         {
           type: 'separator'

src/App.vue

@@ -31,6 +31,12 @@ window.ipcBridge.subscribe('dialogAction', (evt, action) => {
       })
       break
     }
+    case 'preferences': {
+      $q.dialog({
+        component: defineAsyncComponent(() => import('components/PreferencesDialog.vue'))
+      })
+      break
+    }
   }
 })
 window.ipcBridge.subscribe('notify', (evt, opts) => {

src/components/PreferencesDialog.vue

@@ -0,0 +1,180 @@
+<template lang="pug">
+q-dialog(ref='dialogRef', @hide='onDialogHide')
+  q-card.mica.prefs
+    q-card-section.flex.items-center.bg-light-blue-10
+      q-icon(name='mdi-cog', left, size='sm')
+      span Preferences
+      q-space
+      q-btn(
+        unelevated
+        icon='mdi-close'
+        color='primary'
+        padding='xs'
+        @click='onDialogCancel'
+        )
+    .row.no-wrap.items-stretch.prefs-main
+      .col-auto.prefs-sidebar
+        q-list(separator)
+          q-item(
+            v-for='tab of tabs'
+            :key='tab.key'
+            :active='tab.key === state.tab'
+            active-class='bg-grey-9 text-white'
+            clickable
+            @click='state.tab = tab.key'
+            )
+            q-item-section(side)
+              q-icon(:name='tab.icon')
+            q-item-section
+              q-item-label {{ tab.label }}
+      .col
+        template(v-if='state.tab === `editor`')
+          q-form.q-gutter-md.q-pa-lg
+            q-select(
+              outlined
+              v-model='editorStore.cursorBlinking'
+              :options='cursorAnims'
+              label='Cursor Blinking Animation'
+              color='light-blue-4'
+              emit-value
+              map-options
+              style='width: 400px'
+              )
+            q-input(
+              v-model.number='editorStore.fontSize'
+              type='number'
+              outlined
+              label='Font Size'
+              color='light-blue-4'
+              suffix='px'
+              style='width: 200px'
+            )
+            q-input(
+              v-model.number='editorStore.tabSize'
+              type='number'
+              outlined
+              label='Tab Size'
+              color='light-blue-4'
+              suffix='spaces'
+              style='width: 200px'
+            )
+            q-toggle(
+              v-model='editorStore.formatOnType'
+              label='Format on Type'
+            )
+
+        template(v-else-if='state.tab === `git`')
+          q-form.q-gutter-md.q-pa-lg
+            q-select(
+              outlined
+              v-model='editorStore.gitMode'
+              :options='gitModes'
+              label='Git Mode'
+              hint='Whether to use the system git or the editor built-in git integration.'
+              color='light-blue-4'
+              emit-value
+              map-options
+              )
+
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useDialogPluginComponent } from 'quasar'
+import { useEditorStore } from 'src/stores/editor'
+
+const editorStore = useEditorStore()
+
+// const $q = useQuasar()
+
+// EMITS
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+])
+
+// QUASAR
+
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent()
+
+// STATE
+
+const state = reactive({
+  tab: 'editor'
+})
+
+const tabs = [
+  {
+    key: 'editor',
+    icon: 'mdi-square-edit-outline',
+    label: 'Editor'
+  },
+  {
+    key: 'git',
+    icon: 'mdi-git',
+    label: 'Git Integration'
+  },
+  {
+    key: 'profile',
+    icon: 'mdi-account',
+    label: 'Profile'
+  }
+]
+
+const cursorAnims = [
+  {
+    label: 'Blink',
+    value: 'blink'
+  },
+  {
+    label: 'Smooth',
+    value: 'smooth'
+  },
+  {
+    label: 'Phase',
+    value: 'phase'
+  },
+  {
+    label: 'Expand',
+    value: 'expand'
+  },
+  {
+    label: 'Solid',
+    value: 'solid'
+  }
+]
+
+const gitModes = [
+  {
+    label: 'Integrated Git',
+    value: 'integrated',
+    description: 'Use the editor built-in git'
+  },
+  {
+    label: 'System Git',
+    value: 'system',
+    description: 'Use the local system git'
+  }
+]
+
+// METHODS
+
+</script>
+
+<style lang="scss">
+.prefs {
+  min-width: 1200px;
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+
+  &-main {
+    flex: 1;
+  }
+
+  &-sidebar {
+    flex-basis: 250px;
+    background-color: $grey-10;
+  }
+}
+</style>

src/css/app.scss

@@ -20,16 +20,16 @@ body {
 }
 
 .bg-dark-4 {
-  background-color: lighten(#0d1117, 5%);
+  background-color: $dark-4;
 }
 .bg-dark-5 {
-  background-color: #0d1117;
+  background-color: $dark-5;
 }
 .bg-dark-6 {
-  background-color: #070a0d;
+  background-color: $dark-6;
 }
 .bg-dark-7 {
-  background-color: darken(#070a0d, 5%);
+  background-color: $dark-7;
 }
 
 .mica {

src/css/quasar.variables.scss

@@ -17,6 +17,10 @@ $secondary : #26A69A;
 $accent    : #9C27B0;
 
 $dark      : #1D1D1D;
+$dark-4    : lighten(#0d1117, 5%);
+$dark-5    : #0d1117;
+$dark-6    : #070a0d;
+$dark-7    : darken(#070a0d, 5%);
 $dark-page : #121212;
 
 $positive  : #21BA45;

src/pages/IndexPage.vue

@@ -124,9 +124,9 @@ onMounted(async () => {
     // -> Initialize Monaco editor
     editor = monaco.editor.create(monacoContainer.value, {
       automaticLayout: true,
-      cursorBlinking: 'blink',
-      fontSize: 16,
-      formatOnType: true,
+      cursorBlinking: editorStore.cursorBlinking,
+      fontSize: editorStore.fontSize,
+      formatOnType: editorStore.formatOnType,
       language: 'xmlrfc',
       lineNumbersMinChars: 4,
       padding: { top: 10, bottom: 10 },
@@ -201,6 +201,8 @@ onMounted(async () => {
     document.getElementById('app-loading').remove()
   }, 500)
 
+  // WATCHERS
+
   watch(() => docsStore.active, (newValue) => {
     if (newValue && editor) {
       editor.getModel().setValue(docsStore.activeDocument.activeData)
@@ -214,6 +216,27 @@ onMounted(async () => {
     docsStore.loadDocument({ isDefault: true })
   }
 
+  watch(() => editorStore.cursorBlinking, (newValue) => {
+    if (newValue && editor) {
+      editor.updateOptions({ cursorBlinking: newValue })
+    }
+  })
+  watch(() => editorStore.fontSize, (newValue) => {
+    if (newValue && editor) {
+      editor.updateOptions({ fontSize: newValue })
+    }
+  })
+  watch(() => editorStore.formatOnType, (newValue) => {
+    if (newValue && editor) {
+      editor.updateOptions({ formatOnType: newValue })
+    }
+  })
+  watch(() => editorStore.tabSize, (newValue) => {
+    if (newValue && editor) {
+      editor.updateOptions({ tabSize: newValue })
+    }
+  })
+
   window.ipcBridge.subscribe('editorAction', (evt, action) => {
     switch (action) {
       case 'addCursorAbove': {

src/stores/editor.js

@@ -7,8 +7,12 @@ export const useEditorStore = defineStore('editor', {
     errors: [],
     line: 1,
     col: 1,
+    cursorBlinking: 'blink',
+    fontSize: 16,
+    formatOnType: true,
     tabSize: 2,
     previewPaneShown: true,
+    gitMode: 'system',
     drawerPane: 'DrawerGit'
   }),
   getters: {