feat: modes improvements + refactor

package.json

@@ -12,41 +12,41 @@
   },
   "dependencies": {
     "@electron/remote": "2.1.2",
-    "@ietf-tools/idnits": "3.0.0-alpha.34",
+    "@ietf-tools/idnits": "3.0.0-alpha.36",
     "@msgpack/msgpack": "3.0.0-beta2",
     "@quasar/extras": "1.16.9",
     "ansicolor": "2.0.3",
     "fast-defer": "1.1.8",
-    "got": "14.2.0",
+    "got": "14.2.1",
     "isomorphic-git": "1.25.6",
     "lodash-es": "4.17.21",
     "luxon": "3.4.4",
     "mitt": "3.0.1",
-    "monaco-editor": "0.46.0",
+    "monaco-editor": "0.47.0",
     "openpgp": "5.11.1",
     "pinia": "2.1.7",
     "pinia-plugin-persistedstate": "3.2.1",
-    "quasar": "2.14.5",
+    "quasar": "2.15.1",
     "vscode-jsonrpc": "8.2.0",
     "vscode-uri": "3.0.8",
-    "vue": "3.4.20",
+    "vue": "3.4.21",
     "vue-router": "4.3.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^2.0.0-beta.2",
-    "@vue/language-plugin-pug": "1.8.27",
-    "autoprefixer": "10.4.17",
-    "electron": "29.1.0",
-    "electron-builder": "24.12.0",
+    "@vue/language-plugin-pug": "2.0.7",
+    "autoprefixer": "10.4.19",
+    "electron": "29.1.5",
+    "electron-builder": "24.13.3",
     "electron-packager": "17.1.2",
     "eslint": "8.57.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-vue": "9.23.0",
     "eslint-plugin-vue-pug": "0.6.2",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "pug": "3.0.2"
   },
   "engines": {

quasar.config.js

@@ -81,6 +81,7 @@ export default configure((/* ctx */) => {
       // distDir
 
       extendViteConf (viteConf) {
+        viteConf.build.chunkSizeWarningLimit = 9999999
         // viteConf.build.rollupOptions = {
         //   external: ['monaco-editor'],
         //   output: {

src/App.vue

@@ -1,20 +1,37 @@
 <template lang='pug'>
-router-view
+.app-layout(:class='currentModeClass')
+  app-mode-sidebar
+  .app-main
+    router-view
 </template>
 
 <script setup>
-import { defineAsyncComponent, onMounted, watch } from 'vue'
+import { computed, defineAsyncComponent, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
+import { useRouter, useRoute } from 'vue-router'
 import { useDocsStore } from 'src/stores/docs'
 import { useEditorStore } from 'src/stores/editor'
 import { useUserStore } from 'src/stores/user'
+import AppModeSidebar from 'components/AppModeSidebar.vue'
 
 const $q = useQuasar()
 
 const docsStore = useDocsStore()
 const editorStore = useEditorStore()
 const userStore = useUserStore()
 
+const router = useRouter()
+const route = useRoute()
+
+const currentModeClass = computed(() => {
+  if (route.name === 'editor' && route.query.mode === 'review') {
+    return 'route-review'
+  }
+  return `route-${route.name}`
+})
+
+// WATCHERS
+
 let progressDiag
 let shouldExit = false
 
@@ -109,6 +126,22 @@ watch(() => editorStore.animationEffects, (newValue) => {
   }
 }, { immediate: true })
 
+// -> Handle mode switch
+watch(() => editorStore.mode, (newValue) => {
+  switch (newValue) {
+    case 'submit': {
+      router.push('/submit')
+      break
+    }
+    default: {
+      router.push('/')
+      break
+    }
+  }
+})
+
+// MOUNTED
+
 onMounted(async () => {
   window.ipcBridge.emit('authFetchInfo')
   await editorStore.fetchGitConfig()
@@ -160,3 +193,14 @@ window.onbeforeunload = (ev) => {
 }
 
 </script>
+
+<style lang="scss">
+.app-layout {
+  display: flex;
+}
+.app-main {
+  display: block;
+  flex: 1;
+  position: relative;
+}
+</style>

src/components/AccountMenu.vue

@@ -0,0 +1,49 @@
+<template lang="pug">
+q-btn(v-if='userStore.isLoggedIn' padding="xs sm" flat no-caps)
+  span.text-body2 {{ userStore.profile.name }}
+  q-avatar.q-ml-sm(size='sm' rounded)
+    img(:src='userStore.profile.picture')
+  q-menu(auto-close)
+    q-list.bg-light-blue-9(separator, style='min-width: 180px')
+      q-item.bg-dark-1
+        q-item-section.text-center
+          .text-caption.text-blue-grey-3 Datatracker Account
+          .text-caption.text-blue-grey-2: strong {{ userStore.profile.email }}
+      q-item(clickable, @click='openPrefProfile')
+        q-item-section(side)
+          q-icon(name='mdi-account-cog')
+        q-item-section Profile
+      q-item(clickable, @click='logout')
+        q-item-section(side)
+          q-icon(name='mdi-logout')
+        q-item-section Logout
+q-btn(v-else padding="xs sm" flat no-caps @click='login')
+  span.text-body2 Login
+  q-icon.q-ml-sm(name='mdi-account-circle')
+</template>
+
+<script setup>
+import { defineAsyncComponent } from 'vue'
+import { useQuasar } from 'quasar'
+import { useUserStore } from 'src/stores/user'
+
+const $q = useQuasar()
+
+const userStore = useUserStore()
+
+function openPrefProfile () {
+  $q.dialog({
+    component: defineAsyncComponent(() => import('./PreferencesDialog.vue')),
+    componentProps: {
+      tab: 'profile'
+    }
+  })
+}
+
+function login () {
+  window.ipcBridge.emit('login')
+}
+function logout () {
+  window.ipcBridge.emit('logout')
+}
+</script>

src/components/AppModeSidebar.vue

@@ -1,51 +1,72 @@
 <template lang="pug">
-.app-mode(v-if='editorStore.modeSidebarShown')
+.app-mode
+  q-btn.full-width(
+    icon='mdi-home'
+    size='sm'
+    unelevated
+    :color='currentMode === `welcome` ? `blue-grey` : `dark-1`'
+    dense
+    :to='{ name: `welcome` }'
+    )
   q-btn.full-width(
     v-for='mode of modes'
     :key='mode.key'
     :icon-right='mode.icon'
     unelevated
-    :color='editorStore.mode === mode.key ? mode.color : `dark-1`'
+    :color='currentMode === mode.key ? mode.color : `dark-1`'
     dense
     stack
     :label='mode.label'
     no-caps
-    @click='editorStore.mode = mode.key'
+    :to='mode.target'
+    :disable='mode.needDocument && !docsStore.active'
     )
     q-tooltip(anchor='center right' self='center left') {{ mode.label }} Mode
-  q-btn.full-width(
-    icon='mdi-arrow-collapse-left'
-    flat
-    dense
-    text-color='blue-grey-4'
-    @click='editorStore.modeSidebarShown = false'
-    )
-    q-tooltip(anchor='center right' self='center left') Hide Mode Sidebar
 </template>
 
 <script setup>
-import { useEditorStore } from 'src/stores/editor'
+import { computed } from 'vue'
+import { useDocsStore } from 'src/stores/docs'
+import { useRoute } from 'vue-router'
 
-const editorStore = useEditorStore()
+const docsStore = useDocsStore()
+
+const route = useRoute()
+
+const currentMode = computed(() => {
+  if (route.name === 'editor') {
+    if (route.query.mode === 'review') {
+      return 'review'
+    }
+    return 'write'
+  } else {
+    return route.name
+  }
+})
 
 const modes = [
   {
     key: 'write',
     label: 'Write',
     icon: 'mdi-pencil',
-    color: 'light-green-9'
-  },
-  {
-    key: 'publish',
-    label: 'Publish',
-    icon: 'mdi-send',
-    color: 'light-blue-9'
+    color: 'light-blue-9',
+    target: { name: 'editor', query: { mode: 'write' } },
+    needDocument: true
   },
   {
     key: 'review',
     label: 'Review',
     icon: 'mdi-file-document-check-outline',
-    color: 'indigo-5'
+    color: 'indigo-5',
+    target: { name: 'editor', query: { mode: 'review' } },
+    needDocument: true
+  },
+  {
+    key: 'submit',
+    label: 'Submit',
+    icon: 'mdi-send',
+    color: 'light-green-9',
+    target: { name: 'submit' }
   }
 ]
 </script>
@@ -55,15 +76,40 @@ const modes = [
   flex: 0 0 45px;
   background-color: darken($dark-5, 5%);
   background-image: linear-gradient(to right, $dark-2, $dark-3);
-  border-top: 1px solid $light-blue-5;
+  border-top: 1px solid $blue-grey-5;
   padding: 5px;
   flex-direction: column;
   display: flex;
 
-  > .q-btn {
+  @at-root .route-editor & {
+    border-top-color: $light-blue-5;
+  }
+  @at-root .route-review & {
+    border-top-color: $indigo-3;
+  }
+  @at-root .route-submit & {
+    border-top-color: $light-green-5;
+  }
+
+  > .q-btn:first-child {
+    margin-bottom: 5px;
+    padding: 8px 0;
+  }
+
+  > .q-btn:not(:first-child) {
     margin-bottom: 5px;
     padding: 15px 0;
 
+    &:nth-child(2) {
+      border-bottom: 2px solid $light-blue-6;
+    }
+    &:nth-child(3) {
+      border-bottom: 2px solid $indigo-3;
+    }
+    &:nth-child(4) {
+      border-bottom: 2px solid $light-green;
+    }
+
     .q-btn__content {
       > i {
         font-size: 18px;