add tooltip stuff

[deploy]

src/lib/components/InputEdit.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import {layout} from "$lib/serial/connection"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+
+  export let id: number = 0
+</script>
+
+<table>
+  {#each $layout as layer, i}
+    {@const action = KEYMAP_CODES[layer[id]]}
+    <tr>
+      <th class="icon">counter_{i + 1}</th>
+      <td>{action?.id}</td>
+    </tr>
+  {/each}
+</table>

src/lib/components/RingInput.svelte

@@ -3,6 +3,7 @@
   import type {CharaLayout} from "$lib/serialization/layout"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
+  import {editableLayout} from "$lib/editable-layout"
 
   export let activeLayer = 0
   export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
@@ -19,13 +20,6 @@
     return 25 * quadrant + layerOffsetIndex * layerOffset
   }
 
-  function getKeyDescriptions(keys: KeyInfo[]): string {
-    return keys
-      .filter(it => !!it)
-      .map(({title, id, code}, i) => `${title || id || code} (${layerNames[i]})`)
-      .join("\n")
-  }
-
   function getActions(id: number, layout: CharaLayout): KeyInfo[] {
     return Array.from({length: 3}).map((_, i) => {
       const actionId = layout?.[i][id]
@@ -38,7 +32,7 @@
   {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
     {@const actions = getActions(id, $layout)}
     <button
-      title={getKeyDescriptions(actions)}
+      use:editableLayout={{id, quadrant}}
       class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
     >
       {#each actions as keyInfo, layer}