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
2026-01-19 08:22:53 +00:00 · 2023-11-14 20:19:01 +01:00
parent e19a57efac
commit ebf7d73d20
27 changed files with 790 additions and 268 deletions
--- a/src/lib/assets/keymaps/scancode.yml
+++ b/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:
--- a/src/lib/components/Action.svelte
+++ b/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>
--- a/src/lib/components/ActionListItem.svelte
+++ b/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>
--- a/src/lib/components/ActionString.svelte
+++ b/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}
--- a/src/lib/components/action-extension.ts
+++ b/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]
-  },
-})
--- a/src/lib/dialogs/ConfirmDialog.svelte
+++ b/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 {
--- a/src/lib/dialogs/Dialog.svelte
+++ b/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>
--- a/src/lib/dialogs/PickChangesDialog.svelte
+++ b/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>
--- a/src/lib/dialogs/confirm-dialog.ts
+++ b/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,
--- a/src/lib/os-layout.ts
+++ b/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)
+}
--- a/src/lib/serial/connection.ts
+++ b/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)
 }
--- a/src/lib/style/form/_checkbox.scss
+++ b/src/lib/style/form/_checkbox.scss
--- a/src/lib/style/theme.scss
+++ b/src/lib/style/theme.scss
@@ -1,5 +1,6 @@
@import "./form/button";
@import "./form/toggle";
+@import "./form/checkbox";
@import "./kbd";
@import "./print";

--- a/src/lib/title.ts
+++ b/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,