refactor: extract dialog opener component

Author: velut

src/components/PackageSearchOpener.astro

@@ -3,7 +3,7 @@ import LucideSearch from "~icons/lucide/search";
 ---
 
 <button
-	x-data="packageSearchOpener()"
+	x-data="dialogOpener('#package-search')"
 	class="btn btn-outline w-full justify-between border-base-content/20"
 	@click="open()"
 	@keydown.ctrl.shift.f.window.prevent="open()"
@@ -14,7 +14,7 @@ import LucideSearch from "~icons/lucide/search";
 		Search npm packages &hellip;
 	</div>
 	<kbd x-cloak>
-		<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" x-text="cmdKey"></kbd>
 		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm">Shift</kbd>
 		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm">F</kbd>
 	</kbd>

src/components/QuickSearchOpener.astro

@@ -3,7 +3,7 @@ import LucideFileSearch from "~icons/lucide/file-search";
 ---
 
 <button
-	x-data="quickSearchOpener()"
+	x-data="dialogOpener('#quick-search')"
 	class="btn btn-outline w-full justify-between border-base-content/50"
 	@click="open()"
 	@keydown.ctrl.k.window.prevent="open()"
@@ -14,7 +14,7 @@ import LucideFileSearch from "~icons/lucide/file-search";
 		Quick search &hellip;
 	</div>
 	<kbd x-cloak>
-		<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" x-text="cmdKey"></kbd>
 		<kbd class="hidden font-normal text-base-content lg:kbd lg:kbd-sm">K</kbd>
 	</kbd>
 </button>

src/scripts/alpine.ts

@@ -1,12 +1,12 @@
 import type { Alpine } from "alpinejs";
-import { packageSearch, packageSearchOpener } from "./package-search";
-import { quickSearch, quickSearchOpener } from "./quick-search";
+import { dialogOpener } from "./dialog-opener";
+import { packageSearch } from "./package-search";
+import { quickSearch } from "./quick-search";
 import { timeAgo } from "./time-ago";
 
 export default (Alpine: Alpine) => {
 	Alpine.data("timeAgo", timeAgo);
-	Alpine.data("packageSearchOpener", packageSearchOpener);
+	Alpine.data("dialogOpener", dialogOpener);
 	Alpine.data("packageSearch", packageSearch);
-	Alpine.data("quickSearchOpener", quickSearchOpener);
 	Alpine.data("quickSearch", quickSearch);
 };

src/scripts/dialog-opener.ts

@@ -0,0 +1,19 @@
+import { defineComponent } from "./define-component";
+import { scrollIntoView } from "./scroll-into-view";
+
+export const dialogOpener = defineComponent((dialogId: string) => ({
+	dialog: undefined as HTMLDialogElement | undefined,
+	results: undefined as HTMLUListElement | undefined,
+	cmdKey: "",
+	init() {
+		this.dialog = document.querySelector<HTMLDialogElement>(dialogId) ?? undefined;
+		this.results = document.querySelector<HTMLUListElement>(`${dialogId}-results`) ?? undefined;
+		this.cmdKey = navigator.userAgent.includes("Mac") ? "⌘" : "Ctrl";
+	},
+	open() {
+		if (this.dialog && !this.dialog.open) {
+			this.dialog.showModal();
+			scrollIntoView(this.results, 0);
+		}
+	},
+}));

src/scripts/is-mac.ts

@@ -1,26 +1,7 @@
 import { mod } from "../../lib/mod";
 import { defineComponent } from "./define-component";
-import { isMac } from "./is-mac";
 import { scrollIntoView } from "./scroll-into-view";
 
-export const packageSearchOpener = defineComponent(() => ({
-	dialog: undefined as HTMLDialogElement | undefined,
-	resultsList: undefined as HTMLUListElement | undefined,
-	init() {
-		this.dialog = findDialog();
-		this.resultsList = findResultsList();
-	},
-	open() {
-		if (this.dialog && !this.dialog.open) {
-			this.dialog.showModal();
-			scrollIntoView(this.resultsList, 0);
-		}
-	},
-	cmdSymbol(): string {
-		return isMac() ? "⌘" : "Ctrl";
-	},
-}));
-
 type NpmPackage = {
 	name: string;
 	description: string;

src/scripts/package-search.ts

@@ -3,27 +3,8 @@ import Fuse from "fuse.js/basic";
 import { mod } from "../../lib/mod";
 import { shortKind } from "../../lib/short-kind";
 import { defineComponent } from "./define-component";
-import { isMac } from "./is-mac";
 import { scrollIntoView } from "./scroll-into-view";
 
-export const quickSearchOpener = defineComponent(() => ({
-	dialog: undefined as HTMLDialogElement | undefined,
-	resultsList: undefined as HTMLUListElement | undefined,
-	init() {
-		this.dialog = findDialog();
-		this.resultsList = findResultsList();
-	},
-	open() {
-		if (this.dialog && !this.dialog.open) {
-			this.dialog.showModal();
-			scrollIntoView(this.resultsList, 0);
-		}
-	},
-	cmdSymbol(): string {
-		return isMac() ? "⌘" : "Ctrl";
-	},
-}));
-
 type QuickSearchDeclaration = {
 	headingId: string;
 	declarationId: string;