Add settings menu

src/App.vue

@@ -12,13 +12,18 @@
           <router-link @click.native="hideMenu" class="btn btn-secondary d-md-none" :to="{ name: 'tags' }">
             <span class="action">tags</span>
           </router-link>
-          <div class="btn btn-menu btn-primary d-flex justify-space-between align-items-center" @click.stop="toggleMenu" role="button" aria-haspopup="true" aria-expanded="false">
+          <div class="btn btn-menu btn-primary d-flex justify-content-between align-items-center ml-2" @click.stop="toggleMenu" role="button" aria-haspopup="true" aria-expanded="false">
             <svg width="0.75em" height="0.75em" viewBox="0 0 16 16" class="bi bi-lightning-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
             </svg>
             <span>actions</span>
             <small class="action-shortcut d-none d-md-block">cmd + k</small>
           </div>
+          <router-link :to="{ name: 'settings' }" class="btn btn-settings pr-2 pl-2 d-flex align-items-center justify-content-center ml-2">
+            <svg width="1.25em" height="1.25em" viewBox="0 0 16 16" class="bi bi-person-lines-fill mr-0" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2 9a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
+            </svg>
+          </router-link>
           <Menu :class="{ hide: !showMenu }" />
         </div>
       </nav>
@@ -330,7 +335,6 @@ a, a:hover {
 .navbar .btn-menu {
   align-items: baseline;
   display: flex;
-  margin-left: 0.5rem;
 }
 
 .action-shortcut {
@@ -455,6 +459,13 @@ a, a:hover {
   color: #aaa;
 }
 
+.btn-settings, .btn-settings:hover, .btn-settings:active, .btn-settings:focus {
+  background-color: #222 !important;
+  border: none;
+  box-shadow: none !important;
+  color: #aaa;
+}
+
 .monospace {
   font-family: 'Fira Mono', monospace !important;
 }
@@ -489,6 +500,11 @@ pre {
   display: none !important;
 }
 
+hr {
+  background-color: #aaa;
+  margin-top: 0.5rem;
+}
+
 svg:not(.close-context) {
   flex-shrink: 0;
   margin-right: 0.5em;

src/components/MarkdownEditor.vue

@@ -31,6 +31,12 @@ export default {
         cursor.hasOwnProperty('character') && cursor.hasOwnProperty('line')
       ),
     },
+    settings: {
+      type: Object,
+      default: () => ({
+        // nothing yet
+      }),
+    },
     value: String,
   },
   data() {
@@ -54,17 +60,18 @@ export default {
             if (instance.somethingSelected()) {
               instance.indentSelection('add');
             } else {
-              instance.replaceSelection(Array(instance.getOption('indentUnit') + 1).join(' '), 'end', '+input');
+              instance.replaceSelection(Array(instance.getOption('tabSize') + 1).join(' '), 'end', '+input');
             }
           },
         },
+        indentUnit: this.settings.tabSize || 2,
         indentWithTabs: false,
         lineWrapping: true,
         mode: {
           name: 'gfm',
         },
         singleCursorHeightPerLine: true,
-        tabSize: 2,
+        tabSize: this.settings.tabSize || 2,
         theme: 'yeti',
       };
     },

src/components/TheEditor.vue

@@ -2,7 +2,7 @@
   <div class="container-lg">
     <div class="editor" @click="focusEditor">
       <div class="gutter gutter-start" :class="{ 'md-plus': mediumPlus }" @click="focusEditorStart"></div>
-      <MarkdownEditor ref="editable" class="editable" :initialCursor="initialCursor" :value="document.text" @input="input" @ready="onReady" />
+      <MarkdownEditor ref="editable" class="editable" :initialCursor="initialCursor" :settings="settings" :value="document.text" @input="input" @ready="onReady" />
       <div class="gutter gutter-end expand" :class="{ 'md-plus': mediumPlus }" @click="focusEditorEnd"></div>
       <div class="document-actions">
         <DiscardableAction v-if="document.clientId" :discardedAt="document.discardedAt" :onDiscard="discardDocument" :onRestore="restoreDocument" class="destroy"></DiscardableAction>
