feat: add quick search opener keyboard shortcut for Mac platform

jsdocs-io · Jul 12, 2024 · d6d7102 · d6d7102
1 parent a5234ad
commit d6d7102
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/QuickSearchOpener.astro b/src/components/QuickSearchOpener.astro
@@ -7,13 +7,14 @@ import LucideFileSearch from "~icons/lucide/file-search";
 	class="btn btn-outline w-full justify-between border-base-content/50"
 	@click="open()"
 	@keydown.ctrl.k.window.prevent="open()"
+	@keydown.cmd.k.window.prevent="open()"
 >
 	<div class="flex items-center gap-2">
 		<LucideFileSearch class="size-6" />
 		Quick search &hellip;
 	</div>
 	<kbd>
-		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm">Ctrl</kbd>
+		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm" x-text="cmdSymbol()">⌘</kbd>
 		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm">K</kbd>
 	</kbd>
 </button>
diff --git a/src/scripts/alpine.ts b/src/scripts/alpine.ts
@@ -21,6 +21,7 @@ type QuickSearchOpener = {
 	dialog: HTMLDialogElement | undefined;
 	init(): void;
 	open(): void;
+	cmdSymbol(): string;
 };
 
 const quickSearchOpener = (Alpine: Alpine) => {
@@ -37,6 +38,9 @@ const quickSearchOpener = (Alpine: Alpine) => {
 						this.dialog.showModal();
 					}
 				},
+				cmdSymbol(): string {
+					return navigator.userAgent.includes("Mac") ? "⌘" : "Ctrl";
+				},
 			}) as QuickSearchOpener,
 	);
 };