From 9f88e487865caae79043e5f1ff77e561bb49be29 Mon Sep 17 00:00:00 2001 From: mkelvers Date: Thu, 28 May 2026 11:28:15 +0200 Subject: [PATCH] chore: format search --- static/search.ts | 266 +++++++++++++++++++++++------------------------ 1 file changed, 133 insertions(+), 133 deletions(-) diff --git a/static/search.ts b/static/search.ts index 11d57b8..6f038b8 100644 --- a/static/search.ts +++ b/static/search.ts @@ -8,47 +8,47 @@ interface CommandPaletteItem { icon?: string; } -const commandPaletteInitializedKey = Symbol('commandPaletteInitialized'); +const commandPaletteInitializedKey = Symbol("commandPaletteInitialized"); const globalWindow = window as Window & { [commandPaletteInitializedKey]?: boolean }; -const paletteInput = document.getElementById('command-palette-input') as HTMLInputElement | null; +const paletteInput = document.getElementById("command-palette-input") as HTMLInputElement | null; const paletteResults = document.querySelector( - '[data-command-palette-results]' + "[data-command-palette-results]", ) as HTMLElement | null; -const paletteDialog = document.querySelector('[data-command-palette-dialog]') as HTMLElement | null; -const paletteRoot = document.querySelector('[data-command-palette-root]') as HTMLElement | null; -const paletteOpenButtons = document.querySelectorAll('[data-command-palette-open]'); -const paletteCloseButtons = document.querySelectorAll('[data-command-palette-close]'); -const shortcutHints = document.querySelectorAll('[data-command-palette-shortcut]'); +const paletteDialog = document.querySelector("[data-command-palette-dialog]") as HTMLElement | null; +const paletteRoot = document.querySelector("[data-command-palette-root]") as HTMLElement | null; +const paletteOpenButtons = document.querySelectorAll("[data-command-palette-open]"); +const paletteCloseButtons = document.querySelectorAll("[data-command-palette-close]"); +const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]"); let allPaletteItems: CommandPaletteItem[] = []; let paletteItems: CommandPaletteItem[] = []; let selectedIndex = 0; let fetchTimeout: number | undefined; -let lastQuery = ''; +let lastQuery = ""; let continueExpanded = false; let activeRequestController: AbortController | undefined; const responseCache = new Map(); const iconPaths: Record = { - 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", compass: - 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z', - play: 'M8 5v14l11-7z', - search: 'M11 19a8 8 0 1 1 5.65-2.35L21 21 M16.65 16.65 21 21', - trending: 'M3 17l6-6 4 4 8-8 M14 7h7v7', + "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z", + play: "M8 5v14l11-7z", + search: "M11 19a8 8 0 1 1 5.65-2.35L21 21 M16.65 16.65 21 21", + trending: "M3 17l6-6 4 4 8-8 M14 7h7v7", }; const isMac = (): boolean => /Mac|iPhone|iPad|iPod/.test(navigator.platform); const isSafeImageUrl = (rawUrl?: string): boolean => { - if (!rawUrl || typeof rawUrl !== 'string') { + if (!rawUrl || typeof rawUrl !== "string") { return false; } try { const parsed = new URL(rawUrl, window.location.origin); - return parsed.protocol === 'https:' || parsed.protocol === 'http:'; + return parsed.protocol === "https:" || parsed.protocol === "http:"; } catch { return false; } @@ -60,11 +60,11 @@ const isTypingTarget = (target: EventTarget | null): boolean => target instanceof HTMLSelectElement || (target instanceof HTMLElement && target.isContentEditable); -const isOpen = (): boolean => paletteDialog?.classList.contains('flex') ?? false; +const isOpen = (): boolean => paletteDialog?.classList.contains("flex") ?? false; const setShortcutHints = (): void => { - shortcutHints.forEach(hint => { - hint.textContent = isMac() ? '⌘P' : 'Ctrl P'; + shortcutHints.forEach((hint) => { + hint.textContent = isMac() ? "⌘P" : "Ctrl P"; }); }; @@ -73,37 +73,37 @@ const clearResults = (): void => { }; const buildSearchActionItem = (query: string): CommandPaletteItem => ({ - id: 'search:' + query.toLowerCase(), - type: 'search', + id: "search:" + query.toLowerCase(), + type: "search", label: `Search anime for "${query}"`, - subtitle: 'Browse', - href: '/browse?q=' + encodeURIComponent(query), - icon: 'search', + 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 = ''; + 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 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 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); + 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); @@ -111,18 +111,18 @@ const buildIcon = (item: CommandPaletteItem): HTMLElement => { }; const buildSvgIcon = (pathData: string, className: string): SVGSVGElement => { - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - svg.setAttribute('viewBox', '0 0 24 24'); - svg.setAttribute('fill', 'none'); - svg.setAttribute('stroke', 'currentColor'); - svg.setAttribute('stroke-width', '2'); - svg.setAttribute('stroke-linecap', 'round'); - svg.setAttribute('stroke-linejoin', 'round'); - svg.setAttribute('aria-hidden', 'true'); - svg.classList.add(...className.split(' ')); + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("viewBox", "0 0 24 24"); + svg.setAttribute("fill", "none"); + svg.setAttribute("stroke", "currentColor"); + svg.setAttribute("stroke-width", "2"); + svg.setAttribute("stroke-linecap", "round"); + svg.setAttribute("stroke-linejoin", "round"); + svg.setAttribute("aria-hidden", "true"); + svg.classList.add(...className.split(" ")); - const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - path.setAttribute('d', pathData); + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute("d", pathData); svg.appendChild(path); return svg; @@ -135,12 +135,12 @@ const selectItem = (index: number): void => { } selectedIndex = Math.max(0, Math.min(index, paletteItems.length - 1)); - paletteResults.querySelectorAll('[data-command-palette-item]').forEach((row, i) => { + paletteResults.querySelectorAll("[data-command-palette-item]").forEach((row, i) => { const selected = i === selectedIndex; - row.classList.toggle('bg-surface-hover', selected); - row.setAttribute('aria-selected', String(selected)); + row.classList.toggle("bg-surface-hover", selected); + row.setAttribute("aria-selected", String(selected)); if (selected) { - row.scrollIntoView({ block: 'nearest' }); + row.scrollIntoView({ block: "nearest" }); } }); }; @@ -154,88 +154,88 @@ const runSelectedItem = (): void => { }; const removeContinueWatchingItem = (item: CommandPaletteItem): void => { - const animeID = item.id.replace('continue:', ''); + const animeID = item.id.replace("continue:", ""); if (!animeID || animeID === item.id) { return; } - fetch('/api/continue-watching/' + encodeURIComponent(animeID), { method: 'DELETE' }) + 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); + 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); + console.error("Continue watching remove error:", err); }); }; const removeContinueWatchingCard = (animeID: string): void => { - document.getElementById('continue-watching-' + animeID)?.remove(); + document.getElementById("continue-watching-" + animeID)?.remove(); - const section = document.getElementById('continue-watching-section'); + const section = document.getElementById("continue-watching-section"); if (!section) { return; } - if (section.querySelectorAll('.continue-watching-item').length === 0) { + if (section.querySelectorAll(".continue-watching-item").length === 0) { section.remove(); } }; const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => { - const row = document.createElement('a'); + const row = document.createElement("a"); row.href = item.href; row.className = - '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'; + "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.setAttribute("role", "option"); + row.setAttribute("aria-selected", String(index === selectedIndex)); - row.addEventListener('mouseenter', () => selectItem(index)); + 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 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'; + 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'; + 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); - if (item.type === 'continue') { - const removeButton = document.createElement('button'); - removeButton.type = 'button'; + if (item.type === "continue") { + const removeButton = document.createElement("button"); + removeButton.type = "button"; 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'; - removeButton.setAttribute('aria-label', 'Remove from Continue Watching'); - removeButton.appendChild(buildSvgIcon('M18 6 6 18 M6 6l12 12', 'size-4')); - removeButton.addEventListener('click', event => { + "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"; + 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); }); row.appendChild(removeButton); } else { - const hint = document.createElement('div'); - hint.className = 'hidden text-xs text-foreground-muted sm:block'; - hint.textContent = index === selectedIndex ? 'Enter' : ''; + const hint = document.createElement("div"); + hint.className = "hidden text-xs text-foreground-muted sm:block"; + hint.textContent = index === selectedIndex ? "Enter" : ""; row.appendChild(hint); } @@ -243,26 +243,26 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement => }; const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => { - const button = document.createElement('button'); - button.type = 'button'; + const button = document.createElement("button"); + button.type = "button"; button.className = - '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'; + "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"; - const spacer = document.createElement('span'); - spacer.className = 'h-8 w-8 shrink-0'; + const spacer = document.createElement("span"); + spacer.className = "h-8 w-8 shrink-0"; button.appendChild(spacer); - const label = document.createElement('span'); - label.className = 'flex-1'; + const label = document.createElement("span"); + label.className = "flex-1"; label.textContent = continueExpanded - ? 'Hide extra continue watching' + ? "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'); + const chevron = buildSvgIcon(continueExpanded ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6", "size-4"); button.appendChild(chevron); - button.addEventListener('click', () => { + button.addEventListener("click", () => { continueExpanded = !continueExpanded; renderItems(allPaletteItems); }); @@ -271,18 +271,18 @@ const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => { }; const visiblePaletteItems = (items: CommandPaletteItem[]): CommandPaletteItem[] => { - if (lastQuery !== '') { + if (lastQuery !== "") { return items; } - const continueItems = items.filter(item => item.type === 'continue'); + 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 items.filter((item) => { + if (item.type !== "continue") { return true; } if (!firstContinueShown) { @@ -303,21 +303,21 @@ const renderItems = (items: CommandPaletteItem[]): void => { 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'; + 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'); - list.setAttribute('role', 'listbox'); - list.setAttribute('aria-label', 'Command palette results'); + const list = document.createElement("div"); + list.setAttribute("role", "listbox"); + list.setAttribute("aria-label", "Command palette results"); paletteItems.forEach((item, index) => { list.appendChild(buildRow(item, index)); - const continueCount = items.filter(candidate => candidate.type === 'continue').length; - if (lastQuery === '' && continueCount > 1 && item.type === 'continue' && index === 0) { + const continueCount = items.filter((candidate) => candidate.type === "continue").length; + if (lastQuery === "" && continueCount > 1 && item.type === "continue" && index === 0) { list.appendChild(buildContinueToggle(continueCount - 1)); } }); @@ -352,7 +352,7 @@ const fetchPaletteItems = (query: string): void => { const controller = new AbortController(); activeRequestController = controller; - fetch('/api/command-palette?q=' + encodeURIComponent(query), { signal: controller.signal }) + fetch("/api/command-palette?q=" + encodeURIComponent(query), { signal: controller.signal }) .then((res: Response) => { if (!res.ok) { return []; @@ -372,7 +372,7 @@ const fetchPaletteItems = (query: string): void => { return; } activeRequestController = undefined; - console.error('Command palette error:', err); + console.error("Command palette error:", err); renderItems([]); }); }; @@ -382,7 +382,7 @@ const scheduleFetch = (): void => { window.clearTimeout(fetchTimeout); } - const query = paletteInput?.value.trim() || ''; + const query = paletteInput?.value.trim() || ""; fetchTimeout = window.setTimeout(() => fetchPaletteItems(query), query.length >= 2 ? 300 : 120); }; @@ -391,13 +391,13 @@ const openPalette = (): void => { return; } - paletteDialog.classList.remove('hidden'); - paletteDialog.classList.add('flex'); - paletteDialog.setAttribute('aria-hidden', 'false'); - paletteInput.value = ''; + paletteDialog.classList.remove("hidden"); + paletteDialog.classList.add("flex"); + paletteDialog.setAttribute("aria-hidden", "false"); + paletteInput.value = ""; paletteInput.focus(); continueExpanded = false; - fetchPaletteItems(''); + fetchPaletteItems(""); }; const closePalette = (): void => { @@ -405,14 +405,14 @@ const closePalette = (): void => { return; } - paletteDialog.classList.add('hidden'); - paletteDialog.classList.remove('flex'); - paletteDialog.setAttribute('aria-hidden', 'true'); + paletteDialog.classList.add("hidden"); + paletteDialog.classList.remove("flex"); + paletteDialog.setAttribute("aria-hidden", "true"); if (activeRequestController) { activeRequestController.abort(); activeRequestController = undefined; } - paletteInput.value = ''; + paletteInput.value = ""; allPaletteItems = []; paletteItems = []; continueExpanded = false; @@ -426,26 +426,26 @@ const onDocumentClick = (event: MouseEvent): void => { }; const onInputKeydown = (event: KeyboardEvent): void => { - if (event.key === 'ArrowDown') { + if (event.key === "ArrowDown") { event.preventDefault(); selectItem(selectedIndex + 1); return; } - if (event.key === 'ArrowUp') { + if (event.key === "ArrowUp") { event.preventDefault(); selectItem(selectedIndex - 1); return; } - if (event.key === 'Enter') { + if (event.key === "Enter") { event.preventDefault(); runSelectedItem(); } }; const onDocumentKeydown = (event: KeyboardEvent): void => { - const commandShortcut = event.key.toLowerCase() === 'p' && (event.metaKey || event.ctrlKey); + const commandShortcut = event.key.toLowerCase() === "p" && (event.metaKey || event.ctrlKey); if (commandShortcut && !isTypingTarget(event.target)) { event.preventDefault(); @@ -457,13 +457,13 @@ const onDocumentKeydown = (event: KeyboardEvent): void => { return; } - if (event.key === '/' && !isTypingTarget(event.target)) { + if (event.key === "/" && !isTypingTarget(event.target)) { event.preventDefault(); openPalette(); return; } - if (event.key === 'Escape' && isOpen()) { + if (event.key === "Escape" && isOpen()) { event.preventDefault(); closePalette(); } @@ -480,16 +480,16 @@ const initCommandPalette = (): void => { } setShortcutHints(); - paletteOpenButtons.forEach(button => { - button.addEventListener('click', openPalette); + paletteOpenButtons.forEach((button) => { + button.addEventListener("click", openPalette); }); - paletteCloseButtons.forEach(button => { - button.addEventListener('click', closePalette); + paletteCloseButtons.forEach((button) => { + button.addEventListener("click", closePalette); }); - paletteInput.addEventListener('input', scheduleFetch); - paletteInput.addEventListener('keydown', onInputKeydown); - document.addEventListener('click', onDocumentClick); - document.addEventListener('keydown', onDocumentKeydown); + paletteInput.addEventListener("input", scheduleFetch); + paletteInput.addEventListener("keydown", onInputKeydown); + document.addEventListener("click", onDocumentClick); + document.addEventListener("keydown", onDocumentKeydown); }; initCommandPalette();