Qopy/pages/settings.vue

<template>
  <div class="bg">
    <div class="back">
      <img @click="router.push('/')" src="../public/back_arrow.svg" />
      <p>Back</p>
    </div>
    <div class="bottom-bar">
      <div class="left">
        <img alt="" class="logo" src="../public/logo.png" width="18px" />
        <p>Qopy</p>
      </div>
      <div class="right">
        <div @click="saveKeybind" class="actions">
          <p>Save</p>
          <div>
            <img alt="" src="../public/cmd.svg" v-if="os === 'macos'" />
            <img
              alt=""
              src="../public/ctrl.svg"
              v-if="os === 'linux' || os === 'windows'" />
            <img alt="" src="../public/enter.svg" />
          </div>
        </div>
      </div>
    </div>
    <div class="keybind-container">
      <h2 class="title">Record a new Hotkey</h2>
      <div
        @blur="onBlur"
        @focus="onFocus"
        @keydown="onKeyDown"
        class="keybind-input"
        ref="keybindInput"
        tabindex="0">
        <span class="key" v-if="keybind.length === 0">Click here</span>
        <template v-else>
          <span
            :key="index"
            class="key"
            :class="{ modifier: isModifier(key) }"
            v-for="(key, index) in keybind">
            {{ keyToDisplay(key) }}
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { platform } from "@tauri-apps/plugin-os";
import { useRouter } from "vue-router";

const activeModifiers = reactive<Set<string>>(new Set());
const isKeybindInputFocused = ref(false);
const keybind = ref<string[]>([]);
const keybindInput = ref<HTMLElement | null>(null);
const lastBlurTime = ref(0);
const os = ref("");
const router = useRouter();
const keyboard = useKeyboard();

const keyToDisplayMap: Record<string, string> = {
  " ": "Space",
  Alt: "Alt",
  AltLeft: "Alt L",
  AltRight: "Alt R",
  ArrowDown: "↓",
  ArrowLeft: "←",
  ArrowRight: "→",
  ArrowUp: "↑",
  Control: "Ctrl",
  ControlLeft: "Ctrl L",
  ControlRight: "Ctrl R",
  Enter: "↵",
  Meta: "Meta",
  MetaLeft: "Meta L",
  MetaRight: "Meta R",
  Shift: "⇧",
  ShiftLeft: "⇧ L",
  ShiftRight: "⇧ R",
};

const modifierKeySet = new Set([
  "Alt",
  "AltLeft",
  "AltRight",
  "Control",
  "ControlLeft",
  "ControlRight",
  "Meta",
  "MetaLeft",
  "MetaRight",
  "Shift",
  "ShiftLeft",
  "ShiftRight",
]);

const isModifier = (key: string): boolean => {
  return modifierKeySet.has(key);
};

const keyToDisplay = (key: string): string => {
  return keyToDisplayMap[key] || key;
};

const updateKeybind = () => {
  const modifiers = Array.from(activeModifiers).sort();
  const nonModifiers = keybind.value.filter((key) => !isModifier(key));
  keybind.value = [...modifiers, ...nonModifiers];
};

const onBlur = () => {
  isKeybindInputFocused.value = false;
  lastBlurTime.value = Date.now();
};

const onFocus = () => {
  isKeybindInputFocused.value = true;
  activeModifiers.clear();
  keybind.value = [];
};

const onKeyDown = (event: KeyboardEvent) => {
  event.preventDefault();
  const key = event.code;

  if (key === "Escape") {
    if (keybindInput.value) {
      keybindInput.value.blur();
    }
    return;
  }

  if (isModifier(key)) {
    activeModifiers.add(key);
  } else if (!keybind.value.includes(key)) {
    keybind.value = keybind.value.filter((k) => isModifier(k));
    keybind.value.push(key);
  }

  updateKeybind();
};

const saveKeybind = async () => {
  console.log("New:", keybind.value);
  const oldKeybind = await invoke<string[]>("get_keybind");
  console.log("Old:", oldKeybind);
  await invoke("save_keybind", { keybind: keybind.value });
};

onMounted(() => {
  os.value = platform();

  keyboard.down("all", (event) => {
    const isMacSaveCombo =
      os.value === "macos" &&
      (event.code === "MetaLeft" || event.code === "MetaRight") &&
      event.key === "Enter";

    const isOtherOsSaveCombo =
      os.value !== "macos" &&
      (event.code === "ControlLeft" || event.code === "ControlRight") &&
      event.key === "Enter";

    if (
      (isMacSaveCombo || isOtherOsSaveCombo) &&
      !isKeybindInputFocused.value
    ) {
      event.preventDefault();
      saveKeybind();
    }
  });

  keyboard.down("Escape", (event) => {
    const now = Date.now();
    if (!isKeybindInputFocused.value && now - lastBlurTime.value > 100) {
      event.preventDefault();
      router.push("/");
    }
  });
});
</script>

<style scoped lang="scss">
@use "~/assets/css/settings.scss";
</style>