v3: added site-wide categories, added admin category management, various visual fixes

src/components/CategorySelect.tsx

@@ -0,0 +1,45 @@
+import { Trans } from "@lingui/react/macro";
+import { useCategories } from "../hooks/useCategories.ts";
+
+/**
+ * Multi-select of categories rendered as toggle chips. Renders nothing when no
+ * categories are configured, so dump forms stay unchanged until an admin adds
+ * the first category.
+ */
+export function CategorySelect(
+  { selected, onToggle, disabled }: {
+    selected: Set<string>;
+    onToggle: (id: string) => void;
+    disabled?: boolean;
+  },
+) {
+  const { categories } = useCategories();
+  if (categories.length === 0) return null;
+
+  return (
+    <div className="form-field">
+      <span className="form-label">
+        <Trans>Categories</Trans>
+      </span>
+      <div className="category-select">
+        {categories.map((category) => {
+          const isActive = selected.has(category.id);
+          return (
+            <button
+              type="button"
+              key={category.id}
+              className={`category-chip-toggle${
+                isActive ? " category-chip-toggle--active" : ""
+              }`}
+              onClick={() => onToggle(category.id)}
+              disabled={disabled}
+              aria-pressed={isActive}
+            >
+              {category.name}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/CategorySwitcher.tsx

@@ -0,0 +1,137 @@
+import {
+  type CSSProperties,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { useNavigate, useParams } from "react-router";
+import { t } from "@lingui/core/macro";
+import { useCategories } from "../hooks/useCategories.ts";
+
+/**
+ * Header dropdown that switches the feed scope between "All" and a category,
+ * preserving the active feed tab (e.g. /music/new → /cinema/new). Rendered as
+ * the leading item of the feed-sort tab row so it reads as part of the bar.
+ *
+ * A custom popover (not a native <select>) keeps it on-theme; the menu uses
+ * fixed positioning so the row's `overflow-x: auto` can't clip it. `~` is the
+ * sentinel value for the all-categories feed. Hidden when no categories exist.
+ */
+export function CategorySwitcher() {
+  const { categories } = useCategories();
+  const navigate = useNavigate();
+  const { categorySlug, feedTab } = useParams();
+
+  const [open, setOpen] = useState(false);
+  const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+
+  // Close on outside click / Escape. The menu is portaled out of the wrapper,
+  // so check it separately or selecting an option would close before navigating.
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      const target = e.target as Node;
+      if (
+        wrapRef.current && !wrapRef.current.contains(target) &&
+        menuRef.current && !menuRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  // Anchor the fixed-position menu to the trigger; keep it aligned on scroll.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => {
+      const r = btnRef.current?.getBoundingClientRect();
+      if (r) setMenuStyle({ top: r.bottom + 6, left: r.left });
+    };
+    update();
+    globalThis.addEventListener("scroll", update, true);
+    globalThis.addEventListener("resize", update);
+    return () => {
+      globalThis.removeEventListener("scroll", update, true);
+      globalThis.removeEventListener("resize", update);
+    };
+  }, [open]);
+
+  if (categories.length === 0) return null;
+
+  const value = categorySlug ?? "~";
+  const tab = feedTab ?? "hot";
+  const currentLabel = categorySlug
+    ? categories.find((c) => c.slug === categorySlug)?.name ?? categorySlug
+    : t`All`;
+
+  const options = [
+    { value: "~", label: t`All` },
+    ...categories.map((c) => ({ value: c.slug, label: c.name })),
+  ];
+
+  function select(slug: string) {
+    setOpen(false);
+    navigate(`/${slug}/${tab}`);
+  }
+
+  return (
+    <div className="category-switcher" ref={wrapRef}>
+      <button
+        ref={btnRef}
+        type="button"
+        className={`feed-sort-btn category-switcher-btn${
+          open ? " category-switcher-btn--open" : ""
+        }`}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+        title={t`Category`}
+      >
+        <span className="category-switcher-label">{currentLabel}</span>
+        <span className="category-switcher-caret" aria-hidden="true" />
+      </button>
+
+      {open && createPortal(
+        <ul
+          ref={menuRef}
+          className="category-switcher-menu"
+          role="listbox"
+          style={menuStyle}
+        >
+          {options.map((o) => (
+            <li key={o.value}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={value === o.value}
+                className={`category-switcher-option${
+                  value === o.value ? " category-switcher-option--active" : ""
+                }`}
+                onClick={() => select(o.value)}
+              >
+                {o.label}
+              </button>
+            </li>
+          ))}
+        </ul>,
+        document.body,
+      )}
+
+      <span className="feed-sort-sep" aria-hidden="true" />
+    </div>
+  );
+}

src/components/DumpCard.tsx

@@ -4,6 +4,7 @@ import type { Dump } from "../model.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { dumpThumbnailUrl, dumpUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
+import { useCategories } from "../hooks/useCategories.ts";
 import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
 import FilePreview from "./FilePreview.tsx";
 import RichContentCard from "./RichContentCard.tsx";
@@ -28,6 +29,10 @@ export function DumpCard(
 ) {
   const navigate = useNavigate();
   const { token } = useAuth();
+  const { byId } = useCategories();
+  const dumpCategories = (dump.categoryIds ?? [])
+    .map((id) => byId.get(id))
+    .filter((c) => c !== undefined);
   const unread = !isOwner && isRecent(dump.createdAt) &&
     !isDumpVisited(dump.id);
 
@@ -115,6 +120,22 @@ export function DumpCard(
               </span>
             )}
           </div>
+          {dumpCategories.length > 0 && (
+            <div
+              className="dump-card-categories"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {dumpCategories.map((category) => (
+                <Link
+                  key={category.id}
+                  to={`/${category.slug}`}
+                  className="dump-card-category-chip"
+                >
+                  {category.name}
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </li>

src/components/DumpCreateModal.tsx

@@ -25,6 +25,7 @@ import { MediaPlayer } from "./MediaPlayer.tsx";
 import type { RichContent } from "../model.ts";
 import { FileDropZone } from "./FileDropZone.tsx";
 import { Modal } from "./Modal.tsx";
+import { CategorySelect } from "./CategorySelect.tsx";
 import { PlaylistMembershipPanel } from "./PlaylistMembershipPanel.tsx";
 import {
   expectOk,
@@ -117,6 +118,16 @@ export function DumpCreateModal(
   const url = watch("url");
   const file = watch("file");
 
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState<Set<string>>(
+    new Set(),
+  );
+  const toggleCategory = (id: string) =>
+    setSelectedCategoryIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
   // Playlist phase state
   const [memberships, setMemberships] = useState<PlaylistMembership[]>([]);
   const [playlistsLoading, setPlaylistsLoading] = useState(false);
@@ -219,6 +230,7 @@ export function DumpCreateModal(
         url: normalizedUrl,
         comment: comment.trim() || undefined,
         isPrivate,
+        categoryIds: [...selectedCategoryIds],
       };
       res = await authFetch(`${API_URL}/api/dumps`, {
         method: "POST",
@@ -235,6 +247,7 @@ export function DumpCreateModal(
       if (comment.trim()) formData.append("comment", comment.trim());
       if (title.trim()) formData.append("title", title.trim());
       formData.append("isPrivate", String(isPrivate));
+      formData.append("categoryIds", JSON.stringify([...selectedCategoryIds]));
       res = await authFetch(`${API_URL}/api/dumps`, {
         method: "POST",
         body: formData,
@@ -435,6 +448,12 @@ export function DumpCreateModal(
                   disabled={submitting}
                 />
 
+                <CategorySelect
+                  selected={selectedCategoryIds}
+                  onToggle={toggleCategory}
+                  disabled={submitting}
+                />
+
                 <VisibilityToggle<CreateValues>
                   name="isPublic"
                   disabled={submitting}

src/components/FeedTabBar.tsx

@@ -1,17 +1,30 @@
+import { useNavigate, useParams } from "react-router";
 import { Trans } from "@lingui/react/macro";
 import { useAuth } from "../hooks/useAuth.ts";
 import { FEED_TABS, type FeedTab } from "../config/feedTabs.ts";
-import { useTabParam } from "../hooks/useTabParam.ts";
 import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
 import { TabBar } from "./TabBar.tsx";
+import { CategorySwitcher } from "./CategorySwitcher.tsx";
 
+/**
+ * Feed sort tabs (hot/new/journal/followed). Navigation stays within the
+ * current scope: `~` for all categories, or the active category slug — so the
+ * tabs link to `/~/new`, `/music/new`, etc.
+ */
 export function FeedTabBar() {
   const { user } = useAuth();
+  const navigate = useNavigate();
+  const { categorySlug, feedTab } = useParams();
+
   const [preferredTab] = useDefaultFeedTab();
   const defaultTab: FeedTab = preferredTab === "followed" && !user
     ? "hot"
     : preferredTab;
-  const [tab, setTab] = useTabParam<FeedTab>(FEED_TABS, defaultTab);
+  const active: FeedTab = (FEED_TABS as readonly string[]).includes(feedTab ?? "")
+    ? (feedTab as FeedTab)
+    : defaultTab;
+
+  const scope = categorySlug ?? "~";
 
   const tabs = [
     { key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
@@ -25,8 +38,9 @@ export function FeedTabBar() {
   return (
     <TabBar
       tabs={tabs}
-      activeTab={tab}
-      onChange={setTab}
+      activeTab={active}
+      onChange={(t) => navigate(`/${scope}/${t}`)}
+      leading={<CategorySwitcher />}
     />
   );
 }

src/components/JournalCard.tsx

@@ -4,7 +4,7 @@ import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../model.ts";
 import { API_URL } from "../config/api.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
-import { dumpFileUrl, dumpUrl } from "../utils/urls.ts";
+import { dumpFileUrl, dumpThumbnailUrl, dumpUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
 import { hasQuote, hasThumbnail, type JournalShape } from "../utils/journalLayout.ts";
@@ -44,6 +44,8 @@ export function JournalCard(
   const rawThumbnail =
     dump.kind === "file" && dump.fileMime?.startsWith("image/")
       ? dumpFileUrl(dump, token)
+      : dump.thumbnailMime
+      ? dumpThumbnailUrl(dump, token)
       : (dump.richContent?.thumbnailUrl ?? null);
 
   // Route external HTTP thumbnails through the server proxy to avoid

src/components/TabBar.tsx

@@ -11,14 +11,19 @@ interface TabBarProps<T extends string> {
   onChange: (key: T) => void;
   className?: string;
   innerClassName?: string;
+  // Optional content rendered inside the row, before the tabs (e.g. a scope
+  // selector). Sits in the same flex line so it scrolls and aligns with them.
+  leading?: ReactNode;
 }
 
 export function TabBar<T extends string>(
-  { tabs, activeTab, onChange, className, innerClassName }: TabBarProps<T>,
+  { tabs, activeTab, onChange, className, innerClassName, leading }:
+    TabBarProps<T>,
 ) {
   return (
     <div className={`feed-sort-scroller${className ? ` ${className}` : ""}`}>
       <div className={`feed-sort${innerClassName ? ` ${innerClassName}` : ""}`}>
+        {leading}
         {tabs.map(({ key, label }) => (
           <button
             key={key}