From f74513eff5db00d89803184a6fb5f28ec0301ab6 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 19 Jan 2022 21:00:23 -0800
Subject: [PATCH 01/39] Add Windi-css

---
 package.json   |   4 +-
 src/main.js    |   3 +
 vite.config.js |   3 +-
 yarn.lock      | 154 +++++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 157 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 45cfa71110..c47a189156 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,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",
diff --git a/src/main.js b/src/main.js
index f455cc128f..3b2df5e0ef 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,9 @@ import '@fontsource/roboto-mono/400.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/700.css';
 import '@fontsource/montserrat/400.css';
+import 'virtual:windi.css';
+import 'virtual:windi-devtools';
+
 
 Vue.use(VueI18n);
 Vue.use(VTooltip);
diff --git a/vite.config.js b/vite.config.js
index 6b400262e9..54dcbd3fcf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,10 +2,11 @@
 const path = require('path');
 import { defineConfig } from 'vite';
 import { createVuePlugin as vue } from 'vite-plugin-vue2';
+import WindiCSS from 'vite-plugin-windicss';
 import CSV from './scripts/i18n/loader.js';
 
 export default defineConfig({
-  plugins: [vue(), CSV()],
+  plugins: [vue(), CSV(), WindiCSS()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')
diff --git a/yarn.lock b/yarn.lock
index 897d56a456..7d76e1cb48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,21 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
+"@antfu/utils@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.4.0.tgz#df100ed9922d7359bf6c99083765b5207086b9a7"
+  integrity sha512-gqkpvjkgFUu+s3kP+Ly33OKpo5zvVY3FDFhv5BIb98SncS3KD6DNxPfNDjwHIoyXbz1leWo1j8DtRLZ1D2Jv+Q==
+  dependencies:
+    "@types/throttle-debounce" "^2.1.0"
+
+"@babel/code-frame@^7.0.0":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/code-frame@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@@ -256,6 +270,15 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/highlight@^7.14.5":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351"
+  integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/highlight@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
@@ -1154,6 +1177,27 @@
     prettier "^2.0.4"
     rxjs "^6.6.3"
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
 "@npmcli/fs@^1.0.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"
@@ -1240,6 +1284,11 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
 "@types/yauzl@^2.9.1":
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
@@ -1607,6 +1656,28 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
+"@windicss/config@1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.6.3.tgz#eff67eecc763d0080995068608d483799413bc82"
+  integrity sha512-1kjdy4tyYLD4sCB4DS+3Lt1Odnde03z4Rz3EUqyWJ7SiBEWMgRk1L797SsgEH4+W1DjLBZLs1SVYzaTO/3UdJA==
+  dependencies:
+    debug "^4.3.3"
+    jiti "^1.12.9"
+    windicss "^3.4.3"
+
+"@windicss/plugin-utils@1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.6.3.tgz#b321804b4e84e7a20a5c79f50c7fd83eb8202917"
+  integrity sha512-tY20pAdV8YOlCj/5Teh078n/YbekbE5qOmlNgcl+S10KqitUGB9+Qss/xE0HULACmCXBO9XeLUcAPGao79lAnA==
+  dependencies:
+    "@antfu/utils" "^0.4.0"
+    "@windicss/config" "1.6.3"
+    debug "^4.3.3"
+    fast-glob "^3.2.11"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.4.3"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2522,7 +2593,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@~3.0.2:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -3279,7 +3350,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@4, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
+debug@4, debug@^4.1.1:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3293,7 +3364,7 @@ debug@4.3.2, debug@^4.1.0:
   dependencies:
     ms "2.1.2"
 
-debug@4.3.3:
+debug@4.3.3, debug@^4.3.2, debug@^4.3.3:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
   integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
@@ -4018,6 +4089,17 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-glob@^3.2.11:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -4028,6 +4110,13 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -5019,6 +5108,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+jiti@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
+  integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
+
 joi@^17.4.0:
   version "17.4.2"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.2.tgz#02f4eb5cf88e515e614830239379dcbbe28ce7f7"
@@ -5196,6 +5290,11 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kolorist@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.5.1.tgz#c3d66dc4fabde4f6b7faa6efda84c00491f9e52b"
+  integrity sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
+
 launch-editor@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.3.0.tgz#23b2081403b7eeaae2918bda510f3535ccab0ee4"
@@ -5477,6 +5576,11 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -5496,6 +5600,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -6181,7 +6293,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -6444,6 +6556,11 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
@@ -6742,6 +6859,11 @@ retry@^0.12.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
   integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
 
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 rfdc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
@@ -6783,6 +6905,13 @@ rollup@^2.59.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -7815,6 +7944,16 @@ vite-plugin-vue2@^1.9.2:
     source-map "^0.7.3"
     vue-template-es2015-compiler "^1.9.1"
 
+vite-plugin-windicss@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.6.3.tgz#64afa460eaff610a376e320c450ec79d0b6f6330"
+  integrity sha512-D4fEUcAPoLRLdDZMee8NrHZHmn0Qj7AjSg1xNGBnZsMTwRPj93NKZk0fIIUoiKTEh1KrdQejW8g6cg0SgGKTww==
+  dependencies:
+    "@windicss/plugin-utils" "1.6.3"
+    debug "^4.3.3"
+    kolorist "^1.5.1"
+    windicss "^3.4.3"
+
 vite@2.9.9:
   version "2.9.9"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.9.tgz#8b558987db5e60fedec2f4b003b73164cb081c5e"
@@ -8020,6 +8159,11 @@ wide-align@^1.1.2, wide-align@^1.1.5:
   dependencies:
     string-width "^1.0.2 || 2 || 3 || 4"
 
+windicss@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.4.3.tgz#347d09fee8eb6b3fc5e6e68b435c76ccb24a748c"
+  integrity sha512-UnugThsvEgy8RsPm4/B5DYMCAqvZzD6yWU7Anh+f07t5RSJ8zvmAylGLbXrHPJEmCKzo2Mf+fOUvISH7IJqM3A==
+
 word-wrap@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"

From fafbcfeecade4152448daa4a13896585a1e4d81c Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 19 Jan 2022 21:19:14 -0800
Subject: [PATCH 02/39] Placeholder route for redesign

---
 src/router/index.js   |  4 +++-
 src/views/NewHome.vue | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/views/NewHome.vue

diff --git a/src/router/index.js b/src/router/index.js
index f17f80ae91..efbcfd6509 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 const Home = () => import('@/views/Home.vue');
 const Print = () => import('@/views/Print.vue');
 const Test = () => import('@/views/Test.vue');
+const NewHome = () => import('@/views/NewHome.vue');
 
 Vue.use(VueRouter);
 
@@ -11,6 +12,7 @@ export default new VueRouter({
     { path: '/:keyboardP(.+)/:layoutP(.+)', component: Home, name: 'home' },
     { path: '/print', component: Print, name: 'print' },
     { path: '/test', component: Test, name: 'test' },
-    { path: '*', component: Home }
+    { path: '*', component: Home },
+    { path: '/new', component: NewHome }
   ]
 });
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
new file mode 100644
index 0000000000..7acfcd2c47
--- /dev/null
+++ b/src/views/NewHome.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>New Configurator Goes Here</div>
+</template>
+
+<script>
+export default {
+  name: 'configuratorTwo',
+  components: {},
+  methods: {}
+};
+</script>
+<style>
+</style>

From fd80438ce32244297c6c1183c49068e45b35098f Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Sun, 29 May 2022 09:17:12 -0700
Subject: [PATCH 03/39] Experiment with templates and Slots

 - layouts predefined based on N A X redesign
---
 package.json                                  |  1 +
 src/components/layouts/ConfiguratorLayout.vue | 18 ++++++++++++++++++
 src/views/NewHome.vue                         | 12 ++++++++----
 yarn.lock                                     | 15 +++++++++++----
 4 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 src/components/layouts/ConfiguratorLayout.vue

diff --git a/package.json b/package.json
index c47a189156..559bdb938e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@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",
     "howler": "^2.1.3",
diff --git a/src/components/layouts/ConfiguratorLayout.vue b/src/components/layouts/ConfiguratorLayout.vue
new file mode 100644
index 0000000000..8450fb09d9
--- /dev/null
+++ b/src/components/layouts/ConfiguratorLayout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="">
+    <div>
+      <slot name="topbar" />
+    </div>
+    <main class=""><slot name="application" /></main>
+    <footer>
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 7acfcd2c47..dc64dae7fb 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -1,13 +1,17 @@
 <template>
-  <div>New Configurator Goes Here</div>
+  <configurator-layout class="h-100">
+    <template #topbar>New Configurator Goes Here</template>
+    <template #application>Application Goes Here</template>
+    <template #footer>Footer Here</template>
+  </configurator-layout>
 </template>
 
 <script>
+import ConfiguratorLayout from '@/components/layouts/ConfiguratorLayout.vue';
 export default {
   name: 'configuratorTwo',
-  components: {},
+  components: { ConfiguratorLayout },
   methods: {}
 };
 </script>
-<style>
-</style>
+<style></style>
diff --git a/yarn.lock b/yarn.lock
index 7d76e1cb48..4f066cbcb5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,6 +1486,13 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.4.4.tgz#42cfbe6e3c0dc16100d725cdb0ea1c443919cc7a"
+  integrity sha512-0AMpkSy28NG1BUqTPXLfQzJUnjSp+qUa4jaG7A2FBRSKHJOl1g10/xvNb44+OW5Jg9f79zKOb7PYhFhJG2vLyQ==
+  dependencies:
+    tslib "^2.3.1"
+
 "@vue/eslint-config-prettier@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
@@ -7676,10 +7683,10 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+tslib@^2.1.0, tslib@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tslib@~2.1.0:
   version "2.1.0"

From 046d499bd3db1bd171dbd61d6a3679eeaff33ffa Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 19 Jan 2022 21:48:58 -0800
Subject: [PATCH 04/39] Experiment with templates and Slots

 - layouts predefined based on N A X redesign
---
 src/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 3b2df5e0ef..8cb486bafb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,6 @@ import '@fontsource/montserrat/400.css';
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
 
-
 Vue.use(VueI18n);
 Vue.use(VTooltip);
 

From b65745445b1ecba64909583684a8088c65ac5990 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 11:55:29 -0800
Subject: [PATCH 05/39] Prototype the Layout components

 - I may need to rip the whole infrastructure down as the existing style
   sheet is currently dominant
 - overall the slots and templates seem to work, but there are issues
   where the child components are being used correctly for sizing. It
   could be their positioning.
---
 src/components/layouts/ConfiguratorLayout.vue | 22 ++++++++++------
 src/components/layouts/DefaultLayout.vue      | 18 +++++++++++++
 src/components/layouts/InfoBarLayout.vue      | 16 ++++++++++++
 src/components/redesign/InfoBar.vue           | 22 ++++++++++++++++
 src/views/NewHome.vue                         | 25 +++++++++++++++----
 windi.config.js                               | 16 ++++++++++++
 6 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 src/components/layouts/DefaultLayout.vue
 create mode 100644 src/components/layouts/InfoBarLayout.vue
 create mode 100644 src/components/redesign/InfoBar.vue
 create mode 100644 windi.config.js

diff --git a/src/components/layouts/ConfiguratorLayout.vue b/src/components/layouts/ConfiguratorLayout.vue
index 8450fb09d9..6197f0c8a4 100644
--- a/src/components/layouts/ConfiguratorLayout.vue
+++ b/src/components/layouts/ConfiguratorLayout.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="">
-    <div>
-      <slot name="topbar" />
+  <div class="grid grid-cols-12 grid-rows-configurator">
+    <div class="col-span-4">
+      <slot name="controlpanel"> CONTROL PANEL </slot>
+    </div>
+    <div class="col-span-7">
+      <slot name="keyboardlayout"> KEYBOARD LAYOUT </slot>
+    </div>
+    <div class="col-span-1">
+      <slot name="layerpicker">Layer Picker</slot>
+    </div>
+    <div class="col-span-4">
+      <slot name="about">ABOUT</slot>
+    </div>
+    <div class="col-span-8">
+      <slot name="keycodes">KEYCODES</slot>
     </div>
-    <main class=""><slot name="application" /></main>
-    <footer>
-      <slot name="footer" />
-    </footer>
   </div>
 </template>
 <script>
diff --git a/src/components/layouts/DefaultLayout.vue b/src/components/layouts/DefaultLayout.vue
new file mode 100644
index 0000000000..5e070771f3
--- /dev/null
+++ b/src/components/layouts/DefaultLayout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="rounded-lg mt-3 bg-white-app text-black p-4 min-h-max">
+    <div>
+      <slot name="topbar" />
+    </div>
+    <main class=""><slot name="application" /></main>
+    <footer>
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/components/layouts/InfoBarLayout.vue b/src/components/layouts/InfoBarLayout.vue
new file mode 100644
index 0000000000..d14ea8565e
--- /dev/null
+++ b/src/components/layouts/InfoBarLayout.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="grid grid-cols-infobar">
+    <div class="text-left"><slot name="branding" /></div>
+    <div class=""><slot name="service" /></div>
+    <div class=""><slot name="help" /></div>
+    <div class=""><slot name="settings" /></div>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'info-bar-layout',
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/InfoBar.vue b/src/components/redesign/InfoBar.vue
new file mode 100644
index 0000000000..47530e5a27
--- /dev/null
+++ b/src/components/redesign/InfoBar.vue
@@ -0,0 +1,22 @@
+<template>
+  <info-bar-layout>
+    <template #branding>QMK Configurator</template>
+    <template #service>Service ready</template>
+    <template #help>
+      <font-awesome-icon icon="question-circle" size="lg" />
+    </template>
+    <template #settings>
+      <font-awesome-icon icon="cog" size="lg" />
+    </template>
+  </info-bar-layout>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+import InfoBarLayout from '@/components/layouts/InfoBarLayout.vue';
+
+export default defineComponent({
+  components: { InfoBarLayout },
+  name: 'info-bar',
+  setup() {}
+});
+</script>
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index dc64dae7fb..58a0da8b91 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -1,16 +1,31 @@
 <template>
-  <configurator-layout class="h-100">
-    <template #topbar>New Configurator Goes Here</template>
-    <template #application>Application Goes Here</template>
+  <default-layout class="h-100">
+    <template #topbar><info-bar /></template>
+    <template #application>
+      <configurator-layout>
+        <template #about
+          ><div class="align-bottom text-left">
+            This project is maintained by QMK Collaborators and contributors
+            like you!<br />&nbsp;<br />Hosted on GitHub Pages<br />&nbsp;<br />Version:
+            dev
+          </div></template
+        >
+        <template #keycodes>
+          <div class="rounded-lg bg-white-panel h-full w-full"></div>
+        </template>
+      </configurator-layout>
+    </template>
     <template #footer>Footer Here</template>
-  </configurator-layout>
+  </default-layout>
 </template>
 
 <script>
+import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
+import InfoBar from '@/components/redesign/InfoBar.vue';
 import ConfiguratorLayout from '@/components/layouts/ConfiguratorLayout.vue';
 export default {
   name: 'configuratorTwo',
-  components: { ConfiguratorLayout },
+  components: { DefaultLayout, InfoBar, ConfiguratorLayout },
   methods: {}
 };
 </script>
diff --git a/windi.config.js b/windi.config.js
new file mode 100644
index 0000000000..c843f9b474
--- /dev/null
+++ b/windi.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  theme: {
+    extend: {
+      gridTemplateColumns: {
+        infobar: 'minmax(50vw, 1fr) minmax(20vw, 1fr) 1fr 1fr'
+      },
+      gridTemplateRows: {
+        configurator: 'minmax(45vh, 1fr) minmax(45vh, 1fr)'
+      },
+      colors: {
+        'white-panel': '#CCD9F7',
+        'white-app': '#ECF2FF'
+      }
+    }
+  }
+};

From fb69c94406beedd95a0e05717c7c5efe4625718a Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 12:13:44 -0800
Subject: [PATCH 06/39] Use grid gap instead of explicit heights

---
 src/components/layouts/ConfiguratorLayout.vue |  2 +-
 src/views/NewHome.vue                         | 19 +++++++++++++++----
 windi.config.js                               |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/layouts/ConfiguratorLayout.vue b/src/components/layouts/ConfiguratorLayout.vue
index 6197f0c8a4..4a3ece35a2 100644
--- a/src/components/layouts/ConfiguratorLayout.vue
+++ b/src/components/layouts/ConfiguratorLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-12 grid-rows-configurator">
+  <div class="grid grid-cols-12 grid-rows-configurator gap-4">
     <div class="col-span-4">
       <slot name="controlpanel"> CONTROL PANEL </slot>
     </div>
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 58a0da8b91..250e5612ec 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -3,11 +3,22 @@
     <template #topbar><info-bar /></template>
     <template #application>
       <configurator-layout>
+        <template #controlpanel>
+          <div class="h-100"></div>
+        </template>
+        <template #keyboardlayout
+          ><div class="rounded-lg bg-white-panel h-100"></div
+        ></template>
+        <template #layerpicker>
+          <div class="rounded-lg bg-white-panel h-100"></div>
+        </template>
         <template #about
-          ><div class="align-bottom text-left">
-            This project is maintained by QMK Collaborators and contributors
-            like you!<br />&nbsp;<br />Hosted on GitHub Pages<br />&nbsp;<br />Version:
-            dev
+          ><div class="relative h-100 w-100">
+            <div class="absolute bottom-0 left-0 text-black text-left">
+              This project is maintained by QMK Collaborators and contributors
+              like you!<br />&nbsp;<br />Hosted on GitHub Pages<br />&nbsp;<br />Version:
+              dev
+            </div>
           </div></template
         >
         <template #keycodes>
diff --git a/windi.config.js b/windi.config.js
index c843f9b474..200922657d 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -5,7 +5,7 @@ module.exports = {
         infobar: 'minmax(50vw, 1fr) minmax(20vw, 1fr) 1fr 1fr'
       },
       gridTemplateRows: {
-        configurator: 'minmax(45vh, 1fr) minmax(45vh, 1fr)'
+        configurator: '1fr 1fr'
       },
       colors: {
         'white-panel': '#CCD9F7',

From 9473aaa00a6a450a4b5ffbf4e1384dfabeac1757 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 15:31:07 -0800
Subject: [PATCH 07/39] Remove stuff to get new stuff working

 - setup overall page layout
 - try out approaches for separating layout from components
---
 index.html                                 |  4 ----
 src/App.vue                                | 26 ++++++++++------------
 src/components/layouts/DefaultLayout.vue   |  8 +++----
 src/components/layouts/InfoBarLayout.vue   | 10 ++++-----
 src/components/layouts/StatusBarLayout.vue | 15 +++++++++++++
 src/components/redesign/InfoBar.vue        | 11 +++------
 src/components/redesign/StatusBar.vue      | 19 ++++++++++++++++
 src/main.js                                |  2 ++
 src/views/NewHome.vue                      |  4 ++--
 windi.config.js                            |  3 +--
 10 files changed, 63 insertions(+), 39 deletions(-)
 create mode 100644 src/components/layouts/StatusBarLayout.vue
 create mode 100644 src/components/redesign/StatusBar.vue

diff --git a/index.html b/index.html
index f874a7a403..45e06d6e8c 100644
--- a/index.html
+++ b/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>
diff --git a/src/App.vue b/src/App.vue
index 95f0daa95c..d6721d5d4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,18 @@
 <template>
-  <div id="app" @click="dismiss">
-    <span style="display: none">{{ revision }}</span>
-    <div>
-      <header>
+  <div 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,10 +198,10 @@ 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-rows: 1fr;
+  grid-template-columns: minmax(1200px, 1728px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/components/layouts/DefaultLayout.vue b/src/components/layouts/DefaultLayout.vue
index 5e070771f3..9dbae53ec0 100644
--- a/src/components/layouts/DefaultLayout.vue
+++ b/src/components/layouts/DefaultLayout.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="rounded-lg mt-3 bg-white-app text-black p-4 min-h-max">
-    <div>
-      <slot name="topbar" />
+  <div class="rounded-lg bg-white-app text-black pr-4 pl-4 min-h-max pt-2 pb-2">
+    <div class="m-2">
+      <slot name="infobar" />
     </div>
-    <main class=""><slot name="application" /></main>
+    <div class="gap-0"><slot name="application" /></div>
     <footer>
       <slot name="footer" />
     </footer>
diff --git a/src/components/layouts/InfoBarLayout.vue b/src/components/layouts/InfoBarLayout.vue
index d14ea8565e..24c7a781eb 100644
--- a/src/components/layouts/InfoBarLayout.vue
+++ b/src/components/layouts/InfoBarLayout.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="grid grid-cols-infobar">
-    <div class="text-left"><slot name="branding" /></div>
-    <div class=""><slot name="service" /></div>
-    <div class=""><slot name="help" /></div>
-    <div class=""><slot name="settings" /></div>
+  <div class="grid grid-cols-2">
+    <div class="flex flex-row items-center p-0 text-left">
+      <slot name="branding" />
+    </div>
+    <div><slot name="statusbar" /></div>
   </div>
 </template>
 <script>
diff --git a/src/components/layouts/StatusBarLayout.vue b/src/components/layouts/StatusBarLayout.vue
new file mode 100644
index 0000000000..2b7efcc053
--- /dev/null
+++ b/src/components/layouts/StatusBarLayout.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-row flex-end items-center static justify-end">
+    <div class="text-right mr-2"><slot name="service" /></div>
+    <div class="m-3 flex-none"><slot name="help" /></div>
+    <div class="m-3 flex-none"><slot name="settings" /></div>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'status-bar',
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/InfoBar.vue b/src/components/redesign/InfoBar.vue
index 47530e5a27..62089c3b11 100644
--- a/src/components/redesign/InfoBar.vue
+++ b/src/components/redesign/InfoBar.vue
@@ -1,21 +1,16 @@
 <template>
   <info-bar-layout>
     <template #branding>QMK Configurator</template>
-    <template #service>Service ready</template>
-    <template #help>
-      <font-awesome-icon icon="question-circle" size="lg" />
-    </template>
-    <template #settings>
-      <font-awesome-icon icon="cog" size="lg" />
-    </template>
+    <template #statusbar><status-bar /></template>
   </info-bar-layout>
 </template>
 <script>
 import { defineComponent } from '@vue/composition-api';
 import InfoBarLayout from '@/components/layouts/InfoBarLayout.vue';
+import StatusBar from '@/components/redesign/StatusBar.vue';
 
 export default defineComponent({
-  components: { InfoBarLayout },
+  components: { InfoBarLayout, StatusBar },
   name: 'info-bar',
   setup() {}
 });
diff --git a/src/components/redesign/StatusBar.vue b/src/components/redesign/StatusBar.vue
new file mode 100644
index 0000000000..968e18e355
--- /dev/null
+++ b/src/components/redesign/StatusBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <status-bar-layout>
+    <template #service>Service ready</template>
+    <template #help>
+      <font-awesome-icon icon="question-circle" size="lg" />
+    </template>
+    <template #settings>
+      <font-awesome-icon icon="cog" size="lg" />
+    </template>
+  </status-bar-layout>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+import StatusBarLayout from '@/components/layouts/StatusBarLayout.vue';
+export default defineComponent({
+  components: { StatusBarLayout },
+  setup() {}
+});
+</script>
diff --git a/src/main.js b/src/main.js
index 8cb486bafb..a8fde422a1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -120,6 +120,7 @@ new Vue({
   render: (h) => h(App)
 }).$mount('#app');
 
+/*
 new Vue({
   i18n,
   store,
@@ -130,3 +131,4 @@ new Vue({
   i18n,
   render: (h) => h(BrowserWarn)
 }).$mount('#browser-warn-container');
+*/
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 250e5612ec..c4be8cc478 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -1,6 +1,6 @@
 <template>
-  <default-layout class="h-100">
-    <template #topbar><info-bar /></template>
+  <default-layout>
+    <template #infobar><info-bar /></template>
     <template #application>
       <configurator-layout>
         <template #controlpanel>
diff --git a/windi.config.js b/windi.config.js
index 200922657d..902fe79130 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,11 +1,10 @@
 module.exports = {
   theme: {
+    darkMode: 'class',
     extend: {
       gridTemplateColumns: {
-        infobar: 'minmax(50vw, 1fr) minmax(20vw, 1fr) 1fr 1fr'
       },
       gridTemplateRows: {
-        configurator: '1fr 1fr'
       },
       colors: {
         'white-panel': '#CCD9F7',

From 792646b9baa72ea294dd69d49987ea98223bd2d7 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 17:27:03 -0800
Subject: [PATCH 08/39] Place holders

---
 src/components/redesign/ControlPanel.vue | 81 ++++++++++++++++++++++++
 src/views/NewHome.vue                    |  5 +-
 2 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 src/components/redesign/ControlPanel.vue

diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
new file mode 100644
index 0000000000..ff0970ceda
--- /dev/null
+++ b/src/components/redesign/ControlPanel.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="h-full w-full">
+    <div class="flex flex-col w-full gap-2">
+      <div
+        class="
+          w-full
+          h-56px
+          p-8px
+          flex flex-row
+          justify-between
+          bg-white-panel
+          rounded-lg
+        "
+      >
+        <button class="btn btn-blue">Upload .JSON</button>
+        <button class="btn btn-blue-2">Import URL</button>
+      </div>
+      <div class="w-full flex flex-row p-0 h-40px gap-1 justify-between">
+        <button class="btn flex-grow bg-white-panel">KEYMAP.JSON</button>
+        <button class="btn flex-grow bg-white-panel">View Raw Data</button>
+        <button class="btn bg-white-panel">Print</button>
+      </div>
+      <div
+        class="
+          w-full
+          h-84px
+          border-blue-100
+          text-left
+          p-8px
+          border-2 border-solid
+          rounded-lg
+        "
+      >
+        Potato Facts
+      </div>
+      <div
+        class="
+          w-full
+          flex flex-row
+          h-56px
+          rounded-lg
+          bg-white-panel
+          p-8px
+          justify-between
+        "
+      >
+        <button class="btn flex-grow">Compile</button>
+        <button class="btn flex-grow">Firmware</button>
+        <button class="btn flex-grow">Full Source</button>
+      </div>
+      <div class="rounded-lg w-full flex flex-row gap-1">
+        <button class="btn rounded-lg flex-grow bg-white-panel">
+          Get QMK Toolbox
+        </button>
+        <button class="btn rounded-lg flex-grow bg-white-panel">
+          Questions?
+        </button>
+        <button class="btn rounded-lg bg-white-panel">Discord</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
+<style>
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue-2 {
+  @apply bg-blue-300 text-white;
+  @apply text-blue-600;
+}
+</style>
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index c4be8cc478..8943f4e929 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -4,7 +4,7 @@
     <template #application>
       <configurator-layout>
         <template #controlpanel>
-          <div class="h-100"></div>
+          <control-panel />
         </template>
         <template #keyboardlayout
           ><div class="rounded-lg bg-white-panel h-100"></div
@@ -34,9 +34,10 @@
 import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
 import InfoBar from '@/components/redesign/InfoBar.vue';
 import ConfiguratorLayout from '@/components/layouts/ConfiguratorLayout.vue';
+import ControlPanel from '@/components/redesign/ControlPanel.vue';
 export default {
   name: 'configuratorTwo',
-  components: { DefaultLayout, InfoBar, ConfiguratorLayout },
+  components: { DefaultLayout, InfoBar, ConfiguratorLayout, ControlPanel },
   methods: {}
 };
 </script>

From dfebfb393a60ab0a055cf0c8e10ec589cc79cfdc Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 17:41:30 -0800
Subject: [PATCH 09/39] Extract Individual Controls

---
 src/components/redesign/CompileControl.vue | 24 +++++++
 src/components/redesign/ControlPanel.vue   | 73 +++++-----------------
 src/components/redesign/ExportControl.vue  | 14 +++++
 src/components/redesign/ExtraLinks.vue     | 16 +++++
 src/components/redesign/ImportControl.vue  | 23 +++++++
 src/components/redesign/PotatoFacts.vue    | 22 +++++++
 6 files changed, 116 insertions(+), 56 deletions(-)
 create mode 100644 src/components/redesign/CompileControl.vue
 create mode 100644 src/components/redesign/ExportControl.vue
 create mode 100644 src/components/redesign/ExtraLinks.vue
 create mode 100644 src/components/redesign/ImportControl.vue
 create mode 100644 src/components/redesign/PotatoFacts.vue

diff --git a/src/components/redesign/CompileControl.vue b/src/components/redesign/CompileControl.vue
new file mode 100644
index 0000000000..5c82663ad0
--- /dev/null
+++ b/src/components/redesign/CompileControl.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="
+      w-full
+      flex flex-row
+      h-56px
+      rounded-lg
+      bg-white-panel
+      p-8px
+      justify-between
+    "
+  >
+    <button class="btn flex-grow">Compile</button>
+    <button class="btn flex-grow">Firmware</button>
+    <button class="btn flex-grow">Full Source</button>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index ff0970ceda..563dff579f 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -1,69 +1,30 @@
 <template>
   <div class="h-full w-full">
     <div class="flex flex-col w-full gap-2">
-      <div
-        class="
-          w-full
-          h-56px
-          p-8px
-          flex flex-row
-          justify-between
-          bg-white-panel
-          rounded-lg
-        "
-      >
-        <button class="btn btn-blue">Upload .JSON</button>
-        <button class="btn btn-blue-2">Import URL</button>
-      </div>
-      <div class="w-full flex flex-row p-0 h-40px gap-1 justify-between">
-        <button class="btn flex-grow bg-white-panel">KEYMAP.JSON</button>
-        <button class="btn flex-grow bg-white-panel">View Raw Data</button>
-        <button class="btn bg-white-panel">Print</button>
-      </div>
-      <div
-        class="
-          w-full
-          h-84px
-          border-blue-100
-          text-left
-          p-8px
-          border-2 border-solid
-          rounded-lg
-        "
-      >
-        Potato Facts
-      </div>
-      <div
-        class="
-          w-full
-          flex flex-row
-          h-56px
-          rounded-lg
-          bg-white-panel
-          p-8px
-          justify-between
-        "
-      >
-        <button class="btn flex-grow">Compile</button>
-        <button class="btn flex-grow">Firmware</button>
-        <button class="btn flex-grow">Full Source</button>
-      </div>
-      <div class="rounded-lg w-full flex flex-row gap-1">
-        <button class="btn rounded-lg flex-grow bg-white-panel">
-          Get QMK Toolbox
-        </button>
-        <button class="btn rounded-lg flex-grow bg-white-panel">
-          Questions?
-        </button>
-        <button class="btn rounded-lg bg-white-panel">Discord</button>
-      </div>
+      <import-control />
+      <export-control />
+      <potato-facts />
+      <compile-control />
+      <extra-links />
     </div>
   </div>
 </template>
 <script>
 import { defineComponent } from '@vue/composition-api';
+import ImportControl from '@/components/redesign/ImportControl.vue';
+import ExportControl from '@/components/redesign/ExportControl.vue';
+import PotatoFacts from '@/components/redesign/PotatoFacts.vue';
+import ExtraLinks from '@/components/redesign/ExtraLinks.vue';
+import CompileControl from '@/components/redesign/CompileControl.vue';
 
 export default defineComponent({
+  components: {
+    ImportControl,
+    ExportControl,
+    PotatoFacts,
+    ExtraLinks,
+    CompileControl
+  },
   setup() {}
 });
 </script>
diff --git a/src/components/redesign/ExportControl.vue b/src/components/redesign/ExportControl.vue
new file mode 100644
index 0000000000..10d77f34ac
--- /dev/null
+++ b/src/components/redesign/ExportControl.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="w-full flex flex-row p-0 h-40px gap-1 justify-between">
+    <button class="btn flex-grow bg-white-panel">KEYMAP.JSON</button>
+    <button class="btn flex-grow bg-white-panel">View Raw Data</button>
+    <button class="btn bg-white-panel">Print</button>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/ExtraLinks.vue b/src/components/redesign/ExtraLinks.vue
new file mode 100644
index 0000000000..bc7936156d
--- /dev/null
+++ b/src/components/redesign/ExtraLinks.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="rounded-lg w-full flex flex-row gap-1">
+    <button class="btn rounded-lg flex-grow bg-white-panel">
+      Get QMK Toolbox
+    </button>
+    <button class="btn rounded-lg flex-grow bg-white-panel">Questions?</button>
+    <button class="btn rounded-lg bg-white-panel">Discord</button>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
new file mode 100644
index 0000000000..d15b5ab531
--- /dev/null
+++ b/src/components/redesign/ImportControl.vue
@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="
+      w-full
+      h-56px
+      p-8px
+      flex flex-row
+      justify-between
+      bg-white-panel
+      rounded-lg
+    "
+  >
+    <button class="btn btn-blue">Upload .JSON</button>
+    <button class="btn btn-blue-2">Import URL</button>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/PotatoFacts.vue b/src/components/redesign/PotatoFacts.vue
new file mode 100644
index 0000000000..31f7def4fd
--- /dev/null
+++ b/src/components/redesign/PotatoFacts.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="
+      w-full
+      h-84px
+      border-blue-100
+      text-left
+      p-8px
+      border-2 border-solid
+      rounded-lg
+    "
+  >
+    Potato Facts
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  setup() {}
+});
+</script>

From 36252b3dc216900ec9eaef3910ff42aae4d24dde Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 19:04:14 -0800
Subject: [PATCH 10/39] get hover/active states working for ImportControl

---
 src/components/redesign/ControlPanel.vue  |  8 +-------
 src/components/redesign/ExtraLinks.vue    |  1 +
 src/components/redesign/ImportControl.vue | 24 +++++++++++++++++++++--
 windi.config.js                           |  7 ++++++-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 563dff579f..a50dc9d769 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -32,11 +32,5 @@ export default defineComponent({
 .btn {
   @apply font-bold py-2 px-4 rounded;
 }
-.btn-blue {
-  @apply bg-blue-500 text-white;
-}
-.btn-blue-2 {
-  @apply bg-blue-300 text-white;
-  @apply text-blue-600;
-}
+
 </style>
diff --git a/src/components/redesign/ExtraLinks.vue b/src/components/redesign/ExtraLinks.vue
index bc7936156d..9949077e5c 100644
--- a/src/components/redesign/ExtraLinks.vue
+++ b/src/components/redesign/ExtraLinks.vue
@@ -11,6 +11,7 @@
 import { defineComponent } from '@vue/composition-api';
 
 export default defineComponent({
+  name: 'extra-links',
   setup() {}
 });
 </script>
diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
index d15b5ab531..27f1a61c2e 100644
--- a/src/components/redesign/ImportControl.vue
+++ b/src/components/redesign/ImportControl.vue
@@ -10,8 +10,28 @@
       rounded-lg
     "
   >
-    <button class="btn btn-blue">Upload .JSON</button>
-    <button class="btn btn-blue-2">Import URL</button>
+    <button
+      class="
+        btn
+        bg-upload-active
+        text-white
+        hover:bg-upload-focus hover:text-upload-active
+        active:text-black active:bg-upload-active
+      "
+    >
+      Upload .JSON
+    </button>
+    <button
+      class="
+        btn
+        bg-upload-active
+        text-white
+        hover:bg-upload-focus hover:text-upload-active
+        active:text-black active:bg-upload-active
+      "
+    >
+      Import URL
+    </button>
   </div>
 </template>
 <script>
diff --git a/windi.config.js b/windi.config.js
index 902fe79130..0314ed24ce 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,3 +1,5 @@
+const { toRGBA } = require("windicss/utils");
+
 module.exports = {
   theme: {
     darkMode: 'class',
@@ -8,7 +10,10 @@ module.exports = {
       },
       colors: {
         'white-panel': '#CCD9F7',
-        'white-app': '#ECF2FF'
+        'white-app': '#ECF2FF',
+        'upload-active': '#0075ff',
+        'upload-focus': 'rgba(0,117,255,0.2)',
+        'upload-disabled': 'rgba(6,7,10,1)'
       }
     }
   }

From da1715e2f7305fbea5b04bc1ce1673c4459a532f Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 20:30:42 -0800
Subject: [PATCH 11/39] ImportControl toggle

 - emit uploadJSON event
 - implement import URL toggle
---
 src/components/redesign/ControlPanel.vue  |   2 +-
 src/components/redesign/ImportControl.vue | 108 +++++++++++++++-------
 src/main.js                               |   2 +
 windi.config.js                           |   1 +
 4 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index a50dc9d769..f65ce5d995 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 </script>
 <style>
 .btn {
-  @apply font-bold py-2 px-4 rounded;
+  @apply font-bold py-2 px-4 rounded-lg;
 }
 
 </style>
diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
index 27f1a61c2e..b1079cbf54 100644
--- a/src/components/redesign/ImportControl.vue
+++ b/src/components/redesign/ImportControl.vue
@@ -1,43 +1,81 @@
 <template>
-  <div
-    class="
-      w-full
-      h-56px
-      p-8px
-      flex flex-row
-      justify-between
-      bg-white-panel
-      rounded-lg
-    "
-  >
-    <button
-      class="
-        btn
-        bg-upload-active
-        text-white
-        hover:bg-upload-focus hover:text-upload-active
-        active:text-black active:bg-upload-active
-      "
-    >
-      Upload .JSON
-    </button>
-    <button
-      class="
-        btn
-        bg-upload-active
-        text-white
-        hover:bg-upload-focus hover:text-upload-active
-        active:text-black active:bg-upload-active
-      "
-    >
-      Import URL
-    </button>
+  <div class="w-full bg-white-panel rounded-lg flex flex-col">
+    <div class="w-full h-56px p-8px flex flex-row justify-between">
+      <button
+        class="
+          btn
+          bg-upload-active
+          text-white
+          hover:bg-upload-focus hover:text-upload-active
+          active:text-black active:bg-upload-active
+        "
+        @click="$emit('uploadJSON')"
+      >
+        Upload .JSON
+      </button>
+      <button
+        class="
+          btn
+          bg-upload-active
+          text-white
+          hover:bg-upload-focus hover:text-upload-active
+          active:text-black active:bg-upload-active
+        "
+        @click="toggleImporting"
+      >
+        Import URL
+      </button>
+    </div>
+    <transition name="slide-fade">
+      <div class="w-full flex flex-row p-2" v-show="importing">
+        <input
+          class="
+            flex-grow
+            rounded-md
+            h-40px
+            bg-white-700
+            placeholder-gray-700
+            pl-16px
+            mw-80
+          "
+          type="text"
+          placeholder="Paste URL here"
+        />
+      </div>
+    </transition>
   </div>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, ref, unref } from '@vue/composition-api';
 
 export default defineComponent({
-  setup() {}
+  emits: ['uploadJSON', 'importJSON'],
+  setup() {
+    let importing = ref(false);
+    const toggleImporting = () => {
+      importing.value = !unref(importing);
+    };
+    return {
+      importing,
+      toggleImporting
+    };
+  }
 });
 </script>
+
+<style scoped>
+/* Enter and leave animations can use different */
+/* durations and timing functions.              */
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+.slide-fade-leave-active {
+  transition: all .3s ease;
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+</style>
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a8fde422a1..ae8c7dae80 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,9 +16,11 @@ import '@fontsource/roboto/700.css';
 import '@fontsource/montserrat/400.css';
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
+import VueCompositionAPI from '@vue/composition-api';
 
 Vue.use(VueI18n);
 Vue.use(VTooltip);
+Vue.use(VueCompositionAPI);
 
 import messages from '@/i18n';
 
diff --git a/windi.config.js b/windi.config.js
index 0314ed24ce..26b9bc525d 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -11,6 +11,7 @@ module.exports = {
       colors: {
         'white-panel': '#CCD9F7',
         'white-app': '#ECF2FF',
+        'white-700': '#B1C1E9',
         'upload-active': '#0075ff',
         'upload-focus': 'rgba(0,117,255,0.2)',
         'upload-disabled': 'rgba(6,7,10,1)'

From ba90ea9141e841f2b7336802b9c438d7cd409ac1 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 20:44:47 -0800
Subject: [PATCH 12/39] Add a transition for input box

---
 src/components/redesign/ImportControl.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
index b1079cbf54..f1dc979ab9 100644
--- a/src/components/redesign/ImportControl.vue
+++ b/src/components/redesign/ImportControl.vue
@@ -22,9 +22,22 @@
           active:text-black active:bg-upload-active
         "
         @click="toggleImporting"
+        v-if="!importing"
       >
         Import URL
       </button>
+      <div class="py-3 px-4 flex item-center" v-if="importing">
+        <a
+          class="
+            w-56px
+            visited:text-upload-active
+            text-upload-active
+            hover:text-blue-900
+          "
+          @click="toggleImporting"
+          >Close</a
+        >
+      </div>
     </div>
     <transition name="slide-fade">
       <div class="w-full flex flex-row p-2" v-show="importing">
@@ -67,10 +80,10 @@ export default defineComponent({
 /* Enter and leave animations can use different */
 /* durations and timing functions.              */
 .slide-fade-enter-active {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 .slide-fade-leave-active {
-  transition: all .3s ease;
+  transition: all 0.3s ease;
 }
 .slide-fade-enter, .slide-fade-leave-to
 /* .slide-fade-leave-active below version 2.1.8 */ {
@@ -78,4 +91,3 @@ export default defineComponent({
   opacity: 0;
 }
 </style>
-</style>
\ No newline at end of file

From e3c467c4adccef38c08c50f792156084fd8eb3b8 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 20 Jan 2022 21:12:51 -0800
Subject: [PATCH 13/39] Fonts and Prettier

---
 src/App.vue                              | 3 +++
 src/components/redesign/ControlPanel.vue | 1 -
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index d6721d5d4b..eb2e9d1c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -205,6 +205,9 @@ export default {
   -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;
diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index f65ce5d995..5fe1f7107b 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -32,5 +32,4 @@ export default defineComponent({
 .btn {
   @apply font-bold py-2 px-4 rounded-lg;
 }
-
 </style>

From 3a432bd1ff76a56f43bebc57e41745c64b6d732a Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Mon, 24 Jan 2022 13:29:33 -0800
Subject: [PATCH 14/39] Shim navigator.platform for future

 - navigator.platform has been deprecated. Shim it to use the new API if
   it is available, otherwise use the fallback.
---
 src/components/BaseKey.vue        |  4 ++--
 src/components/colorways/index.js |  7 +++++++
 src/util.js                       | 27 ++++++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index da58fff44e..4b257151b4 100644
--- a/src/components/BaseKey.vue
+++ b/src/components/BaseKey.vue
@@ -27,11 +27,11 @@
 import isUndefined from 'lodash/isUndefined';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 import colorways from './colorways';
-
+import { getPlatform } from '@/util';
 let substitute = Object.assign(
   {},
   colorways.iconCodes,
-  colorways.platformIcons(window.navigator.platform)
+  colorways.platformIcons(getPlatform())
 );
 
 const _getKeySizeClass = (unith, unitw) => {
diff --git a/src/components/colorways/index.js b/src/components/colorways/index.js
index dcbb4abfa7..445dbb3a2b 100644
--- a/src/components/colorways/index.js
+++ b/src/components/colorways/index.js
@@ -23,10 +23,13 @@ export default {
   },
   /**
    * returns the correct icons for the identified platform
+   * @see https://wicg.github.io/ua-client-hints/#sec-ch-ua-platform
    */
   platformIcons(platform) {
     let icon = [];
     switch (platform) {
+      case 'macOS':
+      case 'iOS':
       case 'MacIntel':
       case 'Macintosh':
       case 'MacPPC':
@@ -34,11 +37,15 @@ export default {
       case 'iPad':
         icon = ['fab', 'apple'];
         break;
+      case 'Linux':
+      case 'Android':
+      case 'Chrome OS':
       case 'Linux i686':
       case 'Linux x86_64':
       case 'Linux armv7l':
         icon = ['fab', 'linux'];
         break;
+      case 'Windows':
       case 'Win32':
         icon = ['fab', 'windows'];
         break;
diff --git a/src/util.js b/src/util.js
index f4d7f3c615..b00a4b2958 100644
--- a/src/util.js
+++ b/src/util.js
@@ -51,4 +51,29 @@ function checkInvalidKeymap({ keyboard, keymap, layout, layers }) {
   return res;
 }
 
-export { getExclusionList, getPreferredLayout, checkInvalidKeymap };
+/**
+ * navigator.platform has been deprecated. Provide a shim that tries to call
+ * userAgentData first and failing that uses the original field
+ * @returns @see https://wicg.github.io/ua-client-hints/#sec-ch-ua-platform
+ */
+function getPlatform() {
+  if (window) {
+    const { navigator } = window;
+    if (navigator) {
+      const { userAgentData, platform } = navigator;
+      if (userAgentData) {
+        return userAgentData.platform;
+      } else {
+        return platform;
+      }
+    }
+  }
+  return 'Unknown';
+}
+
+export {
+  getExclusionList,
+  getPreferredLayout,
+  checkInvalidKeymap,
+  getPlatform
+};

From 997b513eb11b8c0c4cd5e0b5b476a3320f67d3b8 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 11:51:26 -0800
Subject: [PATCH 15/39] Restore Status bar for integration tests

---
 package.json |  2 +-
 src/App.vue  |  2 +-
 src/main.js  |  3 +-
 yarn.lock    | 89 +++++++++++++++++++++++++---------------------------
 4 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index 559bdb938e..1f85f8b3c4 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,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",
diff --git a/src/App.vue b/src/App.vue
index eb2e9d1c1a..3f1561bac8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="configurator" @click="dismiss">
+  <div class="mt-5" id="configurator" @click="dismiss">
     <!-- span style="display: none">{{ revision }}</span-->
     <!--header>
         <p class="random-potato">{{ potatoFact }}</p>
diff --git a/src/main.js b/src/main.js
index ae8c7dae80..5904a7a8af 100644
--- a/src/main.js
+++ b/src/main.js
@@ -122,13 +122,14 @@ new Vue({
   render: (h) => h(App)
 }).$mount('#app');
 
-/*
+
 new Vue({
   i18n,
   store,
   render: (h) => h(StatusBar)
 }).$mount('#status-app');
 
+/*
 new Vue({
   i18n,
   render: (h) => h(BrowserWarn)
diff --git a/yarn.lock b/yarn.lock
index 4f066cbcb5..21f207de96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1500,15 +1500,6 @@
   dependencies:
     eslint-config-prettier "^6.0.0"
 
-"@vue/test-utils@^1.0.0-beta.20":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.2.2.tgz#0242ea4e202d4853541bb167fead3f2249140ab7"
-  integrity sha512-P+yiAsszoy8z1TqXiVUnAZaJj0WGGz5fCxm4bOSI6Cpwy1+PNYwYxDv0ROAA/SUtOPppV+aD8tp/QWwxf8ROJw==
-  dependencies:
-    dom-event-types "^1.0.0"
-    lodash "^4.17.15"
-    pretty "^2.0.0"
-
 "@vue/test-utils@^1.1.3":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.0.tgz#d563decdcd9c68a7bca151d4179a2bfd6d5c3e15"
@@ -1518,6 +1509,11 @@
     lodash "^4.17.15"
     pretty "^2.0.0"
 
+"@vue/test-utils@^2.0.0-rc.18":
+  version "2.0.0-rc.18"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz#ff22b252424fe72e5462cbb3a8e7405cef11ffb6"
+  integrity sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -1777,9 +1773,9 @@ ajv@^8.6.2:
     uri-js "^4.2.2"
 
 ansi-colors@^4.1.1:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
-  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
 ansi-escapes@^4.3.0:
   version "4.3.2"
@@ -1794,9 +1790,9 @@ ansi-regex@^2.0.0:
   integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
 
 ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
 ansi-regex@^5.0.1:
   version "5.0.1"
@@ -1947,7 +1943,7 @@ async-each@^1.0.1:
 async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
-  integrity sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==
+  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
 async@^3.2.0:
   version "3.2.3"
@@ -3357,27 +3353,20 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@4, debug@^4.1.1:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+debug@4, debug@4.3.3, debug@^4.3.2, debug@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
   dependencies:
     ms "2.1.2"
 
-debug@4.3.2, debug@^4.1.0:
+debug@4.3.2, debug@^4.1.0, debug@^4.1.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
   dependencies:
     ms "2.1.2"
 
-debug@4.3.3, debug@^4.3.2, debug@^4.3.3:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
-  dependencies:
-    ms "2.1.2"
-
 debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4523,11 +4512,16 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.6:
+graceful-fs@^4.1.6, graceful-fs@^4.2.6:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+graceful-fs@^4.2.0:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+
 growl@^1.10.0:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
@@ -4730,9 +4724,9 @@ https-proxy-agent@^2.2.0:
     debug "^3.1.0"
 
 https-proxy-agent@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
-  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
   dependencies:
     agent-base "6"
     debug "4"
@@ -6822,14 +6816,13 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.22.0:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+resolve@^1.10.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
   dependencies:
-    is-core-module "^2.8.1"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
 
 resolve@^1.14.2:
   version "1.21.0"
@@ -6840,6 +6833,15 @@ resolve@^1.14.2:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -7029,20 +7031,13 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.5:
+semver@^7.2.1, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.3.4:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
-  dependencies:
-    lru-cache "^6.0.0"
-
 serialize-javascript@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"

From d32c8c6238875c2f7a7122c12fe2e320f26f89e8 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 14:03:16 -0800
Subject: [PATCH 16/39] prettier

---
 src/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 5904a7a8af..05a11471f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -122,7 +122,6 @@ new Vue({
   render: (h) => h(App)
 }).$mount('#app');
 
-
 new Vue({
   i18n,
   store,

From 2b8d7cd10eea0de394fcf958b2fdb12584a3f2f1 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 16:47:25 -0800
Subject: [PATCH 17/39] Implement potato facts as a widget

 - sadly because we are on vue2 I can't use the composition API for this
   because the i18n v8 API uses a global on this instance
 - this uses a computed value to display the message, and then we
   observe changes in the index which triggers a re-render
 - forward and backward controls are implemented as per mocks but the
   iconography is from FA
---
 src/components/redesign/PotatoFacts.vue | 60 ++++++++++++++++++++++++-
 src/main.js                             |  8 +++-
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/redesign/PotatoFacts.vue b/src/components/redesign/PotatoFacts.vue
index 31f7def4fd..6d4f7d5af0 100644
--- a/src/components/redesign/PotatoFacts.vue
+++ b/src/components/redesign/PotatoFacts.vue
@@ -8,15 +8,71 @@
       p-8px
       border-2 border-solid
       rounded-lg
+      relative
     "
   >
-    Potato Facts
+    {{ potatoFact }}
+    <div class="absolute bottom-0 right-1 text-indigo-400">
+      <a @click="decrementIdx" i>
+        <font-awesome-icon icon="less-than" size="sm" fixed-width />
+      </a>
+      <a @click="incrementIdx">
+        <font-awesome-icon icon="greater-than" size="sm" fixed-width />
+      </a>
+    </div>
   </div>
 </template>
 <script>
 import { defineComponent } from '@vue/composition-api';
+import random from 'lodash/random';
+import size from 'lodash/size';
 
+let cancelInterval = undefined;
+
+// Because I'm using vue2 I have to use legacy API because
+// i18n API composition only really works for vue3 at this time.
 export default defineComponent({
-  setup() {}
+  props: {
+    delay: {
+      type: Number,
+      default: 12000
+    }
+  },
+  data() {
+    const factCount = size(this.$t('potato'));
+    return {
+      interval: this.delay,
+      intervalHandle: undefined,
+      currentFactIdx: random(1, factCount),
+      factCount
+    };
+  },
+  computed: {
+    potatoFact() {
+      return this.$t('potato.' + this.currentFactIdx);
+    }
+  },
+  mounted() {
+    this.intervalHandle = setInterval(() => {
+      this.incrementIdx();
+    }, this.interval);
+  },
+  destroyed() {
+    cancelInterval(this.intervalHandle);
+  },
+  methods: {
+    incrementIdx() {
+      this.currentFactIdx = (this.currentFactIdx + 1) % this.factCount;
+      if (this.currentFactIdx === 0) {
+        this.currentFactIdx = 1;
+      }
+    },
+    decrementIdx() {
+      this.currentFactIdx = (this.currentFactIdx - 1) % this.factCount;
+      if (this.currentFactIdx <= 0) {
+        this.currentFactIdx = this.factCount - this.currentFactIdx;
+      }
+    }
+  }
 });
 </script>
diff --git a/src/main.js b/src/main.js
index 05a11471f9..fce6afab1b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,7 +55,9 @@ import {
   faQuestionCircle,
   faVolumeMute,
   faVolumeUp,
-  faBars
+  faBars,
+  faLessThan,
+  faGreaterThan
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faApple,
@@ -106,7 +108,9 @@ const icons = [
   faWindows,
   faQuestionCircle,
   faVolumeUp,
-  faVolumeMute
+  faVolumeMute,
+  faLessThan,
+  faGreaterThan
 ];
 library.add(...icons);
 

From e62aed275f63ece12e3a35b9c2c5792c1b14e270 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 17:34:24 -0800
Subject: [PATCH 18/39] Placeholder for console

---
 src/components/redesign/ConsoleControl.vue | 19 +++++++++++++++++++
 src/components/redesign/ControlPanel.vue   |  5 ++++-
 src/main.js                                | 10 ++++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/components/redesign/ConsoleControl.vue

diff --git a/src/components/redesign/ConsoleControl.vue b/src/components/redesign/ConsoleControl.vue
new file mode 100644
index 0000000000..5e66798796
--- /dev/null
+++ b/src/components/redesign/ConsoleControl.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="rounded-lg bg-cool-gray-50 text-black h-48px relative">
+    <div class="absolute left-3 top-2">
+      <font-awesome-icon icon="book-open" size="lg" fixed-width />
+    </div>
+    <div class="absolute right-3 top-2">
+      <font-awesome-icon icon="expand-alt" size="lg" fixed-width />
+    </div>
+    <h4 class="font-bold mt-2">Console</h4>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'console-control',
+  setup() {}
+});
+</script>
diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 5fe1f7107b..139c545b97 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -2,6 +2,7 @@
   <div class="h-full w-full">
     <div class="flex flex-col w-full gap-2">
       <import-control />
+      <console-control />
       <export-control />
       <potato-facts />
       <compile-control />
@@ -16,6 +17,7 @@ import ExportControl from '@/components/redesign/ExportControl.vue';
 import PotatoFacts from '@/components/redesign/PotatoFacts.vue';
 import ExtraLinks from '@/components/redesign/ExtraLinks.vue';
 import CompileControl from '@/components/redesign/CompileControl.vue';
+import ConsoleControl from '@/components/redesign/ConsoleControl.vue';
 
 export default defineComponent({
   components: {
@@ -23,7 +25,8 @@ export default defineComponent({
     ExportControl,
     PotatoFacts,
     ExtraLinks,
-    CompileControl
+    CompileControl,
+    ConsoleControl
   },
   setup() {}
 });
diff --git a/src/main.js b/src/main.js
index fce6afab1b..36e35929f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -57,7 +57,10 @@ import {
   faVolumeUp,
   faBars,
   faLessThan,
-  faGreaterThan
+  faGreaterThan,
+  faBookOpen,
+  faCompressAlt,
+  faExpandAlt
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faApple,
@@ -110,7 +113,10 @@ const icons = [
   faVolumeUp,
   faVolumeMute,
   faLessThan,
-  faGreaterThan
+  faGreaterThan,
+  faBookOpen,
+  faCompressAlt,
+  faExpandAlt
 ];
 library.add(...icons);
 

From bc3ab24f57a88ee344353b0be7061690d3a957d4 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 20:56:23 -0800
Subject: [PATCH 19/39] Add xterm.js for console

it's a really big library, but I do like the features it offers so it
may be worth it if we can lazy load it. We'll only use a small amount of
it's functionality, but it does render links quite well.
---
 package.json                               |  5 ++++-
 src/components/redesign/ConsoleControl.vue | 26 ++++++++++++++++++----
 src/main.js                                |  1 +
 yarn.lock                                  | 15 +++++++++++++
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 1f85f8b3c4..fc1228fd10 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,10 @@
     "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",
diff --git a/src/components/redesign/ConsoleControl.vue b/src/components/redesign/ConsoleControl.vue
index 5e66798796..ff9c0eec3a 100644
--- a/src/components/redesign/ConsoleControl.vue
+++ b/src/components/redesign/ConsoleControl.vue
@@ -1,19 +1,37 @@
 <template>
-  <div class="rounded-lg bg-cool-gray-50 text-black h-48px relative">
+  <div class="rounded-lg bg-cool-gray-50 text-black min-h-48px p-2 relative">
     <div class="absolute left-3 top-2">
       <font-awesome-icon icon="book-open" size="lg" fixed-width />
     </div>
+    <h4 class="font-bold mt-2">Console</h4>
+    <div ref="terminal" class="pl-2 pr-2"></div>
     <div class="absolute right-3 top-2">
       <font-awesome-icon icon="expand-alt" size="lg" fixed-width />
     </div>
-    <h4 class="font-bold mt-2">Console</h4>
   </div>
 </template>
 <script>
 import { defineComponent } from '@vue/composition-api';
-
+import { Terminal } from 'xterm';
+import { WebLinksAddon } from 'xterm-addon-web-links';
+import { FitAddon } from 'xterm-addon-fit';
 export default defineComponent({
   name: 'console-control',
-  setup() {}
+  mounted() {
+    this.term.open(this.$refs.terminal);
+    this.fitAddon.fit();
+    this.term.write('hello world! https://config.qmk.fm');
+  },
+  setup() {
+    const term = new Terminal({ rows: 25, cols: 80 });
+    term.options.fontFamily = 'Courier';
+    term.options.theme.background = '#CCD9F7';
+    term.options.theme.foreground = '#333';
+    term.options.scrollback = 400;
+    term.loadAddon(new WebLinksAddon());
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    return { term, fitAddon };
+  }
 });
 </script>
diff --git a/src/main.js b/src/main.js
index 36e35929f6..f477b903ec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@ import '@fontsource/roboto-mono/400.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/700.css';
 import '@fontsource/montserrat/400.css';
+import 'xterm/css/xterm.css';
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
 import VueCompositionAPI from '@vue/composition-api';
diff --git a/yarn.lock b/yarn.lock
index 21f207de96..183105fcfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8206,6 +8206,21 @@ xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xterm-addon-fit@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
+  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
+
+xterm-addon-web-links@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.5.0.tgz#c6869c0032e6709e2437315199d794a3b94a183e"
+  integrity sha512-egDNFDvuArQ0QKE/ZdP1HMo70Lm8nSOjuIJY0kYjqCCE6yntjyuGzjeoYD+CIQ12gJ6B6thVh8nTApi27qYiag==
+
+xterm@^4.16.0:
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.16.0.tgz#af25223c72917438842121e1bcd1b60ffd7e8476"
+  integrity sha512-nAbuigL9CYkI075mdfqpnB8cHZNKxENCj1CQ9Tm5gSvWkMtkanmRN2mkHGjSaET1/3+X9BqISFFo7Pd2mXVjiQ==
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"

From 3d0eb53c08fa1c2c23df3e19d48f0dae7d2b5745 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 21:29:46 -0800
Subject: [PATCH 20/39] Consolidate ITerminalOptions into constructor

---
 src/components/redesign/ConsoleControl.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/redesign/ConsoleControl.vue b/src/components/redesign/ConsoleControl.vue
index ff9c0eec3a..fbf0169b5b 100644
--- a/src/components/redesign/ConsoleControl.vue
+++ b/src/components/redesign/ConsoleControl.vue
@@ -23,11 +23,13 @@ export default defineComponent({
     this.term.write('hello world! https://config.qmk.fm');
   },
   setup() {
-    const term = new Terminal({ rows: 25, cols: 80 });
-    term.options.fontFamily = 'Courier';
-    term.options.theme.background = '#CCD9F7';
-    term.options.theme.foreground = '#333';
-    term.options.scrollback = 400;
+    const term = new Terminal({
+      rows: 25,
+      cols: 80,
+      fontFamily: 'Courier',
+      theme: { background: '#ccd9f7', foreground: '#333' },
+      scrollback: 400
+    });
     term.loadAddon(new WebLinksAddon());
     const fitAddon = new FitAddon();
     term.loadAddon(fitAddon);

From 60c572be2573595866afc99ffcba6903aeee8788 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 26 Jan 2022 21:43:14 -0800
Subject: [PATCH 21/39] Slightly broken layout for now

Until I get the console stuff working the about is just attached to the
end. I may make it disappear if the console is open.
---
 src/components/layouts/ConfiguratorLayout.vue | 7 ++-----
 src/components/redesign/ControlPanel.vue      | 7 ++++++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/layouts/ConfiguratorLayout.vue b/src/components/layouts/ConfiguratorLayout.vue
index 4a3ece35a2..9d5dae78df 100644
--- a/src/components/layouts/ConfiguratorLayout.vue
+++ b/src/components/layouts/ConfiguratorLayout.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="grid grid-cols-12 grid-rows-configurator gap-4">
-    <div class="col-span-4">
+  <div class="grid grid-cols-12 grid-rows-2 gap-4">
+    <div class="col-span-4 row-span-2">
       <slot name="controlpanel"> CONTROL PANEL </slot>
     </div>
     <div class="col-span-7">
@@ -9,9 +9,6 @@
     <div class="col-span-1">
       <slot name="layerpicker">Layer Picker</slot>
     </div>
-    <div class="col-span-4">
-      <slot name="about">ABOUT</slot>
-    </div>
     <div class="col-span-8">
       <slot name="keycodes">KEYCODES</slot>
     </div>
diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 139c545b97..290617a4bb 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full">
+  <div class="h-full w-full max-h-20em">
     <div class="flex flex-col w-full gap-2">
       <import-control />
       <console-control />
@@ -7,6 +7,11 @@
       <potato-facts />
       <compile-control />
       <extra-links />
+      <div class="text-black text-left">
+        This project is maintained by QMK Collaborators and contributors like
+        you!<br />&nbsp;<br />Hosted on GitHub Pages<br />&nbsp;<br />Version:
+        dev
+      </div>
     </div>
   </div>
 </template>

From 820515bba6f6c404eb5cd9014f2e6b9da8f3a5fd Mon Sep 17 00:00:00 2001
From: NAX LAB <64031920+NAXLAB@users.noreply.github.com>
Date: Sat, 29 Jan 2022 23:47:15 -0500
Subject: [PATCH 22/39] Changed windi.config.js and confirmed that nax wuz here
 (#1061)

* added colors to windi

Co-authored-by: Yan-Fa Li <yanfali@gmail.com>
---
 windi.config.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/windi.config.js b/windi.config.js
index 26b9bc525d..997e932493 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -2,6 +2,11 @@ const { toRGBA } = require("windicss/utils");
 
 module.exports = {
   theme: {
+    borderRadius: {
+      'sm': '8px',
+      'lg': '16px',
+
+    },
     darkMode: 'class',
     extend: {
       gridTemplateColumns: {
@@ -11,7 +16,25 @@ module.exports = {
       colors: {
         'white-panel': '#CCD9F7',
         'white-app': '#ECF2FF',
+        'white-900': 'ECF2FF', 'white-app': '#ECF2FF',
+        'white-800': 'CCD9F6', 'white-panel': '#CCD9F6',
         'white-700': '#B1C1E9',
+        'grey-500': '#69718D',
+        'grey-400': '#444A61',
+        'grey-300': '#1F222D',
+        'grey-200': '#14161E',
+        'grey-100': '#06070A',
+        'black': '#000000',
+        'blue': '#0075FF',
+        'light-blue': '#4098FF',
+        'dark-blue': '#005CC9',
+        'red': '#FF004D',
+        'green': '#00FFB2',
+        'glow-blue': 'rgba(0, 117, 255, 0.2)',
+        'glow-dark-blue': 'rgba(0, 117, 255, 0.4)',
+        'glow-red': 'rgba(255, 0, 77, 0.15)',
+        'glow-green': 'rgba(0, 255, 178, 0.15)',
+        
         'upload-active': '#0075ff',
         'upload-focus': 'rgba(0,117,255,0.2)',
         'upload-disabled': 'rgba(6,7,10,1)'
@@ -19,3 +42,4 @@ module.exports = {
     }
   }
 };
+

From 82028ba20a0143121e4bcce3a50a375a5a2659e2 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 2 Feb 2022 16:52:53 -0800
Subject: [PATCH 23/39] Hack to make the import box less janky

 - needs a better solution but this is a workaround for now
   Transition max-height instead of height
---
 src/components/redesign/ControlPanel.vue  |  2 +-
 src/components/redesign/ImportControl.vue | 25 ++++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 290617a4bb..18fa346abe 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full max-h-20em">
+  <div class="h-1080px w-full max-h-1080px overflow-y-hidden">
     <div class="flex flex-col w-full gap-2">
       <import-control />
       <console-control />
diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
index f1dc979ab9..1c2e6f1805 100644
--- a/src/components/redesign/ImportControl.vue
+++ b/src/components/redesign/ImportControl.vue
@@ -1,6 +1,16 @@
 <template>
-  <div class="w-full bg-white-panel rounded-lg flex flex-col">
-    <div class="w-full h-56px p-8px flex flex-row justify-between">
+  <div
+    class="
+      w-full
+      bg-white-panel
+      rounded-lg
+      flex flex-col
+      transition-maxheight
+      ease-in-out
+    "
+    :class="importing ? ['max-h-112px'] : ['max-h-56px']"
+  >
+    <div class="w-full min-h-56px h-56px p-8px flex flex-row justify-between">
       <button
         class="
           btn
@@ -44,7 +54,7 @@
         <input
           class="
             flex-grow
-            rounded-md
+            rounded-lg
             h-40px
             bg-white-700
             placeholder-gray-700
@@ -85,9 +95,18 @@ export default defineComponent({
 .slide-fade-leave-active {
   transition: all 0.3s ease;
 }
+.slide-fade-enter {
+  transition-delay: 600;
+}
+.slide-fade-exit {
+  transition-delay: 0;
+}
 .slide-fade-enter, .slide-fade-leave-to
 /* .slide-fade-leave-active below version 2.1.8 */ {
   transform: translateY(-20px);
   opacity: 0;
 }
+.transition-maxheight {
+  transition: max-height 0.2s;
+}
 </style>

From 7174fd5ab91cb621052a0822ff90263f3dbfdaf6 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 2 Feb 2022 17:50:14 -0800
Subject: [PATCH 24/39] Tweak control panel height for now

---
 src/components/redesign/ControlPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 18fa346abe..392d7d03dd 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-1080px w-full max-h-1080px overflow-y-hidden">
+  <div class="h-800px w-full max-h-800px overflow-y-hidden">
     <div class="flex flex-col w-full gap-2">
       <import-control />
       <console-control />

From d492276d73ea049ce0280c14969ada85d48ef90c Mon Sep 17 00:00:00 2001
From: NAX LAB <64031920+NAXLAB@users.noreply.github.com>
Date: Tue, 8 Feb 2022 15:45:37 -0500
Subject: [PATCH 25/39] changed close to a button (#1068)

* changed close to a button

* Update ImportControl.vue

* Update ImportControl.vue

Fix formatting

Co-authored-by: Yan-Fa Li <yanfali@gmail.com>
---
 src/components/redesign/ImportControl.vue | 63 ++++++++++++-----------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/redesign/ImportControl.vue b/src/components/redesign/ImportControl.vue
index 1c2e6f1805..b85a210eca 100644
--- a/src/components/redesign/ImportControl.vue
+++ b/src/components/redesign/ImportControl.vue
@@ -36,36 +36,41 @@
       >
         Import URL
       </button>
-      <div class="py-3 px-4 flex item-center" v-if="importing">
-        <a
-          class="
-            w-56px
-            visited:text-upload-active
-            text-upload-active
-            hover:text-blue-900
-          "
-          @click="toggleImporting"
-          >Close</a
-        >
-      </div>
+
+      <button
+        class="
+          btn
+          min-w-72px
+          text-blue
+          hover:bg-glow-blue hover:text-blue
+          active:text-black active:bg-upload-active
+        "
+        @click="toggleImporting"
+        v-if="importing"
+      >
+        Close
+      </button>
+    </div>
+
+    <div
+      class="w-full flex flex-row p-2"
+      :style="importing ? 'hidden' : 'visible'"
+    >
+      <input
+        class="
+          flex-grow
+          min-w-72px
+          rounded-sm
+          h-40px
+          bg-white-700
+          placeholder-gray-700
+          pl-16px
+          mw-80
+        "
+        type="text"
+        placeholder="Paste URL here"
+      />
     </div>
-    <transition name="slide-fade">
-      <div class="w-full flex flex-row p-2" v-show="importing">
-        <input
-          class="
-            flex-grow
-            rounded-lg
-            h-40px
-            bg-white-700
-            placeholder-gray-700
-            pl-16px
-            mw-80
-          "
-          type="text"
-          placeholder="Paste URL here"
-        />
-      </div>
-    </transition>
   </div>
 </template>
 <script>

From e3f98d7c45feb81dea554d97bb52f12ebc3b8f44 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Tue, 8 Feb 2022 14:24:06 -0800
Subject: [PATCH 26/39] WIP - Layer Picker and feather icon integration

---
 package.json                             |  2 +
 src/App.vue                              |  1 -
 src/components/layouts/DefaultLayout.vue |  2 +-
 src/components/redesign/LayerPicker.vue  | 60 ++++++++++++++++++++++++
 src/main.js                              |  2 +
 src/views/NewHome.vue                    | 13 ++++-
 todo.md                                  | 21 +++++++++
 windi.config.js                          | 30 ++++++------
 yarn.lock                                | 23 +++++++++
 9 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 src/components/redesign/LayerPicker.vue
 create mode 100644 todo.md

diff --git a/package.json b/package.json
index fc1228fd10..f369269dfd 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,13 @@
     "@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",
     "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",
diff --git a/src/App.vue b/src/App.vue
index 3f1561bac8..b2e73c0bca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -200,7 +200,6 @@ export default {
 @import '@/scss/style.scss';
 #configurator {
   display: grid;
-  grid-template-rows: 1fr;
   grid-template-columns: minmax(1200px, 1728px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/layouts/DefaultLayout.vue b/src/components/layouts/DefaultLayout.vue
index 9dbae53ec0..16b524e58c 100644
--- a/src/components/layouts/DefaultLayout.vue
+++ b/src/components/layouts/DefaultLayout.vue
@@ -3,7 +3,7 @@
     <div class="m-2">
       <slot name="infobar" />
     </div>
-    <div class="gap-0"><slot name="application" /></div>
+    <div class=""><slot name="application" /></div>
     <footer>
       <slot name="footer" />
     </footer>
diff --git a/src/components/redesign/LayerPicker.vue b/src/components/redesign/LayerPicker.vue
new file mode 100644
index 0000000000..b0fd975842
--- /dev/null
+++ b/src/components/redesign/LayerPicker.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="grid grid-layout">
+    <div class="header mt-16px m-auto font-bold">LAYER</div>
+    <div class="layer-left flex flex-col-reverse">
+      <div v-for="layer in leftColumn" :key="layer" class="layer-button">
+        {{ layer }}
+      </div>
+    </div>
+    <div class="layer-right flex flex-col-reverse">
+      <div v-for="layer in rightColumn" :key="layer" class="layer-button">
+        {{ layer }}
+      </div>
+    </div>
+    <div class="controls m-16px"><feather type="trash-2"></feather></div>
+  </div>
+</template>
+<script>
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  data() {
+    return {};
+  },
+  setup() {
+    const rightColumn = [9, 10, 11, 12, 13, 14, 15, 16];
+    const leftColumn = [1, 2, 3, 4, 5, 6, 7, 8];
+    return {
+      leftColumn,
+      rightColumn
+    };
+  }
+});
+</script>
+<style scoped>
+.grid-layout {
+  grid-template:
+    'head head'
+    'layerLeft layerRight'
+    'controls controls';
+  grid-template-rows: 42px 1fr 100px;
+  grid-template-columns: 1fr 1fr;
+}
+.header {
+  grid-area: head;
+}
+.layer-left {
+  grid-area: layerLeft;
+}
+.layer-right {
+  grid-area: layerRight;
+}
+.controls {
+  grid-area: controls;
+}
+
+.layer-button {
+  @apply min-h-28px max-h-28px min-w-28px min-w-28px m-5px;
+  @apply text-lg;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index f477b903ec..5c9b802571 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,7 +18,9 @@ import 'xterm/css/xterm.css';
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
 import VueCompositionAPI from '@vue/composition-api';
+import VueFeather from 'vue-feather';
 
+Vue.use(VueFeather);
 Vue.use(VueI18n);
 Vue.use(VTooltip);
 Vue.use(VueCompositionAPI);
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 8943f4e929..ad5124d607 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -10,7 +10,9 @@
           ><div class="rounded-lg bg-white-panel h-100"></div
         ></template>
         <template #layerpicker>
-          <div class="rounded-lg bg-white-panel h-100"></div>
+          <div class="rounded-lg bg-white-panel h-100">
+            <layer-picker></layer-picker>
+          </div>
         </template>
         <template #about
           ><div class="relative h-100 w-100">
@@ -35,9 +37,16 @@ import DefaultLayout from '@/components/layouts/DefaultLayout.vue';
 import InfoBar from '@/components/redesign/InfoBar.vue';
 import ConfiguratorLayout from '@/components/layouts/ConfiguratorLayout.vue';
 import ControlPanel from '@/components/redesign/ControlPanel.vue';
+import LayerPicker from '../components/redesign/LayerPicker.vue';
 export default {
   name: 'configuratorTwo',
-  components: { DefaultLayout, InfoBar, ConfiguratorLayout, ControlPanel },
+  components: {
+    DefaultLayout,
+    InfoBar,
+    ConfiguratorLayout,
+    ControlPanel,
+    LayerPicker
+  },
   methods: {}
 };
 </script>
diff --git a/todo.md b/todo.md
new file mode 100644
index 0000000000..6e9dd27c0c
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,21 @@
+# TODO
+
+1. main.css integration for putting global shared tailwind styles like buttons
+2. import feather icons book-open
+box
+box
+chevron-down
+chevron-up
+cpu
+download
+external-link
+maximize-2
+minimize-2
+print
+rotate-ccw
+search
+settings
+star
+trash-2
+upload-cloud
+3. consider how to do GMK font positioning for Alphas
diff --git a/windi.config.js b/windi.config.js
index 997e932493..7fadeb97dc 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,40 +1,39 @@
-const { toRGBA } = require("windicss/utils");
+const { toRGBA } = require('windicss/utils');
 
 module.exports = {
   theme: {
     borderRadius: {
-      'sm': '8px',
-      'lg': '16px',
-
+      sm: '8px',
+      lg: '16px'
     },
     darkMode: 'class',
     extend: {
-      gridTemplateColumns: {
-      },
-      gridTemplateRows: {
-      },
+      gridTemplateColumns: {},
+      gridTemplateRows: {},
       colors: {
         'white-panel': '#CCD9F7',
         'white-app': '#ECF2FF',
-        'white-900': 'ECF2FF', 'white-app': '#ECF2FF',
-        'white-800': 'CCD9F6', 'white-panel': '#CCD9F6',
+        'white-900': 'ECF2FF',
+        'white-app': '#ECF2FF',
+        'white-800': 'CCD9F6',
+        'white-panel': '#CCD9F6',
         'white-700': '#B1C1E9',
         'grey-500': '#69718D',
         'grey-400': '#444A61',
         'grey-300': '#1F222D',
         'grey-200': '#14161E',
         'grey-100': '#06070A',
-        'black': '#000000',
-        'blue': '#0075FF',
+        black: '#000000',
+        blue: '#0075FF',
         'light-blue': '#4098FF',
         'dark-blue': '#005CC9',
-        'red': '#FF004D',
-        'green': '#00FFB2',
+        red: '#FF004D',
+        green: '#00FFB2',
         'glow-blue': 'rgba(0, 117, 255, 0.2)',
         'glow-dark-blue': 'rgba(0, 117, 255, 0.4)',
         'glow-red': 'rgba(255, 0, 77, 0.15)',
         'glow-green': 'rgba(0, 255, 178, 0.15)',
-        
+
         'upload-active': '#0075ff',
         'upload-focus': 'rgba(0,117,255,0.2)',
         'upload-disabled': 'rgba(6,7,10,1)'
@@ -42,4 +41,3 @@ module.exports = {
     }
   }
 };
-
diff --git a/yarn.lock b/yarn.lock
index 183105fcfc..8edf181a16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2954,6 +2954,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -3186,6 +3191,11 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.1.3:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.0.tgz#f479dbfc3dffb035a0827602dd056839a774aa71"
+  integrity sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==
+
 core-js@^3.6.5:
   version "3.20.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.3.tgz#c710d0a676e684522f3db4ee84e5e18a9d11d69a"
@@ -4120,6 +4130,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+feather-icons@4:
+  version "4.28.0"
+  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
+  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
+  dependencies:
+    classnames "^2.2.5"
+    core-js "^3.1.3"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -7986,6 +8004,11 @@ vue-eslint-parser@^8.0.1:
     lodash "^4.17.21"
     semver "^7.3.5"
 
+vue-feather@v1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue-feather/-/vue-feather-1.1.1.tgz#67987a46d9ec5695de01a815b3c1412e6a9832ec"
+  integrity sha512-J5M35aXZrEot0xdOAb7iCJf5HFNy3lAGNA7fGKol3qXvBII4+QKogCSpzg9zoFH3o7oX1LFbIRecgJGXt3XJEg==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

From 05d9a7d4d964ef0c43fdab8c16ca5aa6b1047de7 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Tue, 8 Feb 2022 17:19:40 -0800
Subject: [PATCH 27/39] Add iosevka font

 - integration into terminal
 - integrate into layer picker placeholder
---
 package.json                               |  1 +
 src/components/redesign/ConsoleControl.vue | 11 +++++----
 src/components/redesign/LayerPicker.vue    |  9 +++++--
 src/main.js                                |  2 ++
 todo.md                                    | 28 ++++++++++++++++++++++
 yarn.lock                                  |  5 ++++
 6 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f369269dfd..8e7be77d1a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "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",
diff --git a/src/components/redesign/ConsoleControl.vue b/src/components/redesign/ConsoleControl.vue
index fbf0169b5b..18ff246f02 100644
--- a/src/components/redesign/ConsoleControl.vue
+++ b/src/components/redesign/ConsoleControl.vue
@@ -18,15 +18,18 @@ import { FitAddon } from 'xterm-addon-fit';
 export default defineComponent({
   name: 'console-control',
   mounted() {
-    this.term.open(this.$refs.terminal);
-    this.fitAddon.fit();
-    this.term.write('hello world! https://config.qmk.fm');
+    window.setTimeout(() => {
+      this.term.open(this.$refs.terminal);
+      this.fitAddon.fit();
+      this.term.write('hello world! https://config.qmk.fm');
+    }, 500);
   },
   setup() {
     const term = new Terminal({
       rows: 25,
       cols: 80,
-      fontFamily: 'Courier',
+      fontFamily: 'Iosevka',
+      fontWeight: 400,
       theme: { background: '#ccd9f7', foreground: '#333' },
       scrollback: 400
     });
diff --git a/src/components/redesign/LayerPicker.vue b/src/components/redesign/LayerPicker.vue
index b0fd975842..1bc169415e 100644
--- a/src/components/redesign/LayerPicker.vue
+++ b/src/components/redesign/LayerPicker.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="grid grid-layout">
     <div class="header mt-16px m-auto font-bold">LAYER</div>
-    <div class="layer-left flex flex-col-reverse">
+    <div class="layers-common layer-left flex flex-col-reverse">
       <div v-for="layer in leftColumn" :key="layer" class="layer-button">
         {{ layer }}
       </div>
     </div>
-    <div class="layer-right flex flex-col-reverse">
+    <div class="layer-common layer-right flex flex-col-reverse">
       <div v-for="layer in rightColumn" :key="layer" class="layer-button">
         {{ layer }}
       </div>
@@ -43,6 +43,11 @@ export default defineComponent({
 .header {
   grid-area: head;
 }
+.layer-common {
+  font-family: Iosevka;
+  font-weight: normal;
+  font-weight: 400;
+}
 .layer-left {
   grid-area: layerLeft;
 }
diff --git a/src/main.js b/src/main.js
index 5c9b802571..3e095dd19c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,8 @@ import '@fontsource/roboto-mono/400.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/700.css';
 import '@fontsource/montserrat/400.css';
+import '@fontsource/iosevka/400.css';
+import '@fontsource/iosevka/700.css';
 import 'xterm/css/xterm.css';
 import 'virtual:windi.css';
 import 'virtual:windi-devtools';
diff --git a/todo.md b/todo.md
index 6e9dd27c0c..00080e30a3 100644
--- a/todo.md
+++ b/todo.md
@@ -19,3 +19,31 @@ star
 trash-2
 upload-cloud
 3. consider how to do GMK font positioning for Alphas
+4. fonts 
+   [buildPlans.iosevka-for-qmk]
+family = "Iosevka for QMK"
+spacing = "term"
+serifs = "sans"
+no-cv-ss = true
+no-ligation = true
+
+[buildPlans.iosevka-for-qmk.variants.design]
+lower-delta = "flat-top"
+lower-lambda = "straight-turn"
+lower-mu = "tailless"
+
+[buildPlans.iosevka-for-qmk.weights.regular]
+shape = 400
+menu = 400
+css = 400
+
+[buildPlans.iosevka-for-qmk.weights.bold]
+shape = 700
+menu = 700
+css = 700
+
+[buildPlans.iosevka-for-qmk.slopes.upright]
+angle = 0
+shape = "upright"
+menu = "upright"
+css = "normal"
diff --git a/yarn.lock b/yarn.lock
index 8edf181a16..9028479674 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1055,6 +1055,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/iosevka@^4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@fontsource/iosevka/-/iosevka-4.5.2.tgz#e930d4711d5501cebee8b7de1d6b071543d86d36"
+  integrity sha512-1llgLcHtwZf8cKYbCMZ4z+zD+iDuHrpAQGjoVKkh0HUuLtBL0fB+6+LyhCiYlehN6PTdS6pRsq4gLvvO5GkAug==
+
 "@fontsource/montserrat@^4.5.1":
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/@fontsource/montserrat/-/montserrat-4.5.1.tgz#64a33ffdb77bbc63484c0321710bed272cc5b16f"

From 3d402a58ba6725a0626a3cd4f577355f87269c5f Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Wed, 9 Feb 2022 12:27:26 -0800
Subject: [PATCH 28/39] Make left panel scrollable

---
 src/components/redesign/ConsoleControl.vue |  2 +-
 src/components/redesign/ControlPanel.vue   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/redesign/ConsoleControl.vue b/src/components/redesign/ConsoleControl.vue
index 18ff246f02..b664c60a00 100644
--- a/src/components/redesign/ConsoleControl.vue
+++ b/src/components/redesign/ConsoleControl.vue
@@ -21,7 +21,7 @@ export default defineComponent({
     window.setTimeout(() => {
       this.term.open(this.$refs.terminal);
       this.fitAddon.fit();
-      this.term.write('hello world! https://config.qmk.fm');
+      this.term.write('hello NAX! https://config.qmk.fm');
     }, 500);
   },
   setup() {
diff --git a/src/components/redesign/ControlPanel.vue b/src/components/redesign/ControlPanel.vue
index 392d7d03dd..882973cda5 100644
--- a/src/components/redesign/ControlPanel.vue
+++ b/src/components/redesign/ControlPanel.vue
@@ -1,5 +1,13 @@
 <template>
-  <div class="h-800px w-full max-h-800px overflow-y-hidden">
+  <div
+    class="
+      h-800px
+      w-full
+      max-h-full
+      overflow-y-hidden overflow-y-scroll
+      scrollable-panel
+    "
+  >
     <div class="flex flex-col w-full gap-2">
       <import-control />
       <console-control />
@@ -40,4 +48,10 @@ export default defineComponent({
 .btn {
   @apply font-bold py-2 px-4 rounded-lg;
 }
+.scrollable-panel {
+  scrollbar-width: 0;
+}
+.scrollable-panel::-webkit-scrollbar {
+  width: 0;
+}
 </style>

From 48451e6280923d2ea2967f2d23bcd9db406e93bb Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 10 Feb 2022 12:44:48 -0800
Subject: [PATCH 29/39] Fixes to windi, styling layer picker

 - circles, spacing
 - combining CSS Modules with Windi actually seems to work
   - it's a bit ugly but it does work as opposed to scoped which did not
     work with css classes using the map style of class activation.
   - fake data to show circles for active layer
---
 src/components/redesign/LayerPicker.vue | 95 ++++++++++++++++++++-----
 windi.config.js                         |  7 +-
 2 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/src/components/redesign/LayerPicker.vue b/src/components/redesign/LayerPicker.vue
index 1bc169415e..b0f8317aad 100644
--- a/src/components/redesign/LayerPicker.vue
+++ b/src/components/redesign/LayerPicker.vue
@@ -1,38 +1,83 @@
 <template>
-  <div class="grid grid-layout">
-    <div class="header mt-16px m-auto font-bold">LAYER</div>
-    <div class="layers-common layer-left flex flex-col-reverse">
-      <div v-for="layer in leftColumn" :key="layer" class="layer-button">
+  <div class="grid" :class="$style.gridLayout">
+    <div class="mt-16px m-auto font-bold" :class="[$style.header]">LAYER</div>
+    <div
+      class="flex flex-col-reverse w-44px"
+      :class="[$style.layersCommon, $style.layerLeft]"
+    >
+      <div
+        v-for="layer in leftColumn"
+        :key="layer"
+        :class="{
+          [$style.layerButton]: true,
+          [$style.layerButtonLeft]: true,
+          [$style.selectedLayer]: selectedLayer === layer,
+          [$style.activeLayer]: activeMap[layer]
+        }"
+      >
         {{ layer }}
       </div>
     </div>
-    <div class="layer-common layer-right flex flex-col-reverse">
-      <div v-for="layer in rightColumn" :key="layer" class="layer-button">
+
+    <div
+      class="flex flex-col-reverse w-44px"
+      :class="[$style.layerCommon, $style.layerRight]"
+    >
+      <div
+        v-for="layer in rightColumn"
+        :key="layer"
+        :class="{
+          [$style.layerButton]: true,
+          [$style.layerButtonRight]: true,
+          [$style.selectedLayer]: selectedLayer === layer,
+          [$style.activeLayer]: activeMap[layer]
+        }"
+      >
         {{ layer }}
       </div>
     </div>
-    <div class="controls m-16px"><feather type="trash-2"></feather></div>
+    <div class="m-16px" :class="[$style.controls]">
+      <feather type="trash-2"></feather>
+    </div>
   </div>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
 export default defineComponent({
+  props: {
+    activeLayers: {
+      type: Array,
+      default: () => [1, 2, 3]
+    },
+    selectedLayer: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ['selectedLayerChanged'],
   data() {
     return {};
   },
-  setup() {
+  setup(props) {
+    const activeMap = ref(
+      props.activeLayers.reduce((acc, layer) => {
+        acc[layer] = true;
+        return acc;
+      }, {})
+    );
     const rightColumn = [9, 10, 11, 12, 13, 14, 15, 16];
     const leftColumn = [1, 2, 3, 4, 5, 6, 7, 8];
     return {
       leftColumn,
-      rightColumn
+      rightColumn,
+      activeMap
     };
   }
 });
 </script>
-<style scoped>
-.grid-layout {
+<style module>
+.gridLayout {
   grid-template:
     'head head'
     'layerLeft layerRight'
@@ -43,23 +88,39 @@ export default defineComponent({
 .header {
   grid-area: head;
 }
-.layer-common {
+.layerCommon {
   font-family: Iosevka;
   font-weight: normal;
   font-weight: 400;
 }
-.layer-left {
+.layerLeft {
   grid-area: layerLeft;
 }
-.layer-right {
+.layerRight {
   grid-area: layerRight;
 }
 .controls {
   grid-area: controls;
 }
 
-.layer-button {
-  @apply min-h-28px max-h-28px min-w-28px min-w-28px m-5px;
+.layerButton {
+  @apply rounded-full h-28px w-28px min-h-28px max-h-28px min-w-28px min-w-28px;
   @apply text-lg;
+  @apply hover:bg-white-700 hover:text-grey-200;
+  @apply active:bg-grey-300 hover:text-white-800;
+  @apply cursor-pointer;
+}
+.layerButtonLeft {
+  @apply ml-10px mr-7px mt-5px mb-5px;
+}
+.layerButtonRight {
+  @apply mr-10px ml-7px mt-5px mb-5px;
+}
+.activeLayer {
+  @apply bg-white-700 text-grey-200;
+}
+
+.selectedLayer {
+  @apply bg-grey-300 text-white-800;
 }
 </style>
diff --git a/windi.config.js b/windi.config.js
index 7fadeb97dc..792f6d472e 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -4,7 +4,8 @@ module.exports = {
   theme: {
     borderRadius: {
       sm: '8px',
-      lg: '16px'
+      lg: '16px',
+      full: '9999px'
     },
     darkMode: 'class',
     extend: {
@@ -13,9 +14,9 @@ module.exports = {
       colors: {
         'white-panel': '#CCD9F7',
         'white-app': '#ECF2FF',
-        'white-900': 'ECF2FF',
+        'white-900': '#ECF2FF',
         'white-app': '#ECF2FF',
-        'white-800': 'CCD9F6',
+        'white-800': '#CCD9F6',
         'white-panel': '#CCD9F6',
         'white-700': '#B1C1E9',
         'grey-500': '#69718D',

From 2814d964f90323af91296be4e5d4bf7fff056a01 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 10 Feb 2022 12:49:30 -0800
Subject: [PATCH 30/39] Use new props on layer picker component

---
 src/components/redesign/LayerPicker.vue | 2 +-
 src/views/NewHome.vue                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/redesign/LayerPicker.vue b/src/components/redesign/LayerPicker.vue
index b0f8317aad..66fea78895 100644
--- a/src/components/redesign/LayerPicker.vue
+++ b/src/components/redesign/LayerPicker.vue
@@ -48,7 +48,7 @@ export default defineComponent({
   props: {
     activeLayers: {
       type: Array,
-      default: () => [1, 2, 3]
+      default: () => []
     },
     selectedLayer: {
       type: Number,
diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index ad5124d607..5782f89794 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -11,7 +11,7 @@
         ></template>
         <template #layerpicker>
           <div class="rounded-lg bg-white-panel h-100">
-            <layer-picker></layer-picker>
+            <layer-picker :activeLayers="[1, 2, 3, 4]"></layer-picker>
           </div>
         </template>
         <template #about

From 43bf4e92ddef1e1727a88f30935abb5523a569b7 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 10 Feb 2022 12:50:59 -0800
Subject: [PATCH 31/39] Use props for layer selection

---
 src/views/NewHome.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/NewHome.vue b/src/views/NewHome.vue
index 5782f89794..e10698c6d2 100644
--- a/src/views/NewHome.vue
+++ b/src/views/NewHome.vue
@@ -11,7 +11,10 @@
         ></template>
         <template #layerpicker>
           <div class="rounded-lg bg-white-panel h-100">
-            <layer-picker :activeLayers="[1, 2, 3, 4]"></layer-picker>
+            <layer-picker
+              :activeLayers="[1, 2, 3, 4]"
+              :selectedLayer="2"
+            ></layer-picker>
           </div>
         </template>
         <template #about

From 89c48f02d8e20239fdc8d7dbb1c51f5baf13e640 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Fri, 25 Feb 2022 11:11:25 -0800
Subject: [PATCH 32/39] Status Store: replace vuex with pinia

 - update call sites for old store
 - Clean up old watcher state
 - Await view readme changes to avoid races in updates
 - Append not defer since we are waiting for viewReadme
   - Make scrolling more consistent
---
 package.json                        |  1 +
 src/api.js                          | 28 +++++++--------
 src/components/ControllerBottom.vue | 18 ++++++----
 src/components/ControllerTop.vue    | 16 +++++----
 src/components/StatusPanel.vue      | 33 +++++++++++------
 src/components/VisualKeymap.vue     | 12 ++++---
 src/main.js                         |  6 ++++
 src/stores/status.js                | 55 +++++++++++++++++++++++++++++
 yarn.lock                           | 22 ++++++++++--
 9 files changed, 147 insertions(+), 44 deletions(-)
 create mode 100644 src/stores/status.js

diff --git a/package.json b/package.json
index 8e7be77d1a..0a969e8fff 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "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",
diff --git a/src/api.js b/src/api.js
index 4d3016ac3e..e0be6c1229 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import store from './store';
+import { useStatusStore } from '@/stores/status';
 
 import { backend_compile_url } from './store/modules/constants';
 
@@ -7,8 +8,9 @@ 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,13 +26,11 @@ 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) => {
@@ -38,8 +38,8 @@ function compileLayout(_keyboard, _keymapName, _layout) {
       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':
diff --git a/src/components/ControllerBottom.vue b/src/components/ControllerBottom.vue
index 585f147a61..f3fc76748a 100644
--- a/src/components/ControllerBottom.vue
+++ b/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',
diff --git a/src/components/ControllerTop.vue b/src/components/ControllerTop.vue
index 29d1b71146..eca8cfa583 100644
--- a/src/components/ControllerTop.vue
+++ b/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();
     },
     /**
diff --git a/src/components/StatusPanel.vue b/src/components/StatusPanel.vue
index 25ec658caa..c6c6c1a2a5 100644
--- a/src/components/StatusPanel.vue
+++ b/src/components/StatusPanel.vue
@@ -2,7 +2,7 @@
   <div id="status">
     <textarea
       id="terminal"
-      v-model="message"
+      v-model="statusStore.messageStr"
       ref="terminal"
       readonly
       :class="terminalClasses"
@@ -26,24 +26,34 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapMutations, mapState } from 'vuex';
+import { useStatusStore } from '@/stores/status';
+import { mapState } from 'vuex';
+import { mapStores } from 'pinia';
 export default {
   name: 'status-panel',
   watch: {
-    message(newV, oldV) {
-      if (this.scrollToLatest && newV !== oldV) {
-        this.scrollToEnd();
-        this.doneScroll();
-      }
-    },
     compileDisabled(newV) {
       if (newV === true) {
         this.isTerminalOpen = true;
       }
     }
   },
+  mounted() {
+    const statusStore = useStatusStore();
+    this.statusStoreWatcher = statusStore.$subscribe(() => {
+      if (this.statusStore.scrollToLatest) {
+        this.statusStore.scrollToEnd();
+        this.statusStore.doneScroll();
+      }
+    });
+  },
+  beforeDestroy() {
+    if (this.statusStoreWatcher) {
+      this.statusStoreWatcher();
+    }
+  },
   methods: {
-    ...mapMutations('status', ['doneScroll']),
+    // ...mapMutations('status', ['doneScroll']),
     scrollToEnd() {
       let terminal = this.$refs.terminal;
       this.$nextTick(() => {
@@ -60,7 +70,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('status', ['message', 'scrollToLatest']),
+    ...mapStores(useStatusStore),
     ...mapState('app', ['compileDisabled']),
     terminalClasses() {
       const classes = [];
@@ -72,7 +82,8 @@ export default {
   },
   data: () => {
     return {
-      isTerminalOpen: true
+      isTerminalOpen: true,
+      statusStoreWatcher: undefined
     };
   }
 };
diff --git a/src/components/VisualKeymap.vue b/src/components/VisualKeymap.vue
index 3613721b35..0d8089b9bc 100644
--- a/src/components/VisualKeymap.vue
+++ b/src/components/VisualKeymap.vue
@@ -14,6 +14,8 @@
 <script>
 import isUndefined from 'lodash/isUndefined';
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import { mapStores } from 'pinia';
+import { useStatusStore } from '@/stores/status';
 import BaseKeymap from '@/components/BaseKeymap.vue';
 import BaseKey from '@/components/BaseKey.vue';
 import AnyKey from '@/components/AnyKey.vue';
@@ -53,6 +55,7 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useStatusStore),
     ...mapState('keymap', ['config', 'displaySizes', 'layer']),
     ...mapGetters('keymap', [
       'getLayer',
@@ -106,8 +109,8 @@ export default {
       'resizeConfig',
       'setLoadingKeymapPromise'
     ]),
-    ...mapMutations('status', ['append']),
-    ...mapActions('status', ['scrollToEnd']),
+    // ...mapMutations('status', ['append']),
+    // ...mapActions('status', ['scrollToEnd']),
     /**
      * Due to a quirk in how reactivity works we have to clear the layout
      * name to reset the UI to it's old value.
@@ -165,8 +168,9 @@ export default {
       if (isUndefined(layout)) {
         const msg = `\n\nWARNING: layout ${newLayout} does not exist on this keyboard\n\n`;
         console.log(msg);
-        this.append(msg);
-        this.scrollToEnd();
+        this.statusStore.append(msg);
+        this.statusStore.setDeferredMessage(msg);
+        this.statusStore.scrollToEnd();
         return;
       }
       const max = layout.reduce(
diff --git a/src/main.js b/src/main.js
index 3e095dd19c..75773cc6e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import 'vue-select/dist/vue-select.css';
 import VueSlideoutPanel from 'vue2-slideout-panel';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 import '@fontsource/roboto-mono/400.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/700.css';
@@ -130,16 +131,21 @@ Vue.config.productionTip = false;
 // Make $i18n vm accessible in the store
 store.$i18n = i18n._vm;
 
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
+
 new Vue({
   router,
   store,
   i18n,
+  pinia,
   render: (h) => h(App)
 }).$mount('#app');
 
 new Vue({
   i18n,
   store,
+  pinia,
   render: (h) => h(StatusBar)
 }).$mount('#status-app');
 
diff --git a/src/stores/status.js b/src/stores/status.js
new file mode 100644
index 0000000000..036f466059
--- /dev/null
+++ b/src/stores/status.js
@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import axios from 'axios';
+import escape from 'lodash/escape';
+import { backend_readme_url_template } from '../store/modules/constants';
+import { defineStore } from 'pinia';
+
+export const useStatusStore = defineStore('status', {
+  state: () => ({
+    messages: [],
+    scrollToLatest: false,
+    deferredMessage: ''
+  }),
+  getters: {
+    messageStr(state) {
+      return state.messages.join('');
+    },
+    empty(state) {
+      return state.messages.length === 0;
+    }
+  },
+  actions: {
+    scrollToEnd() {
+      // signal scroll buffer to lastest message
+      this.startScroll();
+    },
+    async viewReadme(_keyboard) {
+      return axios
+        .get(backend_readme_url_template({ keyboard: _keyboard }))
+        .then((result) => {
+          if (result.status === 200) {
+            this.clear();
+            this.append(escape(result.data));
+            this.append(escape(this.deferredMessage));
+            // this.setDeferredMessage('');
+            this.scrollToEnd();
+          }
+        });
+    },
+    clear() {
+      Vue.set(this, 'messages', []);
+    },
+    append(msg) {
+      Vue.set(this, 'messages', this.messages.concat(msg));
+    },
+    doneScroll() {
+      this.scrollToLatest = false;
+    },
+    startScroll() {
+      this.scrollToLatest = true;
+    },
+    setDeferredMessage(state, dmsg) {
+      this.deferredMessage = dmsg;
+    }
+  }
+});
diff --git a/yarn.lock b/yarn.lock
index 9028479674..1948c5daf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1498,6 +1498,11 @@
   dependencies:
     tslib "^2.3.1"
 
+"@vue/devtools-api@^6.0.0-beta.21":
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
+  integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
+
 "@vue/eslint-config-prettier@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
@@ -4929,7 +4934,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
+is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
   integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
@@ -6279,7 +6284,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.7:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -6332,6 +6337,14 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b"
+  integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.21"
+    vue-demi "*"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -7996,6 +8009,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@*:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-eslint-parser@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz#25e08b20a414551531f3e19f999902e1ecf45f13"

From 47c56beb2c761f8951928b68c67129c90c130948 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Fri, 4 Mar 2022 13:36:40 -0800
Subject: [PATCH 33/39] Move vuex keycodes store to pinia

 - port store code from vuex to pinia
 - fix up all references to store to point to pinia keycodes store
 - delete vuex keycodes implementation
 - delete vuex status implementation
 - lookup keycodes is everywhere :)
---
 src/components/BaseKey.vue                    |   6 +-
 src/components/Keycodes.vue                   |  27 ++--
 src/store/index.js                            |   4 -
 src/store/modules/app/actions.js              |  16 +--
 src/store/modules/app/keypress-utils.js       |  13 +-
 src/store/modules/keycodes/index.js           | 117 ------------------
 src/store/modules/keymap.js                   |  11 +-
 src/store/modules/parse.js                    |  38 +++---
 src/store/modules/status.js                   |  58 ---------
 src/store/modules/tester/index.js             |   4 +-
 src/stores/keycodes.js                        | 114 +++++++++++++++++
 .../modules => stores}/keycodes/ansi.js       |   0
 .../keycodes/app-media-mouse.js               |   0
 src/stores/keycodes/index.js                  |   8 ++
 .../modules => stores}/keycodes/iso-jis.js    |   0
 .../keycodes/kb-settings.js                   |   0
 .../modules => stores}/keycodes/quantum.js    |   0
 .../modules => stores}/keycodes/steno.js      |   0
 18 files changed, 190 insertions(+), 226 deletions(-)
 delete mode 100644 src/store/modules/keycodes/index.js
 delete mode 100644 src/store/modules/status.js
 create mode 100644 src/stores/keycodes.js
 rename src/{store/modules => stores}/keycodes/ansi.js (100%)
 rename src/{store/modules => stores}/keycodes/app-media-mouse.js (100%)
 create mode 100644 src/stores/keycodes/index.js
 rename src/{store/modules => stores}/keycodes/iso-jis.js (100%)
 rename src/{store/modules => stores}/keycodes/kb-settings.js (100%)
 rename src/{store/modules => stores}/keycodes/quantum.js (100%)
 rename src/{store/modules => stores}/keycodes/steno.js (100%)

diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index 4b257151b4..ae9fc9651c 100644
--- a/src/components/BaseKey.vue
+++ b/src/components/BaseKey.vue
@@ -28,6 +28,8 @@ 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,
@@ -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;
diff --git a/src/components/Keycodes.vue b/src/components/Keycodes.vue
index 93c64800c0..bdf50f1cfe 100644
--- a/src/components/Keycodes.vue
+++ b/src/components/Keycodes.vue
@@ -25,11 +25,11 @@
           :class="classes(index)"
           v-for="(key, index) in keycodesByGroup"
           :key="index"
-          @click="changeActive(index)"
+          @click="keycodesStore.changeActive(index)"
           :title="$t('keycodesTab.' + index + '.label')"
           >{{ $t('keycodesTab.' + index + '.label')
-          }}<span v-if="searchFilter !== ''"
-            >({{ searchCounters[index] }})</span
+          }}<span v-if="keycodesStore.searchFilter !== ''"
+            >({{ keycodesStore.searchCounters[index] }})</span
           ></span
         >
         <span class="end-tab"
@@ -64,9 +64,11 @@ import debounce from 'lodash/debounce';
 import Keycode from '@/components/Keycode.vue';
 import Space from '@/components/Space.vue';
 import store from '@/store';
+import { mapStores } from 'pinia';
+import { useKeycodesStore } from '@/stores/keycodes';
 
 export default {
-  name: 'keycodes',
+  name: 'keycodes-component',
   components: { Keycode, Space },
   props: {},
   data() {
@@ -75,20 +77,22 @@ export default {
     };
   },
   mounted() {
-    this.debouncedSetSearchFilter = debounce(this.setSearchFilter, 500);
+    this.debouncedSetSearchFilter = debounce(
+      this.keycodesStore.setSearchFilter,
+      500
+    );
   },
   computed: {
-    ...mapGetters('keycodes', ['keycodes']),
+    ...mapStores(useKeycodesStore),
     ...mapState('app', ['configuratorSettings']),
-    ...mapState('keycodes', ['searchFilter', 'searchCounters', 'active']),
     defaultTab() {
       return this.configuratorSettings.iso ? 'ISO/JIS' : 'ANSI';
     },
     activeTab() {
-      return this.keycodesByGroup[this.active];
+      return this.keycodesByGroup[this.keycodesStore.active];
     },
     keycodesByGroup() {
-      let section = this.keycodes.reduce((acc, value) => {
+      let section = this.keycodesStore.getKeycodes.reduce((acc, value) => {
         if (value.group) {
           acc[value.label] = [];
           acc.current = value.label;
@@ -102,7 +106,7 @@ export default {
     },
     searchFilter_: {
       get() {
-        return this.searchFilter;
+        return this.keycodesStore.searchFilter;
       },
       set(newVal) {
         this.debouncedSetSearchFilter(newVal);
@@ -111,7 +115,6 @@ export default {
   },
   methods: {
     ...mapMutations('app', ['setMessage', 'stopListening', 'startListening']),
-    ...mapMutations('keycodes', ['setSearchFilter', 'changeActive']),
     getComponent(code) {
       return isUndefined(code) ? Space : Keycode;
     },
@@ -141,7 +144,7 @@ export default {
       }, 3000);
     },
     filterClass(key) {
-      if (this.searchFilter === '' || isUndefined(key.code)) {
+      if (this.keycodesStore.searchFilter === '' || isUndefined(key.code)) {
         return '';
       }
       const filter = this.searchFilter_.toUpperCase();
diff --git a/src/store/index.js b/src/store/index.js
index 7d6df9dce2..9de77b09e6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import app from './modules/app';
-import status from './modules/status';
 import keymap from './modules/keymap';
-import keycodes from './modules/keycodes';
 import tester from './modules/tester';
 
 Vue.use(Vuex);
@@ -11,9 +9,7 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   modules: {
     app,
-    status,
     keymap,
-    keycodes,
     tester
   },
   state: {},
diff --git a/src/store/modules/app/actions.js b/src/store/modules/app/actions.js
index 8516043dff..cbd49b3cd5 100644
--- a/src/store/modules/app/actions.js
+++ b/src/store/modules/app/actions.js
@@ -9,6 +9,8 @@ import {
 import { getPreferredLayout, getExclusionList } from '@/util';
 import { localStorageSet, CONSTS } from '@/store/localStorage';
 
+import { useKeycodesStore } from '@/stores/keycodes';
+
 const steno_keyboards = ['gergo', 'georgi'];
 
 const actions = {
@@ -83,10 +85,11 @@ const actions = {
         const stenoCheck = steno_keyboards.reduce((_, keeb) => {
           return { [keeb]: true };
         }, {});
+        const keycodesStore = useKeycodesStore();
         if (stenoCheck[keyboard]) {
-          this.commit('keycodes/enableSteno');
+          keycodesStore.enableSteno();
         } else {
-          this.commit('keycodes/disableSteno');
+          keycodesStore.disableSteno();
         }
 
         if (clearKeymap) {
@@ -161,7 +164,8 @@ const actions = {
     }
     commit('setIso', iso);
     const keyboardLayout = iso ? 'enableIso' : 'disableIso';
-    this.commit(`keycodes/${keyboardLayout}`);
+    const keycodesStore = useKeycodesStore();
+    iso ? keycodesStore.enableIso() : keycodesStore.disableIso();
     await dispatch('saveConfiguratorSettings');
   },
   async toggleClearLayerDefault({ commit, state, dispatch }) {
@@ -220,10 +224,8 @@ const actions = {
   async initKeypressListener({ commit }) {
     const store = this;
     const keypressListener = new keypress.Listener();
-    const conf = generateKeypressCombos(
-      store,
-      store.getters['keycodes/keycodes']
-    );
+    const keycodesStore = useKeycodesStore();
+    const conf = generateKeypressCombos(store, keycodesStore.getKeycodes);
     keypressListener.register_many(conf);
     keypressListener.simple_combo('ctrl shift i', () => {
       if (!store.state.app.isPreview) {
diff --git a/src/store/modules/app/keypress-utils.js b/src/store/modules/app/keypress-utils.js
index 83ceb00ad2..63e04a701b 100644
--- a/src/store/modules/app/keypress-utils.js
+++ b/src/store/modules/app/keypress-utils.js
@@ -1,6 +1,7 @@
 import values from 'lodash/values';
 import partial from 'lodash/partial';
 import isUndefined from 'lodash/isUndefined';
+import { useKeycodesStore } from '@/stores/keycodes';
 
 const keyLUT = {
   ContextMenu: 'KC_APP'
@@ -74,7 +75,8 @@ export function keydownHandler(store, meta, ev) {
     case 'KC_DOT':
     case 'KC_EQL':
       if (ev.location === ev.DOM_KEY_LOCATION_NUMPAD) {
-        _meta = store.getters['keycodes/lookupKeycode'](numPadLUT[meta.code]);
+        const keycodesStore = useKeycodesStore();
+        _meta = keycodesStore.lookupKeycode(numPadLUT[meta.code]);
       }
       break;
   }
@@ -97,11 +99,13 @@ export function modHandler(store, meta, ev) {
   // handle special cases eg. ContextMenu
   const special = keyLUT[ev.key];
   if (!isUndefined(special)) {
-    _meta = store.getters['keycodes/lookupKeycode'](special);
+    const keycodesStore = useKeycodesStore();
+    _meta = keycodesStore.lookupKeycode(special);
   } else {
     // detect left and right mods
     if (ev.location === ev.DOM_KEY_LOCATION_RIGHT) {
-      _meta = store.getters['keycodes/lookupKeycode'](modsLUT[meta.code]);
+      const keycodesStore = useKeycodesStore();
+      _meta = keycodesStore.lookupKeycode(modsLUT[meta.code]);
     }
   }
   store.commit('keymap/setKeycode', { _code: _meta.code });
@@ -109,7 +113,8 @@ export function modHandler(store, meta, ev) {
 
 // generate a keypress combo handler per keycode
 export function generateKeypressHandler(store, keycode) {
-  const meta = store.getters['keycodes/lookupKeycode'](keycode.code);
+  const keycodesStore = useKeycodesStore();
+  const meta = keycodesStore.lookupKeycode(keycode.code);
   switch (meta.code) {
     case 'KC_LGUI':
     case 'KC_LALT':
diff --git a/src/store/modules/keycodes/index.js b/src/store/modules/keycodes/index.js
deleted file mode 100644
index 6f3c213f1f..0000000000
--- a/src/store/modules/keycodes/index.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import isUndefined from 'lodash/isUndefined';
-import ansi from './ansi';
-import iso_jis from './iso-jis';
-import quantum from './quantum';
-import settings from './kb-settings';
-import media from './app-media-mouse';
-import steno from './steno';
-import store from '@/store';
-
-const keycodeLayout = {
-  ANSI: [...ansi, ...iso_jis],
-  ISO: [...iso_jis, ...ansi],
-  normal: [...quantum, ...settings, ...media]
-};
-
-const state = {
-  keycodes: [...keycodeLayout.ANSI, ...keycodeLayout.normal],
-  searchFilter: '',
-  searchCounters: {
-    ANSI: 0,
-    'ISO/JIS': 0,
-    Quantum: 0,
-    KeyboardSettings: 0,
-    AppMediaMouse: 0
-  },
-  steno: false,
-  active: 'ANSI'
-};
-
-function isISO() {
-  return store.state.app.configuratorSettings.iso;
-}
-
-function generateKeycodes(isIso, isSteno) {
-  const keycodes = [
-    ...(isIso ? keycodeLayout.ISO : keycodeLayout.ANSI),
-    ...keycodeLayout.normal,
-    ...(isSteno ? steno : [])
-  ];
-  return keycodes;
-}
-
-const getters = {
-  keycodes: (state) => state.keycodes,
-  lookupKeyPressCode: (state, getters) => (searchTerm) =>
-    getters.lookupKeycode(searchTerm, true),
-  lookupKeycode:
-    (state) =>
-    (searchTerm, isKeys = false) =>
-      state.keycodes.find(
-        ({ code, keys }) =>
-          code === searchTerm || (isKeys && keys && keys === searchTerm)
-      )
-};
-
-function countMatches(filter, collection) {
-  filter = filter.toUpperCase();
-  return collection.reduce((acc, { group, width, code, name, title }) => {
-    if (!isUndefined(code)) {
-      if (
-        code.includes(filter) ||
-        (name && name.toUpperCase().includes(filter)) ||
-        (title && title.toUpperCase().includes(filter))
-      ) {
-        acc += 1;
-      }
-    }
-    return acc;
-  }, 0);
-}
-
-const actions = {};
-const mutations = {
-  changeActive(state, newActive) {
-    state.active = newActive;
-  },
-  enableSteno(state) {
-    state.steno = true;
-    state.keycodes = generateKeycodes(isISO(), state.steno);
-  },
-  disableSteno(state) {
-    state.steno = false;
-    state.keycodes = generateKeycodes(isISO(), state.steno);
-  },
-  enableIso(state) {
-    state.keycodes = generateKeycodes(isISO(), state.steno);
-    if (state.active === 'ANSI') {
-      state.active = 'ISO/JIS';
-    }
-  },
-  disableIso(state) {
-    state.keycodes = generateKeycodes(isISO(), state.steno);
-    if (state.active === 'ISO/JIS') {
-      state.active = 'ANSI';
-    }
-  },
-  setSearchFilter(state, newVal) {
-    state.searchFilter = newVal;
-    if (this.searchFilter !== '') {
-      state.searchCounters = {
-        ANSI: countMatches(state.searchFilter, ansi),
-        'ISO/JIS': countMatches(state.searchFilter, iso_jis),
-        Quantum: countMatches(state.searchFilter, quantum),
-        KeyboardSettings: countMatches(state.searchFilter, settings),
-        AppMediaMouse: countMatches(state.searchFilter, media)
-      };
-    }
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};
diff --git a/src/store/modules/keymap.js b/src/store/modules/keymap.js
index 79ad34589d..286dfbcdd5 100644
--- a/src/store/modules/keymap.js
+++ b/src/store/modules/keymap.js
@@ -9,6 +9,8 @@ import axios from 'axios';
 import { backend_skeletons_url } from './constants';
 import { parseKeycode } from './parse.js';
 
+import { useKeycodesStore } from '@/stores/keycodes';
+
 const state = {
   keymap: [[]], // array of arrays
   layer: 0,
@@ -165,7 +167,8 @@ const actions = {
         commit('initLayer', { layer: toLayer });
       }
       let store = this;
-      let { name, code } = store.getters['keycodes/lookupKeycode']('KC_TRNS');
+      const keycodesStore = useKeycodesStore();
+      let { name, code } = keycodesStore.lookupKeycode('KC_TRNS');
       commit('assignKey', {
         _layer: toLayer,
         index,
@@ -243,7 +246,8 @@ const mutations = {
       return;
     }
     let store = this;
-    let { name, code, type } = store.getters['keycodes/lookupKeycode'](_code);
+    const keycodesStore = useKeycodesStore();
+    let { name, code, type } = keycodesStore.lookupKeycode(_code);
 
     if (state.selectedContent) {
       // only set values on contents not container, does not support continuous input
@@ -374,7 +378,8 @@ const mutations = {
     );
   },
   initKeymap(state, { layout, layer, code = 'KC_NO' }) {
-    const { name } = this.getters['keycodes/lookupKeycode'](code);
+    const keycodesStore = useKeycodesStore();
+    const { name } = keycodesStore.lookupKeycode(code);
     Vue.set(
       state.keymap,
       layer,
diff --git a/src/store/modules/parse.js b/src/store/modules/parse.js
index 7da4f4ba17..f15380bc21 100644
--- a/src/store/modules/parse.js
+++ b/src/store/modules/parse.js
@@ -2,14 +2,14 @@ import escape from 'lodash/escape';
 import isUndefined from 'lodash/isUndefined';
 
 import { longFormKeycodes } from '@/longFormKeycodes';
+import { useKeycodesStore } from '@/stores/keycodes';
 
-/* hasBitsSet
- *
- * arguments:
- *   test (number)
- *   value (number)
+/*
+ * hasBitsSet
+ * @param test (number)
+ * @param value (number)
  *
- * returns true if bit `value` of `test` is true, false otherwise
+ * @returns true if bit `value` of `test` is true, false otherwise
  */
 function hasBitsSet(test, value) {
   return (test & (1 << value)) === 2 ** value;
@@ -100,7 +100,8 @@ function processOneShotMods(store, keycode) {
   mods = cmods.join('|');
   keycode = `OSM(${mods})`;
 
-  const metadata = store.getters['keycodes/lookupKeycode'](keycode);
+  const keycodesStore = useKeycodesStore();
+  const metadata = keycodesStore.lookupKeycode(keycode);
   return newKey(metadata, keycode);
 }
 
@@ -119,7 +120,8 @@ function setLayerToNonEmpty(_layer) {
 */
 
 function newAnyKey(store, keycode) {
-  const anyKey = store.getters['keycodes/lookupKeycode']('text');
+  const keycodesStore = useKeycodesStore();
+  const anyKey = keycodesStore.lookupKeycode('text');
   // make a copy otherwise it uses a reference
   return Object.assign({}, anyKey, { text: keycode });
 }
@@ -142,19 +144,19 @@ function newKey(metadata, keycode, obj) {
 // We pre-assign the layers to make the UI easier to implement.
 function newLayerContainerKey(store, keycode, internal) {
   const internals = internal.split(',');
-  const LCKey = store.getters['keycodes/lookupKeycode'](
-    `${keycode}(${internals[0]},kc)`
-  );
+  const keycodesStore = useKeycodesStore();
+  const LCKey = keycodesStore.lookupKeycode(`${keycode}(${internals[0]},kc)`);
 
-  let contents = store.getters['keycodes/lookupKeycode'](internals[1]);
+  let contents = keycodesStore.lookupKeycode(internals[1]);
   if (isUndefined(contents)) {
-    contents = store.getters['keycodes/lookupKeycode']('KC_NO');
+    contents = keycodesStore.lookupKeycode('KC_NO');
   }
   let { code, layer, name, type } = LCKey;
   return Object.assign({ code, layer, name, type, contents: contents });
 }
 
 function parseKeycode(store, keycode, stats) {
+  const keycodesStore = useKeycodesStore();
   let metadata;
 
   keycode = stripANY(keycode);
@@ -190,7 +192,7 @@ function parseKeycode(store, keycode, stats) {
         return newLayerContainerKey(store, maincode, internal);
       }
       // combo keycode
-      metadata = store.getters['keycodes/lookupKeycode'](internal);
+      metadata = keycodesStore.lookupKeycode(internal);
       if (metadata === undefined) {
         stats.any += 1;
         return newAnyKey(store, keycode);
@@ -198,7 +200,7 @@ function parseKeycode(store, keycode, stats) {
       let internalkeycode = newKey(metadata, internal);
 
       outerKeycode = maincode + '(kc)';
-      metadata = store.getters['keycodes/lookupKeycode'](outerKeycode);
+      metadata = keycodesStore.lookupKeycode(outerKeycode);
       if (metadata === undefined) {
         stats.any += 1;
         return newAnyKey(store, keycode);
@@ -210,7 +212,7 @@ function parseKeycode(store, keycode, stats) {
 
     // layer switching
     outerKeycode = maincode + '(layer)';
-    metadata = store.getters['keycodes/lookupKeycode'](outerKeycode);
+    metadata = keycodesStore.lookupKeycode(outerKeycode);
     if (metadata === undefined) {
       stats.any += 1;
       return newAnyKey(store, keycode);
@@ -226,11 +228,11 @@ function parseKeycode(store, keycode, stats) {
         stats.layers
       } in keymap. Setting to KC_TRNS\n`
     );
-    return store.getters['keycodes/lookupKeycode']('KC_TRNS');
+    return keycodesStore.lookupKeycode('KC_TRNS');
   }
 
   // regular keycode
-  metadata = store.getters['keycodes/lookupKeycode'](keycode);
+  metadata = keycodesStore.lookupKeycode(keycode);
   if (metadata === undefined) {
     stats.any += 1;
     return newAnyKey(store, keycode);
diff --git a/src/store/modules/status.js b/src/store/modules/status.js
deleted file mode 100644
index 487817c747..0000000000
--- a/src/store/modules/status.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import axios from 'axios';
-import escape from 'lodash/escape';
-import { backend_readme_url_template } from './constants';
-
-const state = {
-  message: '',
-  scrollToLatest: false,
-  deferredMessage: ''
-};
-const getters = {
-  message: (state) => state.message,
-  empty: (state) => state.message === '',
-  scrollToLatest: (state) => state.scrollToLatest
-};
-const actions = {
-  scrollToEnd({ commit }) {
-    // signal scroll buffer to lastest message
-    commit('startScroll');
-  },
-  viewReadme({ state, commit, dispatch }, _keyboard) {
-    return axios
-      .get(backend_readme_url_template({ keyboard: _keyboard }))
-      .then((result) => {
-        if (result.status === 200) {
-          commit('clear');
-          commit('append', escape(result.data));
-          commit('append', escape(state.deferredMessage));
-          commit('deferredMessage', '');
-          dispatch('scrollToEnd');
-        }
-      });
-  }
-};
-const mutations = {
-  clear(state) {
-    state.message = '';
-  },
-  append(state, message) {
-    state.message += message;
-  },
-  doneScroll(state) {
-    state.scrollToLatest = false;
-  },
-  startScroll(state) {
-    state.scrollToLatest = true;
-  },
-  deferredMessage(state, dmsg) {
-    state.deferredMessage = dmsg;
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};
diff --git a/src/store/modules/tester/index.js b/src/store/modules/tester/index.js
index 9fbe09017f..a4a94612a5 100644
--- a/src/store/modules/tester/index.js
+++ b/src/store/modules/tester/index.js
@@ -5,6 +5,7 @@ import qmkToPos from './qmk';
 import codeToPos from './codeToPos';
 import layouts from './layouts';
 import isUndefined from 'lodash/isUndefined';
+import { useKeycodesStore } from '@/stores/keycodes';
 
 function reduceCodeToPos(arr) {
   // Create look up table for Browser Code to Layout position
@@ -67,7 +68,8 @@ const getters = {
 function mapKeymap(store, arr) {
   // Create look up table for QMK Code to Layout position
   return arr.map((code) => {
-    const meta = store.getters['keycodes/lookupKeycode'](code);
+    const keycodesStore = useKeycodesStore();
+    const meta = keycodesStore.lookupKeycode(code);
     return {
       ...meta
     };
diff --git a/src/stores/keycodes.js b/src/stores/keycodes.js
new file mode 100644
index 0000000000..760f27f838
--- /dev/null
+++ b/src/stores/keycodes.js
@@ -0,0 +1,114 @@
+import Vue from 'vue';
+import { defineStore } from 'pinia';
+import isUndefined from 'lodash/isUndefined';
+import {
+  ansi,
+  iso_jis,
+  quantum,
+  settings,
+  media,
+  steno
+} from './keycodes/index.js';
+import store from '@/store';
+
+const keycodeLayout = {
+  ANSI: [...ansi, ...iso_jis],
+  ISO: [...iso_jis, ...ansi],
+  normal: [...quantum, ...settings, ...media]
+};
+
+function isISO() {
+  return store.state.app.configuratorSettings.iso;
+}
+
+function generateKeycodes(isIso, isSteno) {
+  const keycodes = [
+    ...(isIso ? keycodeLayout.ISO : keycodeLayout.ANSI),
+    ...keycodeLayout.normal,
+    ...(isSteno ? steno : [])
+  ];
+  return keycodes;
+}
+
+function countMatches(filter, collection) {
+  filter = filter.toUpperCase();
+  return collection.reduce((acc, { group, width, code, name, title }) => {
+    if (!isUndefined(code)) {
+      if (
+        code.includes(filter) ||
+        (name && name.toUpperCase().includes(filter)) ||
+        (title && title.toUpperCase().includes(filter))
+      ) {
+        acc += 1;
+      }
+    }
+    return acc;
+  }, 0);
+}
+
+export const useKeycodesStore = defineStore('keycodes', {
+  state() {
+    return {
+      keycodes: [...keycodeLayout.ANSI, ...keycodeLayout.normal],
+      searchFilter: '',
+      searchCounters: {
+        ANSI: 0,
+        'ISO/JIS': 0,
+        Quantum: 0,
+        KeyboardSettings: 0,
+        AppMediaMouse: 0
+      },
+      steno: false,
+      active: 'ANSI'
+    };
+  },
+  getters: {
+    getKeycodes: (state) => state.keycodes,
+    lookupKeyPressCode: (state, getters) => (searchTerm) =>
+      getters.lookupKeycode(searchTerm, true),
+    lookupKeycode:
+      (state) =>
+      (searchTerm, isKeys = false) =>
+        state.keycodes.find(
+          ({ code, keys }) =>
+            code === searchTerm || (isKeys && keys && keys === searchTerm)
+        )
+  },
+  actions: {
+    changeActive(newActive) {
+      this.active = newActive;
+    },
+    enableSteno() {
+      this.steno = true;
+      this.keycodes = generateKeycodes(isISO(), this.steno);
+    },
+    disableSteno() {
+      this.steno = false;
+      this.keycodes = generateKeycodes(isISO(), this.steno);
+    },
+    enableIso() {
+      this.keycodes = generateKeycodes(isISO(), this.steno);
+      if (this.active === 'ANSI') {
+        this.active = 'ISO/JIS';
+      }
+    },
+    disableIso() {
+      this.keycodes = generateKeycodes(isISO(), this.steno);
+      if (this.active === 'ISO/JIS') {
+        this.active = 'ANSI';
+      }
+    },
+    setSearchFilter(newVal) {
+      this.searchFilter = newVal;
+      if (this.searchFilter !== '') {
+        this.searchCounters = {
+          ANSI: countMatches(this.searchFilter, ansi),
+          'ISO/JIS': countMatches(this.searchFilter, iso_jis),
+          Quantum: countMatches(this.searchFilter, quantum),
+          KeyboardSettings: countMatches(this.searchFilter, settings),
+          AppMediaMouse: countMatches(this.searchFilter, media)
+        };
+      }
+    }
+  }
+});
diff --git a/src/store/modules/keycodes/ansi.js b/src/stores/keycodes/ansi.js
similarity index 100%
rename from src/store/modules/keycodes/ansi.js
rename to src/stores/keycodes/ansi.js
diff --git a/src/store/modules/keycodes/app-media-mouse.js b/src/stores/keycodes/app-media-mouse.js
similarity index 100%
rename from src/store/modules/keycodes/app-media-mouse.js
rename to src/stores/keycodes/app-media-mouse.js
diff --git a/src/stores/keycodes/index.js b/src/stores/keycodes/index.js
new file mode 100644
index 0000000000..881b5f6307
--- /dev/null
+++ b/src/stores/keycodes/index.js
@@ -0,0 +1,8 @@
+import ansi from './ansi';
+import iso_jis from './iso-jis';
+import quantum from './quantum';
+import settings from './kb-settings';
+import media from './app-media-mouse';
+import steno from './steno';
+
+export { ansi, iso_jis, quantum, settings, media, steno };
diff --git a/src/store/modules/keycodes/iso-jis.js b/src/stores/keycodes/iso-jis.js
similarity index 100%
rename from src/store/modules/keycodes/iso-jis.js
rename to src/stores/keycodes/iso-jis.js
diff --git a/src/store/modules/keycodes/kb-settings.js b/src/stores/keycodes/kb-settings.js
similarity index 100%
rename from src/store/modules/keycodes/kb-settings.js
rename to src/stores/keycodes/kb-settings.js
diff --git a/src/store/modules/keycodes/quantum.js b/src/stores/keycodes/quantum.js
similarity index 100%
rename from src/store/modules/keycodes/quantum.js
rename to src/stores/keycodes/quantum.js
diff --git a/src/store/modules/keycodes/steno.js b/src/stores/keycodes/steno.js
similarity index 100%
rename from src/store/modules/keycodes/steno.js
rename to src/stores/keycodes/steno.js

From 79cb7d44a8a3246fa5970ee3929b8b8878a4f042 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Fri, 4 Mar 2022 16:25:21 -0800
Subject: [PATCH 34/39] Port tester vuex module to pinia

 - move getters and state to pinia
 - move mutations and actions to pinia
 - re-write mappers or use stores reference
 - Remove tester vuex store
---
 src/components/VisualTesterKeymap.vue         |  49 ++++---
 src/store/index.js                            |   4 +-
 src/store/modules/tester/index.js             | 124 ------------------
 src/stores/config.js                          |  10 ++
 src/stores/tester.js                          | 119 +++++++++++++++++
 .../modules => stores}/tester/codeToPos.js    |   0
 src/stores/tester/index.js                    |   5 +
 .../modules => stores}/tester/layouts.js      |   0
 src/{store/modules => stores}/tester/qmk.js   |   0
 src/views/Test.vue                            |   8 +-
 10 files changed, 162 insertions(+), 157 deletions(-)
 delete mode 100644 src/store/modules/tester/index.js
 create mode 100644 src/stores/config.js
 create mode 100644 src/stores/tester.js
 rename src/{store/modules => stores}/tester/codeToPos.js (100%)
 create mode 100644 src/stores/tester/index.js
 rename src/{store/modules => stores}/tester/layouts.js (100%)
 rename src/{store/modules => stores}/tester/qmk.js (100%)

diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index 5318429c9a..19c28b8035 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/src/components/VisualTesterKeymap.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tester">
     <div class="layout-selector-radios">
-      <slot v-for="_layout in availableLayouts">
+      <slot v-for="_layout in testerStore.availableLayouts">
         <button
           class="layout-btn-select"
           v-on:click="layout = _layout"
@@ -46,7 +46,7 @@
         class="status-log"
         ref="status"
         spellcheck="false"
-        v-html="status"
+        v-html="mystatus"
       ></div>
       <div id="chatter-container">
         <span v-tooltip="$t('tester.typewritericon.label')">
@@ -89,32 +89,33 @@
 </template>
 <script>
 import isUndefined from 'lodash/isUndefined';
-import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
+import { mapMutations } from 'vuex';
 import BaseKeymap from '@/components/BaseKeymap.vue';
 import TesterKey from '@/components/TesterKey.vue';
 import { Howl } from 'howler';
 
+import { useTesterStore } from '@/stores/tester';
+import { mapState, mapStores } from 'pinia';
+
 export default {
   name: 'visual-tester-keymap',
   extends: BaseKeymap,
   async mounted() {
     this.createKeyListeners();
-    await this.init();
+    this.testerStore.init();
     this.setSize(this.calculateMax(this.layout));
   },
   beforeDestroy() {
     this.destroyKeyListeners();
   },
   computed: {
-    ...mapState('tester', [
+    ...mapStores(useTesterStore),
+    ...mapState(useTesterStore, [
       'defaults',
       'layouts',
       'config',
       'keymap',
-      'chatterDetected'
-    ]),
-    ...mapGetters('keymap', ['colorway']),
-    ...mapGetters('tester', [
+      'chatterDetected',
       'availableLayouts',
       'getQMKCode',
       'activeKeymap',
@@ -123,15 +124,15 @@ export default {
     ]),
     layout: {
       get() {
-        return this.$store.state.tester.layout;
+        return this.testerStore.layout;
       },
       set(value) {
-        this.$store.commit('tester/reset', value);
-        this.$store.commit('tester/setLayout', value);
+        this.testerStore.reset(value);
+        this.testerStore.setLayout(value);
       }
     },
     testerLayer() {
-      const keymap = this.activeKeymap;
+      const keymap = this.testerStore.activeKeymap;
       if (isUndefined(keymap)) {
         return [];
       }
@@ -139,7 +140,7 @@ export default {
       // Calculate Max with given layout
       // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
-      const curLayer = this.activeLayoutMeta.map((pos, index) => {
+      const curLayer = this.testerStore.activeLayoutMeta.map((pos, index) => {
         const _pos = Object.assign({ w: 1, h: 1 }, pos);
         const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
         const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
@@ -165,12 +166,6 @@ export default {
   },
   methods: {
     ...mapMutations('keymap', ['resizeConfig']),
-    ...mapMutations('tester', [
-      'setActive',
-      'setDetected',
-      'setChatterDetected'
-    ]),
-    ...mapActions('tester', ['init']),
     toggleAudio() {
       this.audioIcon =
         this.audioIcon === 'volume-mute' ? 'volume-up' : 'volume-mute';
@@ -211,7 +206,7 @@ export default {
       const pos = this.codeToPosition[this.firefoxKeys(ev.code)];
       this.writeToStatus(this.formatLog('KEY-UP', pos, evStr));
       if (!isUndefined(pos)) {
-        this.setDetected({
+        this.testerStore.setDetected({
           pos
         });
       }
@@ -232,7 +227,7 @@ export default {
       this.lastCode = ev.code;
       this.lastKeyCode = ev.keyCode;
       if (!isUndefined(pos)) {
-        this.setActive({ pos });
+        this.testerStore.setActive({ pos });
 
         // Chatter detection is triggered when a switch
         // triggers an event too quickly after the last
@@ -244,7 +239,7 @@ export default {
           this.timingKeyDown[ev.code] - this.timingKeyUp[ev.code] <
             this.chatterThreshold
         ) {
-          this.setChatterDetected({ pos });
+          this.testerStore.setChatterDetected({ pos });
         }
       }
       if (this.audioIcon !== 'volume-mute') {
@@ -259,9 +254,9 @@ export default {
       });
     },
     writeToStatus(msg) {
-      this.status += msg + '\n';
-      if (this.status.length > 1000) {
-        this.status = this.status.split('\n').slice(-20).join('\n');
+      this.mystatus += msg + '\n';
+      if (this.mystatus.length > 1000) {
+        this.mystatus = this.mystatus.split('\n').slice(-20).join('\n');
       }
       this.scrollToEnd();
     },
@@ -315,7 +310,7 @@ export default {
       chatterThreshold: 8,
       width: 0,
       height: 0,
-      status: '',
+      mystatus: '',
       timingKeyUp: {},
       timingKeyDown: {},
       lastKey: '',
diff --git a/src/store/index.js b/src/store/index.js
index 9de77b09e6..2430fff637 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,15 +2,13 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import app from './modules/app';
 import keymap from './modules/keymap';
-import tester from './modules/tester';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
     app,
-    keymap,
-    tester
+    keymap
   },
   state: {},
   mutations: {},
diff --git a/src/store/modules/tester/index.js b/src/store/modules/tester/index.js
deleted file mode 100644
index a4a94612a5..0000000000
--- a/src/store/modules/tester/index.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import defaults from '../config';
-import keys from 'lodash/keys';
-import Vue from 'vue';
-import qmkToPos from './qmk';
-import codeToPos from './codeToPos';
-import layouts from './layouts';
-import isUndefined from 'lodash/isUndefined';
-import { useKeycodesStore } from '@/stores/keycodes';
-
-function reduceCodeToPos(arr) {
-  // Create look up table for Browser Code to Layout position
-  return arr.reduce((acc, code, idx) => {
-    acc[code] = idx;
-    return acc;
-  }, {});
-}
-
-const codeToPosition = {
-  ANSI: reduceCodeToPos(codeToPos.ANSI),
-  ISO: reduceCodeToPos(codeToPos.ISO)
-};
-
-function getDefaultLayout() {
-  const userLang = navigator.language || navigator.userLanguage;
-  let layout = 'ANSI';
-  if (userLang.toLowerCase().indexOf('en') < 0) {
-    layout = 'ISO';
-  }
-  return layout;
-}
-
-const state = {
-  defaults,
-  codeToPosition,
-  config: Object.assign({}, defaults),
-  layout: getDefaultLayout(),
-  keymap: {},
-  layouts: {
-    ISO: layouts.ISO,
-    ANSI: layouts.ANSI
-  },
-  chatterDetected: false
-};
-
-const getters = {
-  availableLayouts(state) {
-    return keys(state.layouts).sort();
-  },
-  getQMKCode(state) {
-    return (pos) => {
-      if (isUndefined(pos)) {
-        return '';
-      }
-      return state.keymap[state.layout][pos].code;
-    };
-  },
-  activeKeymap(state) {
-    return state.keymap[state.layout];
-  },
-  activeLayoutMeta(state) {
-    return state.layouts[state.layout];
-  },
-  codeToPosition(state) {
-    return state.codeToPosition[state.layout];
-  }
-};
-
-function mapKeymap(store, arr) {
-  // Create look up table for QMK Code to Layout position
-  return arr.map((code) => {
-    const keycodesStore = useKeycodesStore();
-    const meta = keycodesStore.lookupKeycode(code);
-    return {
-      ...meta
-    };
-  });
-}
-
-const actions = {
-  init({ state, commit }) {
-    const store = this;
-    commit('setKeymap', {
-      ANSI: mapKeymap(store, qmkToPos.ANSI),
-      ISO: mapKeymap(store, qmkToPos.ISO)
-    });
-    return state.keymap;
-  }
-};
-
-const mutations = {
-  setLayout(state, layout) {
-    state.layout = layout;
-  },
-  setKeymap(state, keymap) {
-    state.keymap = keymap;
-  },
-  setActive(state, { pos }) {
-    Vue.set(state.keymap[state.layout][pos], 'active', true);
-    Vue.set(state.keymap[state.layout][pos], 'detected', false);
-  },
-  setDetected(state, { pos }) {
-    Vue.set(state.keymap[state.layout][pos], 'active', false);
-    Vue.set(state.keymap[state.layout][pos], 'detected', true);
-  },
-  setChatterDetected(state, { pos }) {
-    state.chatterDetected = true;
-    Vue.set(state.keymap[state.layout][pos], 'chatter', true);
-  },
-  reset(state) {
-    state.chatterDetected = false;
-    state.keymap[state.layout].forEach((v, idx) => {
-      Vue.set(state.keymap[state.layout][idx], 'detected', false);
-      Vue.set(state.keymap[state.layout][idx], 'chatter', false);
-    });
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};
diff --git a/src/stores/config.js b/src/stores/config.js
new file mode 100644
index 0000000000..71fd5f8563
--- /dev/null
+++ b/src/stores/config.js
@@ -0,0 +1,10 @@
+export default {
+  MAX_X: 800,
+  KEY_WIDTH: 40,
+  KEY_HEIGHT: 40,
+  SWAP_KEY_WIDTH: 30,
+  SWAP_KEY_HEIGHT: 30,
+  KEY_X_SPACING: 45,
+  KEY_Y_SPACING: 45,
+  SCALE: 1
+};
diff --git a/src/stores/tester.js b/src/stores/tester.js
new file mode 100644
index 0000000000..ea21ed5ae6
--- /dev/null
+++ b/src/stores/tester.js
@@ -0,0 +1,119 @@
+import defaults from './config';
+import keys from 'lodash/keys';
+import isUndefined from 'lodash/isUndefined';
+import Vue from 'vue';
+
+import { qmkToPos, codeToPos, layouts } from './tester/index';
+
+import { useKeycodesStore } from '@/stores/keycodes';
+import { defineStore } from 'pinia';
+
+const ACTIVE = 'active';
+const DETECTED = 'detected';
+const CHATTER = 'chatter';
+
+function reduceCodeToPos(arr) {
+  // Create look up table for Browser Code to Layout position
+  return arr.reduce((acc, code, idx) => {
+    acc[code] = idx;
+    return acc;
+  }, {});
+}
+
+const _codeToPosition = {
+  ANSI: reduceCodeToPos(codeToPos.ANSI),
+  ISO: reduceCodeToPos(codeToPos.ISO)
+};
+
+function getDefaultLayout() {
+  const userLang = navigator.language || navigator.userLanguage;
+  let layout = 'ANSI';
+  if (userLang.toLowerCase().indexOf('en') < 0) {
+    layout = 'ISO';
+  }
+  return layout;
+}
+
+function mapKeymap(arr) {
+  // Create look up table for QMK Code to Layout position
+  return arr.map((code) => {
+    const keycodesStore = useKeycodesStore();
+    const meta = keycodesStore.lookupKeycode(code);
+    return {
+      ...meta
+    };
+  });
+}
+
+export const useTesterStore = defineStore('tester', {
+  state() {
+    return {
+      defaults,
+      _codeToPosition,
+      config: Object.assign({}, defaults),
+      layout: getDefaultLayout(),
+      keymap: {},
+      layouts: {
+        ISO: layouts.ISO,
+        ANSI: layouts.ANSI
+      },
+      chatterDetected: false
+    };
+  },
+  getters: {
+    availableLayouts(state) {
+      return keys(state.layouts).sort();
+    },
+    getQMKCode(state) {
+      return (pos) => {
+        if (isUndefined(pos)) {
+          return '';
+        }
+        return state.keymap[state.layout][pos].code;
+      };
+    },
+    activeKeymap(state) {
+      return state.keymap[state.layout];
+    },
+    activeLayoutMeta(state) {
+      return state.layouts[state.layout];
+    },
+    codeToPosition(state) {
+      return state._codeToPosition[state.layout];
+    }
+  },
+  actions: {
+    init() {
+      this.setKeymap({
+        ANSI: mapKeymap(qmkToPos.ANSI),
+        ISO: mapKeymap(qmkToPos.ISO)
+      });
+      return this.keymap;
+    },
+    setLayout(layout) {
+      this.layout = layout;
+    },
+    setKeymap(keymap) {
+      this.keymap = keymap;
+    },
+    setActive({ pos }) {
+      Vue.set(this.keymap[this.layout][pos], ACTIVE, true);
+      Vue.set(this.keymap[this.layout][pos], DETECTED, false);
+    },
+    setDetected({ pos }) {
+      Vue.set(this.keymap[this.layout][pos], ACTIVE, false);
+      Vue.set(this.keymap[this.layout][pos], DETECTED, true);
+    },
+    setChatterDetected({ pos }) {
+      this.chatterDetected = true;
+      Vue.set(this.keymap[this.layout][pos], DETECTED, true);
+    },
+    reset() {
+      this.chatterDetected = false;
+      this.keymap[this.layout].forEach((v, idx) => {
+        Vue.set(this.keymap[this.layout][idx], DETECTED, false);
+        Vue.set(this.keymap[this.layout][idx], CHATTER, false);
+      });
+    }
+  }
+});
diff --git a/src/store/modules/tester/codeToPos.js b/src/stores/tester/codeToPos.js
similarity index 100%
rename from src/store/modules/tester/codeToPos.js
rename to src/stores/tester/codeToPos.js
diff --git a/src/stores/tester/index.js b/src/stores/tester/index.js
new file mode 100644
index 0000000000..d091741463
--- /dev/null
+++ b/src/stores/tester/index.js
@@ -0,0 +1,5 @@
+import qmkToPos from './qmk';
+import codeToPos from './codeToPos';
+import layouts from './layouts';
+
+export { qmkToPos, codeToPos, layouts };
diff --git a/src/store/modules/tester/layouts.js b/src/stores/tester/layouts.js
similarity index 100%
rename from src/store/modules/tester/layouts.js
rename to src/stores/tester/layouts.js
diff --git a/src/store/modules/tester/qmk.js b/src/stores/tester/qmk.js
similarity index 100%
rename from src/store/modules/tester/qmk.js
rename to src/stores/tester/qmk.js
diff --git a/src/views/Test.vue b/src/views/Test.vue
index 4375a09ec3..3617ef2fd4 100644
--- a/src/views/Test.vue
+++ b/src/views/Test.vue
@@ -14,16 +14,18 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex';
+import { mapState } from 'vuex';
+import { mapActions } from 'pinia';
 import VisualTesterKeymap from '@/components/VisualTesterKeymap.vue';
+import { useTesterStore } from '@/stores/tester';
 export default {
-  name: 'testerator',
+  name: 'testerator-component',
   computed: {
     ...mapState('app', ['keyboard', 'layout'])
   },
   components: { VisualTesterKeymap },
   methods: {
-    ...mapMutations('tester', ['reset']),
+    ...mapActions(useTesterStore, ['reset']),
     gohome() {
       this.$router.push(`/${this.keyboard}/${this.layout}`);
     }

From b5b9ecc99ebcb2a5606a2a354afb3ee968d00ee4 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Fri, 4 Mar 2022 16:54:31 -0800
Subject: [PATCH 35/39] Fix unit test

---
 src/stores/tester.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/tester.js b/src/stores/tester.js
index ea21ed5ae6..0445622e6a 100644
--- a/src/stores/tester.js
+++ b/src/stores/tester.js
@@ -106,7 +106,7 @@ export const useTesterStore = defineStore('tester', {
     },
     setChatterDetected({ pos }) {
       this.chatterDetected = true;
-      Vue.set(this.keymap[this.layout][pos], DETECTED, true);
+      Vue.set(this.keymap[this.layout][pos], CHATTER, true);
     },
     reset() {
       this.chatterDetected = false;

From f62ec467835e57d9f2d9ff5b5dd31d3e2844f5ef Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Fri, 4 Mar 2022 17:04:13 -0800
Subject: [PATCH 36/39] Don't create store inside of a loop

---
 src/stores/tester.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/tester.js b/src/stores/tester.js
index 0445622e6a..16ac7af4dc 100644
--- a/src/stores/tester.js
+++ b/src/stores/tester.js
@@ -36,8 +36,8 @@ function getDefaultLayout() {
 
 function mapKeymap(arr) {
   // Create look up table for QMK Code to Layout position
+  const keycodesStore = useKeycodesStore();
   return arr.map((code) => {
-    const keycodesStore = useKeycodesStore();
     const meta = keycodesStore.lookupKeycode(code);
     return {
       ...meta

From 0356f319375c72cf0b081d4169781415cbbed3bb Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Mon, 7 Mar 2022 09:57:41 -0800
Subject: [PATCH 37/39] Add try catch handlers to routing

---
 src/components/ControllerBottom.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/ControllerBottom.vue b/src/components/ControllerBottom.vue
index f3fc76748a..be325de364 100644
--- a/src/components/ControllerBottom.vue
+++ b/src/components/ControllerBottom.vue
@@ -484,11 +484,29 @@ export default {
         console.log('unexpected error', err);
       }
     },
-    printKeymaps() {
-      this.$router.push('/print');
+    async printKeymaps() {
+      await 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');
+    async testKeys() {
+      this.$router.push('/test').catch((err) => {
+        if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
+          return;
+        }
+        if (isNavigationFailure(err, NavigationFailureType.cancelled)) {
+          return;
+        }
+
+        throw err;
+      });
     }
   },
   data: () => {

From a3c5d2d3ac56989711e2fd24f976afcb3675272b Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Mon, 7 Mar 2022 10:14:25 -0800
Subject: [PATCH 38/39] Navigation should be sync

---
 src/components/ControllerBottom.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ControllerBottom.vue b/src/components/ControllerBottom.vue
index be325de364..92cba85ac4 100644
--- a/src/components/ControllerBottom.vue
+++ b/src/components/ControllerBottom.vue
@@ -497,7 +497,7 @@ export default {
       });
     },
     async testKeys() {
-      this.$router.push('/test').catch((err) => {
+      await this.$router.push('/test').catch((err) => {
         if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
           return;
         }

From e17aaad81fc7962e9312198f847ecdf0464b8b53 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Mon, 7 Mar 2022 10:26:11 -0800
Subject: [PATCH 39/39] revert this change. it's breaking cypress

 - probably on VM it takes to long to render (> 5 secs)
---
 src/components/ControllerBottom.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ControllerBottom.vue b/src/components/ControllerBottom.vue
index 92cba85ac4..9abcc3aebf 100644
--- a/src/components/ControllerBottom.vue
+++ b/src/components/ControllerBottom.vue
@@ -484,8 +484,8 @@ export default {
         console.log('unexpected error', err);
       }
     },
-    async printKeymaps() {
-      await this.$router.push('/print').catch((err) => {
+    printKeymaps() {
+      this.$router.push('/print').catch((err) => {
         if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
           return;
         }
@@ -496,8 +496,8 @@ export default {
         throw err;
       });
     },
-    async testKeys() {
-      await this.$router.push('/test').catch((err) => {
+    testKeys() {
+      this.$router.push('/test').catch((err) => {
         if (isNavigationFailure(err, NavigationFailureType.duplicated)) {
           return;
         }