refactor: simplify render module by removing compact items and continue watching

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<HTMLElement>("[data-command-palette-item]").forEach((item) => {
+  searchResults.querySelectorAll<HTMLElement>("[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 => {
+const cleanLabel = (item: SearchItem): string => {
-  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, "");
-  }
-
   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 buildSection = (title: string, items: SearchItem[], startIndex: number): HTMLElement => {
-  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 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 =
+  list.className = "grid grid-cols-2 gap-x-5 gap-y-7 sm:grid-cols-3 lg:grid-cols-4";
-    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";
 
   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<string, CommandPaletteItem[]> => {
+const groupedItems = (items: SearchItem[]): Map<string, SearchItem[]> => {
-  const groups = new Map<string, CommandPaletteItem[]>();
+  const groups = new Map<string, SearchItem[]>();
   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, CommandPaletteIt
   return groups;
 };
 
-const orderedGroupKeys = (groups: Map<string, CommandPaletteItem[]>): string[] => {
+const orderedGroupKeys = (groups: Map<string, SearchItem[]>): 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);
-    const section = buildSection(typeLabels[key] || "Results", groupItems, cursor, variant);
     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;
   }