v3: src/ is documented like api/ and shared/, and the reference covers the whole repository — the frontend had no module docs, JSDoc on some components and hooks and not on others, props typed inline in half the components and in private interfaces in the rest, // comments on declarations, and no return types on 147 exported functions, so deno doc --lint over src/ found 637 errors. The rule api/ follows is applied to every non-test module of src/: a /** … @module */ block, JSDoc on every export and every field of an exported interface, /** */ for declarations and // for notes, verbs for functions ("Renders…" for a component), parameters named in the prose, {@link} only for symbols in scope, and a page's JSDoc names its route and who may see it (App.tsx's module doc lists the route table). For deno doc to show them, every exported function states its return type: components React.JSX.Element (or | null, or a portal), memo and forwardRef components their exotic types, contexts React.Context<…>, and a hook returning several things a documented Use<Name>Result interface (useAuth, useRequiredAuth, useFading, useEmojiTrigger, useMentionAutocomplete, useDumpCardLink, usePlayRichContent; FeedCacheResult, YouTubePlaylistControls and UseApiFormReturn are renamed to match). Every component that takes props takes an exported, documented <Name>Props interface — the 64 inline prop types are lifted into one, DumpFeed gets DumpFeedProps extending MainFeedProps. React types go through the global React namespace: the four default imports of react are gone, since deno doc can't follow them. Two duplicates go too: useMentionAutocomplete's UserResult was shared/'s UserSuggestion, and JournalCard re-exported JournalShape for no one; i18n.ts no longer re-exports Lingui's i18n, which its three users now import from @lingui/core. deno task doc and doc:lint now take src/ (but its tests and the generated locales), the index page gains a Frontend section linking every module by layer and domain, mod.test.ts walks src/ as well, and the docs workflow runs on changes to src/. deno doc doesn't document npm packages, so it takes a type imported from one — react-hook-form's FieldValues in the form fields, frimousse's SkinTone — for a private one; doc:lint now goes through doc-lint.ts, which fails on every diagnostic but those, 25 of them. The README states the frontend's part of the rule. No behaviour changes; 205 backend and 628 frontend tests pass, and tsc, deno check and deno lint are clean.

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

src/pages/PlaylistDetail.tsx

@@ -1,3 +1,9 @@
+/**
+ * A playlist's page.
+ *
+ * @module
+ */
+
 import {
   useCallback,
   useEffect,
@@ -47,12 +53,19 @@ import { FormError } from "../components/form/FormError.tsx";
 import { SubmitButton } from "../components/form/SubmitButton.tsx";
 import { useApiForm } from "../hooks/form/useApiForm.ts";
 
+/** The page's state: loading, failed, or loaded with the playlist. */
 type LoadState =
   | { status: "loading" }
   | { status: "error"; error: string }
   | { status: "loaded"; playlist: PlaylistWithDumps };
 
-export function PlaylistDetail() {
+/**
+ * Renders `/playlists/:playlistId` (an id or a slug), for anyone who may see
+ * the playlist: its cover, title, description and owner, a follow button, and
+ * its dumps, kept live by the socket. Its owner or a moderator can edit or
+ * delete it, drag its dumps into a new order, and remove one (with an undo).
+ */
+export function PlaylistDetail(): React.JSX.Element {
   const { playlistId } = useParams<{ playlistId: string }>();
   const navigate = useNavigate();
   const { user, authFetch, token, mediaToken } = useAuth();
@@ -801,6 +814,7 @@ export function PlaylistDetail() {
   );
 }
 
+/** The props of {@link PlaylistEditForm}. */
 interface PlaylistEditFormProps {
   playlist: PlaylistWithDumps;
   onCancel: () => void;
@@ -808,6 +822,7 @@ interface PlaylistEditFormProps {
   onSaved: (playlist: Playlist) => void;
 }
 
+/** The form's fields. */
 interface EditValues {
   title: string;
   description: string;
@@ -815,6 +830,9 @@ interface EditValues {
   image: File | null;
 }
 
+/**
+ * Renders the playlist's edit form: title, description, visibility and cover.
+ */
 function PlaylistEditForm(
   { playlist, onCancel, onRequestDelete, onSaved }: PlaylistEditFormProps,
 ) {