Build a search dialog

import { get, route } from "remix/routes";

export default route({
	search: get("/search"),
	searchFrame: get("/frames/search"),
});

import type { Handle } from "remix/component";

import { Button, Keyboard, Modal } from "@sdxc/ui";
import { keyComboGlyphs } from "@sdxc/ui/utils";
import { Frame } from "remix/component";

import { SEARCH_DIALOG_ID, searchFrameSrc } from "~/resources/components/search-box";
import routes from "~/routes/web";

interface SiteHeaderProps {
	apple: boolean;
	searchQuery?: string;
}

export function SiteHeader(handle: Handle<SiteHeaderProps>) {
	return () => {
		let { apple, searchQuery = "" } = handle.props;

		return (
			<header>
				<Button
					type="button"
					variant="outline"
					commandfor={SEARCH_DIALOG_ID}
					command="show-modal"
					aria-keyshortcuts="Meta+K Control+K /"
				>
					Search
					<Keyboard aria-hidden="true">
						{keyComboGlyphs("mod+k", apple).join("")}
					</Keyboard>
				</Button>
				<Modal id={SEARCH_DIALOG_ID} aria-label="Search" closedby="any">
					<Frame
						name="search"
						src={searchFrameSrc(routes.searchFrame.href(), searchQuery)}
					/>
				</Modal>
			</header>
		);
	};
}

import { Pagination } from "@sdxc/pagination";
import { isFailure } from "@sdxc/result";
import { createAction } from "remix/router";

import { matchingArticles, parseArticleQuery } from "~/app/search/articles";
import { toHit } from "~/app/search/hits";
import { PUBLIC_PAGE, TAGS } from "~/app/services/edge-cache";
import { SearchSuggestions } from "~/resources/views/search-suggestions";
import routes from "~/routes/web";

const SUGGESTIONS = 6;

export default createAction(routes.searchFrame, async (ctx) => {
	let text = ctx.url.searchParams.get("q") ?? "";
	let init = { headers: { "X-Robots-Tag": "noindex" } };
	ctx.cache(PUBLIC_PAGE, TAGS.articleList());

	let parsed = parseArticleQuery(text);
	if (isFailure(parsed)) {
		let message = parsed.error.issues[0]?.message ?? "This search cannot run.";
		let view = (
			<SearchSuggestions state="invalid" query={text} message={message} />
		);
		return ctx.render(view, init);
	}
	if (parsed.data === null) {
		return ctx.render(<SearchSuggestions state="blank" />, init);
	}

	let query = parsed.data;
	let page = await Pagination.byOffset(matchingArticles(ctx.db, query), {
		page: 1,
		perPage: SUGGESTIONS,
	});
	if (isFailure(page)) {
		ctx.log.fail(page.error);
		ctx.cache("no-store");
		let message = "Search is unavailable right now.";
		let view = (
			<SearchSuggestions state="invalid" query={text} message={message} />
		);
		return ctx.render(view, init);
	}

	let hits = page.data.items.map((row) => toHit(row, query));
	let { total } = page.data.pagination;
	return ctx.render(
		<SearchSuggestions state="results" query={text} hits={hits} total={total} />,
		init,
	);
});

import type { Handle } from "remix/component";

import { visuallyHidden } from "@sdxc/u/a11y";
import { listStyle } from "@sdxc/u/general";
import { gap, grid } from "@sdxc/u/layout";
import { m, p } from "@sdxc/u/size";
import { text } from "@sdxc/u/typography";
import { Link, SearchField } from "@sdxc/ui";

import type { SearchHit } from "~/app/search/hits";

import { SEARCH_RESULTS_ID, SearchBox } from "~/resources/components/search-box";
import { SearchResult } from "~/resources/components/search-result";
import routes from "~/routes/web";

export type SearchSuggestionsProps =
	| { state: "blank" }
	| { state: "invalid"; query: string; message: string }
	| { state: "results"; query: string; hits: SearchHit[]; total: number };

