feat: chord modifier hints

src/lib/components/Action.svelte

@@ -10,23 +10,40 @@
 
   $: info = typeof action === "number" ? KEYMAP_CODES[action] ?? {code: action} : action
   $: dynamicMapping = info.keyCode && $osLayout[JSON.stringify([info.keyCode])]
+
+  $: tooltip =
+    (info.title ?? info.id ?? `0x${info.code.toString(16)}`) +
+    (info.variant === "left" ? " (left)" : info.variant === "right" ? " (right)" : "")
 </script>
 
 {#if dynamicMapping}
   <span
     use:title={{title: $LL.actionSearch.LIVE_LAYOUT_INFO()}}
     class="dynamic"
+    class:left={info.variant === "left"}
+    class:right={info.variant === "right"}
     class:inline={display === "inline-keys"}>{dynamicMapping}</span
   >
 {:else if display === "keys"}
-  <kbd class:icon={!!info.icon} use:title={{title: info.title ?? info.id}}>
+  <kbd
+    class:icon={!!info.icon}
+    class:left={info.variant === "left"}
+    class:right={info.variant === "right"}
+    use:title={{title: tooltip}}
+  >
     {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}
   </kbd>
 {:else if display === "inline-keys"}
   {#if !info.icon && info.id?.length === 1}
-    <span>{info.id}</span>
+    <span class:left={info.variant === "left"} class:right={info.variant === "right"}>{info.id}</span>
   {:else}
-    <kbd class="inline-kbd" class:icon={!!info.icon} use:title={{title: info.title ?? info.id}}>
+    <kbd
+      class="inline-kbd"
+      class:left={info.variant === "left"}
+      class:right={info.variant === "right"}
+      class:icon={!!info.icon}
+      use:title={{title: tooltip}}
+    >
       {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
     >
   {/if}
@@ -39,6 +56,13 @@
     transition: color 250ms ease;
   }
 
+  .left {
+    border-left-width: 3px;
+  }
+  .right {
+    border-right-width: 3px;
+  }
+
   .dynamic {
     padding: 4px;
     border-radius: 1px;

src/routes/config/settings/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Action from "$lib/components/Action.svelte"
   import {serialPort} from "$lib/serial/connection"
   import {setting} from "$lib/setting"
 </script>
@@ -14,7 +15,12 @@
         chording, but also takes away the flexibility of character entry.
       </p>
       <p>Spurring also helps new users learn how to chord by eliminating the need to focus on timing.</p>
-      <p>Spurring is toggled by chording both of the 'mirror' keys together.</p>
+      <p>
+        Spurring is toggled by chording <Action display="keys" action={540} /> and <Action
+          display="keys"
+          action={542}
+        /> together.
+      </p>
       <label
         >Character Counter Timeout<span class="unit"
           ><input type="number" step="0.001" min="0" max="240" use:setting={{id: 43, scale: 0.001}} />s</span
@@ -30,12 +36,22 @@
       </p>
       <p>The following keys have special behavior when arpeggiates are enabled:</p>
       <ul>
-        <li><kbd>,</kbd>, <kbd>;</kbd> and <kbd>:</kbd> will be placed before the auto-inserted space</li>
         <li>
-          <kbd>.</kbd>, <kbd>?</kbd> and <kbd>!</kbd> will be placed before the auto-inserted space and capitalize
-          the next word
+          <Action display="keys" action={44} />, <Action display="keys" action={59} /> and <Action
+            display="keys"
+            action={58}
+          /> will be placed before the auto-inserted space
+        </li>
+        <li>
+          <Action display="keys" action={46} />, <Action display="keys" action={63} /> and <Action
+            display="keys"
+            action={33}
+          /> will be placed before the auto-inserted space and capitalize the next word
+        </li>
+        <li>
+          <Action display="keys" action={45} /> and <Action display="keys" action={47} /> will replace the auto-inserted
+          space
         </li>
-        <li><kbd>-</kbd> will replace the auto-inserted space</li>
       </ul>
       <label
         >Timeout After Chord<span class="unit"><input type="number" step="1" use:setting={{id: 54}} />ms</span
@@ -43,6 +59,22 @@
       >
     </fieldset>
 
+    <fieldset>
+      <legend>Chord Modifiers</legend>
+      <p>
+        Chord modifiers change a chord when held with the chord or when pressed after (arpeggiated), <b
+          >provided that arpeggiates are enabled.</b
+        >
+      </p>
+      <ul>
+        <li><Action display="keys" action={513} /> Capitalizes the first letter of a chord</li>
+        <li><Action display="keys" action={540} /> Present Tense (supported words only)</li>
+        <li><Action display="keys" action={542} /> Plural (supported words only)</li>
+        <li><Action display="keys" action={550} /> Past Tense (supported words only)</li>
+        <li><Action display="keys" action={551} /> Comparative (supported words only)</li>
+      </ul>
+    </fieldset>
+
     <fieldset>
       <legend>Character Entry</legend>
       {#if $serialPort.device === "LITE"}
@@ -234,6 +266,11 @@
     ul,
     p {
       font-size: 10px;
+
+      :global(kbd) {
+        font-size: 12px;
+        height: 18px;
+      }
     }
   }