added steno and steno matrix keymap style

frontend/src/styles/keymap.scss

@@ -219,6 +219,45 @@
       }
     }
   }
+  &.steno,
+  &.steno_matrix {
+    .r2,
+    .r3 {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    }
+    .r4 {
+      display: grid;
+      grid-template-columns: 3.25fr 1fr 1fr 1fr 1fr 1fr 3.25fr;
+    }
+    &.steno {
+      .r2,
+      .r3 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+      }
+      .r4 {
+        display: grid;
+        grid-template-columns: 2.6fr 1fr 1fr 0.1fr 1fr 1fr 3.65fr;
+        .keymapSplitSpacer {
+          display: block;
+        }
+      }
+      .r2 .keymapKey:nth-child(1),
+      .r2 .keymapKey:nth-child(5) {
+        height: 4.25rem;
+      }
+      .r3 .keymapKey:nth-child(1),
+      .r3 .keymapKey:nth-child(5) {
+        visibility: hidden;
+      }
+    }
+    &.steno_matrix {
+      .keymapSplitSpacer {
+        display: block;
+      }
+    }
+  }
   &.alice {
     .keymapSplitSpacer {
       display: block;

frontend/src/ts/commandline/lists/keymap-style.ts

@@ -44,6 +44,22 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
         UpdateConfig.setKeymapStyle("split_matrix");
       },
     },
+    {
+      id: "setKeymapStyleSteno",
+      display: "steno",
+      configValue: "steno",
+      exec: (): void => {
+        UpdateConfig.setKeymapStyle("steno");
+      },
+    },
+    {
+      id: "setKeymapStyleStenoMatrix",
+      display: "steno matrix",
+      configValue: "steno_matrix",
+      exec: (): void => {
+        UpdateConfig.setKeymapStyle("steno_matrix");
+      },
+    },
   ],
 };
 

frontend/src/ts/config.ts

@@ -1557,7 +1557,15 @@ export function setKeymapStyle(
 ): boolean {
   if (
     !isConfigValueValid("keymap style", style, [
-      ["staggered", "alice", "matrix", "split", "split_matrix"],
+      [
+        "staggered",
+        "alice",
+        "matrix",
+        "split",
+        "split_matrix",
+        "steno",
+        "steno_matrix",
+      ],
     ])
   ) {
     return false;

frontend/src/ts/elements/keymap.ts

@@ -8,6 +8,18 @@ import * as Hangul from "hangul-js";
 import * as Notifications from "../elements/notifications";
 import * as ActivePage from "../states/active-page";
 
+const stenoKeys: MonkeyTypes.Layout = {
+  keymapShowTopRow: true,
+  type: "matrix",
+  keys: {
+    row1: [],
+    row2: ["sS", "tT", "pP", "hH", "**", "fF", "pP", "lL", "tT", "dD"],
+    row3: ["sS", "kK", "wW", "rR", "**", "rR", "bB", "gG", "sS", "zZ"],
+    row4: ["aA", "oO", "eE", "uU"],
+    row5: [],
+  },
+};
+
 function highlightKey(currentKey: string): void {
   if (Config.mode === "zen") return;
   if (currentKey === "") currentKey = " ";
@@ -136,6 +148,13 @@ export async function refresh(
     const isMatrix =
       Config.keymapStyle === "matrix" || Config.keymapStyle === "split_matrix";
 
+    const isSteno =
+      Config.keymapStyle === "steno" || Config.keymapStyle === "steno_matrix";
+
+    if (isSteno) {
+      lts = stenoKeys;
+    }
+
     let keymapElement = "";
 
     (Object.keys(lts.keys) as (keyof MonkeyTypes.Keys)[]).forEach(
@@ -148,19 +167,24 @@ export async function refresh(
           rowKeys = rowKeys.slice(1);
         }
         let rowElement = "";
-        if (row === "row1" && !showTopRow) {
+        if (row === "row1" && (!showTopRow || isSteno)) {
           return;
         }
 
-        if ((row === "row2" || row === "row3" || row === "row4") && !isMatrix) {
+        if (
+          (row === "row2" || row === "row3" || row === "row4") &&
+          !isMatrix &&
+          !isSteno
+        ) {
           rowElement += "<div></div>";
         }
 
-        if (row === "row4" && lts.type !== "iso" && !isMatrix) {
+        if (row === "row4" && lts.type !== "iso" && !isMatrix && !isSteno) {
           rowElement += "<div></div>";
         }
 
         if (row === "row5") {
+          if (isSteno) return;
           const layoutDisplay = layoutString.replace(/_/g, " ");
           let letterStyle = "";
           if (Config.keymapLegendStyle === "blank") {
@@ -215,9 +239,16 @@ export async function refresh(
             if (
               Config.keymapStyle === "split" ||
               Config.keymapStyle === "split_matrix" ||
-              Config.keymapStyle === "alice"
+              Config.keymapStyle === "alice" ||
+              isSteno
             ) {
               if (
+                row === "row4" &&
+                isSteno &&
+                (i === 0 || i === 2 || i === 4)
+              ) {
+                splitSpacer += `<div class="keymapSplitSpacer"></div>`;
+              } else if (
                 row === "row4" &&
                 (Config.keymapStyle === "split" ||
                   Config.keymapStyle === "alice") &&
@@ -235,7 +266,7 @@ export async function refresh(
                   splitSpacer += `<div class="keymapSplitSpacer"></div>`;
                 }
               } else {
-                if (i === 5) {
+                if (i === 5 && isSteno) {
                   splitSpacer += `<div class="keymapSplitSpacer"></div>`;
                 }
               }
@@ -265,6 +296,8 @@ export async function refresh(
     $("#keymap").removeClass("split");
     $("#keymap").removeClass("split_matrix");
     $("#keymap").removeClass("alice");
+    $("#keymap").removeClass("steno");
+    $("#keymap").removeClass("steno_matrix");
     $("#keymap").addClass(Config.keymapStyle);
   } catch (e) {
     if (e instanceof Error) {

frontend/src/ts/types/types.d.ts

@@ -70,7 +70,9 @@ declare namespace MonkeyTypes {
     | "alice"
     | "matrix"
     | "split"
-    | "split_matrix";
+    | "split_matrix"
+    | "steno"
+    | "steno_matrix";
 
   type KeymapLegendStyle = "lowercase" | "uppercase" | "blank" | "dynamic";
 

frontend/static/html/pages/settings.html

@@ -1775,6 +1775,22 @@
         >
           split matrix
         </div>
+        <div
+          class="button"
+          keymapStyle="steno"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          steno
+        </div>
+        <div
+          class="button"
+          keymapStyle="steno_matrix"
+          tabindex="0"
+          onclick="this.blur();"
+        >
+          steno matrix
+        </div>
       </div>
     </div>
     <div class="section keymapLegendStyle fullWidth">