function statusOf(props: SearchSuggestionsProps) {
	if (props.state === "blank") return "";
	if (props.state === "invalid") return props.message;
	if (props.total === 0) return `No articles match “${props.query}”.`;
	if (props.total === 1) return "1 result";
	if (props.total <= props.hits.length) return `${props.total} results`;
	return `Top ${props.hits.length} of ${props.total} results`;
}

export function SearchSuggestions(handle: Handle<SearchSuggestionsProps>) {
	return () => {
		let props = handle.props;
		let query = props.state === "blank" ? "" : props.query;
		let hits = props.state === "results" ? props.hits : [];
		let seeAll = `${routes.search.href()}?${new URLSearchParams({ q: query })}`;

		return (
			<div mix={[grid(), gap(3), p(4)]}>
				<form method="get" action={routes.search.href()}>
					<SearchField>
						<SearchBox
							id="search-dialog-q"
							query={query}
							frameSrc={routes.searchFrame.href()}
						/>
					</SearchField>
				</form>
				<div id={SEARCH_RESULTS_ID} mix={[grid(), gap(3)]}>
					<p
						role="status"
						mix={
							hits.length > 0 ? [visuallyHidden()] : [m(0), text("sm")]
						}
					>
						{statusOf(props)}
					</p>
					{hits.length > 0 ? (
						<ol
							aria-label="Top matches"
							mix={[m(0), p(0), listStyle("none"), grid(), gap(3)]}
						>
							{hits.map((hit) => (
								<SearchResult key={hit.href} hit={hit} />
							))}
						</ol>
					) : null}
					{props.state === "results" && props.total > hits.length ? (
						<Link href={seeAll}>See all {props.total} results</Link>
					) : null}
				</div>
			</div>
		);
	};
}

import type { Handle } from "remix/component";

import { fg } from "@sdxc/u/color";
import { gap, grid } from "@sdxc/u/layout";
import { m } from "@sdxc/u/size";
import { text } from "@sdxc/u/typography";
import { Highlight, Link } from "@sdxc/ui";

import type { SearchHit } from "~/app/search/hits";

export function SearchResult(handle: Handle<{ hit: SearchHit }>) {
	return () => {
		let { hit } = handle.props;
		let { segments, truncatedStart, truncatedEnd } = hit.excerpt;

		return (
			<li mix={[grid(), gap(1)]}>
				<Link href={hit.href}>
					<Highlight segments={hit.title} />
				</Link>
				<p mix={[m(0), text("sm"), fg("neutral.muted")]}>
					{truncatedStart ? "… " : null}
					<Highlight segments={segments} color="neutral" />
					{truncatedEnd ? " …" : null}
				</p>
			</li>
		);
	};
}

import type { Handle } from "remix/component";

import { SearchField } from "@sdxc/ui";
import { bindKeymap } from "@sdxc/ui/mixins";
import { clientEntry, on } from "remix/component";

export const SEARCH_DIALOG_ID = "site-search";
export const SEARCH_RESULTS_ID = "site-search-results";
const DEBOUNCE_MS = 200;

export function searchFrameSrc(frameSrc: string, text: string) {
	let query = text.trim();
	if (query === "") return frameSrc;
	return `${frameSrc}?${new URLSearchParams({ q: query })}`;
}

function searchDialog() {
	let dialog = document.getElementById(SEARCH_DIALOG_ID);
	return dialog instanceof HTMLDialogElement ? dialog : null;
}

function markBusy(busy: boolean) {
	let results = document.getElementById(SEARCH_RESULTS_ID);
	if (busy) results?.setAttribute("aria-busy", "true");
	else results?.removeAttribute("aria-busy");
}

type SearchBoxProps = { id: string; query: string; frameSrc: string };

