Document Types catalog UI — Settings → Matter Configuration

Why mirror Filing Types instead of inventing a page

Every settings catalog (Forums, Filing types, Proceeding types, Participant labels) is the same shape: a SettingsPageHeader + SettingsToolbar (SegmentedFilter Live/Archived tabs + SettingsSearch) + a table with a row-actions menu + a create/edit Sheet + a delete AlertDialog. Reinventing that chrome is the exact drift the repo doctrine bans. Document types compose the same primitives and the same data pattern (server-prefetch → hydrate → TanStack), so the page reads identically to its siblings.

The one real difference: firm-wide, so no reference column

AI fields (Mode-2/3 fill & review) are EPIC-009 and live on documents, not on the document-type catalog — there are no AI columns to render here. This catalog is purely deterministic (Mode-1).

The data pattern (canonical, copied verbatim)

• Archive / unarchive / delete are optimistic: onMutate flips availability (or drops the row) in the list cache so the row jumps tabs instantly, reconciling on settle and rolling back on error — same as Filing types.
• The list query key (appListDocumentTypesQueryKey({ includeArchived: true })) is shared by the RSC prefetch and the client read, so hydration never refetches.
• HR-21: the gateway fetches as unknown and runs every payload through assertContract(documentType*Schema, …) from src/gen — no as T at the trust boundary.

Storybook-first leaf components stories shipped

Each leaf was storied before live wiring, mirroring the filing-types stories with mock fixtures (no Clerk, no gateway):

• DocumentTypesTable — Default, With descriptions, Live, Archived tab, In use (delete disabled), Read only, Empty, Long text.
• DocumentTypeSheet — Add, Edit, Saving, With error.

The empty / zero-row state is a first-class story (and table branch), not an afterthought — the new-firm catalog is exactly the first real run.

i18n & tokens

• New DocumentTypes namespace + SettingsNav.documentTypes added to both messages/en.json and messages/hi.json. No hardcoded display strings.
• No color literals — semantic tokens only (var(--token) / token-backed utilities). Color / hardcoded-copy scans clean on the new files.
• Nav item placed immediately after Filing types under Matter configuration, with the Files glyph (sibling to Filing types' FileText).

Files

Verification

• pnpm tsc --noEmit clean
• pnpm lint 0 errors (one pre-existing avatar warning, unrelated)
• pnpm vitest run 527 passing (incl. 5 new document-type contract tests)
• pnpm build ok — all 5 routes registered (page + 4 API)

Files changed

27 file(s), +1776 / -0 lines