v4: playlists have categories of their own — a set apart from the dumps', which admins manage on /manage under "Playlist categories", next to "Dump categories". Each category now has a kind, dump or playlist, its slug and name unique within its kind only; migration 0025 rebuilds categories with the column, every existing one becoming a dump category with its dumps, and adds playlist_categories. A playlist's owner files it under any of them in the create and edit forms, and it shows them as chips on its card and its page, each leading to /playlists/<slug>.

/playlists is the new page of every public playlist, newest first (GET /api/playlists), and /playlists/<slug> a playlist category's, with a menu of the categories, linked from the user menu as "All playlists"; `playlists` is reserved as a dump category's slug, and one that had it is renamed. A profile's Playlists tab narrows to a playlist category with the same menu as its Dumps tab (?category=), and so do the Dumps and Playlists tabs of /search, each with its own kind (category and playlistCategory for GET /api/search), another tab dropping it.

The category service takes the kind throughout, so a dump can't be filed under a playlist category nor the other way round, and categoryJoin is the one filter join the dump, follow and playlist services share. useCategories(kind) gives one kind's set from the one fetch, CategoryChips replaces the chips the dump card and page each drew, useCategoryFilter keeps a list to its category as the socket brings more, and useCategorySelection holds a form's picked categories.

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

src/hooks/category/useCategories.ts

@@ -1,20 +1,45 @@
 /**
- * Gives components the categories that `CategoriesProvider` loads once for the
- * whole app.
+ * Gives components the categories of one kind, of those `CategoriesProvider`
+ * loads once for the whole app.
  *
  * @module
  */
 
-import { useContext } from "react";
-import {
-  CategoriesContext,
-  type CategoriesContextValue,
-} from "../../contexts/category/CategoriesContext.ts";
+import { useContext, useMemo } from "react";
+import { CategoriesContext } from "../../contexts/category/CategoriesContext.ts";
+import type { Category, CategoryKind } from "../../../shared/category.ts";
+
+/** Returned by {@link useCategories}: one kind's categories. */
+export interface KindCategories {
+  /** The categories of the kind, by position then slug. */
+  categories: Category[];
+  /** Resolves a dump's or playlist's `categoryIds` to its category chips. */
+  byId: Map<string, Category>;
+  /**
+   * Whether the first fetch has ended. It is also true after a network error,
+   * with no categories.
+   */
+  isLoaded: boolean;
+  /** Refetches both kinds. The category manager calls it after each change. */
+  refresh: () => Promise<void>;
+}
 
 /**
- * Returns every category and a function that refetches them. Under no
- * `CategoriesProvider`, the list is empty.
+ * Returns the categories of `kind`, dump or playlist, and a function that
+ * refetches them. Under no `CategoriesProvider`, the list is empty.
  */
-export function useCategories(): CategoriesContextValue {
-  return useContext(CategoriesContext);
+export function useCategories(kind: CategoryKind): KindCategories {
+  const { categories: all, isLoaded, refresh } = useContext(CategoriesContext);
+  const categories = useMemo(
+    () => all.filter((c) => c.kind === kind),
+    [all, kind],
+  );
+  const byId = useMemo(
+    () => new Map(categories.map((c) => [c.id, c])),
+    [categories],
+  );
+  return useMemo(
+    () => ({ categories, byId, isLoaded, refresh }),
+    [categories, byId, isLoaded, refresh],
+  );
 }

src/hooks/category/useCategoryFilter.ts

@@ -0,0 +1,30 @@
+/**
+ * Keeps a list narrowed to one category, whatever the socket puts in it.
+ *
+ * @module
+ */
+
+import { useCallback } from "react";
+
+/**
+ * Returns `setItems` wrapped so that every list it sets keeps only the items
+ * filed under `categoryId`, or `setItems` as it is without one. A list of one
+ * category's dumps or playlists passes it to the hooks that apply the
+ * socket's messages, so that one created outside the category isn't added,
+ * and one edited out of it leaves.
+ */
+export function useCategoryFilter<T extends { categoryIds?: string[] }>(
+  setItems: (fn: (prev: T[]) => T[]) => void,
+  categoryId?: string,
+): (fn: (prev: T[]) => T[]) => void {
+  return useCallback(
+    (fn: (prev: T[]) => T[]) =>
+      setItems((prev) => {
+        const next = fn(prev);
+        return categoryId
+          ? next.filter((item) => item.categoryIds?.includes(categoryId))
+          : next;
+      }),
+    [setItems, categoryId],
+  );
+}

src/hooks/category/useCategorySelection.ts

@@ -0,0 +1,26 @@
+/**
+ * Holds the categories picked in a form's `CategorySelect`.
+ *
+ * @module
+ */
+
+import { useCallback, useState } from "react";
+
+/**
+ * Returns the ids picked, starting from `initial`, a function that turns one
+ * on or off, and one that replaces them all. The dump creation dialog, the
+ * dump editor and the playlist forms send `[...selected]` as `categoryIds`.
+ */
+export function useCategorySelection(
+  initial: Iterable<string> = [],
+): [Set<string>, (id: string) => void, (ids: Set<string>) => void] {
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(initial));
+  const toggle = useCallback((id: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    }), []);
+  return [selected, toggle, setSelected];
+}

src/hooks/dump/useUserDumpFeed.ts

@@ -16,6 +16,7 @@ import {
 } from "../../utils/shared/deserialize.ts";
 import { useAuth } from "../auth/useAuth.ts";
 import { useCategories } from "../category/useCategories.ts";
+import { useCategoryFilter } from "../category/useCategoryFilter.ts";
 import { useWS } from "../ws/useWS.ts";
 import { useFeedCache } from "../feed/useFeedCache.ts";
 import { usePagedList, type UsePagedListResult } from "../feed/usePagedList.ts";
@@ -64,7 +65,7 @@ export function useUserDumpFeed(
 ): UseUserDumpFeedResult {
   const { user, authFetch } = useAuth();
   const { lastDumpEvent } = useWS();
-  const { categories } = useCategories();
+  const { categories } = useCategories("dump");
   const { cached, saveState } = useFeedCache<Dump>(
     `feed:profile-${list}:${userId}${categorySlug ? `:${categorySlug}` : ""}`,
     hydrateDump,
@@ -91,16 +92,7 @@ export function useUserDumpFeed(
   // the categories don't know yet lets everything through.
   const categoryId = categorySlug &&
     categories.find((c) => c.slug === categorySlug)?.id;
-  const setItems = useCallback(
-    (fn: (prev: Dump[]) => Dump[]) =>
-      setAllItems((prev) => {
-        const next = fn(prev);
-        return categoryId
-          ? next.filter((d) => d.categoryIds?.includes(categoryId))
-          : next;
-      }),
-    [setAllItems, categoryId],
-  );
+  const setItems = useCategoryFilter(setAllItems, categoryId || undefined);
 
   const upvoted = useUpvotedList({
     profileUserId: list === "upvoted" ? userId : null,