keyboard stuff, styling things

src/lib/components/layout/ActionSelector.svelte

@@ -5,6 +5,7 @@
   import {createEventDispatcher} from "svelte"
   import ActionListItem from "$lib/components/ActionListItem.svelte"
   import LL from "../../../i18n/i18n-svelte"
+  import {action} from "$lib/title"
 
   export let currentAction: number
 
@@ -38,10 +39,6 @@
   function keyboardNavigation(event: KeyboardEvent) {
     if (event.shiftKey && event.key === "Enter") {
       dispatch("select", exact)
-    } else if (event.shiftKey && event.key === "Escape") {
-      dispatch("select", 0)
-    } else if (event.key === "Escape") {
-      dispatch("close")
     } else if (event.key === "ArrowDown") {
       const element =
         resultList.querySelector("li:focus-within")?.nextSibling ?? resultList.querySelector("li:not(.exact)")
@@ -88,11 +85,14 @@
         }}
         placeholder={$LL.actionSearch.PLACEHOLDER()}
       />
-      <button on:click={() => select(0)}
-        ><div><span class="icon key-hint">shift</span>+<span class="key-hint">ESC</span></div>
-        {$LL.actionSearch.DELETE()}</button
+      <button on:click={() => select(0)} use:action={{shortcut: "shift+esc"}}
+        >{$LL.actionSearch.DELETE()}</button
+      >
+      <button
+        use:action={{title: $LL.modal.CLOSE(), shortcut: "esc"}}
+        class="icon"
+        on:click={() => dispatch("close")}>close</button
       >
-      <button title={$LL.modal.CLOSE()} class="icon" on:click={() => dispatch("close")}>close</button>
     </div>
     <aside>
       <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
@@ -101,11 +101,7 @@
     <ul bind:this={resultList}>
       {#if exact !== undefined}
         <li class="exact">
-          <i
-            >Exact match&nbsp;<span class="icon key-hint">shift</span>+<span class="icon key-hint"
-              >keyboard_return</span
-            ></i
-          >
+          <i>Exact match</i>
           <ActionListItem id={exact} on:click={() => select(exact)} />
         </li>
       {/if}
@@ -165,38 +161,6 @@
     gap: 4px;
     align-items: center;
     margin-inline: 16px;
-
-    > button {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      height: fit-content;
-
-      color: currentcolor;
-
-      background: none;
-      border: none;
-      border-radius: 100%;
-
-      &:not(.icon) {
-        font-family: inherit;
-        font-weight: bold;
-      }
-
-      & > div {
-        display: flex;
-        gap: 2px;
-        align-items: center;
-      }
-
-      &:last-child {
-        aspect-ratio: 1;
-        color: var(--md-sys-color-on-surface-variant);
-        background: var(--md-sys-color-surface-variant);
-      }
-    }
   }
 
   .content {
@@ -281,26 +245,4 @@
       border-radius: 0 0 8px 8px;
     }
   }
-
-  .key-hint {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    height: 20px;
-    margin-block: 6px;
-    padding: 2px;
-
-    font-size: 14px;
-    font-weight: normal;
-    color: currentcolor;
-
-    border: 1px solid currentcolor;
-    border-radius: 4px;
-
-    &.icon {
-      padding: 0;
-      font-size: 18px;
-    }
-  }
 </style>

src/lib/components/layout/Layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {serialPort} from "$lib/serial/connection"
   import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
+  import {action} from "$lib/title"
 
   $: device = $serialPort?.device ?? "ONE"
   let activeLayer = 0
@@ -16,8 +17,8 @@
   <fieldset>
     {#each layers as [title, icon, value]}
       <button
-        {title}
         class="icon"
+        use:action={{title, shortcut: `alt+${value + 1}`}}
         on:click={() => (activeLayer = value)}
         class:active={activeLayer === value}
       >
@@ -71,13 +72,19 @@
       outline: 8px solid var(--md-sys-color-background);
     }
 
+    &:first-child,
+    &:last-child {
+      aspect-ratio: unset;
+      height: unset;
+    }
+
     &:first-child {
-      padding-inline-end: 16px;
+      padding-inline: 4px 16px;
       border-radius: 16px 0 0 16px;
     }
 
     &:last-child {
-      padding-inline-start: 16px;
+      padding-inline: 16px 4px;
       border-radius: 0 16px 16px 0;
     }
 

src/lib/components/layout/RingInput.svelte

@@ -121,6 +121,8 @@
   }
 
   button {
+    all: unset;
+
     cursor: pointer;
 
     position: absolute;
@@ -131,7 +133,7 @@
     height: 100cqh;
     padding: 0;
 
-    font-family: "Noto Sans Mono", monospace;
+    font-family: inherit;
     font-size: 16px;
     font-weight: 900;
     color: var(--md-sys-color-on-surface-variant);