famapp/docs/superpowers/plans/2026-06-13-react-shadcn-fixes.md

React and shadcn Fixes Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Fix the security-sensitive share-link authorization gap and the highest-confidence shadcn Base UI composition issues from the audit.

Architecture: Add registry-level share authorization callbacks and require them in the generic share service before token creation and shared data loading. Update current modules to provide household/user-scoped authorization and share loaders, then align selected UI call sites with shadcn Base API.

Tech Stack: Next.js 15 App Router, TypeScript, Drizzle, shadcn/ui Base UI, Tailwind v4, Node test runner via tsx --test.

---

Task 1: Share Authorization Helper

Files:

• Create: tests/unit/share-authorization.test.ts

• Create: src/modules/_core/share-authorization.ts

• Modify: src/modules/_core/module.ts

• Step 1: Write the failing test

Create tests for missing callbacks, denied callbacks, and allowed callbacks.

• Step 2: Run test to verify it fails

Run: pnpm exec tsx --test tests/unit/share-authorization.test.ts Expected: failure because share-authorization.ts does not exist.

• Step 3: Implement the helper and registry types

Add ShareContext, ensureEntityShareAuthorized, EntityTypeRegistration.canShareEntity, and scoped loadForShare context typing.

• Step 4: Run test to verify it passes

Run: pnpm exec tsx --test tests/unit/share-authorization.test.ts Expected: all tests pass.

Task 2: Wire Authorization Into Share Service

Files:

• Modify: src/modules/_core/share.ts

• Modify: src/app/s/[token]/page.tsx

• Step 1: Call ensureEntityShareAuthorized in createShareLink

Require the active user and household to be authorized before token insertion.

• Step 2: Pass household context into public share loading

Call entityReg.loadForShare(resolved.entityId, { householdId: resolved.householdId }).

• Step 3: Run typecheck

Run: pnpm typecheck Expected: type errors until module adapters are updated.

Task 3: Add Module Share Adapters

Files:

• Modify: src/modules/calendar/manifest.tsx

• Modify: src/modules/calendar/server/share-queries.ts

• Modify: src/modules/lists/manifest.tsx

• Modify: src/modules/lists/server/share-queries.ts

• Modify: src/modules/notes/manifest.tsx

• Modify: src/modules/notes/server/share-queries.ts

• Modify: src/modules/garden/manifest.tsx

• Modify: src/modules/garden/server/share-queries.ts

• Step 1: Implement canShareEntity for every shareable entity

Use household scoping and existing private-calendar rules.

• Step 2: Scope loadForShare queries by token household

Require the public token household to match the entity household.

• Step 3: Run typecheck

Run: pnpm typecheck Expected: pass.

Task 4: Fix Base UI Select Composition

Files:

• Modify: src/modules/calendar/components/calendar-shell.tsx

• Modify: src/components/theme-picker.tsx

• Step 1: Add items arrays and SelectGroup wrappers

Keep existing labels and values; do not redesign layout.

• Step 2: Run typecheck

Run: pnpm typecheck Expected: pass.

Task 5: Targeted shadcn Menu and Icon Cleanup

Files:

• Modify: src/components/dashboard-switcher.tsx

• Modify: src/components/dashboard-editor.tsx

• Modify: src/components/share-button.tsx

• Step 1: Wrap dropdown items in DropdownMenuGroup

Preserve menu behavior.

• Step 2: Replace icon sizing inside shadcn buttons/menu items

Use data-icon where icons sit in Button; remove explicit size-4 mr-* from dropdown item icons.

• Step 3: Run lint

Run: pnpm lint Expected: no new errors; existing warnings may remain.

Task 6: Final Verification

Files:

• No direct edits.

• Step 1: Run targeted test

Run: pnpm exec tsx --test tests/unit/share-authorization.test.ts Expected: pass.

• Step 2: Run typecheck

Run: pnpm typecheck Expected: pass.

• Step 3: Run lint

Run: pnpm lint Expected: exit 0; warnings only if pre-existing.