diff --git a/static/search/render.ts b/static/search/render.ts index 1fae989..55b2659 100644 --- a/static/search/render.ts +++ b/static/search/render.ts @@ -1,9 +1,8 @@ import { dedupeByID, dedupeWithin } from "../dedupe"; -import type { CommandPaletteItem } from "./state"; +import type { SearchItem } from "./state"; import { searchResults, searchClearButtons, - responseCache, getResultItems, setResultItems, getSelectedIndex, @@ -57,7 +56,7 @@ const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => { return svg; }; -const buildFallbackIcon = (item: CommandPaletteItem): HTMLElement => { +const buildFallbackIcon = (item: SearchItem): HTMLElement => { const icon = document.createElement("div"); icon.className = "flex aspect-2/3 w-full items-center justify-center bg-background-button text-foreground-muted"; @@ -67,7 +66,7 @@ const buildFallbackIcon = (item: CommandPaletteItem): HTMLElement => { return icon; }; -const buildPosterImage = (item: CommandPaletteItem): HTMLElement => { +const buildPosterImage = (item: SearchItem): HTMLElement => { if (!isSafeImageUrl(item.image)) { return buildFallbackIcon(item); } @@ -107,7 +106,7 @@ export const selectItem = (index: number, scrollIntoView: boolean): void => { const selectedIndex = Math.max(0, Math.min(index, resultItems.length - 1)); setSelectedIndex(selectedIndex); - searchResults.querySelectorAll("[data-command-palette-item]").forEach((item) => { + searchResults.querySelectorAll("[data-search-item]").forEach((item) => { const selected = Number(item.dataset.resultIndex) === selectedIndex; item.classList.toggle("opacity-75", selected); item.setAttribute("aria-selected", String(selected)); @@ -126,54 +125,11 @@ export const runSelectedItem = (): void => { window.location.href = item.href; }; -const removeContinueWatchingCard = (animeID: string): void => { - document.getElementById("continue-watching-" + animeID)?.remove(); - - const section = document.getElementById("continue-watching-section"); - if (!section) { - return; - } - - if (section.querySelectorAll(".continue-watching-item").length === 0) { - section.remove(); - } -}; - -export 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; - } - - responseCache.clear(); - removeContinueWatchingCard(animeID); - renderItems(getResultItems().filter((candidate) => candidate.id !== item.id)); - }) - .catch((error) => { - window.showToast?.({ message: "Failed to remove from Continue Watching." }); - console.error("failed to remove from continue watching:", error); - }); -}; - -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, ""); - } - +const cleanLabel = (item: SearchItem): string => { return item.label; }; -const animeMalID = (item: CommandPaletteItem): number | null => { +const animeMalID = (item: SearchItem): number | null => { if (item.type !== "anime") { return null; } @@ -187,7 +143,7 @@ const animeMalID = (item: CommandPaletteItem): number | null => { return Number.isFinite(id) ? id : null; }; -const buildWatchlistButton = (item: CommandPaletteItem): HTMLButtonElement | null => { +const buildWatchlistButton = (item: SearchItem): HTMLButtonElement | null => { const malID = animeMalID(item); if (malID === null) { return null; @@ -212,12 +168,12 @@ const buildWatchlistButton = (item: CommandPaletteItem): HTMLButtonElement | nul return button; }; -const buildCard = (item: CommandPaletteItem, index: number): HTMLAnchorElement => { +const buildCard = (item: SearchItem, 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.searchItem = item.id; card.dataset.id = item.id; card.dataset.resultIndex = String(index); card.setAttribute("role", "option"); @@ -233,21 +189,6 @@ const buildCard = (item: CommandPaletteItem, index: number): HTMLAnchorElement = media.appendChild(watchlistButton); } - if (item.type === "continue") { - const removeButton = document.createElement("button"); - removeButton.type = "button"; - removeButton.className = - "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.appendChild(buildSvgIcon("M18 6 6 18 M6 6l12 12", "size-4")); - removeButton.addEventListener("click", (event) => { - event.preventDefault(); - event.stopPropagation(); - removeContinueWatchingItem(item); - }); - media.appendChild(removeButton); - } - card.appendChild(media); const title = document.createElement("div"); @@ -265,48 +206,7 @@ const buildCard = (item: CommandPaletteItem, index: number): HTMLAnchorElement = 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.id = item.id; - row.dataset.resultIndex = String(index); - row.setAttribute("role", "option"); - row.setAttribute("aria-selected", String(index === getSelectedIndex())); - 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; -}; - -const buildSection = ( - title: string, - items: CommandPaletteItem[], - startIndex: number, - variant: "grid" | "compact", -): HTMLElement => { +const buildSection = (title: string, items: SearchItem[], startIndex: number): HTMLElement => { const section = document.createElement("section"); section.className = "min-w-0"; @@ -318,14 +218,11 @@ const buildSection = ( const list = document.createElement("div"); list.setAttribute("role", "listbox"); list.setAttribute("aria-label", title); - list.className = - 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"; + list.className = "grid grid-cols-2 gap-x-5 gap-y-7 sm:grid-cols-3 lg:grid-cols-4"; items.forEach((item, itemIndex) => { const index = startIndex + itemIndex; - list.appendChild(variant === "grid" ? buildCard(item, index) : buildCompactItem(item, index)); + list.appendChild(buildCard(item, index)); }); section.appendChild(list); @@ -350,7 +247,7 @@ export const renderEmptyState = (query: string): void => { 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."; + : "Search anime titles and open a result to view its details."; empty.appendChild(subtitle); searchResults.replaceChildren(empty); @@ -380,8 +277,8 @@ export const renderSearchErrorState = (query: string): void => { searchResults.replaceChildren(empty); }; -const groupedItems = (items: CommandPaletteItem[]): Map => { - const groups = new Map(); +const groupedItems = (items: SearchItem[]): Map => { + const groups = new Map(); items.forEach((item) => { const key = item.type in typeLabels ? item.type : "anime"; const group = groups.get(key) || []; @@ -391,11 +288,11 @@ const groupedItems = (items: CommandPaletteItem[]): Map): string[] => { +const orderedGroupKeys = (groups: Map): string[] => { return groupOrder.filter((key) => groups.has(key)); }; -export const renderItems = (items: CommandPaletteItem[]): void => { +export const renderItems = (items: SearchItem[]): void => { if (!searchResults) { return; } @@ -421,8 +318,7 @@ export const renderItems = (items: CommandPaletteItem[]): void => { return; } - const variant = key === "anime" ? "grid" : "compact"; - const section = buildSection(typeLabels[key] || "Results", groupItems, cursor, variant); + const section = buildSection(typeLabels[key] || "Results", groupItems, cursor); section.classList.add("mb-12"); shell.appendChild(section); cursor += groupItems.length; @@ -433,7 +329,7 @@ export const renderItems = (items: CommandPaletteItem[]): void => { selectItem(0, false); }; -export const appendItems = (items: CommandPaletteItem[]): void => { +export const appendItems = (items: SearchItem[]): void => { if (!searchResults || items.length === 0) { return; }