Files
famapp/docs/superpowers/specs/2026-06-13-react-shadcn-fixes-design.md
T
ginnoir a312d4ce39
CI / checks (push) Successful in 12m55s
CI / build (push) Successful in 15m16s
fix: tighten sharing and shadcn composition
2026-06-13 05:20:01 -05:00

2.3 KiB

React and shadcn Fixes Design

Goal

Fix the audit findings that have security or correctness impact, and make a small targeted pass on shadcn Base UI composition without turning this into a broad visual rewrite.

Approaches Considered

  1. Security-first, targeted UI cleanup. Add a registry authorization hook for share links, implement it for current modules, fix Base Select usage, and clean up the compact dropdown/button issues found in the audit.
  2. Full shadcn migration sweep. Replace all .btn, raw forms, raw colors, and hand-rolled overlays in one pass. This would touch many dirty files and blur behavior changes with style churn.
  3. Security only. Fix share authorization and defer UI. This leaves known Base UI composition drift in place.

Chosen approach: Option 1. It fixes the exploitable path, handles the highest-confidence shadcn correctness issue, and leaves broad styling convergence to the existing shadcn-tier task docs.

Architecture

Share authorization belongs in the entity registry, not in _core switch statements. Each shareable entity registration will expose canShareEntity(id, ctx) and the generic createShareLink action will require it to return true before inserting a token.

Public share rendering will also pass the token household into loadForShare(id, ctx) so loaders can scope database reads. This prevents a bad token row from loading an unrelated entity by id alone.

UI Composition

The project uses shadcn base-nova, so Select roots need an items prop and SelectItem children should be wrapped in SelectGroup. The calendar and theme picker selects will be updated to that shape.

Compact menu/button drift will be cleaned where it does not require redesign: dropdown items should sit in DropdownMenuGroup, menu icons should rely on component icon sizing, and button icons should use data-icon.

Testing

Add a small Node test around the new share authorization helper first. The test will prove that missing or false registry authorization rejects share creation and that approved entities pass through. Typecheck and lint will cover module hook signatures and Base UI prop usage.

Out of Scope

  • Full replacement of .btn and raw garden forms.
  • Reworking command palette and quick-add sheet into shadcn dialogs.
  • Measuring bundle deltas or adding dynamic imports for global overlays.