Virtualize long taxonomy lists in the admin editor

Virtualize long taxonomy lists in the admin editor

#60 in Riparion/riparion-cms — merged 2026-06-04

What

The Admin > Taxonomy Tags column rendered every row at full page height with always-on Edit/Delete buttons. The list grows with the blog (47 tags in dev), so it became a wall of rows the admin had to scroll the whole page past — everything surfaced at once.

This windows long lists into a bounded, virtualized scroll panel so only the rows near the viewport are in the DOM and the rest reveal on scroll.

How

  • Install the catalog virtual_list component (dx components add virtual_list).
  • In TaxonomyEditor, branch the loaded list on length:
    • <= VIRTUALIZE_THRESHOLD (24) → plain rendering, unchanged (Categories, small tag sets — no odd fixed-height box around a handful of rows).
    • above it → VirtualList in a max-h-[28rem] bordered scroll panel.
  • Extract the per-row markup into a shared TaxonomyRow component so both branches render identically (inline rename, delete-with-confirm, error surfacing all preserved).
  • In the narrower panel the rename input + buttons don't fit on one line, so in edit mode Save/Cancel stack below the field; Cancel matches the Edit button's outline style.

Presentation-only — no server, DB, or model changes.

Notes

  • dx components add clobbered assets/dx-components-theme.css with the stock catalog default; reverted so the app theme bridge stays intact (that file is not part of this PR).
  • The generated component uses a plain class (not css_module), so no LocalStylesheets pin is needed.

Verification

  • cargo fmt --check clean; clippy --features server,sqlite --all-targets -D warnings clean; web/wasm32 type-checks clean.
  • Visually confirmed in the running app: Categories render plainly, Tags virtualize into the bounded scroll panel, scrolling reveals further rows, and inline edit (stacked Save/Cancel) works.

🤖 Generated with Claude Code

Last updated 2026-06-05