feat(KeyboardShortcuts): add readable action listings

src/components/KeyboardShortcuts.vue

@@ -24,9 +24,16 @@
 import { computed } from 'vue';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
+import { ACTIONS } from '@/src/constants';
 import CloseableDialog from './CloseableDialog.vue';
+import { getEntries } from '../utils';
 
 const keyboardStore = useKeyboardShortcutsStore();
 
-const bindings = computed(() => Object.entries(actionToKey.value));
+const bindings = computed(() =>
+  getEntries(actionToKey.value).map(([action, key]) => [
+    ACTIONS[action].readable,
+    key,
+  ])
+);
 </script>

src/composables/actions.ts

@@ -4,6 +4,7 @@ import { useRectangleStore } from '../store/tools/rectangles';
 import { useRulerStore } from '../store/tools/rulers';
 import { usePolygonStore } from '../store/tools/polygons';
 import { Action } from '../constants';
+import { useKeyboardShortcutsStore } from '../store/keyboard-shortcuts';
 
 const applyLabelOffset = (offset: number) => () => {
   const toolToStore = {
@@ -30,6 +31,11 @@ const setTool = (tool: Tools) => () => {
   useToolStore().setCurrentTool(tool);
 };
 
+const showKeyboardShortcuts = () => {
+  const keyboardStore = useKeyboardShortcutsStore();
+  keyboardStore.settingsOpen = true;
+};
+
 export const ACTION_TO_FUNC = {
   windowLevel: setTool(Tools.WindowLevel),
   pan: setTool(Tools.Pan),
@@ -44,4 +50,6 @@ export const ACTION_TO_FUNC = {
 
   decrementLabel: applyLabelOffset(-1),
   incrementLabel: applyLabelOffset(1),
+
+  showKeyboardShortcuts,
 } as const satisfies Record<Action, () => void>;

src/config.ts

@@ -225,4 +225,6 @@ export const ACTION_TO_KEY = {
 
   decrementLabel: 'q',
   incrementLabel: 'w',
+
+  showKeyboardShortcuts: '?',
 } satisfies Record<Action, string>;

src/constants.ts

@@ -48,22 +48,48 @@ export const Messages = {
 
 export const ANNOTATION_TOOL_HANDLE_RADIUS = 10; // pixels
 
-export const ACTIONS = [
-  // set the current tool
-  'windowLevel',
-  'pan',
-  'zoom',
-  'ruler',
-  'paint',
-  'rectangle',
-  'crosshairs',
-  'crop',
-  'polygon',
-  'select',
+export const ACTIONS = {
+  windowLevel: {
+    readable: 'Activate Window/Level tool',
+  },
+  pan: {
+    readable: 'Activate Pan tool',
+  },
+  zoom: {
+    readable: 'Activate Zoom tool',
+  },
+  ruler: {
+    readable: 'Activate Ruler tool',
+  },
+  paint: {
+    readable: 'Activate Paint tool',
+  },
+  rectangle: {
+    readable: 'Activate Rectangle tool',
+  },
+  crosshairs: {
+    readable: 'Activate Crosshairs tool',
+  },
+  crop: {
+    readable: 'Activate Crop tool',
+  },
+  polygon: {
+    readable: 'Activate Polygon tool',
+  },
+  select: {
+    readable: 'Activate Select tool',
+  },
 
-  // change the current label for the current tool
-  'decrementLabel',
-  'incrementLabel',
-] as const;
+  decrementLabel: {
+    readable: 'Activate previous Label',
+  },
+  incrementLabel: {
+    readable: 'Activate next Label',
+  },
+
+  showKeyboardShortcuts: {
+    readable: 'Show keyboard shortcuts dialog',
+  },
+} as const;
 
-export type Action = (typeof ACTIONS)[number];
+export type Action = keyof typeof ACTIONS;