add layout edit placeholders

[deploy]

.prettierignore

@@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+static/languages/*/.json

icons.config.ts

@@ -13,6 +13,7 @@ const config: IconsConfig = {
     "piano",
     "keyboard",
     "settings",
+    "edit",
     "music_note",
     "avg_pace",
     "lyrics",

src/lib/components/InputEdit.svelte

@@ -10,7 +10,39 @@
     {@const action = KEYMAP_CODES[layer[id]]}
     <tr>
       <th class="icon">counter_{i + 1}</th>
-      <td>{action?.id}</td>
+      <td><button>{action?.title || action?.id} <span class="icon">edit</span></button></td>
     </tr>
   {/each}
 </table>
+
+<style lang="scss">
+  span.icon {
+    opacity: 0;
+    transition: opacity 250ms ease;
+  }
+
+  button {
+    cursor: pointer;
+
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    font-family: "Noto Sans Mono", monospace;
+    font-weight: 600;
+    color: var(--md-sys-color-on-surface);
+
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+
+    transition: all 250ms ease;
+  }
+
+  button:hover > span.icon {
+    opacity: 1;
+  }
+</style>

src/lib/components/Navigation.svelte

@@ -1,6 +1,5 @@
 <script>
   import {serialPort, syncStatus} from "$lib/serial/connection"
-  import {browser} from "$app/environment"
   import {page} from "$app/stores"
   import {slide, fly} from "svelte/transition"
   import {canShare, triggerShare} from "$lib/share"
@@ -37,14 +36,6 @@
     {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
       <PwaStatus />
     {/await}
-    {#if browser && !("serial" in navigator)}
-      <abbr
-        title="Your browser does not support serial connections. Try using Chrome instead."
-        class="icon error"
-      >
-        warning
-      </abbr>
-    {/if}
     <a
       title="Backup & Restore"
       href="/backup/"

src/lib/editable-layout.ts

@@ -10,6 +10,7 @@ export const editableLayout: Action<HTMLButtonElement, {id: number; quadrant: nu
   const edit = tippy(node, {
     interactive: true,
     appendTo: document.body,
+    trigger: "click",
     placement: (["top", "right", "bottom", "left"] as const)[quadrant],
     onShow(instance) {
       component ??= new InputEdit({