export const SearchBox = clientEntry(
	"/resources/components/search-box.tsx#SearchBox",
	function SearchBox(handle: Handle<SearchBoxProps>) {
		let debounce: ReturnType<typeof setTimeout> | undefined;
		let latest = 0;
		let initialQuery = handle.props.query;
		handle.signal.addEventListener("abort", () => clearTimeout(debounce));

		async function load(src: string, keystroke: number) {
			if (src !== handle.frame.src) {
				handle.frame.src = src;
				await handle.frame.reload().catch(() => undefined);
			}
			if (keystroke === latest) markBusy(false);
		}

		function search(text: string) {
			let keystroke = ++latest;
			clearTimeout(debounce);
			markBusy(true);
			debounce = setTimeout(() => {
				void load(searchFrameSrc(handle.props.frameSrc, text), keystroke);
			}, DEBOUNCE_MS);
		}

		function reset() {
			let box = document.getElementById(handle.props.id);
			if (box instanceof HTMLInputElement) box.value = initialQuery;
			clearTimeout(debounce);
			void load(searchFrameSrc(handle.props.frameSrc, initialQuery), ++latest);
		}

		handle.queueTask(() => {
			let dialog = searchDialog();
			let open = () => {
				if (dialog && !dialog.open) dialog.showModal();
			};
			bindKeymap(
				document,
				{ "mod+k": open, "/": open },
				{ signal: handle.signal, scope: dialog },
			);
			dialog?.addEventListener("close", reset, { signal: handle.signal });
		});

		return () => (
			<SearchField.Input
				id={handle.props.id}
				name="q"
				defaultValue={handle.props.query}
				aria-label="Search the help center"
				aria-controls={SEARCH_RESULTS_ID}
				placeholder="Search the help center"
				autocomplete="off"
				enterkeyhint="search"
				autofocus
				mix={[
					on<HTMLInputElement, "input">("input", (event) => {
						search(event.currentTarget.value);
					}),
				]}
			/>
		);
	},
);

import type { Pagination } from "@sdxc/pagination";
import type { Handle } from "remix/component";

import { listStyle } from "@sdxc/u/general";
import { gap, grid } from "@sdxc/u/layout";
import { m, p } from "@sdxc/u/size";
import { tabularNums, text } from "@sdxc/u/typography";
import { FieldError, Heading, Label, SearchField } from "@sdxc/ui";

import type { SearchHit } from "~/app/search/hits";

import { SearchResult } from "~/resources/components/search-result";
import { Layout } from "~/resources/layouts/site";
import { Pager } from "~/resources/views/pager";
import routes from "~/routes/web";

export type SearchPageProps =
	| { state: "blank" }
	| { state: "invalid"; query: string; message: string }
	| {
			state: "results";
			query: string;
			hits: SearchHit[];
			pagination: Pagination;
			url: URL;
	  };

export function SearchPage(handle: Handle<SearchPageProps>) {
	return () => {
		let props = handle.props;
		let query = props.state === "blank" ? "" : props.query;
		let message = props.state === "invalid" ? props.message : undefined;

		return (
			<Layout title={query ? `Search: ${query}` : "Search"} searchQuery={query}>
				<main mix={[grid(), gap(4)]}>
					<Heading level={1}>Search</Heading>
					<form method="get" action={routes.search.href()}>
						<SearchField>
							<Label htmlFor="search-q">Search the help center</Label>
							<SearchField.Input
								id="search-q"
								name="q"
								defaultValue={query}
								enterkeyhint="search"
								autofocus={query === ""}
								aria-invalid={message ? "true" : undefined}
								aria-describedby={
									message ? "search-q-error" : undefined
								}
							/>
							{message ? (
								<FieldError id="search-q-error">{message}</FieldError>
							) : null}
						</SearchField>
					</form>

					{props.state === "results" && props.hits.length === 0 ? (
						<p mix={[m(0)]}>No articles match “{props.query}”.</p>
					) : null}

					{props.state === "results" && props.hits.length > 0 ? (
						<section aria-label="Search results" mix={[grid(), gap(3)]}>
							<p mix={[m(0), text("sm"), tabularNums()]}>
								{props.pagination.from}–{props.pagination.to} of{" "}
								{props.pagination.total} results
							</p>
							<ol mix={[m(0), p(0), listStyle("none"), grid(), gap(4)]}>
								{props.hits.map((hit) => (
									<SearchResult key={hit.href} hit={hit} />
								))}
							</ol>
							<Pager
								label="Search result pages"
								url={props.url}
								pagination={props.pagination}
							/>
						</section>
					) : null}
				</main>
			</Layout>
		);
	};
}