v3: type checking and lint pass clean — thumbnail placeholder takes file-dump props, no manual memo the compiler can't keep, no setState straight in effect bodies

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/ChatModal.tsx

@@ -527,12 +527,12 @@ export function ChatModal({ onClose }: { onClose: () => void }) {
     return out;
   }, [messages]);
 
-  const typingLabel = useMemo(() => {
-    const names = typingOthers.map((u) => u.username);
-    if (names.length === 1) return t`${names[0]} is typing…`;
-    if (names.length === 2) return t`${names[0]} and ${names[1]} are typing…`;
-    return t`Several people are typing…`;
-  }, [typingOthers]);
+  const typingNames = typingOthers.map((u) => u.username);
+  const typingLabel = typingNames.length === 1
+    ? t`${typingNames[0]} is typing…`
+    : typingNames.length === 2
+    ? t`${typingNames[0]} and ${typingNames[1]} are typing…`
+    : t`Several people are typing…`;
 
   return (
     <Modal title={t`Chat`} onClose={onClose} wide>

src/components/DumpCreateModal.tsx

@@ -333,7 +333,8 @@ export function DumpCreateModal(
   const toggleCategory = (id: string) =>
     setSelectedCategoryIds((prev) => {
       const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
 

src/components/Thumbnail.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { type ComponentProps, useState } from "react";
 import { canProxyImage, proxyImageUrl } from "../utils/proxyImage.ts";
 import ThumbnailPlaceholder from "./ThumbnailPlaceholder.tsx";
 
@@ -9,12 +9,7 @@ interface ThumbnailProps {
   className?: string;
   loading?: "lazy" | "eager";
   /** Passed through to the placeholder when there's nothing to show. */
-  placeholder: {
-    url?: string;
-    accentColor?: string;
-    faviconUrl?: string;
-    siteName?: string;
-  };
+  placeholder: Omit<ComponentProps<typeof ThumbnailPlaceholder>, "className">;
   /** Extra class for the placeholder element only. */
   placeholderClassName?: string;
 }

src/contexts/CategoriesProvider.tsx

@@ -10,22 +10,30 @@ import {
   type RawCategory,
 } from "../model.ts";
 
+async function fetchCategories(
+  signal?: AbortSignal,
+): Promise<Category[] | null> {
+  const res = await fetch(`${API_URL}/api/categories`, { signal });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const body = await res.json();
+  if (!body.success) return null;
+  return (body.data as RawCategory[]).map(deserializeCategory);
+}
+
 export function CategoriesProvider({ children }: { children: ReactNode }) {
   const [categories, setCategories] = useState<Category[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
 
-  const load = useCallback(async (signal?: AbortSignal) => {
-    try {
-      const res = await fetch(`${API_URL}/api/categories`, { signal });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const body = await res.json();
-      if (!body.success) return;
-      setCategories((body.data as RawCategory[]).map(deserializeCategory));
-      setIsLoaded(true);
-    } catch (err) {
-      if ((err as Error).name !== "AbortError") setIsLoaded(true);
-    }
-  }, []);
+  const load = useCallback((signal?: AbortSignal) =>
+    fetchCategories(signal)
+      .then((data) => {
+        if (!data) return;
+        setCategories(data);
+        setIsLoaded(true);
+      })
+      .catch((err) => {
+        if ((err as Error).name !== "AbortError") setIsLoaded(true);
+      }), []);
 
   useEffect(() => {
     const controller = new AbortController();

src/pages/DumpEdit.tsx

@@ -304,7 +304,8 @@ function DumpEditForm({
   const toggleCategory = (id: string) =>
     setSelectedCategoryIds((prev) => {
       const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   const form = useApiForm<EditValues>({

src/pages/index/FollowedFeed.tsx

@@ -241,7 +241,7 @@ export function FollowedFeed({
           })
         );
     }
-  }, [token, usersState.status, playlistsState.status]);
+  }, [token, usersState.status, playlistsState.status, catQuery]);
 
   // Scroll save
   useScrollSave(
@@ -298,7 +298,7 @@ export function FollowedFeed({
           s.status === "loaded" ? { ...s, loadingMore: false } : s
         )
       );
-  }, [usersState, token]);
+  }, [usersState, token, catQuery]);
 
   const loadMorePlaylists = useCallback(() => {
     if (
@@ -333,7 +333,7 @@ export function FollowedFeed({
           s.status === "loaded" ? { ...s, loadingMore: false } : s
         )
       );
-  }, [playlistsState, token]);
+  }, [playlistsState, token, catQuery]);
 
   return (
     <div className="followed-feed">