@questpie/admin 3.2.4 → 3.2.6

package/dist/client/views/common/global-search.mjs

@@ -7,10 +7,9 @@ import { InputGroup, InputGroupAddon, InputGroupInput } from "../../components/u
 import { ResponsiveDialog, ResponsiveDialogContent } from "../../components/ui/responsive-dialog.mjs";
 import { Kbd } from "../../components/ui/kbd.mjs";
 import { useDebouncedValue, useGlobalSearch } from "../../hooks/use-search.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
-import { useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/common/global-search.tsx
@@ -35,11 +34,11 @@ const DEFAULT_FILE_ICON = "ph:file";
 * Server config entries come as plain objects without strict typing.
 */
 function getConfigProps(config) {
-	const c$1 = config;
+	const c = config;
 	return {
-		label: c$1?.label,
-		icon: c$1?.icon,
-		hidden: c$1?.hidden
+		label: c?.label,
+		icon: c?.icon,
+		hidden: c?.hidden
 	};
 }
 /**
@@ -75,33 +74,17 @@ function filterItems(items, query) {
 		return false;
 	});
 }
-const SearchGroup = React.memo(function SearchGroup$1(t0) {
-	const $ = c(25);
-	const { title, items, selectedIndex, startIndex, onSelect, onHover, query: t1 } = t0;
-	const query = t1 === void 0 ? "" : t1;
+const SearchGroup = React.memo(function SearchGroup$1({ title, items, selectedIndex, startIndex, onSelect, onHover, query = "" }) {
 	const resolveText = useResolveText();
 	if (items.length === 0) return null;
-	let t2;
-	if ($[0] !== resolveText || $[1] !== title) {
-		t2 = resolveText(title);
-		$[0] = resolveText;
-		$[1] = title;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== t2) {
-		t3 = /* @__PURE__ */ jsx("h3", {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 last:mb-0",
+		children: [/* @__PURE__ */ jsx("h3", {
 			className: "qa-global-search__group-title text-muted-foreground font-chrome chrome-meta mb-2 px-2.5 text-xs font-medium",
-			children: t2
-		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== items || $[6] !== onHover || $[7] !== onSelect || $[8] !== query || $[9] !== resolveText || $[10] !== selectedIndex || $[11] !== startIndex) {
-		let t5$1;
-		if ($[13] !== onHover || $[14] !== onSelect || $[15] !== query || $[16] !== resolveText || $[17] !== selectedIndex || $[18] !== startIndex) {
-			t5$1 = (item, idx) => {
+			children: resolveText(title)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-0.5",
+			children: items.map((item, idx) => {
 				const globalIndex = startIndex + idx;
 				const isSelected = globalIndex === selectedIndex;
 				return /* @__PURE__ */ jsxs("button", {
@@ -127,49 +110,11 @@ const SearchGroup = React.memo(function SearchGroup$1(t0) {
 						})]
 					})]
 				}, item.id);
-			};
-			$[13] = onHover;
-			$[14] = onSelect;
-			$[15] = query;
-			$[16] = resolveText;
-			$[17] = selectedIndex;
-			$[18] = startIndex;
-			$[19] = t5$1;
-		} else t5$1 = $[19];
-		t4 = items.map(t5$1);
-		$[5] = items;
-		$[6] = onHover;
-		$[7] = onSelect;
-		$[8] = query;
-		$[9] = resolveText;
-		$[10] = selectedIndex;
-		$[11] = startIndex;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[20] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: "space-y-0.5",
-			children: t4
-		});
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
-	let t6;
-	if ($[22] !== t3 || $[23] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "mb-4 last:mb-0",
-			children: [t3, t5]
-		});
-		$[22] = t3;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
-	return t6;
+			})
+		})]
+	});
 });
