Redesign

index.html

@@ -21,11 +21,7 @@
     <div id="browser-warn-container"></div>
     <div id="status-app"></div>
     <div class="qmk-hidden-drag-n-drop"></div>
-    <div id="controller">
-      <div id="controller-app">
       <div id="app"></div>
-    </div>
-</div>
     <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -17,26 +17,34 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fontsource/iosevka": "^4.5.2",
     "@fontsource/montserrat": "^4.5.1",
     "@fontsource/roboto": "^4.5.1",
     "@fontsource/roboto-mono": "^4.5.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
     "@fortawesome/free-brands-svg-icons": "^5.6.3",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/vue-fontawesome": "^2",
+    "@vue/composition-api": "^1.4.4",
     "autoprefixer": "^10.4.2",
     "axios": "^0.21",
+    "feather-icons": "4",
     "howler": "^2.1.3",
     "keypress.js": "^2.1.5",
     "lodash": "4.17.21",
+    "pinia": "^2.0.11",
     "v-tooltip": "^2.0.3",
     "vue": "2.6",
+    "vue-feather": "v1",
     "vue-i18n": "^8.10.0",
     "vue-js-toggle-button": "^1.3.2",
     "vue-router": "^3.5.3",
     "vue-select": "^3",
     "vue2-slideout-panel": "^2.2.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "xterm": "^4.16.0",
+    "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-web-links": "^0.5.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^2.2.2",
@@ -46,7 +54,7 @@
     "@vitejs/plugin-vue": "^2.0.1",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "^2.0.0-rc.18",
     "ajv": "^8.6.2",
     "babel-core": "7.0.0-bridge.0",
     "csv-parse": "^4.8.2",
@@ -68,8 +76,10 @@
     "tar": "^6.1.9",
     "vite": "2.9.9",
     "vite-plugin-vue2": "^1.9.2",
