feat: new blocking progress bar, fixes #18

feat: change cloud icon to history, fixes #15
fix: action search items overlap, fixes #16
feat: show tooltips immediately

icons.config.ts

@@ -72,6 +72,8 @@ const config: IconsConfig = {
     "navigate_next",
     "print",
     "restore_from_trash",
+    "history",
+    "history_toggle_off",
   ],
   codePoints: {
     speed: "e9e4",

package.json

@@ -44,9 +44,6 @@
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "@tauri-apps/api": "^1.4.0",
     "@tauri-apps/cli": "^1.4.0",
-    "@tiptap/core": "^2.1.12",
-    "@tiptap/pm": "^2.1.12",
-    "@tiptap/starter-kit": "^2.1.12",
     "@theaninova/prettier-config": "^1.0.0",
     "@types/dom-view-transitions": "^1.0.1",
     "@types/flexsearch": "^0.7.3",

src/i18n/de/index.ts

@@ -9,6 +9,12 @@ const de = {
     APPLY: "Anwenden",
     SAVE: "Änderungen auf das Gerät schreiben",
   },
+  sync: {
+    TITLE_READ: "Neueste Änderungen werden abgerufen",
+    TITLE_WRITE: "Änderungen werden gebrannt",
+    DISCLAIMER_WRITE:
+      "Das Brennen von Änderungen ist nur für Layouts und Einstellungen erforderlich wenn diese Neustarts überdauern sollen. Bei Akkorden passiert das brennen automatisch beim anwenden.",
+  },
   backup: {
     TITLE: "Sicherungskopie",
     DISCLAIMER:
@@ -28,9 +34,13 @@ const de = {
     },
   },
   share: {
+    TITLE: "Teilen",
     URL_COPIED: "Teilbare URL kopiert!",
     EXTRA_DOWNLOAD: "Als Datei herunterladen",
   },
+  print: {
+    TITLE: "Drucken",
+  },
   profile: {
     TITLE: "Profil",
     LANGUAGE: "Sprache",
@@ -67,12 +77,21 @@ const de = {
     DOWNLOAD_APP: "Desktop-app herunterladen",
   },
   changes: {
-    TITLE: "Änderungen anwenden",
+    TITLE: "Änderungen importieren",
-    CHORD_ADD: "{0} Akkord{{|e}} hinzugefügt",
+    ALL_CHANGES: "Alle Änderungen",
-    CHORD_EDIT: "{0} Akkord{{|e}} bearbeitet",
+    layout: {
-    CHORD_DELETE: "{0} Akkord{{|e}} entfernt",
+      TITLE: "{0} veränderte Belegung{{:|en}}",
-    SETTING_CHANGE: "{0} Einstellung{{|en}} geändert",
+      LAYER: "{changes} Belegung{{changes:|en}} in Ebene {layer} ändern",
-    LAYOUT_CHANGE: "{0} Layout-belegung{{|en}} geändert",
+    },
+    settings: {
+      TITLE: "{0} Einstellung{{|en}} anpassen",
+    },
+    chords: {
+      TITLE: "{0} Akkorde",
+      NEW_CHORDS: "{0} neue Akkord{{|e}} hinzufügen",
+      CHANGED_CHORDS: "{0} Akkord{{|e}} ersetzen",
+      DELETED_CHORDS: "{0} Akkord{{|e}} zum löschen markieren",
+    },
   },
   configure: {
     chords: {

src/i18n/en/index.ts

@@ -7,7 +7,7 @@ const en = {
     UNDO: "Undo (hold <kbd class='icon'>shift</kbd> to undo all changes)",
     REDO: "Redo",
     APPLY: "Apply",
-    SAVE: "Write changes to your device",
+    SAVE: "Burn changes to your device",
   },
   backup: {
     TITLE: "Local Backup",
@@ -15,6 +15,12 @@ const en = {
     DOWNLOAD: "Download Backup",
     RESTORE: "Restore",
   },
+  sync: {
+    TITLE_READ: "Reading latest changes",
+    TITLE_WRITE: "Burning changes to device",
+    DISCLAIMER_WRITE:
+      "Burning is only necessary if you want your layout or settings to persist across reboots. Chords always persist automatically on apply.",
+  },
   modal: {
     CLOSE: "Close",
   },
@@ -27,9 +33,13 @@ const en = {
     },
   },
   share: {
+    TITLE: "Share",
     URL_COPIED: "Sharable URL copied!",
     EXTRA_DOWNLOAD: "Download as file",
   },
+  print: {
+    TITLE: "Print",
+  },
   profile: {
     TITLE: "Profile",
     LANGUAGE: "Language",
@@ -65,12 +75,21 @@ const en = {
     DOWNLOAD_APP: "Download the desktop app",
   },
   changes: {
-    TITLE: "Apply changes",
+    TITLE: "Import changes",
-    CHORD_ADD: "{0} chord{{|s}} added",
+    ALL_CHANGES: "All changes",
-    CHORD_EDIT: "{0} chord{{|s}} edited",
+    layout: {
-    CHORD_DELETE: "{0} chord{{|s}} deleted",
+      TITLE: "{0} layout change{{|s}}",
-    SETTING_CHANGE: "{0} setting{{|s}} changed",
+      LAYER: "Update {changes} key{{changes:|s}} in layer {layer}",
-    LAYOUT_CHANGE: "{0} layout key{{|s}} changed",
+    },
+    settings: {
+      TITLE: "Update {0} setting{{|s}}",
+    },
+    chords: {
+      TITLE: "{0} chords",
+      NEW_CHORDS: "Add {0} new chord{{|s}}",
+      CHANGED_CHORDS: "Replace {0} chord{{|s}}",
+      DELETED_CHORDS: "Mark {0} chord{{|s}} for deletion",
+    },
   },
   configure: {
     chords: {

src/lib/assets/keymaps/scancode.yml

@@ -15,311 +15,408 @@ actions:
     title: Keyboard Error Undefined
   260:
     id: "KEY_A"
+    keyCode: "KeyA"
     title: Keyboard a and A (US English)
     description: Non US English keyboard users may prefer these Raw Scancodes
   261:
     id: "KEY_B"
+    keyCode: "KeyB"
     title: Keyboard b and B (US English)
   262:
     id: "KEY_C"
+    keyCode: "KeyC"
     title: Keyboard c and C (US English)
   263:
     id: "KEY_D"
+    keyCode: "KeyD"
     title: Keyboard d and D (US English)
   264:
     id: "KEY_E"
+    keyCode: "KeyE"
     title: Keyboard e and E (US English)
   265:
     id: "KEY_F"
+    keyCode: "KeyF"
     title: Keyboard f and F (US English)
   266:
     id: "KEY_G"
+    keyCode: "KeyG"
     title: Keyboard g and G (US English)
   267:
     id: "KEY_H"
+    keyCode: "KeyH"
     title: Keyboard h and H (US English)
   268:
     id: "KEY_I"
+    keyCode: "KeyI"
     title: Keyboard i and I (US English)
   269:
     id: "KEY_J"
+    keyCode: "KeyJ"
     title: Keyboard j and J (US English)
   270:
     id: "KEY_K"
+    keyCode: "KeyK"
     title: Keyboard k and K (US English)
   271:
     id: "KEY_L"
+    keyCode: "KeyL"
     title: Keyboard l and L (US English)
   272:
     id: "KEY_M"
+    keyCode: "KeyM"
     title: Keyboard m and M (US English)
   273:
     id: "KEY_N"
+    keyCode: "KeyN"
     title: Keyboard n and N (US English)
   274:
     id: "KEY_O"
+    keyCode: "KeyO"
     title: Keyboard o and O (US English)
   275:
     id: "KEY_P"
+    keyCode: "KeyP"
     title: Keyboard p and P (US English)
   276:
     id: "KEY_Q"
+    keyCode: "KeyQ"
     title: Keyboard q and Q (US English)
   277:
     id: "KEY_R"
+    keyCode: "KeyR"
     title: Keyboard r and R (US English)
   278:
     id: "KEY_S"
+    keyCode: "KeyS"
     title: Keyboard s and S (US English)
   279:
     id: "KEY_T"
+    keyCode: "KeyT"
     title: Keyboard t and T (US English)
   280:
     id: "KEY_U"
+    keyCode: "KeyU"
     title: Keyboard u and U (US English)
   281:
     id: "KEY_V"
+    keyCode: "KeyV"
     title: Keyboard v and V (US English)
   282:
     id: "KEY_W"
+    keyCode: "KeyW"
     title: Keyboard w and W (US English)
   283:
     id: "KEY_X"
+    keyCode: "KeyX"
     title: Keyboard x and X (US English)
   284:
     id: "KEY_Y"
+    keyCode: "KeyY"
     title: Keyboard y and Y (US English)
   285:
     id: "KEY_Z"
+    keyCode: "KeyZ"
     title: Keyboard z and Z (US English)
   286:
     id: "KEY_1"
+    keyCode: "Digit1"
     title: Keyboard 1 and ! (US English)
   287:
     id: "KEY_2"
+    keyCode: "Digit2"
     title: Keyboard 2 and @ (US English)
   288:
     id: "KEY_3"
+    keyCode: "Digit3"
     title: Keyboard 3 and # (US English)
   289:
     id: "KEY_4"
+    keyCode: "Digit4"
     title: Keyboard 4 and $ (US English)
   290:
     id: "KEY_5"
+    keyCode: "Digit5"
     title: Keyboard 5 and % (US English)
   291:
     id: "KEY_6"
+    keyCode: "Digit6"
     title: Keyboard 6 and ^ (US English)
   292:
     id: "KEY_7"
+    keyCode: "Digit7"
     title: Keyboard 7 and & (US English)
   293:
     id: "KEY_8"
+    keyCode: "Digit8"
     title: Keyboard 8 and * (US English)
   294:
     id: "KEY_9"
+    keyCode: "Digit9"
     title: Keyboard 9 and ( (US English)
   295:
     id: "KEY_0"
+    keyCode: "Digit0"
     title: Keyboard 0 and ) (US English)
   296:
     id: "ENTER"
+    keyCode: "Enter"
     title: Keyboard Return (US English)
     icon: keyboard_return
   297:
     id: "ESC"
+    keyCode: "Escape"
     title: Keyboard Escape (US English)
   298:
     id: "BKSP"
+    keyCode: "Backspace"
     title: Keyboard Backspace (US English)
     icon: backspace
   299:
     id: "TAB"
+    keyCode: "Tab"
     title: Keyboard Tab (US English)
     icon: keyboard_tab
   300:
     id: "KSC_2C"
+    keyCode: "Space"
     title: Keyboard Space (US English)
     description: |
       The ASCII space is preferred over this raw scancode for the space bar.
     icon: space_bar
   301:
     id: "KSC_2D"
+    keyCode: "Minus"
     title: Keyboard - and _ (US English)
   302:
     id: "KSC_2E"
+    keyCode: "Equal"
     title: Keyboard = and + (US English)
   303:
     id: "KSC_2F"
+    keyCode: "BracketLeft"
     title: Keyboard [ and { (US English)
   304:
     id: "KSC_30"
+    keyCode: "BracketRight"
     title: Keyboard ] and } (US English)
   305:
     id: "KSC_31"
+    keyCode: "Backslash"
     title: Keyboard \ and | (US English)
   306:
     id: "KSC_32"
+    # TODO: also backslash?
     title: Keyboard Non-US \# and ~ (US English)
   307:
     id: "KSC_33"
+    keyCode: "Semicolon"
     title: "Keyboard ; and : (US English)"
   308:
     id: "KSC_34"
+    keyCode: "Quote"
     title: Keyboard ' and " (US English)
   309:
     id: "KSC_35"
+    keyCode: "Backquote"
     title: Keyboard ` and ~ (US English)
   310:
     id: "KSC_36"
+    keyCode: "Comma"
     title: Keyboard , and < (US English)
   311:
     id: "KSC_37"
+    keyCode: "Period"
     title: Keyboard . and > (US English)
   312:
     id: "KSC_38"
+    keyCode: "Slash"
     title: Keyboard / and ? (US English)
   313:
     id: "CAPSLOCK"
+    keyCode: "CapsLock"
     title: Keyboard Caps Lock
     icon: shift_lock
   314:
     id: "F1"
+    keyCode: "F1"
     title: Keyboard F1
   315:
     id: "F2"
+    keyCode: "F2"
     title: Keyboard F2
   316:
     id: "F3"
+    keyCode: "F3"
     title: Keyboard F3
   317:
     id: "F4"
+    keyCode: "F4"
     title: Keyboard F4
   318:
     id: "F5"
+    keyCode: "F5"
     title: Keyboard F5
   319:
     id: "F6"
+    keyCode: "F6"
     title: Keyboard F6
   320:
     id: "F7"
+    keyCode: "F7"
     title: Keyboard F7
   321:
     id: "F8"
+    keyCode: "F8"
     title: Keyboard F8
   322:
     id: "F9"
+    keyCode: "F9"
     title: Keyboard F9
   323:
     id: "F10"
+    keyCode: "F10"
     title: Keyboard F10
   324:
     id: "F11"
+    keyCode: "F11"
     title: Keyboard F11
   325:
     id: "F12"
+    keyCode: "F12"
     title: Keyboard F12
   326:
     id: "PRTSCN"
+    keyCode: "PrintScreen"
     title: Keyboard Print Screen
     icon: screenshot_monitor
   327:
     id: "SCRLK"
+    keyCode: "ScrollLock"
     title: Keyboard Scroll Lock
   328:
     id: "PAUSE"
+    keyCode: "Pause"
     title: Keyboard Pause
   329:
     id: "INSERT"
+    keyCode: "Insert"
     title: Keyboard Insert
     icon: insert_text
   330:
     id: "HOME"
+    keyCode: "Home"
     title: Keyboard Home
     icon: home
   331:
     id: "PGUP"
+    keyCode: "PageUp"
     title: Keyboard Page Up
     icon: move_up
   332:
     id: "DELETE"
+    keyCode: "Delete"
     title: Keyboard Delete Forward
   333:
     id: "END"
+    keyCode: "End"
     title: Keyboard End
   334:
     id: "PGDN"
+    keyCode: "PageDown"
     title: Keyboard Page Down
     icon: move_down
   335:
     id: "ARROW_RT"
+    keyCode: "ArrowRight"
     title: Keyboard Right Arrow
     icon: keyboard_arrow_right
   336:
     id: "ARROW_LF"
+    keyCode: "ArrowLeft"
     title: Keyboard Left Arrow
     icon: keyboard_arrow_left
   337:
     id: "ARROW_DN"
+    keyCode: "ArrowDown"
     title: Keyboard Down Arrow
     icon: keyboard_arrow_down
   338:
     id: "ARROW_UP"
+    keyCode: "ArrowUp"
     title: Keyboard Up Arrow
     icon: keyboard_arrow_up
   339:
     id: "NUMLOCK"
+    keyCode: "NumLock"
     title: Keyboard Num Lock and Clear
   340:
     id: "KP_SLASH"
+    keyCode: "NumpadDivide"
     title: Keypad /
   341:
     id: "KP_ASTER"
+    keyCode: "NumpadStar"
     title: Keypad *
   342:
     id: "KP_MINUS"
+    keyCode: "NumpadSubtract"
     title: Keypad -
   343:
     id: "KP_PLUS"
+    keyCode: "NumpadAdd"
     title: Keypad +
   344:
     id: "KP_ENTER"
+    keyCode: "NumpadEnter"
     title: Keypad Enter
   345:
     id: "KP_1"
+    keyCode: "Numpad1"
     title: Keypad 1 and End
   346:
     id: "KP_2"
+    keyCode: "Numpad2"
     title: Keypad 2 and Down Arrow
   347:
     id: "KP_3"
+    keyCode: "Numpad3"
     title: Keypad 3 and Page Down
   348:
     id: "KP_4"
+    keyCode: "Numpad4"
     title: Keypad 4 and Left Arrow
   349:
     id: "KP_5"
+    keyCode: "Numpad5"
     title: Keypad 5
   350:
     id: "KP_6"
+    keyCode: "Numpad6"
     title: Keypad 6 and Rigth Arrow
   351:
     id: "KP_7"
+    keyCode: "Numpad7"
     title: Keypad 7 and Home
   352:
     id: "KP_8"
+    keyCode: "Numpad8"
     title: Keypad 8 and Up Arrow
   353:
     id: "KP_9"
+    keyCode: "Numpad9"
     title: Keypad 9 and Page Up
   354:
     id: "KP_0"
+    keyCode: "Numpad0"
     title: Keypad 0 and Insert
   355:
     id: "KP_DOT"
+    keyCode: "NumpadDecimal"
     title: Keypad . and Delete
   356:
     id: "KSC_64"
+    keyCode: "IntlBackslash"
     title: Keyboard Non-US \ and | (US English)
   357:
     id: "COMPOSE"
@@ -327,10 +424,12 @@ actions:
     description: Officially supported by Win, Unix, and Boot
   358:
     id: "POWER"
+    keyCode: "Power"
     title: Keyboard Power
     description: Only officially supported by Mac and Unix
   359:
     id: "KP_EQUAL"
+    keyCode: "NumpadEqual"
     title: Keypad =
     description: Only officially supported by Mac
   360:
@@ -787,10 +886,12 @@ actions:
     description: Not required to be supported by any OS
   472:
     id: "KSC_D8"
+    keyCode: "NumpadClear"
     title: Keypad Clear
     description: Not required to be supported by any OS
   473:
     id: "KSC_D9"
+    keyCode: "NumpadClearEntry"
     title: Keypad Clear Entry
     description: Not required to be supported by any OS
   474:
@@ -817,58 +918,74 @@ actions:
     description: Not required to be supported by any OS
   480:
     id: "KSC_E0"
+    keyCode: "ControlLeft"
     title: Keyboard Left Control
   481:
     id: "KSC_E1"
+    keyCode: "ShiftLeft"
     title: Keyboard Left Shift
   482:
     id: "KSC_E2"
+    keyCode: "AltLeft"
     title: Keyboard Left Alt
   483:
     id: "KSC_E3"
+    keyCode: "MetaLeft"
     title: Keyboard Left GUI
   484:
     id: "KSC_E4"
+    keyCode: "ControlRight"
     title: Keyboard Right Control
   485:
     id: "KSC_E5"
+    keyCode: "ShiftRight"
     title: Keyboard Right Shift
   486:
     id: "KSC_E6"
+    keyCode: "AltRight"
     title: Keyboard Right Alt
   487:
     id: "KSC_E7"
+    keyCode: "MetaRight"
     title: Keyboard Right GUI
   488:
     id: "KSC_E8"
+    keyCode: "MediaPlayPause"
     title: Media Play Pause
     description: Not required to be supported by any OS. Possibly deprecated.
   489:
     id: "KSC_E9"
+    keyCode: "MediaStop"
     title: Media Stop CD
     description: Not required to be supported by any OS. Possibly deprecated.
   490:
     id: "KSC_EA"
+    keyCode: "MediaTrackPrevious"
     title: Media Previous Song
     description: Not required to be supported by any OS. Possibly deprecated.
   491:
     id: "KSC_EB"
+    keyCode: "MediaTrackNext"
     title: Media Next Song
     description: Not required to be supported by any OS. Possibly deprecated.
   492:
     id: "KSC_EC"
+    keyCode: "Eject"
     title: Media Eject CD
     description: Not required to be supported by any OS. Possibly deprecated.
   493:
     id: "KSC_ED"
+    keyCode: "AudioVolumeUp"
     title: Media Volume Up
     description: Not required to be supported by any OS. Possibly deprecated.
   494:
     id: "KSC_EE"
+    keyCode: "AudioVolumeDown"
     title: Media Volume Down
     description: Not required to be supported by any OS. Possibly deprecated.
   495:
     id: "KSC_EF"
+    keyCode: "AudioVolumeMute"
     title: Media Mute
     description: Not required to be supported by any OS. Possibly deprecated.
   496:
@@ -877,18 +994,22 @@ actions:
     description: Not required to be supported by any OS. Possibly deprecated.
   497:
     id: "KSC_F1"
+    keyCode: "BrowserBack"
     title: Media Back
     description: Not required to be supported by any OS. Possibly deprecated.
   498:
     id: "KSC_F2"
+    keyCode: "BrowserForward"
     title: Media Forward
     description: Not required to be supported by any OS. Possibly deprecated.
   499:
     id: "KSC_F3"
+    keyCode: "BrowserStop"
     title: Media Stop
     description: Not required to be supported by any OS. Possibly deprecated.
   500:
     id: "KSC_F4"
+    keyCode: "BrowserSearch"
     title: Media Find
     description: Not required to be supported by any OS. Possibly deprecated.
   501:
@@ -905,14 +1026,17 @@ actions:
     description: Not required to be supported by any OS. Possibly deprecated.
   504:
     id: "KSC_F8"
+    keyCode: "Sleep"
     title: Media Sleep
     description: Not required to be supported by any OS. Possibly deprecated.
   505:
     id: "KSC_F9"
+    keyCode: "WakeUp"
     title: Media Coffee
     description: Not required to be supported by any OS. Possibly deprecated.
   506:
     id: "KSC_FA"
+    keyCode: "BrowserRefresh"
     title: Media Refresh
     description: Not required to be supported by any OS. Possibly deprecated.
   507:

src/lib/components/Action.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import type {KeyInfo} from "$lib/serial/keymap-codes"
+
+  export let action: number | KeyInfo
+  export let display: "inline-keys" | "keys" = "inline-keys"
+
+  $: info = typeof action === "number" ? KEYMAP_CODES[action] ?? {code: action} : action
+</script>
+
+{#if display === "keys"}
+  <kbd class:icon={!!info.icon}>
+    {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>
+  {:else}
+    <kbd class="inline-kbd" class:icon={!!info.icon}
+      >{info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
+    >
+  {/if}
+{/if}
+
+<style lang="scss">
+  kbd:not(.inline-kbd) {
+    height: 24px;
+    padding-block: auto;
+    transition: color 250ms ease;
+  }
+
+  .inline-kbd {
+    margin-inline-end: 2px;
+  }
+
+  :global(span) + .inline-kbd {
+    margin-inline-start: 2px;
+  }
+</style>

src/lib/components/ActionListItem.svelte

@@ -35,6 +35,7 @@
     align-items: center;
 
     width: 100%;
+    height: auto;
     margin: 0;
     padding: 8px;
 
@@ -61,4 +62,8 @@
 
     text-align: start;
   }
+
+  kbd {
+    height: 24px;
+  }
 </style>

src/lib/components/ActionString.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Action from "$lib/components/Action.svelte"
+  import type {KeyInfo} from "$lib/serial/keymap-codes"
+
+  export let actions: Array<number | KeyInfo>
+  export let display: "keys" | "inline-keys" = "inline-keys"
+</script>
+
+{#each actions as action, i (`${typeof action === "number" ? action : action.code}:${i}`)}
+  <Action {action} {display} />
+{/each}

src/lib/components/action-extension.ts

@@ -1,8 +0,0 @@
-import {Extension, Node} from "@tiptap/core"
-
-const CharaAction = Node.create({
-  name: "Action",
-  renderHTML({HTMLAttributes}) {
-    return ["kbd", HTMLAttributes, 0]
-  },
-})

src/lib/dialogs/ConfirmDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {createEventDispatcher} from "svelte"
+  import Dialog from "$lib/dialogs/Dialog.svelte"
 
   export let title: string
   export let message: string | undefined
@@ -7,15 +8,9 @@
   export let confirmTitle: string
 
   const dispatch = createEventDispatcher()
-
-  export function show() {
-    modal.showModal()
-  }
-
-  let modal: HTMLDialogElement
 </script>
 
-<dialog bind:this={modal}>
+<Dialog>
   <h1>{@html title}</h1>
   {#if message}
     <p>{@html message}</p>
@@ -24,7 +19,7 @@
     <button on:click={() => dispatch("abort")}>{abortTitle}</button>
     <button class="primary" on:click={() => dispatch("confirm")}>{confirmTitle}</button>
   </div>
-</dialog>
+</Dialog>
 
 <style lang="scss">
   h1 {

src/lib/dialogs/Dialog.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+
+  onMount(() => {
+    modal.showModal()
+  })
+
+  let modal: HTMLDialogElement
+</script>
+
+<dialog bind:this={modal}>
+  <slot />
+</dialog>
+
+<style lang="scss">
+  dialog {
+    min-width: 300px;
+    max-width: 512px;
+
+    color: var(--md-sys-color-on-background);
+
+    background: var(--md-sys-color-background);
+    border: none;
+    border-radius: 38px;
+    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
+  }
+
+  dialog::backdrop {
+    opacity: 0.5;
+    background: black;
+  }
+</style>

src/lib/dialogs/PickChangesDialog.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import Dialog from "$lib/dialogs/Dialog.svelte"
+  import type {Change, ChordChange, LayoutChange, SettingChange} from "$lib/undo-redo"
+  import {ChangeType, chords} from "$lib/undo-redo"
+  import ActionString from "$lib/components/ActionString.svelte"
+  import LL from "../../i18n/i18n-svelte"
+  import {KEYMAP_IDS} from "$lib/serial/keymap-codes"
+
+  export let changes: Change[] = [
+    {type: ChangeType.Layout, layer: 0, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Layout, layer: 1, id: 1, action: 1},
+    {type: ChangeType.Setting, id: 0, setting: 2},
+    {type: ChangeType.Setting, id: 0, setting: 2},
+    {type: ChangeType.Setting, id: 0, setting: 2},
+    {type: ChangeType.Setting, id: 0, setting: 2},
+    {type: ChangeType.Chord, id: [1], actions: [55], phrase: [55, 63, 37, 36]},
+    {
+      type: ChangeType.Chord,
+      id: [KEYMAP_IDS.get("y")!.code, KEYMAP_IDS.get("r")!.code, KEYMAP_IDS.get("t")!.code],
+      actions: [KEYMAP_IDS.get("y")!.code, KEYMAP_IDS.get("r")!.code, KEYMAP_IDS.get("t")!.code],
+      phrase: [55, 63, 37, 36],
+    },
+    {
+      type: ChangeType.Chord,
+      id: [KEYMAP_IDS.get("y")!.code, KEYMAP_IDS.get("r")!.code, KEYMAP_IDS.get("t")!.code],
+      actions: [KEYMAP_IDS.get("y")!.code, KEYMAP_IDS.get("r")!.code, KEYMAP_IDS.get("t")!.code],
+      phrase: [],
+    },
+  ]
+
+  $: existingChords = new Set($chords.map(it => JSON.stringify(it.id)))
+
+  $: layoutChanges = Array.from(
+    {length: 3},
+    (_, i) => changes.filter(it => it.type === ChangeType.Layout && it.layer === i) as LayoutChange[],
+  )
+  $: settingChanges = changes.filter(it => it.type === ChangeType.Setting) as SettingChange[]
+  $: chordChanges = {
+    added: changes.filter(
+      it =>
+        it.type === ChangeType.Chord && it.phrase.length > 0 && !existingChords.has(JSON.stringify(it.id)),
+    ) as ChordChange[],
+    changed: changes.filter(
+      it => it.type === ChangeType.Chord && it.phrase.length > 0 && existingChords.has(JSON.stringify(it.id)),
+    ) as ChordChange[],
+    deleted: changes.filter(it => it.type === ChangeType.Chord && it.phrase.length === 0) as ChordChange[],
+  }
+  $: totalChordChanges = Object.values(chordChanges).reduce((acc, curr) => acc + curr.length, 0)
+</script>
+
+<Dialog>
+  <h1>{$LL.changes.TITLE()}</h1>
+  <h2>
+    <label><input type="checkbox" class="checkbox" />{$LL.changes.ALL_CHANGES()}</label>
+  </h2>
+  <ul>
+    {#if layoutChanges.some(it => it.length > 0)}
+      <li>
+        <h3>
+          <label>
+            <input type="checkbox" class="checkbox" />
+            {$LL.changes.layout.TITLE(layoutChanges.reduce((acc, curr) => acc + curr.length, 0))}
+          </label>
+        </h3>
+        <ul>
+          {#each layoutChanges
+            .map((it, i) => /** @type {const} */ ([it, i + 1]))
+            .filter(([it]) => it.length > 0) as [changes, layer]}
+            <li>
+              <h4>
+                <label>
+                  <input type="checkbox" class="checkbox" />
+                  {$LL.changes.layout.LAYER({changes: changes.length, layer})}
+                </label>
+              </h4>
+            </li>
+          {/each}
+        </ul>
+      </li>
+    {/if}
+    {#if settingChanges.length > 0}
+      <li>
+        <h3>
+          <label
+            ><input type="checkbox" class="checkbox" />{$LL.changes.settings.TITLE(
+              settingChanges.length,
+            )}</label
+          >
+        </h3>
+      </li>
+    {/if}
+    {#if totalChordChanges > 0}
+      <li>
+        <h3>
+          <label
+            ><input type="checkbox" class="checkbox" />{$LL.changes.chords.TITLE(totalChordChanges)}</label
+          >
+        </h3>
+        <ul>
+          {#each Object.entries(chordChanges) as [category, changes]}
+            {#if changes.length > 0}
+              <li>
+                <h4>
+                  <label
+                    ><input type="checkbox" class="checkbox" />
+                    {#if category === "added"}
+                      {$LL.changes.chords.NEW_CHORDS(changes.length)}
+                    {:else if category === "changed"}
+                      {$LL.changes.chords.CHANGED_CHORDS(changes.length)}
+                    {:else if category === "deleted"}
+                      {$LL.changes.chords.DELETED_CHORDS(changes.length)}
+                    {/if}
+                  </label>
+                </h4>
+                <ul>
+                  {#each changes as change}
+                    <li>
+                      <label>
+                        <input type="checkbox" class="checkbox" />
+                        <ActionString display="keys" actions={change.actions} />
+                        <ActionString actions={change.phrase} />
+                      </label>
+                    </li>
+                  {/each}
+                </ul>
+              </li>
+            {/if}
+          {/each}
+        </ul>
+      </li>
+    {/if}
+  </ul>
+</Dialog>
+
+<style lang="scss">
+  h1 {
+    font-size: 2em;
+    text-align: center;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  ul {
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  li {
+    margin-inline-start: 24px;
+  }
+</style>

src/lib/dialogs/confirm-dialog.ts

@@ -1,4 +1,4 @@
-import ConfirmDialog from "$lib/ConfirmDialog.svelte"
+import ConfirmDialog from "$lib/dialogs/ConfirmDialog.svelte"
 
 export async function askForConfirmation(
   title: string,

src/lib/os-layout.ts

@@ -0,0 +1,39 @@
+import {persistentWritable} from "$lib/storage"
+import {get} from "svelte/store"
+
+export const osLayout = persistentWritable<Record<string, string>>("os-layout", {})
+
+const keysCurrentlyDown = new Set<string>()
+
+function keydown({code, key}: KeyboardEvent) {
+  const keys = [...keysCurrentlyDown]
+  keysCurrentlyDown.add(code)
+
+  const keyString = JSON.stringify([...keys.sort(), code])
+  if (keyString in get(osLayout) || get(osLayout)[JSON.stringify([code])] === key) return
+
+  osLayout.update(layout => {
+    layout[keyString] = key
+    return layout
+  })
+}
+
+function keyup({code}: KeyboardEvent) {
+  keysCurrentlyDown.delete(code)
+}
+
+export function runLayoutDetection() {
+  if ("keyboard" in navigator) {
+    ;(navigator.keyboard as any).getLayoutMap().then((layout: Map<string, string>) => {
+      osLayout.update(osLayout => {
+        Object.assign(
+          osLayout,
+          Object.fromEntries([...layout.entries()].map(([key, value]) => [JSON.stringify([key]), value])),
+        )
+        return osLayout
+      })
+    })
+  }
+  window.addEventListener("keydown", keydown)
+  window.addEventListener("keyup", keyup)
+}

src/lib/serial/connection.ts

@@ -45,17 +45,33 @@ export const deviceSettings = persistentWritable<number[]>(
 
 export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
 
+export interface ProgressInfo {
+  max: number
+  current: number
+}
+export const syncProgress = writable<ProgressInfo | undefined>(undefined)
+
 export async function initSerial(manual = false) {
   const device = get(serialPort) ?? new CharaDevice()
   await device.init(manual)
   serialPort.set(device)
-
+  const chordCount = await device.getChordCount()
   syncStatus.set("downloading")
+
+  const max = Object.keys(settingInfo.settings).length + device.keyCount * 3 + chordCount
+  let current = 0
+  syncProgress.set({max, current})
+  function progressTick() {
+    current++
+    syncProgress.set({max, current})
+  }
+
   const parsedSettings: number[] = []
   for (const key in settingInfo.settings) {
     try {
       parsedSettings[Number.parseInt(key)] = await device.getSetting(Number.parseInt(key))
     } catch {}
+    progressTick()
   }
   deviceSettings.set(parsedSettings)
 
@@ -63,15 +79,17 @@ export async function initSerial(manual = false) {
   for (let layer = 1; layer <= 3; layer++) {
     for (let i = 0; i < device.keyCount; i++) {
       parsedLayout[layer - 1][i] = await device.getLayoutKey(layer, i)
+      progressTick()
     }
   }
   deviceLayout.set(parsedLayout)
 
-  const chordCount = await device.getChordCount()
   const chordInfo = []
   for (let i = 0; i < chordCount; i++) {
     chordInfo.push(await device.getChord(i))
+    progressTick()
   }
   deviceChords.set(chordInfo)
   syncStatus.set("done")
+  syncProgress.set(undefined)
 }

src/lib/style/theme.scss

@@ -1,5 +1,6 @@
 @import "./form/button";
 @import "./form/toggle";
+@import "./form/checkbox";
 @import "./kbd";
 @import "./print";
 

src/lib/title.ts

@@ -13,7 +13,6 @@ export const action: Action<HTMLElement, {title?: string; shortcut?: string}> =
     arrow: false,
     theme: "tooltip",
     animation: "fade",
-    delay: [500, 0],
     onShow(instance) {
       component ??= new Tooltip({
         target: instance.popper.querySelector(".tippy-content") as HTMLElement,

src/routes/+layout.svelte

@@ -9,7 +9,7 @@
   import Navigation from "./Navigation.svelte"
   import {canAutoConnect} from "$lib/serial/device"
   import {initSerial} from "$lib/serial/connection"
-  import type {LayoutServerData} from "./$types"
+  import type {LayoutData} from "./$types"
   import {browser} from "$app/environment"
   import BrowserWarning from "./BrowserWarning.svelte"
   import "tippy.js/animations/shift-away.css"
@@ -21,12 +21,16 @@
   import {detectLocale} from "../i18n/i18n-util"
   import type {Locales} from "../i18n/i18n-types"
   import Footer from "./Footer.svelte"
+  import {runLayoutDetection} from "$lib/os-layout.js"
+  import PageTransition from "./PageTransition.svelte"
+  import SyncOverlay from "./SyncOverlay.svelte"
 
   const locale = ((browser && localStorage.getItem("locale")) as Locales) || detectLocale()
   loadLocale(locale)
   setLocale(locale)
 
   if (browser) {
+    runLayoutDetection()
     tippy.setDefaultProps({
       animation: "shift-away",
       theme: "surface-variant",
@@ -37,7 +41,7 @@
     })
   }
 
-  export let data: LayoutServerData
+  export let data: LayoutData
 
   onMount(async () => {
     theme.subscribe(it => {
@@ -63,11 +67,15 @@
   <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
+<SyncOverlay />
+
 <Navigation />
 
-<main>
+<!-- <PickChangesDialog /> -->
+
+<PageTransition>
   <slot />
-</main>
+</PageTransition>
 
 <Footer />
 

src/routes/EditActions.svelte

@@ -4,8 +4,15 @@
   import type {Change} from "$lib/undo-redo"
   import {fly} from "svelte/transition"
   import {action} from "$lib/title"
-  import {deviceChords, deviceLayout, deviceSettings, serialPort, syncStatus} from "$lib/serial/connection"
+  import {
-  import {askForConfirmation} from "$lib/confirm-dialog"
+    deviceChords,
+    deviceLayout,
+    deviceSettings,
+    serialPort,
+    syncProgress,
+    syncStatus,
+  } from "$lib/serial/connection"
+  import {askForConfirmation} from "$lib/dialogs/confirm-dialog"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
 
   function undo(event: MouseEvent) {
@@ -94,7 +101,23 @@
     // would be if they click it every time they change a setting.
     // Because of that, we don't need to show a fearmongering message such as
     // "Your device will break after you click this 10,000 times!"
-    await new Promise(resolve => setTimeout(resolve, 6000))
+    const virtualWriteTime = 6000
+    const startStamp = performance.now()
+    await new Promise<void>(resolve => {
+      function animate() {
+        const delta = performance.now() - startStamp
+        syncProgress.set({
+          max: virtualWriteTime,
+          current: delta,
+        })
+        if (delta >= virtualWriteTime) {
+          resolve()
+        } else {
+          requestAnimationFrame(animate)
+        }
+      }
+      requestAnimationFrame(animate)
+    })
     if ($serialPort) {
       await $serialPort.commit()
       $changes = []

src/routes/Footer.svelte

@@ -1,5 +1,34 @@
-<script>
+<script lang="ts">
-  import {version} from "$app/environment"
+  import {browser, version} from "$app/environment"
+  import {action} from "$lib/title"
+  import LL, {setLocale} from "../i18n/i18n-svelte"
+  import {theme} from "$lib/preferences.js"
+  import type {Locales} from "../i18n/i18n-types"
+  import {detectLocale, locales} from "../i18n/i18n-util"
+  import {loadLocaleAsync} from "../i18n/i18n-util.async"
+  import {tick} from "svelte"
+
+  let locale = (browser && (localStorage.getItem("locale") as Locales)) || detectLocale()
+  $: if (browser)
+    (async () => {
+      localStorage.setItem("locale", locale)
+      await loadLocaleAsync(locale)
+      setLocale(locale)
+    })()
+
+  function switchTheme() {
+    const mode = $theme.mode === "light" ? "dark" : "light"
+    if (document.startViewTransition) {
+      document.startViewTransition(async () => {
+        $theme.mode = mode
+        await tick()
+      })
+    } else {
+      $theme.mode = mode
+    }
+  }
+
+  let languageSelect: HTMLSelectElement
 </script>
 
 <footer>
@@ -13,22 +42,107 @@
       >
     </li>
   </ul>
+  <ul>
+    <li>
+      <input use:action={{title: $LL.profile.theme.COLOR_SCHEME()}} type="color" bind:value={$theme.color} />
+    </li>
+    <li>
+      {#if $theme.mode === "light"}
+        <button use:action={{title: $LL.profile.theme.DARK_MODE()}} class="icon" on:click={switchTheme}>
+          dark_mode
+        </button>
+      {:else if $theme.mode === "dark"}
+        <button use:action={{title: $LL.profile.theme.LIGHT_MODE()}} class="icon" on:click={switchTheme}>
+          light_mode
+        </button>
+      {/if}
+    </li>
+    <li>
+      <button
+        class="icon"
+        use:action={{title: $LL.profile.LANGUAGE()}}
+        on:click={() => languageSelect.click()}
+        >translate
+
+        <select bind:value={locale} bind:this={languageSelect}>
+          {#each locales as code}
+            <option value={code}>{code}</option>
+          {/each}
+        </select>
+      </button>
+    </li>
+  </ul>
 </footer>
 
-<style>
+<style lang="scss">
+  select {
+    position: absolute;
+    opacity: 0;
+  }
+
+  input[type="color"] {
+    cursor: pointer;
+
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 20px;
+    block-size: 20px;
+    margin: 0;
+    padding: 0;
+
+    color: inherit;
+
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+    }
+  }
+
   footer {
     position: absolute;
     bottom: 0;
     left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    padding: 16px;
+
     opacity: 0.4;
   }
 
   ul {
     display: flex;
     gap: 16px;
+    align-items: center;
+
+    margin: 0;
+    padding: 0;
+
     list-style: none;
   }
 
+  ul:last-child {
+    gap: 12px;
+
+    button {
+      height: 24px;
+      font-size: 20px;
+    }
+  }
+
   a {
     display: flex;
     align-items: center;

src/routes/Navigation.svelte

@@ -8,8 +8,8 @@
   import {canAutoConnect} from "$lib/serial/device"
   import {browser} from "$app/environment"
   import {userPreferences} from "$lib/preferences"
+  import {action} from "$lib/title"
   import LL from "../i18n/i18n-svelte"
-  import Profile from "./Profile.svelte"
   import ConfigTabs from "./ConfigTabs.svelte"
   import EditActions from "./EditActions.svelte"
 
@@ -29,8 +29,18 @@
 
   <div class="actions">
     {#if $canShare}
-      <button transition:fly={{x: -8}} class="icon" on:click={triggerShare}>share</button>
+      <button
-      <button transition:fly={{x: -8}} class="icon" on:click={() => print()}>print</button>
+        use:action={{title: $LL.share.TITLE()}}
+        transition:fly={{x: -8}}
+        class="icon"
+        on:click={triggerShare}>share</button
+      >
+      <button
+        use:action={{title: $LL.print.TITLE()}}
+        transition:fly={{x: -8}}
+        class="icon"
+        on:click={() => print()}>print</button
+      >
       <div transition:slide class="separator" />
     {/if}
     {#if import.meta.env.TAURI_FAMILY === undefined}
@@ -39,90 +49,31 @@
       {/await}
     {/if}
     {#if $serialPort}
-      <button title={$LL.backup.TITLE()} use:popup={BackupPopup} class="icon {$syncStatus}">
+      <button use:action={{title: $LL.backup.TITLE()}} use:popup={BackupPopup} class="icon {$syncStatus}">
-        {#if $syncStatus === "downloading"}
+        {#if $userPreferences.backup}
-          backup
+          history
-        {:else if $syncStatus === "uploading"}
-          cloud_download
-        {:else if $userPreferences.backup}
-          cloud_done
         {:else}
-          cloud_off
+          history_toggle_off
         {/if}
       </button>
     {/if}
     <button
       bind:this={connectButton}
-      title="Devices"
+      use:action={{title: $LL.deviceManager.TITLE()}}
       use:popup={ConnectionPopup}
       class="icon connect"
       class:error={$serialPort === undefined}
     >
       cable
     </button>
-    <button title={$LL.profile.TITLE()} use:popup={Profile} class="icon account">person</button>
   </div>
 </nav>
 
 <style lang="scss">
-  @keyframes sync {
-    0% {
-      scale: 1 1;
-      opacity: 1;
-    }
-
-    85% {
-      scale: 1 0;
-      opacity: 1;
-    }
-
-    86% {
-      scale: 1 1;
-      opacity: 0;
-    }
-
-    100% {
-      scale: 1 1;
-      opacity: 1;
-    }
-  }
-
-  .uploading::after,
-  .downloading::after {
-    content: "";
-
-    position: absolute;
-    top: 20px;
-    left: 50%;
-    transform-origin: top;
-    translate: -50% 0;
-
-    width: 8px;
-    height: 10px;
-
-    background: var(--md-sys-color-background);
-
-    animation: sync 1s linear infinite;
-  }
-
-  .uploading::after {
-    transform-origin: bottom;
-  }
-
-  .downloading.active::after,
-  .uploading.active::after {
-    background: var(--md-sys-color-primary);
-  }
-
-  .sync.downloading::after {
-    top: 10px;
-    transform-origin: bottom;
-    border-radius: 4px;
-  }
-
   .separator {
     width: 1px;
     height: 24px;
+    margin-inline: 4px;
     background: var(--md-sys-color-outline-variant);
   }
 
@@ -184,12 +135,6 @@
     }
   }
 
-  .icon.account {
-    font-size: 32px;
-    color: var(--md-sys-color-on-secondary-container);
-    background: var(--md-sys-color-secondary-container);
-  }
-
   :disabled {
     pointer-events: none;
     opacity: 0.5;

src/routes/PageTransition.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {fly} from "svelte/transition"
+  import {afterNavigate, beforeNavigate} from "$app/navigation"
+  import {expoIn, expoOut, quadIn, quadOut} from "svelte/easing"
+
+  let inDirection = 0
+  let outDirection = 0
+  let outroEnd: undefined | (() => void) = undefined
+  let animationDone: Promise<void>
+
+  let isNavigating = false
+
+  const routeOrder = ["/config/chords/", "/config/layout/", "/config/settings/"]
+
+  beforeNavigate(navigation => {
+    const from = navigation.from?.url.pathname
+    const to = navigation.to?.url.pathname
+    isNavigating = true
+
+    if (!(from && to && routeOrder.includes(from) && routeOrder.includes(to))) {
+      inDirection = 0
+      outDirection = 0
+      return
+    }
+
+    const fromIndex = routeOrder.indexOf(from)
+    const toIndex = routeOrder.indexOf(to)
+
+    inDirection = fromIndex > toIndex ? -1 : 1
+    outDirection = fromIndex > toIndex ? 1 : -1
+
+    animationDone = new Promise(resolve => {
+      outroEnd = resolve
+    })
+  })
+
+  afterNavigate(async () => {
+    await animationDone
+    isNavigating = false
+  })
+</script>
+
+{#if !isNavigating}
+  <main
+    in:fly={{x: inDirection * 24, duration: 150, easing: expoOut}}
+    out:fly={{x: outDirection * 24, duration: 150, easing: expoIn}}
+    on:outroend={outroEnd}
+  >
+    <slot />
+  </main>
+{/if}

src/routes/Profile.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-  import LL, {setLocale} from "../i18n/i18n-svelte"
-  import {theme} from "$lib/preferences"
-  import {tick} from "svelte"
-  import {detectLocale, locales} from "../i18n/i18n-util"
-  import {loadLocaleAsync} from "../i18n/i18n-util.async"
-  import type {Locales} from "../i18n/i18n-types"
-
-  let locale = (localStorage.getItem("locale") as Locales) || detectLocale()
-  $: (async () => {
-    localStorage.setItem("locale", locale)
-    await loadLocaleAsync(locale)
-    setLocale(locale)
-  })()
-
-  function switchTheme() {
-    const mode = $theme.mode === "light" ? "dark" : "light"
-    if (document.startViewTransition) {
-      document.startViewTransition(async () => {
-        $theme.mode = mode
-        await tick()
-      })
-    } else {
-      $theme.mode = mode
-    }
-  }
-</script>
-
-<section>
-  <h2>{$LL.profile.TITLE()}</h2>
-  <fieldset>
-    <legend>
-      <span class="icon">format_paint</span>
-      {$LL.profile.theme.TITLE()}
-    </legend>
-
-    <input title={$LL.profile.theme.COLOR_SCHEME()} type="color" bind:value={$theme.color} />
-    <button
-      title={$theme.mode === "light" ? $LL.profile.theme.LIGHT_MODE() : $LL.profile.theme.DARK_MODE()}
-      class="icon"
-      on:click={switchTheme}
-    >
-      {#if $theme.mode === "light"}
-        light_mode
-      {:else if $theme.mode === "dark"}
-        dark_mode
-      {:else}
-        TODO
-      {/if}
-    </button>
-  </fieldset>
-  <fieldset>
-    <legend>
-      <span class="icon">translate</span>
-      {$LL.profile.LANGUAGE()}
-    </legend>
-    {#each locales as code}
-      <label>{code}<input bind:group={locale} type="radio" value={code} name="language" /></label>
-    {/each}
-  </fieldset>
-</section>
-
-<style lang="scss">
-  h2 {
-    grid-column: 1 / span 2;
-  }
-
-  section {
-    display: grid;
-    grid-template-columns: auto auto;
-    min-width: 300px;
-  }
-
-  fieldset {
-    display: flex;
-    justify-content: space-around;
-    border: 1px solid var(--md-sys-color-outline);
-    border-radius: 16px;
-  }
-
-  legend {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  button,
-  input[type="color"] {
-    cursor: pointer;
-
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    inline-size: 24px;
-    block-size: 24px;
-    margin: 0;
-    padding: 0;
-
-    color: inherit;
-
-    background: transparent;
-    border: none;
-    border-radius: 50%;
-
-    &::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-
-    &::-webkit-color-swatch {
-      border: none;
-    }
-  }
-</style>

src/routes/SyncOverlay.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {syncProgress, syncStatus} from "$lib/serial/connection"
+  import LL from "../i18n/i18n-svelte"
+
+  $: if (dialog) toggleDialog($syncStatus)
+
+  async function toggleDialog(status: "uploading" | "downloading" | string) {
+    // debounce
+    await new Promise(resolve => setTimeout(resolve, 150))
+    if ($syncStatus !== status) return
+
+    if (!dialog.open && ($syncStatus === "uploading" || $syncStatus === "downloading")) {
+      message = $syncStatus
+      dialog.showModal()
+      dialog.animate([{opacity: 0}, {opacity: 1}], {duration: 250, easing: "ease"})
+    } else if (dialog.open) {
+      const animation = dialog.animate([{opacity: 1}, {opacity: 0}], {duration: 250, easing: "ease"})
+      animation.addEventListener("finish", () => {
+        dialog.close()
+      })
+    }
+  }
+
+  let message: "downloading" | "uploading"
+  let dialog: HTMLDialogElement
+</script>
+
+<dialog bind:this={dialog}>
+  {#if message === "downloading"}
+    <h2>{$LL.sync.TITLE_READ()}</h2>
+  {:else}
+    <h2>{$LL.sync.TITLE_WRITE()}</h2>
+    <p>{$LL.sync.DISCLAIMER_WRITE()}</p>
+  {/if}
+  <progress max={$syncProgress?.max ?? 1} value={$syncProgress?.current ?? 1}></progress>
+</dialog>
+
+<style lang="scss">
+  dialog::backdrop {
+    background: rgba(0 0 0 / 70%);
+  }
+
+  progress {
+    overflow: hidden;
+    width: 100%;
+    height: 16px;
+    border-radius: 8px;
+  }
+
+  progress::-webkit-progress-bar {
+    background: var(--md-sys-color-background);
+  }
+
+  progress::-webkit-progress-value {
+    background: var(--md-sys-color-primary);
+  }
+
+  dialog {
+    max-width: 14cm;
+    padding: 2cm;
+
+    color: white;
+
+    background: none;
+    border: none;
+    outline: none;
+  }
+</style>

src/routes/config/chords/ChordActionEdit.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import {KEYMAP_CODES, KEYMAP_IDS} from "$lib/serial/keymap-codes"
+  import {KEYMAP_IDS} from "$lib/serial/keymap-codes"
   import type {ChordInfo} from "$lib/undo-redo"
   import {changes, ChangeType} from "$lib/undo-redo"
   import {createEventDispatcher} from "svelte"
   import LL from "../../../i18n/i18n-svelte"
+  import ActionString from "$lib/components/ActionString.svelte"
 
   export let chord: ChordInfo | undefined = undefined
 
@@ -33,7 +34,7 @@
       changes.push({
         type: ChangeType.Chord,
         id: chord!.id,
-        actions: [...pressedKeys],
+        actions: [...pressedKeys].sort(),
         phrase: chord!.phrase,
       })
       return changes
@@ -53,12 +54,7 @@
   {:else if !editing && !chord}
     <span>{$LL.configure.chords.NEW_CHORD()}</span>
   {/if}
-  {#each editing ? [...pressedKeys].sort() : chord?.actions ?? [] as actionId}
+  <ActionString display="keys" actions={editing ? [...pressedKeys].sort() : chord?.actions ?? []} />
-    {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
-    <kbd class:icon={!!icon}>
-      {icon ?? id ?? `0x${code.toString(16)}`}
-    </kbd>
-  {/each}
   <sup>•</sup>
 </button>
 
@@ -87,12 +83,6 @@
     }
   }
 
-  kbd {
-    height: 24px;
-    padding-block: auto;
-    transition: color 250ms ease;
-  }
-
   button::after {
     content: "";
 

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import {KEYMAP_CODES, KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
+  import {KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
   import {tick} from "svelte"
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
   import {changes, ChangeType} from "$lib/undo-redo"
   import type {ChordInfo} from "$lib/undo-redo"
   import {scale} from "svelte/transition"
+  import ActionString from "$lib/components/ActionString.svelte"
 
   export let chord: ChordInfo
 
@@ -149,14 +150,7 @@
     <div />
     <!-- placeholder for cursor placement -->
   {/if}
-  {#each chord.phrase as actionId, i (`${actionId}:${i}`)}
+  <ActionString actions={chord.phrase} />
-    {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
-    {#if !icon && id?.length === 1}
-      <span>{id}</span>
-    {:else}
-      <kbd class:icon={!!icon}>{icon ?? id ?? `0x${code.toString(16)}`}</kbd>
-    {/if}
-  {/each}
   <sup>•</sup>
 </div>
 
@@ -203,14 +197,6 @@
     }
   }
 
-  :not(.cursor) + kbd {
-    margin-inline-start: 2px;
-  }
-
-  kbd + * {
-    margin-inline-start: 2px;
-  }
-
   [role="textbox"] {
     cursor: text;