-function GlobalSearch(t0) {
-	const $ = c(112);
-	const { isOpen, onClose, navigate, basePath: basePathProp } = t0;
+function GlobalSearch({ isOpen, onClose, navigate, basePath: basePathProp }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const { data: serverConfig } = useAdminConfig();
@@ -179,28 +124,13 @@ function GlobalSearch(t0) {
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const inputRef = useRef(null);
 	const debouncedQuery = useDebouncedValue(query, 300);
-	let t1;
-	if ($[0] !== debouncedQuery) {
-		t1 = debouncedQuery.trim();
-		$[0] = debouncedQuery;
-		$[1] = t1;
-	} else t1 = $[1];
-	const t2 = t1.length >= 2;
-	let t3;
-	if ($[2] !== debouncedQuery || $[3] !== t2) {
-		t3 = {
-			query: debouncedQuery,
-			limit: 10,
-			enabled: t2
-		};
-		$[2] = debouncedQuery;
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	const { data: searchResults, isLoading: isSearching } = useGlobalSearch(t3);
-	let items;
-	if ($[5] !== basePath || $[6] !== resolveText || $[7] !== serverConfig?.collections || $[8] !== serverConfig?.globals || $[9] !== t) {
-		items = [];
+	const { data: searchResults, isLoading: isSearching } = useGlobalSearch({
+		query: debouncedQuery,
+		limit: 10,
+		enabled: debouncedQuery.trim().length >= 2
+	});
+	const navItems = useMemo(() => {
+		const items = [];
 		const collections = serverConfig?.collections ?? {};
 		const globals = serverConfig?.globals ?? {};
 		for (const [name, config] of Object.entries(collections)) {
@@ -220,508 +150,259 @@ function GlobalSearch(t0) {
 				]
 			});
 		}
-		for (const [name_0, config_0] of Object.entries(globals)) {
-			const { label: rawLabel_0, icon: icon_0, hidden: hidden_0 } = getConfigProps(config_0);
-			if (hidden_0) continue;
-			const label_0 = resolveText(rawLabel_0, name_0);
+		for (const [name, config] of Object.entries(globals)) {
+			const { label: rawLabel, icon, hidden } = getConfigProps(config);
+			if (hidden) continue;
+			const label = resolveText(rawLabel, name);
 			items.push({
-				id: `glob-${name_0}`,
+				id: `glob-${name}`,
 				type: "global",
-				label: label_0,
-				href: `${basePath}/globals/${name_0}`,
-				icon: icon_0 ?? DEFAULT_GEAR_ICON,
+				label,
+				href: `${basePath}/globals/${name}`,
+				icon: icon ?? DEFAULT_GEAR_ICON,
 				keywords: [
-					name_0,
+					name,
 					"global",
 					"settings",
 					"config"
 				]
 			});
 		}
-		for (const [name_1, config_1] of Object.entries(collections)) {
-			const { label: rawLabel_1, icon: collectionIcon, hidden: hidden_1 } = getConfigProps(config_1);
-			if (hidden_1) continue;
-			const label_1 = resolveText(rawLabel_1, name_1);
+		for (const [name, config] of Object.entries(collections)) {
+			const { label: rawLabel, icon: collectionIcon, hidden } = getConfigProps(config);
+			if (hidden) continue;
+			const label = resolveText(rawLabel, name);
 			items.push({
-				id: `action-create-${name_1}`,
+				id: `action-create-${name}`,
 				type: "action",
-				label: t("globalSearch.createNew", { name: label_1 }),
-				href: `${basePath}/collections/${name_1}/create`,
+				label: t("globalSearch.createNew", { name: label }),
+				href: `${basePath}/collections/${name}/create`,
 				icon: collectionIcon ?? DEFAULT_PLUS_ICON,
 				keywords: [
 					"create",
 					"new",
 					"add",
-					name_1
+					name
 				]
 			});
 		}
-		$[5] = basePath;
-		$[6] = resolveText;
-		$[7] = serverConfig?.collections;
-		$[8] = serverConfig?.globals;
-		$[9] = t;
-		$[10] = items;
-	} else items = $[10];
-	const navItems = items;
-	let t4;
-	if ($[11] !== navItems || $[12] !== query) {
-		t4 = filterItems(navItems, query);
-		$[11] = navItems;
-		$[12] = query;
-		$[13] = t4;
-	} else t4 = $[13];
-	const filteredNavItems = t4;
-	let t5;
-	bb0: {
-		if (!searchResults?.docs) {
-			let t6$2;
-			if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-				t6$2 = [];
-				$[14] = t6$2;
-			} else t6$2 = $[14];
-			t5 = t6$2;
-			break bb0;
-		}
-		let t6$1;
-		if ($[15] !== serverConfig?.collections) {
-			t6$1 = serverConfig?.collections ?? {};
-			$[15] = serverConfig?.collections;
-			$[16] = t6$1;
-		} else t6$1 = $[16];
-		const collections_0 = t6$1;
-		let t7$1;
-		if ($[17] !== basePath || $[18] !== collections_0 || $[19] !== resolveText || $[20] !== searchResults.docs) {
-			let t8$1;
-			if ($[22] !== basePath || $[23] !== collections_0 || $[24] !== resolveText) {
-				t8$1 = (doc) => {
-					const collectionName = doc._collection;
-					const collectionConfig = collections_0[collectionName];
-					const { label: rawLabel_2, icon: configIcon } = getConfigProps(collectionConfig);
-					const collectionLabel = resolveText(rawLabel_2, collectionName);
-					const icon_1 = configIcon ?? DEFAULT_FILE_ICON;
-					return {
-						id: `record-${collectionName}-${doc.id}`,
-						type: "record",
-						label: doc._search?.indexedTitle || doc.id,
-						sublabel: collectionLabel,
-						href: `${basePath}/collections/${collectionName}/${doc.id}`,
-						icon: icon_1,
-						highlights: doc._search?.highlights
-					};
-				};
-				$[22] = basePath;
-				$[23] = collections_0;
-				$[24] = resolveText;
-				$[25] = t8$1;
-			} else t8$1 = $[25];
-			t7$1 = searchResults.docs.map(t8$1);
-			$[17] = basePath;
-			$[18] = collections_0;
-			$[19] = resolveText;
-			$[20] = searchResults.docs;
-			$[21] = t7$1;
-		} else t7$1 = $[21];
-		t5 = t7$1;
-	}
-	const recordItems = t5;
-	let t6;
-	if ($[26] !== filteredNavItems) {
-		t6 = filteredNavItems.filter(_temp);
-		$[26] = filteredNavItems;
-		$[27] = t6;
-	} else t6 = $[27];
-	let t7;
-	if ($[28] !== filteredNavItems) {
-		t7 = filteredNavItems.filter(_temp2);
-		$[28] = filteredNavItems;
-		$[29] = t7;
-	} else t7 = $[29];
-	let t8;
-	if ($[30] !== filteredNavItems) {
-		t8 = filteredNavItems.filter(_temp3);
-		$[30] = filteredNavItems;
-		$[31] = t8;
-	} else t8 = $[31];
-	let t9;
-	if ($[32] !== t6 || $[33] !== t7 || $[34] !== t8) {
-		t9 = {
-			collections: t6,
-			globals: t7,
-			actions: t8
+		return items;
+	}, [
+		serverConfig,
+		basePath,
+		resolveText,
+		t
+	]);
+	const filteredNavItems = useMemo(() => filterItems(navItems, query), [navItems, query]);
+	const recordItems = useMemo(() => {
+		if (!searchResults?.docs) return [];
+		const collections = serverConfig?.collections ?? {};
+		return searchResults.docs.map((doc) => {
+			const collectionName = doc._collection;
+			const collectionConfig = collections[collectionName];
+			const { label: rawLabel, icon: configIcon } = getConfigProps(collectionConfig);
+			const collectionLabel = resolveText(rawLabel, collectionName);
+			const icon = configIcon ?? DEFAULT_FILE_ICON;
+			return {
+				id: `record-${collectionName}-${doc.id}`,
+				type: "record",
+				label: doc._search?.indexedTitle || doc.id,
+				sublabel: collectionLabel,
+				href: `${basePath}/collections/${collectionName}/${doc.id}`,
+				icon,
+				highlights: doc._search?.highlights
+			};
+		});
+	}, [
+		searchResults,
+		serverConfig,
+		basePath,
+		resolveText
+	]);
+	const groupedNavItems = useMemo(() => {
+		return {
+			collections: filteredNavItems.filter((i) => i.type === "collection"),
+			globals: filteredNavItems.filter((i) => i.type === "global"),
+			actions: filteredNavItems.filter((i) => i.type === "action")
 		};
-		$[32] = t6;
-		$[33] = t7;
-		$[34] = t8;
-		$[35] = t9;
-	} else t9 = $[35];
-	const groupedNavItems = t9;
-	let t10;
-	if ($[36] !== groupedNavItems.actions || $[37] !== groupedNavItems.collections || $[38] !== groupedNavItems.globals || $[39] !== recordItems) {
-		t10 = [
+	}, [filteredNavItems]);
+	const allItems = useMemo(() => {
+		return [
 			...groupedNavItems.collections,
 			...groupedNavItems.globals,
 			...groupedNavItems.actions,
 			...recordItems
 		];
-		$[36] = groupedNavItems.actions;
-		$[37] = groupedNavItems.collections;
-		$[38] = groupedNavItems.globals;
-		$[39] = recordItems;
-		$[40] = t10;
-	} else t10 = $[40];
-	const allItems = t10;
+	}, [groupedNavItems, recordItems]);
 	const totalCount = allItems.length;
+	const collectionsStartIndex = 0;
 	const globalsStartIndex = groupedNavItems.collections.length;
 	const actionsStartIndex = groupedNavItems.collections.length + groupedNavItems.globals.length;
 	const recordsStartIndex = groupedNavItems.collections.length + groupedNavItems.globals.length + groupedNavItems.actions.length;
-	let t11;
-	let t12;
-	if ($[41] !== isOpen) {
-		t11 = () => {
-			if (!isOpen) return;
-			const timer = setTimeout(() => inputRef.current?.focus(), 50);
-			return () => clearTimeout(timer);
-		};
-		t12 = [isOpen];
-		$[41] = isOpen;
-		$[42] = t11;
-		$[43] = t12;
-	} else {
-		t11 = $[42];
-		t12 = $[43];
-	}
-	React.useEffect(t11, t12);
-	let t13;
-	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = () => {
-			setQuery("");
-			setSelectedIndex(0);
-		};
-		$[44] = t13;
-	} else t13 = $[44];
-	const resetSearchState = t13;
-	let t14;
-	if ($[45] !== onClose) {
-		t14 = () => {
-			resetSearchState();
-			onClose();
-		};
-		$[45] = onClose;
-		$[46] = t14;
-	} else t14 = $[46];
-	const closeSearch = t14;
-	let t15;
-	if ($[47] !== closeSearch || $[48] !== navigate) {
-		t15 = (item) => {
-			navigate(item.href);
-			closeSearch();
-		};
-		$[47] = closeSearch;
-		$[48] = navigate;
-		$[49] = t15;
-	} else t15 = $[49];
-	const handleSelect = t15;
-	let t16;
-	if ($[50] !== allItems || $[51] !== closeSearch || $[52] !== handleSelect || $[53] !== selectedIndex || $[54] !== totalCount) {
-		t16 = (e) => {
-			bb127: switch (e.key) {
-				case "ArrowDown":
-					e.preventDefault();
-					setSelectedIndex((i_3) => totalCount > 0 ? (i_3 + 1) % totalCount : 0);
-					break bb127;
-				case "ArrowUp":
-					e.preventDefault();
-					setSelectedIndex((i_2) => totalCount > 0 ? (i_2 - 1 + totalCount) % totalCount : 0);
-					break bb127;
-				case "Enter":
-					e.preventDefault();
-					if (allItems[selectedIndex]) handleSelect(allItems[selectedIndex]);
-					break bb127;
-				case "Escape":
-					e.preventDefault();
-					closeSearch();
-			}
-		};
-		$[50] = allItems;
-		$[51] = closeSearch;
-		$[52] = handleSelect;
-		$[53] = selectedIndex;
-		$[54] = totalCount;
-		$[55] = t16;
-	} else t16 = $[55];
-	const handleKeyDown = t16;
-	let t17;
-	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = (index) => {
-			setSelectedIndex(index);
-		};
-		$[56] = t17;
-	} else t17 = $[56];
-	const handleHover = t17;
+	React.useEffect(() => {
+		if (!isOpen) return;
+		const timer = setTimeout(() => inputRef.current?.focus(), 50);
+		return () => clearTimeout(timer);
+	}, [isOpen]);
+	const resetSearchState = useCallback(() => {
+		setQuery("");
+		setSelectedIndex(0);
+	}, []);
+	const closeSearch = useCallback(() => {
+		resetSearchState();
+		onClose();
+	}, [onClose, resetSearchState]);
+	const handleSelect = useCallback((item) => {
+		navigate(item.href);
+		closeSearch();
+	}, [navigate, closeSearch]);
+	const handleKeyDown = useCallback((e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setSelectedIndex((i) => totalCount > 0 ? (i + 1) % totalCount : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setSelectedIndex((i) => totalCount > 0 ? (i - 1 + totalCount) % totalCount : 0);
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (allItems[selectedIndex]) handleSelect(allItems[selectedIndex]);
+				break;
+			case "Escape":
+				e.preventDefault();
+				closeSearch();
+				break;
+		}
+	}, [
+		allItems,
+		selectedIndex,
+		totalCount,
+		handleSelect,
+		closeSearch
+	]);
+	const handleHover = useCallback((index) => {
+		setSelectedIndex(index);
+	}, []);
 	const hasNavResults = groupedNavItems.collections.length > 0 || groupedNavItems.globals.length > 0 || groupedNavItems.actions.length > 0;
 	const hasRecordResults = recordItems.length > 0;
 	const hasResults = hasNavResults || hasRecordResults;
-	let t18;
-	if ($[57] !== closeSearch) {
-		t18 = (open) => !open && closeSearch();
-		$[57] = closeSearch;
-		$[58] = t18;
-	} else t18 = $[58];
-	let t19;
-	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ jsx(InputGroupAddon, {
-			align: "inline-start",
-			className: "pl-0",
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:magnifying-glass",
-				className: "size-5"
-			})
-		});
-		$[59] = t19;
-	} else t19 = $[59];
-	let t20;
-	if ($[60] !== t) {
-		t20 = t("globalSearch.placeholder");
-		$[60] = t;
-		$[61] = t20;
-	} else t20 = $[61];
-	let t21;
-	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = (e_0) => {
-			setQuery(e_0.target.value);
-			setSelectedIndex(0);
-		};
-		$[62] = t21;
-	} else t21 = $[62];
-	let t22;
-	if ($[63] !== handleKeyDown || $[64] !== query || $[65] !== t20) {
-		t22 = /* @__PURE__ */ jsx(InputGroupInput, {
-			ref: inputRef,
-			className: "h-12 px-0 text-base",
-			placeholder: t20,
-			value: query,
-			onChange: t21,
-			onKeyDown: handleKeyDown
-		});
-		$[63] = handleKeyDown;
-		$[64] = query;
-		$[65] = t20;
-		$[66] = t22;
-	} else t22 = $[66];
-	let t23;
-	if ($[67] !== isSearching) {
-		t23 = isSearching && /* @__PURE__ */ jsx(Icon, {
-			icon: "ph:spinner",
-			className: "size-4 animate-spin"
-		});
-		$[67] = isSearching;
-		$[68] = t23;
-	} else t23 = $[68];
-	let t24;
-	if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
-		t24 = /* @__PURE__ */ jsx(Kbd, { children: "ESC" });
-		$[69] = t24;
-	} else t24 = $[69];
-	let t25;
-	if ($[70] !== t23) {
-		t25 = /* @__PURE__ */ jsxs(InputGroupAddon, {
-			align: "inline-end",
-			className: "gap-2 pr-0",
-			children: [t23, t24]
-		});
-		$[70] = t23;
-		$[71] = t25;
-	} else t25 = $[71];
-	let t26;
-	if ($[72] !== t22 || $[73] !== t25) {
-		t26 = /* @__PURE__ */ jsx("div", {
-			className: "qa-global-search__input-area border-border-subtle bg-popover border-b p-3",
-			children: /* @__PURE__ */ jsxs(InputGroup, {
-				className: "h-12 border-transparent bg-transparent focus-within:border-transparent focus-within:ring-0 hover:border-transparent",
-				children: [
-					t19,
-					t22,
-					t25
-				]
-			})
-		});
-		$[72] = t22;
-		$[73] = t25;
-		$[74] = t26;
-	} else t26 = $[74];
-	let t27;
-	if ($[75] !== actionsStartIndex || $[76] !== globalsStartIndex || $[77] !== groupedNavItems.actions || $[78] !== groupedNavItems.collections || $[79] !== groupedNavItems.globals || $[80] !== handleSelect || $[81] !== hasRecordResults || $[82] !== hasResults || $[83] !== isSearching || $[84] !== query || $[85] !== recordItems || $[86] !== recordsStartIndex || $[87] !== selectedIndex || $[88] !== t) {
-		t27 = /* @__PURE__ */ jsx("div", {
-			className: "qa-global-search__results max-h-[60vh] overflow-y-auto p-2",
-			children: hasResults ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(SearchGroup, {
-					title: t("globalSearch.collections"),
-					items: groupedNavItems.collections,
-					selectedIndex,
-					startIndex: 0,
-					onSelect: handleSelect,
-					onHover: handleHover
-				}),
-				/* @__PURE__ */ jsx(SearchGroup, {
-					title: t("globalSearch.globals"),
-					items: groupedNavItems.globals,
-					selectedIndex,
-					startIndex: globalsStartIndex,
-					onSelect: handleSelect,
-					onHover: handleHover
-				}),
-				/* @__PURE__ */ jsx(SearchGroup, {
-					title: t("globalSearch.quickActions"),
-					items: groupedNavItems.actions,
-					selectedIndex,
-					startIndex: actionsStartIndex,
-					onSelect: handleSelect,
-					onHover: handleHover
-				}),
-				hasRecordResults && /* @__PURE__ */ jsx(SearchGroup, {
-					title: t("globalSearch.records"),
-					items: recordItems,
-					selectedIndex,
-					startIndex: recordsStartIndex,
-					onSelect: handleSelect,
-					onHover: handleHover,
-					query
-				})
-			] }) : /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground py-8 text-center text-sm",
-				children: isSearching ? /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-center gap-2",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: "ph:spinner",
-						className: "h-4 w-4 animate-spin"
-					}), /* @__PURE__ */ jsx("span", { children: t("globalSearch.searching") })]
-				}) : t("globalSearch.noResults")
-			})
-		});
-		$[75] = actionsStartIndex;
-		$[76] = globalsStartIndex;
-		$[77] = groupedNavItems.actions;
-		$[78] = groupedNavItems.collections;
-		$[79] = groupedNavItems.globals;
-		$[80] = handleSelect;
-		$[81] = hasRecordResults;
-		$[82] = hasResults;
-		$[83] = isSearching;
-		$[84] = query;
-		$[85] = recordItems;
-		$[86] = recordsStartIndex;
-		$[87] = selectedIndex;
-		$[88] = t;
-		$[89] = t27;
-	} else t27 = $[89];
-	let t28;
-	let t29;
-	if ($[90] === Symbol.for("react.memo_cache_sentinel")) {
-		t28 = /* @__PURE__ */ jsx(Kbd, {
-			className: "px-1 text-[10px]",
-			children: "↑"
-		});
-		t29 = /* @__PURE__ */ jsx(Kbd, {
-			className: "px-1 text-[10px]",
-			children: "↓"
-		});
-		$[90] = t28;
-		$[91] = t29;
-	} else {
-		t28 = $[90];
-		t29 = $[91];
-	}
-	let t30;
-	if ($[92] !== t) {
-		t30 = t("globalSearch.navigate");
-		$[92] = t;
-		$[93] = t30;
-	} else t30 = $[93];
-	let t31;
-	if ($[94] !== t30) {
-		t31 = /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-1",
-			children: [
-				t28,
-				t29,
-				/* @__PURE__ */ jsx("span", { children: t30 })
-			]
-		});
-		$[94] = t30;
-		$[95] = t31;
-	} else t31 = $[95];
-	let t32;
-	if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = /* @__PURE__ */ jsx(Kbd, {
-			className: "px-1.5 text-[10px]",
-			children: "↵"
-		});
-		$[96] = t32;
-	} else t32 = $[96];
-	let t33;
-	if ($[97] !== t) {
-		t33 = t("globalSearch.select");
-		$[97] = t;
-		$[98] = t33;
-	} else t33 = $[98];
-	let t34;
-	if ($[99] !== t33) {
-		t34 = /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-1",
-			children: [t32, /* @__PURE__ */ jsx("span", { children: t33 })]
-		});
-		$[99] = t33;
-		$[100] = t34;
-	} else t34 = $[100];
-	let t35;
-	if ($[101] !== t31 || $[102] !== t34) {
-		t35 = /* @__PURE__ */ jsxs("div", {
-			className: "qa-global-search__footer text-muted-foreground flex items-center justify-end gap-4 border-t px-3 py-2 text-xs",
-			children: [t31, t34]
-		});
-		$[101] = t31;
-		$[102] = t34;
-		$[103] = t35;
-	} else t35 = $[103];
-	let t36;
-	if ($[104] !== t26 || $[105] !== t27 || $[106] !== t35) {
-		t36 = /* @__PURE__ */ jsxs(ResponsiveDialogContent, {
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		open: isOpen,
+		onOpenChange: (open) => !open && closeSearch(),
+		children: /* @__PURE__ */ jsxs(ResponsiveDialogContent, {
 			className: "qa-global-search gap-0 p-0 sm:max-w-3xl",
 			showCloseButton: false,
 			children: [
-				t26,
-				t27,
-				t35
+				/* @__PURE__ */ jsx("div", {
+					className: "qa-global-search__input-area border-border-subtle bg-popover border-b p-3",
+					children: /* @__PURE__ */ jsxs(InputGroup, {
+						className: "h-12 border-transparent bg-transparent focus-within:border-transparent focus-within:ring-0 hover:border-transparent",
+						children: [
+							/* @__PURE__ */ jsx(InputGroupAddon, {
+								align: "inline-start",
+								className: "pl-0",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:magnifying-glass",
+									className: "size-5"
+								})
+							}),
+							/* @__PURE__ */ jsx(InputGroupInput, {
+								ref: inputRef,
+								className: "h-12 px-0 text-base",
+								placeholder: t("globalSearch.placeholder"),
+								value: query,
+								onChange: (e) => {
+									setQuery(e.target.value);
+									setSelectedIndex(0);
+								},
+								onKeyDown: handleKeyDown
+							}),
+							/* @__PURE__ */ jsxs(InputGroupAddon, {
+								align: "inline-end",
+								className: "gap-2 pr-0",
+								children: [isSearching && /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:spinner",
+									className: "size-4 animate-spin"
+								}), /* @__PURE__ */ jsx(Kbd, { children: "ESC" })]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "qa-global-search__results max-h-[60vh] overflow-y-auto p-2",
+					children: hasResults ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SearchGroup, {
+							title: t("globalSearch.collections"),
+							items: groupedNavItems.collections,
+							selectedIndex,
+							startIndex: collectionsStartIndex,
+							onSelect: handleSelect,
+							onHover: handleHover
+						}),
+						/* @__PURE__ */ jsx(SearchGroup, {
+							title: t("globalSearch.globals"),
+							items: groupedNavItems.globals,
+							selectedIndex,
+							startIndex: globalsStartIndex,
+							onSelect: handleSelect,
+							onHover: handleHover
+						}),
+						/* @__PURE__ */ jsx(SearchGroup, {
+							title: t("globalSearch.quickActions"),
+							items: groupedNavItems.actions,
+							selectedIndex,
+							startIndex: actionsStartIndex,
+							onSelect: handleSelect,
+							onHover: handleHover
+						}),
+						hasRecordResults && /* @__PURE__ */ jsx(SearchGroup, {
+							title: t("globalSearch.records"),
+							items: recordItems,
+							selectedIndex,
+							startIndex: recordsStartIndex,
+							onSelect: handleSelect,
+							onHover: handleHover,
+							query
+						})
+					] }) : /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground py-8 text-center text-sm",
+						children: isSearching ? /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-center gap-2",
+							children: [/* @__PURE__ */ jsx(Icon, {
+								icon: "ph:spinner",
+								className: "h-4 w-4 animate-spin"
+							}), /* @__PURE__ */ jsx("span", { children: t("globalSearch.searching") })]
+						}) : t("globalSearch.noResults")
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "qa-global-search__footer text-muted-foreground flex items-center justify-end gap-4 border-t px-3 py-2 text-xs",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Kbd, {
+								className: "px-1 text-[10px]",
+								children: "↑"
+							}),
+							/* @__PURE__ */ jsx(Kbd, {
+								className: "px-1 text-[10px]",
+								children: "↓"
+							}),
+							/* @__PURE__ */ jsx("span", { children: t("globalSearch.navigate") })
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Kbd, {
+							className: "px-1.5 text-[10px]",
+							children: "↵"
+						}), /* @__PURE__ */ jsx("span", { children: t("globalSearch.select") })]
+					})]
+				})
 			]
-		});
-		$[104] = t26;
-		$[105] = t27;
-		$[106] = t35;
-		$[107] = t36;
-	} else t36 = $[107];
-	let t37;
-	if ($[108] !== isOpen || $[109] !== t18 || $[110] !== t36) {
-		t37 = /* @__PURE__ */ jsx(ResponsiveDialog, {
-			open: isOpen,
-			onOpenChange: t18,
-			children: t36
-		});
-		$[108] = isOpen;
-		$[109] = t18;
-		$[110] = t36;
-		$[111] = t37;
-	} else t37 = $[111];
-	return t37;
-}
-function _temp3(i_1) {
-	return i_1.type === "action";
-}
-function _temp2(i_0) {
-	return i_0.type === "global";
-}
-function _temp(i) {
-	return i.type === "collection";
+		})
+	});
 }
 
 //#endregion