···
export const [showSearch, setShowSearch] = createSignal(false);
+
const SEARCH_PREFIXES: { prefix: string; description: string }[] = [
+
{ prefix: "@", description: "example.com" },
+
{ prefix: "did:", description: "web:example.com" },
+
{ prefix: "at:", description: "//example.com/com.example.test/self" },
+
{ prefix: "lex:", description: "com.example.test" },
+
{ prefix: "pds:", description: "host.example.com" },
+
const parsePrefix = (input: string): { prefix: string | null; query: string } => {
+
const matchedPrefix = SEARCH_PREFIXES.find((p) => input.startsWith(p.prefix));
+
prefix: matchedPrefix.prefix,
+
query: input.slice(matchedPrefix.prefix.length),
+
return { prefix: null, query: input };
const SearchButton = () => {
onMount(() => window.addEventListener("keydown", keyEvent));
onCleanup(() => window.removeEventListener("keydown", keyEvent));
···
+
if (useLocation().pathname !== "/") searchInput.focus();
+
const handlePaste = (e: ClipboardEvent) => {
+
if (e.target === searchInput) return;
+
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
const pastedText = e.clipboardData?.getData("text");
+
if (pastedText) processInput(pastedText);
+
window.addEventListener("paste", handlePaste);
+
onCleanup(() => window.removeEventListener("paste", handlePaste));
const fetchTypeahead = async (input: string) => {
+
const { prefix, query } = parsePrefix(input);
+
if (!query.length) return [];
+
const res = await rpc.get("app.bsky.actor.searchActorsTypeahead", {
+
params: { q: query, limit: 5 },
+
return res.data.actors;
const [input, setInput] = createSignal<string>();
const [selectedIndex, setSelectedIndex] = createSignal(-1);
+
const [isFocused, setIsFocused] = createSignal(false);
+
const [search] = createResource(createDebouncedValue(input, 200), fetchTypeahead);
+
const getPrefixSuggestions = () => {
+
const currentInput = input();
+
if (!currentInput) return SEARCH_PREFIXES;
+
const { prefix } = parsePrefix(currentInput);
+
return SEARCH_PREFIXES.filter((p) => p.prefix.startsWith(currentInput.toLowerCase()));
const processInput = async (input: string) => {
input = input.trim().replace(/^@/, "");
if (!input.length) return;
+
const { prefix, query } = parsePrefix(input);
+
navigate(`/at://${query}`);
+
} else if (prefix === "did:") {
+
navigate(`/at://did:${query}`);
+
} else if (prefix === "at:") {
+
} else if (prefix === "lex:") {
+
const nsid = query as Nsid;
+
const res = await resolveLexiconAuthority(nsid);
+
navigate(`/at://${res}/com.atproto.lexicon.schema/${nsid}`);
+
} else if (prefix === "pds:") {
} else if (input.startsWith("https://") || input.startsWith("http://")) {
const hostLength = input.indexOf("/", 8);
const host = input.slice(0, hostLength).replace("https://", "").replace("http://", "");
···
const uri = appHandleLink[app](path);
navigate(`/at://${input.replace("at://", "")}`);
···
+
placeholder="Handle, DID, AT URI, NSID, PDS"
class="grow py-1 select-none placeholder:text-sm focus:outline-none"
···
setInput(e.currentTarget.value);
+
onFocus={() => setIsFocused(true)}
const results = search();
+
const prefixSuggestions = getPrefixSuggestions();
+
const totalSuggestions = (prefixSuggestions.length || 0) + (results?.length || 0);
+
if (!totalSuggestions) return;
if (e.key === "ArrowDown") {
+
setSelectedIndex((prev) => (prev === -1 ? 0 : (prev + 1) % totalSuggestions));
} else if (e.key === "ArrowUp") {
setSelectedIndex((prev) =>
+
: (prev - 1 + totalSuggestions) % totalSuggestions,
+
} else if (e.key === "Enter") {
+
const index = selectedIndex();
+
if (index < prefixSuggestions.length) {
+
const selectedPrefix = prefixSuggestions[index];
+
setInput(selectedPrefix.prefix);
+
const adjustedIndex = index - prefixSuggestions.length;
+
if (results && results[adjustedIndex]) {
+
navigate(`/at://${results[adjustedIndex].did}`);
+
} else if (results?.length && prefixSuggestions.length === 0) {
+
navigate(`/at://${results[0].did}`);
···
+
<Show when={isFocused() && (getPrefixSuggestions().length > 0 || search()?.length)}>
+
class="dark:bg-dark-300 dark:shadow-dark-700 absolute z-30 mt-1 flex w-full flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0"
+
onMouseDown={(e) => e.preventDefault()}
+
{/* Prefix suggestions */}
+
<For each={getPrefixSuggestions()}>
+
{(prefixItem, index) => (
+
class={`flex items-center rounded-lg p-2 transition-colors duration-150 ${
index() === selectedIndex() ?
"bg-neutral-200 dark:bg-neutral-700"
: "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+
setInput(prefixItem.prefix);
+
<span class={`text-sm font-semibold`}>{prefixItem.prefix}</span>
+
<span class="text-sm text-neutral-600 dark:text-neutral-400">
+
{prefixItem.description}
+
{/* Typeahead results */}
+
const adjustedIndex = getPrefixSuggestions().length + index();
+
class={`flex items-center gap-2 rounded-lg p-2 transition-colors duration-150 ${
+
adjustedIndex === selectedIndex() ?
+
"bg-neutral-200 dark:bg-neutral-700"
+
: "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
+
href={`/at://${actor.did}`}
+
onClick={() => setShowSearch(false)}
+
src={actor.avatar?.replace("img/avatar/", "img/avatar_thumbnail/")}
+
class="size-8 rounded-full"
+
<span>{actor.handle}</span>
pdsls.dev
juli.ee