+    "vite-plugin-windicss": "^1.6.3",
     "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "windicss": "^3.4.3"
   },
   "resolutions": {
     "glob-parent": "^5.1.2",

src/App.vue

@@ -1,20 +1,18 @@
 <template>
-  <div id="app" @click="dismiss">
-    <span style="display: none">{{ revision }}</span>
-    <div>
-      <header>
+  <div class="mt-5" id="configurator" @click="dismiss">
+    <!-- span style="display: none">{{ revision }}</span-->
+    <!--header>
         <p class="random-potato">{{ potatoFact }}</p>
-      </header>
-      <router-view />
-      <spinner :isVisible="showSpinner" :status="spinnerMsg" />
-      <InfoBar :msg="message" />
-    </div>
+      </header-->
+    <router-view />
+    <spinner :isVisible="showSpinner" :status="spinnerMsg" />
+    <InfoBar :msg="message" />
     <slideout-panel></slideout-panel>
-    <footer>
+    <!-- footer>
       <p>{{ $t('maintain') }}</p>
       <p>{{ $t('hostedOn') }}</p>
       <p style="font-size: 10px">version: {{ revision }}</p>
-    </footer>
+    </footer-->
     <div
       class="help"
       :class="helpClasses"
@@ -200,13 +198,15 @@ export default {
 </script>
 <style lang="scss">
 @import '@/scss/style.scss';
-#app {
+#configurator {
   display: grid;
-  grid-template: 1fr / minmax(1000px, 1300px);
-  justify-content: center;
+  grid-template-columns: minmax(1200px, 1728px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  font-family: 'Roboto';
+  font-weight: 400;
+  font-size: 14px;
 }
 .embedded-tutorial {
   position: fixed;

src/api.js

@@ -1,14 +1,16 @@
 import axios from 'axios';
 import store from './store';
+import { useStatusStore } from '@/stores/status';
 
 import { backend_compile_url } from './store/modules/constants';
 
 let compile_status = undefined;
 let baking = 'Baking';
 
 function statusError(message) {
-  store.commit('status/append', message);
-  store.dispatch('status/scrollToEnd');
+  const statusStore = useStatusStore();
+  statusStore.append(message);
+  statusStore.scrollToEnd();
 }
 
 function compileLayout(_keyboard, _keymapName, _layout) {
@@ -24,22 +26,20 @@ function compileLayout(_keyboard, _keymapName, _layout) {
     })
   );
   console.log(request);
-  if (store.getters['status/empty']) {
-    store.commit('status/append', '\n');
+  const statusStore = useStatusStore();
+  if (statusStore.empty) {
+    statusStore.append('\n');
   }
-  store.commit(
-    'status/append',
-    `* Sending ${_keyboard}:${_keymapName} with ${_layout}`
-  );
+  statusStore.append(`* Sending ${_keyboard}:${_keymapName} with ${_layout}`);
   axios
     .post(backend_compile_url, request)
     .then((resp) => {
       const { status, data } = resp;
       if (status === 200) {
         store.commit('app/setShowSpinner', true);
         if (data.enqueued) {
-          store.commit('status/append', `\n* Received job_id: ${data.job_id}`);
-          store.dispatch('status/scrollToEnd');
+          statusStore.append(`\n* Received job_id: ${data.job_id}`);
+          statusStore.scrollToEnd();
           store.commit('app/setJobID', data.job_id);
           check_status();
         }
@@ -80,6 +80,7 @@ function disableOtherButtons() {
 function check_status() {
   const url = `${backend_compile_url}/${store.state.app.jobID}`;
   const start = performance.now();
+  const statusStore = useStatusStore();
   axios
     .get(url)
     .then((resp) => {
@@ -95,8 +96,7 @@ function check_status() {
         switch (data.status) {
           case 'finished':
             store.commit('app/setSpinnerMsg', 'Done!');
-            store.commit(
-              'status/append',
+            statusStore.append(
               `\n* Finished:\n${data.result.output.replace(/\[.*m/gi, '')}`
             );
             store.commit(
@@ -118,13 +118,13 @@ function check_status() {
           case 'queued':
             store.commit('app/setSpinnerMsg', 'Waiting for Oven');
             msg = compile_status === 'queued' ? ' .' : '\n* Queueing';
-            store.commit('status/append', msg);
+            statusStore.append(msg);
             setTimeout(check_status, pollInterval);
             break;
           case 'running':
             store.commit('app/setSpinnerMsg', baking);
             msg = compile_status === 'running' ? ' .' : '\n* Running';
-            store.commit('status/append', msg);
+            statusStore.append(msg);
             setTimeout(check_status, pollInterval);
             break;
           case 'unknown':

src/components/BaseKey.vue

@@ -27,11 +27,13 @@
 import isUndefined from 'lodash/isUndefined';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 import colorways from './colorways';
-
+import { getPlatform } from '@/util';
+import { mapStores } from 'pinia';
+import { useKeycodesStore } from '@/stores/keycodes';
 let substitute = Object.assign(
   {},
   colorways.iconCodes,
-  colorways.platformIcons(window.navigator.platform)
+  colorways.platformIcons(getPlatform())
 );
 
 const _getKeySizeClass = (unith, unitw) => {
@@ -120,10 +122,10 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useKeycodesStore),
     ...mapState('keymap', ['config']),
     ...mapState('keymap', { curLayer: 'layer' }),
     ...mapGetters('keymap', ['getKey', 'getSelectedKey', 'colorwayOverride']),
-    ...mapGetters('keycodes', ['lookupKeycode']),
     myTitle() {
       return this.meta ? this.meta.code : '';
     },
@@ -145,7 +147,7 @@ export default {
         return;
       }
       if (isUndefined(substitute[this.meta.code])) {
-        const { name } = this.lookupKeycode(this.meta.code);
+        const { name } = this.keycodesStore.lookupKeycode(this.meta.code);
         return this.formatName(name ? name : this.meta.name);
       }
       return undefined;

src/components/ControllerBottom.vue

@@ -125,6 +125,8 @@
 <script>
 import Vue from 'vue';
 import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
+import { mapStores } from 'pinia';
+import { useStatusStore } from '@/stores/status';
 import first from 'lodash/first';
 import isUndefined from 'lodash/isUndefined';
 import { clearKeymapTemplate } from '@/common.js';
@@ -145,6 +147,7 @@ export default {
   name: 'bottom-controller',
   components: { ElectronBottomControls },
   computed: {
+    ...mapStores(useStatusStore),
     ...mapState('keymap', ['templates']),
     ...mapState('app', [
       'keyboard',
@@ -205,14 +208,14 @@ export default {
     ]),
     ...mapMutations('keymap', ['setLoadingKeymapPromise', 'setDirty', 'clear']),
     ...mapMutations('keymap', { clearKeymap: 'clear' }),
-    ...mapMutations('status', ['deferredMessage', 'append']),
-    ...mapMutations('status', { clearStatus: 'clear' }),
+    // ...mapMutations('status', ['deferredMessage', 'append']),
+    // ...mapMutations('status', { clearStatus: 'clear' }),
     ...mapActions('app', [
       'changeKeyboard',
       'loadKeymapFromUrl',
       'loadLayouts'
     ]),
-    ...mapActions('status', ['viewReadme']),
+    // ...mapActions('status', ['viewReadme']),
     ...mapActions('keymap', ['load_converted_keymap']),
     async importUrlkeymap() {
       try {
@@ -390,8 +393,9 @@ export default {
           msg = `${msg}\n${stats.warnings.join('\n')}`;
           msg = `${msg}\n${stats.errors.join('\n')}`;
         }
-        this.deferredMessage(msg);
-        this.viewReadme(this.keyboard).then(() => {
+        await this.statusStore.viewReadme(this.keyboard).then(() => {
+          this.statusStore.append(msg);
+          this.statusStore.scrollToEnd();
           let keymapName = data.keymap;
           if (keymapName.endsWith('.json')) {
             keymapName = keymapName.replace(/.json$/, '');
@@ -465,8 +469,8 @@ export default {
           // clear the keymap data is now responsibility of code that changes layout
           this.clearKeymap();
           this.setKeymapName('info.json preview');
-          this.clearStatus();
-          this.append(
+          this.statusStore.clear();
+          this.statusStore.append(
             [
               'Preview info.json mode\n',
               'For Developers only, working on new keyboards.\n',
@@ -481,10 +485,28 @@ export default {
       }
     },
     printKeymaps() {
-      this.$router.push('/print');
+      this.$router.push('/print').catch((err) => {
+        if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
+          return;
+        }
+        if (isNavigationFailure(err, NavigationFailureType.cancelled)) {
+          return;
+        }
+
+        throw err;
+      });
     },
     testKeys() {
-      this.$router.push('/test');
+      this.$router.push('/test').catch((err) => {
+        if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
+          return;
+        }
+        if (isNavigationFailure(err, NavigationFailureType.cancelled)) {
+          return;
+        }
+
+        throw err;
+      });
     }
   },
   data: () => {

src/components/ControllerTop.vue

@@ -80,6 +80,8 @@
 <script>
 import Vue from 'vue';
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import { mapStores } from 'pinia';
+import { useStatusStore } from '@/stores/status';
 
 import first from 'lodash/first';
 import random from 'lodash/random';
@@ -98,6 +100,7 @@ const { isNavigationFailure, NavigationFailureType } = VueRouter;
 export default {
   name: 'ControllerTop',
   computed: {
+    ...mapStores(useStatusStore),
     ...mapGetters('keymap', ['isDirty']),
     ...mapGetters('app', ['exportKeymapName']),
     ...mapState('app', [
@@ -255,8 +258,8 @@ export default {
                 // This is a dirty hack so that the status message appears both after pressing load default
                 // and switching keyboards. This entire flow needs redesigning as it was written
                 // when I had a poor understanding of vue observability.
-                store.commit('status/append', msg);
-                store.commit('status/deferredMessage', msg);
+                this.statusStore.append(msg);
+                this.statusStore.setDeferredMessage(msg);
               }
             });
             return promise;
@@ -267,6 +270,7 @@ export default {
           statusError(
             `\n* Sorry there is no default for the ${this.keyboard} keyboard... yet!`
           );
+          this.statusStore.scrollToEnd();
           console.log('error loadDefault', error);
         });
     },
@@ -337,9 +341,9 @@ export default {
         this.setFavoriteKeyboard(this.keyboard);
       }
     },
-    postUpdateKeyboard() {
-      this.$store.commit('status/clear');
-      this.$router
+    async postUpdateKeyboard() {
+      // this.statusStore.clear();
+      await this.$router
         .replace({
           path: `/${this.keyboard}/${this.layout}`
         })
@@ -352,7 +356,7 @@ export default {
           }
           throw err;
         });
-      this.$store.dispatch('status/viewReadme', this.keyboard);
+      await this.statusStore.viewReadme(this.keyboard);
       disableOtherButtons();
     },
     /**