From 6facaad4a2c9c863e30f3c479606d18bbc3359ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Tue, 18 Jul 2023 02:01:25 +0200
Subject: [PATCH] add layout edit placeholders

[deploy]
---
 .prettierignore                      |  2 ++
 icons.config.ts                      |  1 +
 src/lib/components/InputEdit.svelte  | 34 +++++++++++++++++++++++++++-
 src/lib/components/Navigation.svelte |  9 --------
 src/lib/editable-layout.ts           |  1 +
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 38972655..cad77e00 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+static/languages/*/.json
diff --git a/icons.config.ts b/icons.config.ts
index d955f0bd..cf552cca 100644
--- a/icons.config.ts
+++ b/icons.config.ts
@@ -13,6 +13,7 @@ const config: IconsConfig = {
     "piano",
     "keyboard",
     "settings",
+    "edit",
     "music_note",
     "avg_pace",
     "lyrics",
diff --git a/src/lib/components/InputEdit.svelte b/src/lib/components/InputEdit.svelte
index 172e7cc2..fc2f1661 100644
--- a/src/lib/components/InputEdit.svelte
+++ b/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>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 3c850aee..f22bdabd 100644
--- a/src/lib/components/Navigation.svelte
+++ b/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/"
diff --git a/src/lib/editable-layout.ts b/src/lib/editable-layout.ts
index 35b37edf..d961f723 100644
--- a/src/lib/editable-layout.ts
+++ b/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({