ShortcutControl.svelte

<script lang="ts">
    import hotkeys from "hotkeys-js";
    import { preferences, paths } from "../../../../cache";
    import { writeTextFile } from "@tauri-apps/api/fs";
    import { listenForHotkey } from "../../../../main";
    import { unregister } from "@tauri-apps/api/globalShortcut";

    let shortcutArray: string[] = preferences.get("shortcut").split("+");

    function updateShortcutPreference(newShortcut: string[]) {
        if (newShortcut.join("+") === preferences.get("shortcut")) {
            return;
        }
        const newShortcutString = newShortcut
            .join("+")
            .replace("Meta", "Command");
        writeTextFile(
            `${paths.get("appDataDirPath")}/preferences.json`,
            JSON.stringify(
                {
                    ...Object.fromEntries(preferences),
                    shortcut: newShortcutString,
                },
                null,
                4
            )
        ).then(() => {
            unregister(preferences.get("shortcut")).then(() => {
                preferences.set("shortcut", newShortcutString);
                listenForHotkey(newShortcutString);
            });
        });
    }
    const modifiers = ["Meta", "Control", "Alt", "Shift"];
    async function recordShortcut() {
        shortcutArray = [];
        hotkeys.unbind();
        hotkeys("*", { keyup: true }, function (event) {
            if (event.type === "keydown") {
                if (shortcutArray.length < 3) {
                    if (shortcutArray.length === 0) {
                        if (modifiers.includes(event.key)) {
                            if (event.key === " "){
                                shortcutArray.push("Space");
                            } else {
                                shortcutArray.push(event.key);
                            }
                            shortcutArray = shortcutArray;
                        }
                    } else {
                        if (!modifiers.includes(event.key)) {
                            const key = event.code.startsWith("Key")
                                ? event.code.substring(3)
                                : event.code;
                            shortcutArray.push(key);
                            updateShortcutPreference(shortcutArray);
                            hotkeys.unbind();
                        } else {
                            if (event.key === " "){
                                shortcutArray.push("Space");
                            } else {
                                shortcutArray.push(event.key);
                            }
                        }
                        shortcutArray = shortcutArray.filter(
                            (value, index, self) => {
                                return self.indexOf(value) === index;
                            }
                        );
                    }
                } else {
                    updateShortcutPreference(shortcutArray);
                    hotkeys.unbind();
                }
            }
            if (event.type === "keyup") {
                if (shortcutArray.length === 1) {
                    shortcutArray = ["Command", "Shift", "G"];
                    updateShortcutPreference(shortcutArray);
                    hotkeys.unbind();
                } else if (shortcutArray.length > 1) {
                    shortcutArray.pop();
                    shortcutArray = shortcutArray;
                }
            }
        });
    }
</script>

<div class="shortcut-control">
    <p>Hotkey:</p>
    <input
    id="key-recorder"
    type="button"
    value={shortcutArray.length > 0
        ? shortcutArray
              .map((key) => key)
              .join(" + ")
              .replace("Meta", "⌘")
              .replace("Command", "⌘")
              .replace("Control", "⌃")
              .replace("Alt", "⌥")
              .replace("Shift", "⇧")
        : "Recording..."}
    on:click={recordShortcut}
/>
</div>

<style>
    .shortcut-control {
        width: 30%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    p {
        font-size: 16px;
        color: var(--primary-text-color);
        margin: 0;
    }
    #key-recorder {
        background: var(--secondary-bg-color);
        border-radius: 4px;
        padding: 8px;
        border: none;
        color: var(--primary-text-color);
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }
</style>