feat: drawer pane (files, git, tools, snippets) + app icon

src-electron/electron-main.js

@@ -50,6 +50,8 @@ function createWindow () {
     icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
     width: Math.round(width * 0.9),
     height: Math.round(height * 0.9),
+    minWidth: 1400,
+    minHeight: 600,
     // useContentSize: true,
     center: true,
     frame: true,

src/components/DrawerFiles.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+q-list(padding)
+  q-item-label.text-caption.text-light-blue-3(header): strong Files
+</template>

src/components/DrawerGit.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+q-list(padding)
+  q-item-label.text-caption.text-light-blue-3(header): strong Git
+</template>

src/components/DrawerPane.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+q-drawer.bg-dark-4(
+  :model-value='state.drawerShown'
+  show-if-above
+  persistent
+  :width='350'
+  )
+  q-scroll-area.fit(
+    :horizontal-thumb-style='{ opacity: 0 }'
+    )
+    component(:is='panes[editorStore.drawerPane]')
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useEditorStore } from 'src/stores/editor'
+
+import DrawerFiles from 'src/components/DrawerFiles.vue'
+import DrawerGit from 'src/components/DrawerGit.vue'
+import DrawerTools from 'src/components/DrawerTools.vue'
+import DrawerSnippets from 'src/components/DrawerSnippets.vue'
+
+const editorStore = useEditorStore()
+
+const panes = {
+  DrawerFiles,
+  DrawerGit,
+  DrawerTools,
+  DrawerSnippets
+}
+
+const state = reactive({
+  drawerShown: true
+})
+</script>

src/components/DrawerSnippets.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+q-list(padding)
+  q-item-label.text-caption.text-light-blue-3(header): strong Snippets Library
+</template>

src/components/DrawerTools.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+q-list(padding)
+  q-item-label.text-caption.text-light-blue-3(header): strong Tools
+  q-item(clickable @click='reindent')
+    q-item-section(side)
+      q-icon(name='mdi-page-previous-outline' size='xs' color='light-blue-4')
+    q-item-section
+      q-item-label Reindent
+      q-item-label.text-light-blue-3(caption) Reformat Document Indentation
+</template>
+
+<script setup>
+function reindent () {
+  EVENT_BUS.emit('editorCommand', 'editor.action.reindentlines')
+}
+</script>

src/components/MainToolbar.vue

@@ -1,5 +1,20 @@
 <template lang="pug">
 q-bar.toolbar-main
+  .toolbar-drawer
+    q-btn-group(
+      unelevated
+      stretch
+      v-for='pane of drawerPanes'
+      :key='pane.key'
+      )
+      q-btn(
+        :icon='pane.icon'
+        :color='pane.key === editorStore.drawerPane ? `light-blue-7` : `light-blue-9`'
+        :text-color='pane.key === editorStore.drawerPane ? `white` : `light-blue-3`'
+        no-caps
+        unelevated
+        @click='editorStore.drawerPane = pane.key'
+        )
   .toolbar-docs
     q-btn-group(
       unelevated
@@ -43,10 +58,34 @@ import { defineAsyncComponent } from 'vue'
 import { useQuasar } from 'quasar'
 
 import { useDocsStore } from 'src/stores/docs'
+import { useEditorStore } from 'src/stores/editor'
 
 const docsStore = useDocsStore()
+const editorStore = useEditorStore()
+
 const $q = useQuasar()
 
+const drawerPanes = [
+  {
+    key: 'DrawerFiles',
+    icon: 'mdi-folder-file'
+  },
+  {
+    key: 'DrawerGit',
+    icon: 'mdi-git'
+  },
+  {
+    key: 'DrawerTools',
+    icon: 'mdi-tools'
+  },
+  {
+    key: 'DrawerSnippets',
+    icon: 'mdi-library-shelves'
+  }
+]
+
+// METHODS
+
 function closeDocument (doc) {
   if (doc.isModified) {
     $q.dialog({
@@ -85,11 +124,19 @@ function newDocument () {
   background: radial-gradient(ellipse at bottom, $light-blue-9, darken($light-blue-10, 5%));
   border-bottom: 1px solid $light-blue-5;
 }
+.toolbar-drawer {
+  width: 330px;
+  padding-top: 7px;
+  height: 32px;
+
+  .q-btn {
+    margin-right: 1px;
+  }
+}
 .toolbar-docs {
   height: 32px;
   padding-top: 7px;
   display: flex;
-  padding-left: 48px;
 
   .q-btn-group {
     margin-right: 8px;

src/layouts/MainLayout.vue

@@ -2,45 +2,14 @@
 q-layout(view='hHh lpr fFf')
   q-header
     main-toolbar
-  //- q-drawer.bg-dark-4(
-  //-   :model-value='true'
-  //-   show-if-above
-  //-   :mini='state.miniState'
-  //-   @mouseover='state.miniState = false'
-  //-   @mouseout='state.miniState = true'
-  //-   mini-to-overlay
-  //-   persistent
-  //-   )
-  //-   q-scroll-area.fit(
-  //-     :horizontal-thumb-style='{ opacity: 0 }'
-  //-     )
-  //-     q-list(padding)
-  //-       q-item(clickable)
-  //-         q-item-section(side)
-  //-           q-icon(name='mdi-library-shelves' size='xs' color='light-blue-4')
-  //-         q-item-section
-  //-           q-item-label Library
-  //-           q-item-label.text-light-blue-3(caption) Quick Insert Code Snippets
-  //-       q-separator(inset)
-  //-       q-item(clickable)
-  //-         q-item-section(side)
-  //-           q-icon(name='mdi-page-previous-outline' size='xs' color='light-blue-4')
-  //-         q-item-section
-  //-           q-item-label Reindent
-  //-           q-item-label.text-light-blue-3(caption) Reformat Document Indentation
+  drawer-pane
   footer-toolbar
   q-page-container
     router-view
 </template>
 
 <script setup>
-// import { reactive } from 'vue'
+import DrawerPane from 'src/components/DrawerPane.vue'
 import MainToolbar from 'components/MainToolbar.vue'
 import FooterToolbar from 'components/FooterToolbar.vue'
-
-/* eslint-disable space-before-function-paren */
-
-// const state = reactive({
-//   miniState: true
-// })
 </script>

src/pages/IndexPage.vue

@@ -386,6 +386,9 @@ onMounted(async () => {
     }
   })
 })
+EVENT_BUS.on('editorCommand', cmd => {
+  editor.trigger('drawer', cmd)
+})
 
 async function validateContent () {
   const enc = new TextEncoder()

src/stores/editor.js

@@ -8,7 +8,8 @@ export const useEditorStore = defineStore('editor', {
     line: 1,
     col: 1,
     tabSize: 2,
-    previewPaneShown: true
+    previewPaneShown: true,
+    drawerPane: 'DrawerGit'
   }),
   getters: {
     hasErrors: (state) => state.errors?.length > 0