Restyle tag list as accent-colored pill chips

Restyle tag list as accent-colored pill chips

#7 in tonybierman/dx-blog — merged 2026-05-29

Summary

Restyles the sidebar TagList to the pill-chip look, with the active tag filled in the site accent color.

  • Pill chips: rounded-full chips with a subtle dark fill, faint border, and comfortable padding (px-3.5 py-1.5), replacing the old thin text-xs outlines. Wrapped in flex flex-wrap gap-2.
  • Accent highlight: a new TagPill component fills the active tag (the feed currently being viewed) with bg-brand-500 + white text + a soft shadow-brand-500/30 glow. brand-* is the one-knob palette driven by --brand-hue, so the highlight automatically tracks whatever accent an admin selects in Appearance settings. Non-active chips get a brand-tinted border on hover. Active tag is detected via use_route::<Route>().
  • Visibility fix: TagFeed previously rendered no tag list in its sidebar, so the active state was never visible. Added TagList {} to its left slot — visiting /tag/<slug> now shows the full chip set with the current tag filled in the accent.
  • Dropped the leading # from the chips to match the intended look (the tag-feed page header still shows #tag).

Verification

  • cargo fmt --check, clippy -D warnings (server), and cargo check on both server and wasm targets pass locally.
  • Confirmed the new accent utility classes (bg-brand-500, border-brand-500, shadow-brand-500/30, bg-white/[0.06], hover:bg-white/10) are emitted by the Tailwind build.

🤖 Generated with Claude Code

Last updated 2026-05-30