feat(keyboard-shortcuts): add modal showing keybindings

src/components/App.vue

@@ -197,6 +197,8 @@
         <closeable-dialog v-model="dataSecurityDialog">
           <data-security-box />
         </closeable-dialog>
+
+        <keyboard-shortcuts />
       </v-app>
       <persistent-overlay
         :disabled="!dragHover"
@@ -254,6 +256,7 @@ import PersistentOverlay from './PersistentOverlay.vue';
 import DataSecurityBox from './DataSecurityBox.vue';
 import VolViewFullLogo from './icons/VolViewFullLogo.vue';
 import VolViewLogo from './icons/VolViewLogo.vue';
+import KeyboardShortcuts from './KeyboardShortcuts.vue';
 import {
   DataSource,
   fileToDataSource,
@@ -349,6 +352,7 @@ export default defineComponent({
     Settings,
     SaveSession,
     PersistentOverlay,
+    KeyboardShortcuts,
   },
 
   setup() {

src/components/KeyboardShortcuts.vue

@@ -0,0 +1,32 @@
+<template>
+  <closeable-dialog v-model="keyboardStore.settingsOpen">
+    <v-card>
+      <v-card-title class="d-flex flex-row align-center"
+        >Keyboard Shortcuts</v-card-title
+      >
+      <v-table class="pa-4">
+        <thead>
+          <th class="text-left">Command</th>
+          <th class="text-left">Keybinding</th>
+        </thead>
+        <tbody>
+          <tr v-for="[action, key] in bindings" :key="action">
+            <td>{{ action }}</td>
+            <td>{{ key }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card>
+  </closeable-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
+import CloseableDialog from './CloseableDialog.vue';
+
+const keyboardStore = useKeyboardShortcutsStore();
+
+const bindings = computed(() => Object.entries(actionToKey.value));
+</script>

src/components/Settings.vue

@@ -19,6 +19,15 @@
         hide-details
       ></v-switch>
 
+      <v-btn
+        class="my-2"
+        @click="openKeyboardShortcuts"
+        prepend-icon="mdi-keyboard"
+        color="secondary"
+      >
+        Keyboard Shortcuts
+      </v-btn>
+
       <v-divider class="mt-2 mb-6"></v-divider>
       <dicom-web-settings />
 
@@ -33,6 +42,7 @@ import { defineComponent, ref, watch } from 'vue';
 import { useTheme } from 'vuetify';
 import { useLocalStorage } from '@vueuse/core';
 
+import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
 import DicomWebSettings from './dicom-web/DicomWebSettings.vue';
 import ServerSettings from './ServerSettings.vue';
 import { DarkTheme, LightTheme, ThemeStorageKey } from '../constants';
@@ -58,10 +68,16 @@ export default defineComponent({
       errorReportingStore.disableReporting = !enabled;
     });
 
+    const keyboardStore = useKeyboardShortcutsStore();
+    const openKeyboardShortcuts = () => {
+      keyboardStore.settingsOpen = true;
+    };
+
     return {
       dark,
       reportingEnabled,
       errorReportingConfigured,
+      openKeyboardShortcuts,
     };
   },
   components: {

src/store/keyboard-shortcuts.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useKeyboardShortcutsStore = defineStore(
+  'keyboardShortcuts',
+  () => {
+    const settingsOpen = ref(false);
+
+    return {
+      settingsOpen,
+    };
+  }
+);