Feature: global search, keyboard shortcuts / hotkey support (#6449)

src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+
+const SYMBOLS = {
+  meta: '⌘', // ⌘
+  control: '⌃', // ⌃
+  shift: '⇧', // ⇧
+  left: '←', // ←
+  right: '→', // →
+  up: '↑', // ↑
+  down: '↓', // ↓
+}
+
+@Component({
+  selector: 'pngx-hotkey-dialog',
+  templateUrl: './hotkey-dialog.component.html',
+  styleUrl: './hotkey-dialog.component.scss',
+})
+export class HotkeyDialogComponent {
+  public title: string = $localize`Keyboard shortcuts`
+  public hotkeys: Map<string, string> = new Map()
+
+  constructor(public activeModal: NgbActiveModal) {}
+
+  public close(): void {
+    this.activeModal.close()
+  }
+
+  public formatKey(key: string, macOS: boolean = false): string {
+    if (macOS) {
+      key = key.replace('control', 'meta')
+    }
+    return key
+      .split('.')
+      .map((k) => SYMBOLS[k] || k)
+      .join(' + ')
+  }
+}