@@ -80,6 +80,9 @@ export default {
     mediumPlus() {
       return ['md', 'lg', 'xl'].includes(this.$mq);
     },
+    settings() {
+      return this.$store.state.settings.editor;
+    },
     savedAt() {
       if (this.document.updatedAt) {
         if (this.now.diff(this.document.updatedAt, 'seconds') < 5) {

src/components/TheSettings.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container context mt-3 mt-md-5">
+    <div>
+      <h3 class="card-title">Settings</h3>
+      <h6 class="card-subtitle text-muted font-weight-normal mb-3">Make yourself comfortable</h6>
+      <section>
+        <h4 class="font-weight-normal">Editor</h4>
+        <hr>
+        <div class="form-group">
+          <label for="config-tab-size">Tab length</label>
+          <input v-model="tabSize" type="number" min="2" id="config-tab-size" class="form-control">
+          <small class="text-muted">Number of spaces per tab (minimum: 2)</small>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  SET_EDITOR_TAB_SIZE,
+} from '@/store/modules/settings';
+
+export default {
+  name: 'TheSettings',
+  data() {
+    return {
+      // nothing yet
+    };
+  },
+  computed: {
+    tabSize: {
+      get() {
+        return this.$store.state.settings.editor.tabSize;
+      },
+      set(value) {
+        this.$store.dispatch(SET_EDITOR_TAB_SIZE, parseInt(value) || 2);
+      },
+    },
+  },
+};
+</script>

src/router.js

@@ -8,6 +8,7 @@ import Dashboard from './views/Dashboard.vue';
 import Context from './components/Context.vue';
 import DocumentList from './components/DocumentList.vue';
 import TheEditor from './components/TheEditor.vue';
+import TheSettings from './components/TheSettings.vue';
 import TagList from './components/TagList.vue';
 
 
@@ -95,6 +96,12 @@ const router = new Router({
           component: TagList,
           props: true,
         },
+        // settings
+        {
+          path: 'settings',
+          name: 'settings',
+          component: TheSettings,
+        },
       ],
     },
   ],

src/store.js

@@ -5,10 +5,16 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import documents from '@/store/modules/documents';
-import cachePlugin from '@/store/plugins/cache';
 import router from '@/router';
 
+// modules
+import documentsModule from '@/store/modules/documents';
+import settingsModule from '@/store/modules/settings';
+
+// plugins
+import documentsCachingPlugin from '@/store/plugins/caching/documents';
+import settingsCachingPlugin from '@/store/plugins/caching/settings';
+
 import {
   ACTIVATE_CONTEXT,
   BLUR_EDITOR,
@@ -147,9 +153,11 @@ export default new Vuex.Store({
     },
   },
   modules: {
-    documents,
+    documents: documentsModule,
+    settings: settingsModule,
   },
   plugins: [
-    cachePlugin,
+    documentsCachingPlugin,
+    settingsCachingPlugin,
   ],
 });

src/store/modules/settings.js

@@ -0,0 +1,30 @@
+export const LOAD_SETTINGS = 'LOAD_SETTINGS';
+export const SET_EDITOR_TAB_SIZE = 'SET_EDITOR_TAB_SIZE';
+
+export default {
+  state: () => ({
+    editor: {
+      tabSize: 2,
+    },
+  }),
+  getters: {
+    // nothing yet
+  },
+  mutations: {
+    [LOAD_SETTINGS] (state, settings) {
+      // shallow merge
+      Object.assign(state, settings);
+    },
+    [SET_EDITOR_TAB_SIZE] (state, tabSize) {
+      state.editor.tabSize = tabSize;
+    },
+  },
+  actions: {
+    async [LOAD_SETTINGS] (context, settings) {
+      context.commit(LOAD_SETTINGS, settings);
+    },
+    async [SET_EDITOR_TAB_SIZE] (context, tabSize) {
+      context.commit(SET_EDITOR_TAB_SIZE, tabSize);
+    },
+  },
+};

src/store/plugins/caching/settings.js

@@ -0,0 +1,30 @@
+import localforage from 'localforage';
+
+import {
+  LOAD_SETTINGS,
+  SET_EDITOR_TAB_SIZE,
+} from '@/store/modules/settings';
+
+const CACHE_KEY = 'main';
+const cache = localforage.createInstance({
+  name: 'settings',
+});
+
+export default (store) => {
+  cache.getItem(CACHE_KEY).then((settings) => {
+    if (settings) {
+      store.dispatch(LOAD_SETTINGS, settings);
+    }
+  });
+
+  store.subscribe(({ type, _payload }, state) => {
+    switch (type) {
+      case SET_EDITOR_TAB_SIZE:
+        cache.setItem(CACHE_KEY, state.settings);
+
+        break;
+      default:
+        break;
+    }
+  });
+};