audiobookshelf/client/components/modals/ShortcutsModal.vue

<template>
  <ui-modal v-model="show" :width="600" title="Keyboard Shortcuts" @close="close">
    <div class="p-6 text-sm text-gray-200">
      <div v-for="(section, index) in shortcutSections" :key="index" class="mb-6 last:mb-0">
        <h3 class="text-lg font-semibold text-white mb-3">{{ section.title }}</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4">
          <div v-for="shortcut in section.shortcuts" :key="shortcut.keys" class="flex justify-between items-center py-1 border-b border-white/10 last:border-b-0">
            <span>{{ shortcut.action }}</span>
            <div class="flex gap-1">
              <span v-for="(key, i) in shortcut.keys.replace(/Key/g, '').split('-')" :key="i" class="px-2 py-0.5 bg-bg font-mono text-xs rounded-sm border border-gray-600 text-gray-300">
                {{ key }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end p-4 border-t border-white/10">
      <ui-btn @click="close">Close</ui-btn>
    </div>
  </ui-modal>
</template>

<script>
export default {
  computed: {
    shortcutSections() {
      if (!this.$hotkeys) return []
      return [
        {
          title: 'Global Navigation',
          shortcuts: [
            { action: 'Home', keys: this.$hotkeys.Navigation.HOME },
            { action: 'Library', keys: this.$hotkeys.Navigation.LIBRARY },
            { action: 'Series', keys: this.$hotkeys.Navigation.SERIES },
            { action: 'Collections', keys: this.$hotkeys.Navigation.COLLECTIONS },
            { action: 'Authors', keys: this.$hotkeys.Navigation.AUTHORS },
            { action: 'Show Shortcuts Helper', keys: this.$hotkeys.Global.SHORTCUTS_HELPER }
          ]
        },
        {
          title: 'Library Actions (Batch Selection)',
          shortcuts: [
            { action: 'Select All Items', keys: this.$hotkeys.Batch.SELECT_ALL },
            { action: 'Consolidate', keys: this.$hotkeys.Batch.CONSOLIDATE },
            { action: 'Merge Items', keys: this.$hotkeys.Batch.MERGE },
            { action: 'Move to Library', keys: this.$hotkeys.Batch.MOVE },
            { action: 'Reset Metadata', keys: this.$hotkeys.Batch.RESET },
            { action: 'Quick Match', keys: this.$hotkeys.Batch.MATCH },
            { action: 'Clear Selection', keys: this.$hotkeys.Batch.CANCEL }
          ]
        },
        {
          title: 'Item View Actions',
          shortcuts: [
            { action: 'Consolidate', keys: this.$hotkeys.Item.CONSOLIDATE },
            { action: 'Move to Library', keys: this.$hotkeys.Item.MOVE },
            { action: 'Reset Metadata', keys: this.$hotkeys.Item.RESET },
            { action: 'Match', keys: this.$hotkeys.Item.MATCH }
          ]
        }
      ]
    },
    show: {
      get() {
        return this.$store.state.globals.showShortcutsModal
      },
      set(val) {
        this.$store.commit('globals/setShowShortcutsModal', val)
      }
    }
  },
  methods: {
    close() {
      this.show = false
    }
  }
}
</script>