Keyboard Shortcut Fixes (#40)

* Initializing Keyboard_Shortcut_Fixes for empty Pull Request

* Add `command` modifiers to hotkeys where it makes sense

* Remove weird misplaced text

* Format hotkey help text to show the appropriate hints

src/App.vue

@@ -43,7 +43,7 @@ onMounted(async () => {
  );
 
  hotkeys.register(
- "ctrl+shift+\\",
+ "ctrl+shift+\\, command+shift+\\",
  "Toggles light/dark theme",
  () => {
  toggleTheme();

src/components/KeyboardModal.vue

@@ -6,10 +6,20 @@ import { onBeforeMount } from "vue";
 
 const modals = useModals();
 const hotkeys = useHotkeys();
+const mac = navigator.platform.startsWith('Mac');
+
+// If the hotkey is "ctrl+/, command+/", then we want to only display "⌘+/" on Mac
+// and "Ctrl+/" everywhere else. If the hotkey has no ctrl or command modifiers, 
+// such as "esc", then we want to display just "Esc" everywhere.
+function formatHotkey(hotkey) {
+ return (hotkey.includes("ctrl") && hotkey.includes("command")) 
+ ? hotkey.split(", ")[mac ? 1 : 0].replace("command", "⌘").replace("ctrl", "Ctrl")
+ : hotkey.slice(0, 1).toUpperCase() + hotkey.slice(1);
+}
 
 onBeforeMount(() => {
  hotkeys.register(
- "ctrl+/",
+ "ctrl+/, command+/",
  "Displays this help window",
  () => {
  modals.toggle("keyboard");
@@ -27,12 +37,12 @@ onBeforeMount(() => {
  <div
  class="my-2 max-h-96 overflow-y-auto overflow-x-hidden text-gray-700 dark:text-gray-300"
  >
- <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+ <div class="grid grid-cols-2 gap-x-8 gap-y-3">
  <div v-for="hotkey in hotkeys.help" :key="hotkey.shortcut">
  <div class="flex justify-between">
  <kbd
  class="inline-flex items-center border border-gray-200 dark:border-gray-600 rounded px-2 text-sm font-sans font-medium text-gray-400"
- v-text="hotkey.shortcut"
+ v-text="formatHotkey(hotkey.shortcut)"
  ></kbd>
  <div v-text="hotkey.description"></div>
  </div>

src/components/MonsterTable.vue

@@ -101,7 +101,7 @@ const pagination = computed(() => {
 
 onBeforeMount(() => {
  hotkeys.register(
- "ctrl+[",
+ "ctrl+[, command+[",
  "Previous monsters search page",
  () => {
  currentPage.value--;
@@ -111,7 +111,7 @@ onBeforeMount(() => {
  );
 
  hotkeys.register(
- "ctrl+]",
+ "ctrl+], command+]",
  "Next monsters search page",
  () => {
  currentPage.value++;

src/components/SearchBox.vue

@@ -14,7 +14,7 @@ const searchBox = ref(null);
 
 onMounted(() => {
  hotkeys.register(
- "ctrl+k",
+ "ctrl+k, command+k",
  "Focus the search box",
  () => {
  searchBox.value.focus();

src/views/GeneratorView.vue

@@ -1,4 +1,3 @@
-show
 <script setup></script>
 
 <script>
@@ -36,7 +35,7 @@ export default {
  data() {
  return {
  userWantsFilters: this.filtersTest(),
- alwaysShowFilters: false,
+ alwaysShowFilters: this.filtersTest(),
  mobileEncounterTab: false,
  };
  },
@@ -69,18 +68,20 @@ export default {
 
  setupHotkeys() {
  this.hotkeys.register(
- "ctrl+f",
+ "ctrl+f, command+f",
  "Toggle the filters sidebar",
  () => {
- this.userWantsFilters = this.filtersTest() ? true : !this.userWantsFilters;
+ this.userWantsFilters = this.filtersTest()
+ ? true
+ : !this.userWantsFilters;
 
  return false;
  },
  0
  );
 
  this.hotkeys.register(
- "ctrl+s",
+ "ctrl+s, command+s",
  "Save the current encounter",
  () => {
  this.encounter.save();
@@ -90,7 +91,7 @@ export default {
  );
 
  this.hotkeys.register(
- "ctrl+g",
+ "ctrl+g, command+g",
  "Generate an encounter",
  () => {
  this.encounter.generateRandom();