Hotkeys visual tweeks

index.html

@@ -81,11 +81,21 @@
             console.log('You activate the "A" action');
           }
         },
+      },
+      {
+        title: 'The "A" action',
+        hotkey: 'd i a l o g',
+        description: 'Do something',
+        onAction(event) {
+          if (!/TEXTAREA|INPUT|CMD-DIALOG/.test(event.target.tagName)) {
+            console.log('You activate the "A" action');
+          }
+        },
       }
     );
 
     dialog.actions = actions;
-    //dialog.open();
+    dialog.open();
 	</script>
 </main>
 </body>

src/cmd-action.ts

@@ -40,13 +40,15 @@ export class CmdAction extends LitElement {
 	private get hotkeys() {
 		if (this.action?.hotkey) {
 			const hotkeys = this.action.hotkey
-				.replace('$mod', /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent) ? '⌘' : 'Ctrl')
-				.replace('Meta', '⌘')
-				.replace('Control', '⌃')
-				.replace('Shift', '⇧')
-				.replace('Alt', '⌥')
-				.replace('Control', '⌃')
-				.split('+');
+				.replaceAll('$mod', /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent) ? '⌘' : 'Ctrl')
+				.replaceAll('Meta', '<span>⌘</span>')
+				.replaceAll('Control', '⌃')
+				.replaceAll('Shift', '⇧')
+				.replaceAll('Alt', '⌥')
+				.replaceAll('Control', '⌃')
+				.replaceAll('+', '')
+				.replaceAll(' ', '')
+				.split('|');
 			return hotkeys.length > 0 ? html`<span>${repeat(hotkeys, hotkey => html`<kbd part="kbd">${hotkey}</kbd>`)}</span>` : '';
 		}
 

src/style.css

@@ -71,7 +71,7 @@
 	}
 
 	kbd {
-		@apply font-mono font-semibold whitespace-nowrap text-center;
+		@apply font-mono font-semibold whitespace-nowrap text-center tracking-wider;
 		@apply rounded-sm bg-neutral-700/20 dark:bg-neutral-800;
 		@apply inline-block px-1 mx-0.5 leading-normal;
 		@apply min-w-[1.3rem];