feat(admin): reorganize housekeeping and strengthen shared workflows

src/components/admin/search-dialog.tsx

@@ -13,8 +13,17 @@ import {
 	CommandItem,
 	CommandList,
 } from "@/components/ui/command";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { useDebounce } from "@/hooks/use-debounce";
+import {
+	type AdminNavigationOptions,
+	visibleAdminNavigation,
+} from "@/lib/admin-navigation";
 
 type SearchResult = AdminSearchResult;
 
@@ -23,13 +32,30 @@ type SearchResponse = {
 	results: SearchResult[];
 };
 
-export function SearchDialog() {
+export function SearchDialog({
+	navigation,
+}: {
+	navigation: AdminNavigationOptions;
+}) {
+	const tNav = useTranslations("pages.admin.nav");
+	const getPages = (queryPlaceholder: string) =>
+		visibleAdminNavigation(navigation)
+			.flatMap((group) =>
+				group.items.map((item) => ({ ...item, group: tNav(group.labelKey) })),
+			)
+			.filter((item) =>
+				[tNav(item.labelKey), item.group, item.href]
+					.join(" ")
+					.toLocaleLowerCase()
+					.includes(queryPlaceholder),
+			);
 	const t = useTranslations("pages.admin.search");
 	const router = useRouter();
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState<SearchResult[]>([]);
 	const [loading, setLoading] = useState(false);
+	const [failed, setFailed] = useState(false);
 	const debouncedQuery = useDebounce(query, 250);
 	const abortRef = useRef<AbortController | null>(null);
 
@@ -44,6 +70,8 @@ export function SearchDialog() {
 
 	const fetchResults = useCallback(async (q: string) => {
 		abortRef.current?.abort();
+		setFailed(false);
+		setResults([]);
 		if (q.length < 2) {
 			setResults([]);
 			setLoading(false);
@@ -56,21 +84,27 @@ export function SearchDialog() {
 			const res = await fetch(`/api/admin/search?q=${encodeURIComponent(q)}`, {
 				signal: controller.signal,
 			});
-			if (!res.ok) return;
+			if (!res.ok) throw new Error("Search request failed");
 			const data: SearchResponse = await res.json();
-			if (abortRef.current !== controller) return;
+			if (abortRef.current !== controller || controller.signal.aborted) return;
 			if (data.ok) setResults(data.results);
+			else setFailed(true);
 		} catch (error) {
 			if (error instanceof DOMException && error.name === "AbortError") return;
-			if (abortRef.current === controller) setResults([]);
+			if (abortRef.current === controller) {
+				setResults([]);
+				setFailed(true);
+			}
 		} finally {
 			if (abortRef.current === controller) setLoading(false);
 		}
 	}, []);
 
 	useEffect(() => {
+		if (!open) return;
 		fetchResults(debouncedQuery);
-	}, [debouncedQuery, fetchResults]);
+		return () => abortRef.current?.abort();
+	}, [debouncedQuery, fetchResults, open]);
 
 	useEffect(() => {
 		return () => abortRef.current?.abort();
@@ -94,13 +128,15 @@ export function SearchDialog() {
 		router.push(url);
 	}
 
-	const grouped = groupResults(results);
+	const grouped = groupResults(query === debouncedQuery ? results : []);
+	const pages = getPages(query.trim().toLocaleLowerCase()).slice(0, 8);
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<button
 				type="button"
 				onClick={() => setOpen(true)}
+				aria-label={t("placeholder")}
 				className="flex items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-1.5 text-xs text-[var(--admin-text-muted)] hover:border-[var(--admin-accent)]/40 hover:text-[var(--admin-text)] transition-colors cursor-pointer"
 			>
 				<SearchIcon size={14} />
@@ -110,6 +146,10 @@ export function SearchDialog() {
 				</kbd>
 			</button>
 			<DialogContent className="sm:max-w-lg p-0 gap-0 overflow-hidden">
+				<DialogTitle className="sr-only">{t("placeholder")}</DialogTitle>
+				<DialogDescription className="sr-only">
+					{t("description")}
+				</DialogDescription>
 				<Command
 					className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
 					shouldFilter={false}
@@ -126,7 +166,31 @@ export function SearchDialog() {
 								…
 							</div>
 						) : null}
-						<CommandEmpty>{t("noResults")}</CommandEmpty>
+						{!loading && !failed && (
+							<CommandEmpty>{t("noResults")}</CommandEmpty>
+						)}
+						{failed && (
+							<p role="alert" className="p-4 text-sm">
+								{t("loadError")}
+							</p>
+						)}
+						{pages.length > 0 && (
+							<CommandGroup heading={t("pages")}>
+								{pages.map((item) => (
+									<CommandItem
+										key={item.href}
+										value={item.href}
+										onSelect={() => handleSelect(item.href)}
+									>
+										<item.icon size={16} />
+										<span>{tNav(item.labelKey)}</span>
+										<span className="ml-auto text-xs text-muted-foreground">
+											{item.group}
+										</span>
+									</CommandItem>
+								))}
+							</CommandGroup>
+						)}
 						{Object.entries(grouped).map(([group, items]) => (
 							<CommandGroup key={group} heading={groupLabels[group] ?? group}>
 								{items.map((item) => (