feat(catalog): improve visual manager search and offer discovery

src/features/catalog/components/catalog-search.tsx

@@ -19,9 +19,13 @@ import { BulkOfferEditor } from "./bulk-offer-editor";
 export function CatalogSearch({
 	catalogType = "normal",
 	canEdit = false,
+	onNavigate,
+	autoFocus = false,
 }: {
 	catalogType?: SearchCatalogKind;
 	canEdit?: boolean;
+	onNavigate?: (result: CatalogSearchResult) => void | Promise<void>;
+	autoFocus?: boolean;
 }) {
 	const t = useTranslations("pages.admin.catalog.workspace");
 	const [query, setQuery] = useState("");
@@ -30,6 +34,10 @@ export function CatalogSearch({
 		"idle",
 	);
 	const requests = useLatestRequest();
+	const inputRef = useRef<HTMLInputElement>(null);
+	useEffect(() => {
+		if (autoFocus) inputRef.current?.focus();
+	}, [autoFocus]);
 	const bulk = useTranslations("pages.admin.catalog.bulk");
 	const router = useRouter();
 	const [selected, setSelected] = useState<Set<number>>(new Set());
@@ -135,6 +143,7 @@ export function CatalogSearch({
 					className="h-4 w-4 shrink-0 text-muted-foreground"
 				/>
 				<Input
+					ref={inputRef}
 					aria-label={t("globalSearch")}
 					placeholder={t("searchPlaceholder")}
 					value={query}
@@ -230,13 +239,25 @@ export function CatalogSearch({
 								)}
 							<Link
 								href={result.href}
+								onClick={(event) => {
+									if (
+										onNavigate &&
+										!event.ctrlKey &&
+										!event.metaKey &&
+										!event.shiftKey &&
+										!event.altKey
+									) {
+										event.preventDefault();
+										void onNavigate(result);
+									}
+								}}
 								className="block min-w-0 flex-1 rounded px-2 py-2 hover:bg-[var(--admin-canvas)] focus-visible:outline-2"
 							>
 								<div className="flex flex-wrap items-center gap-2 text-sm">
 									<span className="text-xs text-muted-foreground">
 										{t(result.kind)}
 									</span>
-									<span className="font-medium break-words">
+									<span className="font-medium break-words text-[var(--admin-text)]">
 										{result.caption}
 									</span>
 									<span className="text-xs text-muted-foreground">