melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign search overlay

Browse Source
This commit is contained in:
mkelvers
2026-06-12 11:38:28 +02:00
parent 97814b7223
commit 4c4c10b154
2 changed files with 386 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

612
static/search.ts
View File

@@ -11,25 +11,24 @@ interface CommandPaletteItem {
const commandPaletteInitializedKey = Symbol("commandPaletteInitialized"); const commandPaletteInitializedKey = Symbol("commandPaletteInitialized");
const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean }; const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean };
const paletteInput = document.getElementById("command-palette-input") as HTMLInputElement | null; const searchInput = document.getElementById("command-palette-input") as HTMLInputElement | null;
const paletteResults = document.querySelector( const searchResults = document.querySelector(
"[data-command-palette-results]", "[data-command-palette-results]",
) as HTMLElement | null; ) as HTMLElement | null;
const paletteDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null; const searchDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null;
const paletteRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null; const searchRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null;
const paletteOpenButtons = document.querySelectorAll("[data-command-palette-open]"); const searchOpenButtons = document.querySelectorAll("[data-command-palette-open]");
const paletteCloseButtons = document.querySelectorAll("[data-command-palette-close]"); const searchCloseButtons = document.querySelectorAll("[data-command-palette-close]");
const searchClearButtons = document.querySelectorAll("[data-command-palette-clear]");
const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]"); const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]");
let allPaletteItems: CommandPaletteItem[] = []; let resultItems: CommandPaletteItem[] = [];
let paletteItems: CommandPaletteItem[] = [];
let selectedIndex = 0; let selectedIndex = 0;
let fetchTimeout: number | undefined; let fetchTimeout: number | undefined;
let lastQuery = ""; let lastQuery = "";
let continueExpanded = false;
let activeRequestController: AbortController | undefined; let activeRequestController: AbortController | undefined;
let lastFocusedSearchOpener: HTMLElement | null = null;
const responseCache = new Map<string, CommandPaletteItem[]>(); const responseCache = new Map<string, CommandPaletteItem[]>();
let lastFocusedPaletteOpener: HTMLElement | null = null;
const iconPaths: Record<string, string> = { const iconPaths: Record<string, string> = {
bookmark: "M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z", bookmark: "M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",
@@ -40,10 +39,24 @@ const iconPaths: Record<string, string> = {
trending: "M3 17l6-6 4 4 8-8 M14 7h7v7", trending: "M3 17l6-6 4 4 8-8 M14 7h7v7",
}; };
const typeLabels: Record<string, string> = {
anime: "Top results",
};
const groupOrder = ["anime"];
const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform); const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
const isTypingTarget = (target: EventTarget | null): boolean =>
target instanceof HTMLInputElement ||
target instanceof HTMLTextAreaElement ||
target instanceof HTMLSelectElement ||
(target instanceof HTMLElement && target.isContentEditable);
const isSearchOpen = (): boolean => searchDialog?.classList.contains("flex") ?? false;
const isSafeImageUrl = (rawUrl?: string): boolean => { const isSafeImageUrl = (rawUrl?: string): boolean => {
if (!rawUrl || typeof rawUrl !== "string") { if (!rawUrl) {
return false; return false;
} }
@@ -55,19 +68,15 @@ const isSafeImageUrl = (rawUrl?: string): boolean => {
} }
}; };
const isTypingTarget = (target: EventTarget | null): boolean => const setSearchState = (open: boolean): void => {
target instanceof HTMLInputElement || if (!searchDialog) {
target instanceof HTMLTextAreaElement || return;
target instanceof HTMLSelectElement || }
(target instanceof HTMLElement && target.isContentEditable);
const isOpen = (): boolean => paletteDialog?.classList.contains("flex") ?? false; searchDialog.classList.toggle("hidden", !open);
searchDialog.classList.toggle("flex", open);
const setDialogState = (open: boolean): void => { searchDialog.setAttribute("aria-hidden", open ? "false" : "true");
if (!paletteDialog) return; document.body.classList.toggle("overflow-hidden", open);
paletteDialog.classList.toggle("hidden", !open);
paletteDialog.classList.toggle("flex", open);
paletteDialog.setAttribute("aria-hidden", open ? "false" : "true");
}; };
const setShortcutHints = (): void => { const setShortcutHints = (): void => {
@@ -76,46 +85,11 @@ const setShortcutHints = (): void => {
}); });
}; };
const clearResults = (): void => { const setClearButtonState = (hasQuery: boolean): void => {
paletteResults?.replaceChildren(); searchClearButtons.forEach((button) => {
}; button.classList.toggle("opacity-0", !hasQuery);
button.classList.toggle("pointer-events-none", !hasQuery);
const buildSearchActionItem = (query: string): CommandPaletteItem => ({ });
id: "search:" + query.toLowerCase(),
type: "search",
label: `Search anime for "${query}"`,
subtitle: "Browse",
href: "/browse?q=" + encodeURIComponent(query),
icon: "search",
});
const buildIcon = (item: CommandPaletteItem): HTMLElement => {
if (isSafeImageUrl(item.image)) {
const img = document.createElement("img");
img.className = "h-11 w-8 shrink-0 bg-background-surface object-cover";
img.src = item.image || "";
img.alt = "";
return img;
}
const icon = document.createElement("div");
icon.className = "flex h-8 w-8 shrink-0 items-center justify-center text-foreground-muted";
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute("fill", item.icon === "play" ? "currentColor" : "none");
svg.setAttribute("stroke", "currentColor");
svg.setAttribute("stroke-width", "1.7");
svg.setAttribute("stroke-linecap", "round");
svg.setAttribute("stroke-linejoin", "round");
svg.classList.add("size-5");
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", iconPaths[item.icon || "search"] || iconPaths.search);
svg.appendChild(path);
icon.appendChild(svg);
return icon;
}; };
const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => { const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
@@ -123,7 +97,7 @@ const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute("fill", "none"); svg.setAttribute("fill", "none");
svg.setAttribute("stroke", "currentColor"); svg.setAttribute("stroke", "currentColor");
svg.setAttribute("stroke-width", "2"); svg.setAttribute("stroke-width", "1.8");
svg.setAttribute("stroke-linecap", "round"); svg.setAttribute("stroke-linecap", "round");
svg.setAttribute("stroke-linejoin", "round"); svg.setAttribute("stroke-linejoin", "round");
svg.setAttribute("aria-hidden", "true"); svg.setAttribute("aria-hidden", "true");
@@ -136,54 +110,70 @@ const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => {
return svg; return svg;
}; };
const selectItem = (index: number): void => { const buildFallbackIcon = (item: CommandPaletteItem): HTMLElement => {
if (!paletteResults || paletteItems.length === 0) { const icon = document.createElement("div");
icon.className =
"flex aspect-2/3 w-full items-center justify-center bg-background-button text-foreground-muted";
const path = iconPaths[item.icon || "search"] || iconPaths.search;
icon.appendChild(buildSvgIcon(path, "size-7"));
return icon;
};
const buildPosterImage = (item: CommandPaletteItem): HTMLElement => {
if (!isSafeImageUrl(item.image)) {
return buildFallbackIcon(item);
}
const img = document.createElement("img");
img.className = "aspect-2/3 w-full bg-background-button object-cover";
img.src = item.image || "";
img.alt = "";
img.loading = "lazy";
return img;
};
const clearResults = (): void => {
resultItems = [];
selectedIndex = 0;
searchResults?.replaceChildren();
};
const cancelScheduledFetch = (): void => {
if (!fetchTimeout) {
return;
}
window.clearTimeout(fetchTimeout);
fetchTimeout = undefined;
};
const selectItem = (index: number, scrollIntoView: boolean): void => {
if (!searchResults || resultItems.length === 0) {
selectedIndex = 0; selectedIndex = 0;
return; return;
} }
selectedIndex = Math.max(0, Math.min(index, paletteItems.length - 1)); selectedIndex = Math.max(0, Math.min(index, resultItems.length - 1));
paletteResults.querySelectorAll<HTMLElement>("[data-command-palette-item]").forEach((row, i) => { searchResults.querySelectorAll<HTMLElement>("[data-command-palette-item]").forEach((item) => {
const selected = i === selectedIndex; const selected = Number(item.dataset.resultIndex) === selectedIndex;
row.classList.toggle("bg-surface-hover", selected); item.classList.toggle("opacity-75", selected);
row.setAttribute("aria-selected", String(selected)); item.setAttribute("aria-selected", String(selected));
if (selected) { if (selected && scrollIntoView) {
row.scrollIntoView({ block: "nearest" }); item.scrollIntoView({ block: "nearest" });
} }
}); });
}; };
const runSelectedItem = (): void => { const runSelectedItem = (): void => {
const item = paletteItems[selectedIndex]; const item = resultItems[selectedIndex];
if (!item) { if (!item) {
return; return;
} }
window.location.href = item.href; window.location.href = item.href;
}; };
const removeContinueWatchingItem = (item: CommandPaletteItem): void => {
const animeID = item.id.replace("continue:", "");
if (!animeID || animeID === item.id) {
return;
}
fetch("/api/continue-watching/" + encodeURIComponent(animeID), { method: "DELETE" })
.then((res: Response) => {
if (!res.ok) {
return;
}
allPaletteItems = allPaletteItems.filter((candidate) => candidate.id !== item.id);
paletteItems = paletteItems.filter((candidate) => candidate.id !== item.id);
responseCache.clear();
removeContinueWatchingCard(animeID);
renderItems(allPaletteItems);
})
.catch((err: unknown) => {
console.error("Continue watching remove error:", err);
});
};
const removeContinueWatchingCard = (animeID: string): void => { const removeContinueWatchingCard = (animeID: string): void => {
document.getElementById("continue-watching-" + animeID)?.remove(); document.getElementById("continue-watching-" + animeID)?.remove();
@@ -197,41 +187,59 @@ const removeContinueWatchingCard = (animeID: string): void => {
} }
}; };
const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => { const removeContinueWatchingItem = (item: CommandPaletteItem): void => {
const row = document.createElement("a"); const animeID = item.id.replace("continue:", "");
row.href = item.href; if (!animeID || animeID === item.id) {
row.className = return;
"flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline focus-visible:bg-surface-hover focus-visible:outline-none";
row.dataset.commandPaletteItem = item.id;
row.setAttribute("role", "option");
row.setAttribute("aria-selected", String(index === selectedIndex));
row.addEventListener("mouseenter", () => selectItem(index));
row.appendChild(buildIcon(item));
const copy = document.createElement("div");
copy.className = "grid min-w-0 flex-1 gap-0.5";
const label = document.createElement("div");
label.className = "truncate text-sm font-normal text-foreground";
label.textContent = item.label;
copy.appendChild(label);
if (item.subtitle && item.type !== "navigation") {
const subtitle = document.createElement("div");
subtitle.className = "truncate text-xs font-normal text-foreground-muted";
subtitle.textContent = item.subtitle;
copy.appendChild(subtitle);
} }
row.appendChild(copy); fetch("/api/continue-watching/" + encodeURIComponent(animeID), { method: "DELETE" })
.then((res: Response) => {
if (!res.ok) {
return;
}
responseCache.clear();
removeContinueWatchingCard(animeID);
renderItems(resultItems.filter((candidate) => candidate.id !== item.id));
})
.catch((err: unknown) => {
console.error("Continue watching remove error:", err);
});
};
const cleanLabel = (item: CommandPaletteItem): string => {
if (item.type === "continue") {
return item.label.replace(/^Continue watching\s+/i, "");
}
if (item.type === "navigation") {
return item.label.replace(/^Go to\s+/i, "");
}
return item.label;
};
const buildCard = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
const card = document.createElement("a");
card.href = item.href;
card.className =
"group block min-w-0 text-foreground no-underline transition focus-visible:outline-none hover:no-underline";
card.dataset.commandPaletteItem = item.id;
card.dataset.resultIndex = String(index);
card.setAttribute("role", "option");
card.setAttribute("aria-selected", String(index === selectedIndex));
card.addEventListener("mouseenter", () => selectItem(index, false));
const media = document.createElement("div");
media.className = "relative mb-3 overflow-hidden bg-background-button";
media.appendChild(buildPosterImage(item));
if (item.type === "continue") { if (item.type === "continue") {
const removeButton = document.createElement("button"); const removeButton = document.createElement("button");
removeButton.type = "button"; removeButton.type = "button";
removeButton.className = removeButton.className =
"flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"; "absolute right-2 top-2 flex size-8 items-center justify-center bg-black/70 text-white opacity-0 transition hover:bg-black group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent";
removeButton.setAttribute("aria-label", "Remove from Continue Watching"); removeButton.setAttribute("aria-label", "Remove from Continue Watching");
removeButton.appendChild(buildSvgIcon("M18 6 6 18 M6 6l12 12", "size-4")); removeButton.appendChild(buildSvgIcon("M18 6 6 18 M6 6l12 12", "size-4"));
removeButton.addEventListener("click", (event) => { removeButton.addEventListener("click", (event) => {
@@ -239,98 +247,174 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
event.stopPropagation(); event.stopPropagation();
removeContinueWatchingItem(item); removeContinueWatchingItem(item);
}); });
row.appendChild(removeButton); media.appendChild(removeButton);
} else {
const hint = document.createElement("div");
hint.className = "hidden text-xs text-foreground-muted sm:block";
hint.textContent = index === selectedIndex ? "Enter" : "";
row.appendChild(hint);
} }
card.appendChild(media);
const title = document.createElement("div");
title.className = "line-clamp-2 text-sm font-semibold leading-snug text-foreground";
title.textContent = cleanLabel(item);
card.appendChild(title);
if (item.subtitle) {
const subtitle = document.createElement("div");
subtitle.className = "mt-1 truncate text-xs font-medium text-foreground-muted";
subtitle.textContent = item.subtitle;
card.appendChild(subtitle);
}
return card;
};
const buildCompactItem = (item: CommandPaletteItem, index: number): HTMLAnchorElement => {
const row = document.createElement("a");
row.href = item.href;
row.className =
"group flex min-h-16 items-center gap-3 px-3 py-2 text-foreground no-underline transition hover:bg-surface-hover hover:no-underline focus-visible:outline-none";
row.dataset.commandPaletteItem = item.id;
row.dataset.resultIndex = String(index);
row.setAttribute("role", "option");
row.setAttribute("aria-selected", String(index === selectedIndex));
row.addEventListener("mouseenter", () => selectItem(index, false));
const thumb = document.createElement("div");
thumb.className = "w-11 shrink-0 overflow-hidden";
thumb.appendChild(buildPosterImage(item));
row.appendChild(thumb);
const copy = document.createElement("div");
copy.className = "min-w-0 flex-1";
const title = document.createElement("div");
title.className = "truncate text-sm font-semibold text-foreground";
title.textContent = cleanLabel(item);
copy.appendChild(title);
if (item.subtitle) {
const subtitle = document.createElement("div");
subtitle.className = "mt-0.5 truncate text-xs text-foreground-muted";
subtitle.textContent = item.subtitle;
copy.appendChild(subtitle);
}
row.appendChild(copy);
return row; return row;
}; };
const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => { const buildSection = (
const button = document.createElement("button"); title: string,
button.type = "button"; items: CommandPaletteItem[],
button.className = startIndex: number,
"flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"; variant: "grid" | "compact",
): HTMLElement => {
const section = document.createElement("section");
section.className = "min-w-0";
const spacer = document.createElement("span"); const heading = document.createElement("h2");
spacer.className = "h-8 w-8 shrink-0"; heading.className = "mb-4 text-base font-bold text-foreground md:text-lg";
button.appendChild(spacer); heading.textContent = title;
section.appendChild(heading);
const label = document.createElement("span");
label.className = "flex-1";
label.textContent = continueExpanded
? "Hide extra continue watching"
: `Show ${hiddenCount} more continue watching`;
button.appendChild(label);
const chevron = buildSvgIcon(continueExpanded ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6", "size-4");
button.appendChild(chevron);
button.addEventListener("click", () => {
continueExpanded = !continueExpanded;
renderItems(allPaletteItems);
});
return button;
};
const visiblePaletteItems = (items: CommandPaletteItem[]): CommandPaletteItem[] => {
if (lastQuery !== "") {
return items;
}
const continueItems = items.filter((item) => item.type === "continue");
if (continueItems.length <= 1 || continueExpanded) {
return items;
}
let firstContinueShown = false;
return items.filter((item) => {
if (item.type !== "continue") {
return true;
}
if (!firstContinueShown) {
firstContinueShown = true;
return true;
}
return false;
});
};
const renderItems = (items: CommandPaletteItem[]): void => {
if (!paletteResults) {
return;
}
allPaletteItems = items;
paletteItems = visiblePaletteItems(items);
selectedIndex = 0;
if (paletteItems.length === 0) {
const empty = document.createElement("div");
empty.className = "px-4 py-8 text-center text-sm font-normal text-foreground-muted";
empty.textContent = "No commands found";
paletteResults.replaceChildren(empty);
return;
}
const list = document.createElement("div"); const list = document.createElement("div");
list.setAttribute("role", "listbox"); list.setAttribute("role", "listbox");
list.setAttribute("aria-label", "Command palette results"); list.setAttribute("aria-label", title);
paletteItems.forEach((item, index) => { list.className =
list.appendChild(buildRow(item, index)); variant === "grid"
? "grid grid-cols-2 gap-x-5 gap-y-7 sm:grid-cols-3 lg:grid-cols-4"
: "grid gap-1 sm:grid-cols-2";
const continueCount = items.filter((candidate) => candidate.type === "continue").length; items.forEach((item, itemIndex) => {
if (lastQuery === "" && continueCount > 1 && item.type === "continue" && index === 0) { const index = startIndex + itemIndex;
list.appendChild(buildContinueToggle(continueCount - 1)); list.appendChild(variant === "grid" ? buildCard(item, index) : buildCompactItem(item, index));
}
}); });
paletteResults.replaceChildren(list);
selectItem(0); section.appendChild(list);
return section;
};
const renderEmptyState = (query: string): void => {
if (!searchResults) {
return;
}
const empty = document.createElement("div");
empty.className =
"mx-auto flex min-h-80 w-full max-w-5xl flex-col justify-center px-5 py-14 text-center md:px-8";
const title = document.createElement("div");
title.className = "text-2xl font-semibold text-foreground";
title.textContent = query ? "No results found" : "Start typing to search your anime";
empty.appendChild(title);
const subtitle = document.createElement("p");
subtitle.className = "mx-auto mt-3 max-w-lg text-sm leading-6 text-foreground-muted";
subtitle.textContent = query
? "Try a shorter title, alternate spelling, or browse the full search results."
: "Search opens title results first, then your watchlist and quick links when they matter.";
empty.appendChild(subtitle);
searchResults.replaceChildren(empty);
};
const groupedItems = (items: CommandPaletteItem[]): Map<string, CommandPaletteItem[]> => {
const groups = new Map<string, CommandPaletteItem[]>();
items.forEach((item) => {
const key = item.type in typeLabels ? item.type : "anime";
const group = groups.get(key) || [];
group.push(item);
groups.set(key, group);
});
return groups;
};
const orderedGroupKeys = (groups: Map<string, CommandPaletteItem[]>): string[] => {
return groupOrder.filter((key) => groups.has(key));
};
const renderItems = (items: CommandPaletteItem[]): void => {
if (!searchResults) {
return;
}
selectedIndex = 0;
if (items.length === 0) {
renderEmptyState(lastQuery);
return;
}
const shell = document.createElement("div");
shell.className = "mx-auto w-full max-w-5xl px-5 py-9 md:px-8 md:py-12";
const groups = groupedItems(items);
const keys = orderedGroupKeys(groups);
resultItems = keys.flatMap((key) => groups.get(key) || []);
let cursor = 0;
keys.forEach((key) => {
const groupItems = groups.get(key);
if (!groupItems) {
return;
}
const variant = key === "anime" ? "grid" : "compact";
const section = buildSection(typeLabels[key] || "Results", groupItems, cursor, variant);
section.classList.add("mb-12");
shell.appendChild(section);
cursor += groupItems.length;
});
searchResults.replaceChildren(shell);
selectItem(0, false);
};
const visibleSearchItems = (items: CommandPaletteItem[], query: string): CommandPaletteItem[] => {
if (query === "") {
return [];
}
return items.filter((item) => item.type === "anime");
}; };
const renderPendingQuery = (query: string): void => { const renderPendingQuery = (query: string): void => {
@@ -338,17 +422,23 @@ const renderPendingQuery = (query: string): void => {
return; return;
} }
renderItems([buildSearchActionItem(query)]); clearResults();
}; };
const fetchPaletteItems = (query: string): void => { const fetchSearchItems = (query: string): void => {
lastQuery = query; lastQuery = query;
setClearButtonState(query !== "");
if (activeRequestController) { if (activeRequestController) {
activeRequestController.abort(); activeRequestController.abort();
activeRequestController = undefined; activeRequestController = undefined;
} }
if (query === "") {
clearResults();
return;
}
const cached = responseCache.get(query); const cached = responseCache.get(query);
if (cached) { if (cached) {
renderItems(cached); renderItems(cached);
@@ -371,16 +461,19 @@ const fetchPaletteItems = (query: string): void => {
if (controller.signal.aborted || query !== lastQuery) { if (controller.signal.aborted || query !== lastQuery) {
return; return;
} }
const visibleItems = visibleSearchItems(items, query);
activeRequestController = undefined; activeRequestController = undefined;
responseCache.set(query, items); responseCache.set(query, visibleItems);
renderItems(items); renderItems(visibleItems);
}) })
.catch((err: unknown) => { .catch((err: unknown) => {
if (controller.signal.aborted) { if (controller.signal.aborted) {
return; return;
} }
activeRequestController = undefined; activeRequestController = undefined;
console.error("Command palette error:", err); console.error("Search overlay error:", err);
renderItems([]); renderItems([]);
}); });
}; };
@@ -390,58 +483,72 @@ const scheduleFetch = (): void => {
window.clearTimeout(fetchTimeout); window.clearTimeout(fetchTimeout);
} }
const query = paletteInput?.value.trim() || ""; const query = searchInput?.value.trim() || "";
fetchTimeout = window.setTimeout(() => fetchPaletteItems(query), query.length >= 2 ? 300 : 120); setClearButtonState(query !== "");
fetchTimeout = window.setTimeout(() => fetchSearchItems(query), query.length >= 2 ? 240 : 80);
}; };
const openPalette = (): void => { const openSearch = (): void => {
if (!paletteDialog || !paletteInput) { if (!searchDialog || !searchInput) {
return; return;
} }
lastFocusedPaletteOpener = lastFocusedSearchOpener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
document.activeElement instanceof HTMLElement ? document.activeElement : null; setSearchState(true);
setDialogState(true); searchInput.value = "";
paletteInput.value = ""; lastQuery = "";
paletteInput.focus(); cancelScheduledFetch();
continueExpanded = false; setClearButtonState(false);
fetchPaletteItems(""); clearResults();
searchInput.focus();
}; };
const closePalette = (): void => { const closeSearch = (): void => {
if (!paletteDialog || !paletteInput) { if (!searchDialog || !searchInput) {
return; return;
} }
setDialogState(false); setSearchState(false);
cancelScheduledFetch();
if (activeRequestController) { if (activeRequestController) {
activeRequestController.abort(); activeRequestController.abort();
activeRequestController = undefined; activeRequestController = undefined;
} }
paletteInput.value = ""; searchInput.value = "";
allPaletteItems = []; lastQuery = "";
paletteItems = []; setClearButtonState(false);
continueExpanded = false;
clearResults(); clearResults();
lastFocusedPaletteOpener?.focus(); lastFocusedSearchOpener?.focus();
};
const clearSearchInput = (): void => {
if (!searchInput) {
return;
}
searchInput.value = "";
searchInput.focus();
cancelScheduledFetch();
setClearButtonState(false);
fetchSearchItems("");
}; };
const onDocumentClick = (event: MouseEvent): void => { const onDocumentClick = (event: MouseEvent): void => {
if (event.target === paletteDialog) { if (event.target === searchDialog) {
closePalette(); closeSearch();
} }
}; };
const onInputKeydown = (event: KeyboardEvent): void => { const onInputKeydown = (event: KeyboardEvent): void => {
if (event.key === "ArrowDown") { if (event.key === "ArrowDown") {
event.preventDefault(); event.preventDefault();
selectItem(selectedIndex + 1); selectItem(selectedIndex + 1, true);
return; return;
} }
if (event.key === "ArrowUp") { if (event.key === "ArrowUp") {
event.preventDefault(); event.preventDefault();
selectItem(selectedIndex - 1); selectItem(selectedIndex - 1, true);
return; return;
} }
@@ -456,50 +563,51 @@ const onDocumentKeydown = (event: KeyboardEvent): void => {
if (commandShortcut && !isTypingTarget(event.target)) { if (commandShortcut && !isTypingTarget(event.target)) {
event.preventDefault(); event.preventDefault();
if (isOpen()) { if (isSearchOpen()) {
closePalette(); closeSearch();
} else { } else {
openPalette(); openSearch();
} }
return; return;
} }
if (event.key === "/" && !isTypingTarget(event.target)) { if (event.key === "/" && !isTypingTarget(event.target)) {
event.preventDefault(); event.preventDefault();
openPalette(); openSearch();
return; return;
} }
if (event.key === "Escape" && isOpen()) { if (event.key === "Escape" && isSearchOpen()) {
event.preventDefault(); event.preventDefault();
closePalette(); closeSearch();
} }
}; };
const initCommandPalette = (): void => { const initSearchOverlay = (): void => {
if (globalWindow[commandPaletteInitializedKey]) { if (globalWindow[commandPaletteInitializedKey]) {
return; return;
} }
globalWindow[commandPaletteInitializedKey] = true; globalWindow[commandPaletteInitializedKey] = true;
if (!paletteInput || !paletteResults || !paletteRoot) { if (!searchInput || !searchResults || !searchRoot) {
return; return;
} }
setShortcutHints(); setShortcutHints();
paletteOpenButtons.forEach((button) => { searchOpenButtons.forEach((button) => {
button.addEventListener("click", openPalette); button.addEventListener("click", openSearch);
}); });
paletteCloseButtons.forEach((button) => { searchCloseButtons.forEach((button) => {
button.addEventListener("click", closePalette); button.addEventListener("click", closeSearch);
}); });
paletteInput.addEventListener("input", scheduleFetch); searchClearButtons.forEach((button) => {
paletteInput.addEventListener("keydown", onInputKeydown); button.addEventListener("click", clearSearchInput);
});
searchInput.addEventListener("input", scheduleFetch);
searchInput.addEventListener("keydown", onInputKeydown);
document.addEventListener("click", onDocumentClick); document.addEventListener("click", onDocumentClick);
document.addEventListener("keydown", onDocumentKeydown); document.addEventListener("keydown", onDocumentKeydown);
paletteDialog?.setAttribute("aria-hidden", "true"); searchDialog?.setAttribute("aria-hidden", "true");
closestFocusable(paletteRoot ?? document.body);
}; };
initCommandPalette(); initSearchOverlay();
import { closestFocusable } from "./utils";

43
templates/base.gohtml
View File

@@ -99,26 +99,35 @@
{{end}} {{end}}
</div> </div>
<div class="fixed inset-0 z-60 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-command-palette-dialog aria-hidden="true"> <div class="fixed inset-0 z-100 hidden flex-col bg-background" data-command-palette-dialog aria-hidden="true">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card) ring-1 ring-black/10" data-command-palette-root role="dialog" aria-modal="true" aria-label="Command palette"> <div class="border-b border-(--border) bg-background shadow-[0_10px_28px_rgba(0,0,0,0.18)]" data-command-palette-root role="dialog" aria-modal="true" aria-label="Search anime">
<label for="command-palette-input" class="sr-only">Search commands and anime</label> <label for="command-palette-input" class="sr-only">Search commands and anime</label>
<div class="flex items-center border-b border-black/5"> <div class="mx-auto flex min-h-32 w-full max-w-4xl items-end gap-4 px-5 pb-6 pt-8 md:min-h-40 md:px-8 md:pb-7">
<svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <div class="min-w-0 flex-1">
<circle cx="11" cy="11" r="8" /> <div class="flex items-center gap-3 border-b-2 border-accent">
<path d="m21 21-4.35-4.35" /> <svg class="size-9 shrink-0 text-foreground-muted/90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round">
</svg> <circle cx="11" cy="11" r="8" />
<input <path d="m21 21-4.35-4.35" />
id="command-palette-input" </svg>
name="q" <input
type="search" id="command-palette-input"
autocomplete="off" name="q"
placeholder="Search or jump to..." type="search"
class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none" autocomplete="off"
/> placeholder="Search anime..."
<button type="button" data-unstyled-button class="mr-3 px-2 py-1 text-xs font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" data-command-palette-close>Esc</button> class="min-w-0 flex-1 bg-transparent py-3 text-3xl font-medium text-foreground placeholder:text-foreground-muted outline-none md:text-4xl"
/>
<button type="button" data-unstyled-button class="pointer-events-none flex size-10 shrink-0 items-center justify-center text-foreground-muted opacity-0 transition hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" data-command-palette-clear aria-label="Clear search">
<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
</div> </div>
<div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div>
</div> </div>
<div data-command-palette-results class="min-h-0 flex-1 overflow-y-auto"></div>
</div> </div>
<main class="w-full flex-1 flex flex-col h-[calc(100dvh-3.5rem)] overflow-y-auto lg:h-screen"> <main class="w-full flex-1 flex flex-col h-[calc(100dvh-3.5rem)] overflow-y-auto lg:h-screen">