Component library reorg, Figma registry updates, and cleanup
Overview
This PR reorganizes app/components into clearer buckets (asset, cards, controls, modals, navigation, sections, type, utility), aligns naming with Figma-oriented conventions, moves admin-only UI (Web Vitals dashboard) next to its route, and refreshes docs and Cursor rules. It also applies a focused ESLint/React fix pass (hook deps, modal composition, next/image for the string-URL icon fallback) and removes stale TODO(figma) placeholders from container docstrings in favor of explicit paths and canonical-code notes.
Asset: Avatar/Icon under asset/; Icon uses next/image with unoptimized when SVG imports resolve to a string URL ( satisfies @next/next/no-img-element).
Type / sections: Adds type/CommunityRule, type/Section, type/TextBlock; SectionHeader lives under type/; removes unused CommunityRuleDocument / DecisionMakingSidebar / Separator and Context menu components and their stories/tests.
Modals / controls:ModalHeader / ModalFooter under modals/; InfoMessageBox under controls/; CreateFlowFooter / CreateFlowTopNav stay under navigation but paths updated; useCreateModalA11y effect deps include dialogRef for exhaustive-deps.
Admin:WebVitalsDashboard colocated under app/(admin)/monitor/_components/.
App flows: Create flow, marketing home, profile, monitor, and not-found imports updated for new paths; buildPublishPayload / templateReviewMapping and related guards adjusted; messages updated (cardSteps, menu rename, removal of numberedCards keys where replaced).
Assets: Public vector SVGs moved under public/assets/vector/ with normalized filenames.
Quality / rules
Dialog.container: render children as JSX children of the view (avoid duplicate prop pattern).
TemplateReviewCard:useMemo dependency list fixed for compiler / react-hooks rules.
.cursor/rules/component-props.mdc: Figma traceability without recommending TODO(figma); other docs/rules (component-structure, routes, create-flow, AGENTS, README, docs/README, create-flow.md, figma-component-registry, backend tickets doc) updated for the new layout.
Tests & Storybook: Paths and names updated (CardSteps, Top, Selection, Step, etc.); removed tests for deleted components; added/adjusted coverage for Section, TextBlock, CommunityRule where applicable.
How to Test
Install and run:npm install if needed; npm run dev for the app; npm run storybook for component stories.
Verify flows: Home (step cards / CardSteps), create flow (top nav, footer, final review, template review), profile, /monitor (Web Vitals dashboard), marketing /rules/[id], and not-found if you hit an unknown route.
Spot-check: Icons in UI (including any path that hits the string-URL SVG branch), create-modal focus trap and escape-to-close, template review chips if you touch that screen.
Notes
Figma: Container docstrings now favor Figma: "…" (node-id) and short “canonical code under …” notes; filling in real node IDs everywhere can be a follow-up.
Linear / CR-104: If issue CR-104 should mirror docs/figma-component-registry.md, update the issue body separately; the repo doc is the source of truth for the Type/registry section.
# Component library reorg, Figma registry updates, and cleanup
## Overview
This PR reorganizes `app/components` into clearer buckets (asset, cards, controls, modals, navigation, sections, type, utility), aligns naming with Figma-oriented conventions, moves admin-only UI (Web Vitals dashboard) next to its route, and refreshes docs and Cursor rules. It also applies a focused ESLint/React fix pass (hook deps, modal composition, `next/image` for the string-URL icon fallback) and removes stale `TODO(figma)` placeholders from container docstrings in favor of explicit paths and canonical-code notes.
## Changes
- **Structure and naming**
- **Cards:** `IconCard` → `Icon`, `MiniCard` → `Mini`, `RuleCard` → `Rule`, `Card` → `Selection`, `NumberCard` → `Step`; **`NumberedCards` → `CardSteps`** (home / marketing step lists).
- **Navigation:** `MenuBar` → `Menu`, `MenuBarItem` → `MenuItem`, `TopNav` → `Top` (including pathname-aware wrapper).
- **Asset:** Avatar/Icon under `asset/`; **`Icon`** uses **`next/image`** with **`unoptimized`** when SVG imports resolve to a string URL ( satisfies `@next/next/no-img-element`).
- **Type / sections:** Adds **`type/CommunityRule`**, **`type/Section`**, **`type/TextBlock`**; **`SectionHeader`** lives under **`type/`**; removes unused **`CommunityRuleDocument`** / **`DecisionMakingSidebar`** / **`Separator`** and **Context menu** components and their stories/tests.
- **Modals / controls:** **`ModalHeader`** / **`ModalFooter`** under `modals/`; **`InfoMessageBox`** under `controls/`; **`CreateFlowFooter`** / **`CreateFlowTopNav`** stay under navigation but paths updated; **`useCreateModalA11y`** effect deps include **`dialogRef`** for exhaustive-deps.
- **Admin:** **`WebVitalsDashboard`** colocated under **`app/(admin)/monitor/_components/`**.
- **App flows:** Create flow, marketing home, profile, monitor, and not-found imports updated for new paths; **`buildPublishPayload`** / **`templateReviewMapping`** and related guards adjusted; **`messages`** updated (`cardSteps`, `menu` rename, removal of `numberedCards` keys where replaced).
- **Assets:** Public vector SVGs moved under **`public/assets/vector/`** with normalized filenames.
- **Quality / rules**
- **`Dialog.container`:** render **`children`** as JSX children of the view (avoid duplicate prop pattern).
- **`TemplateReviewCard`:** `useMemo` dependency list fixed for compiler / `react-hooks` rules.
- **`.cursor/rules/component-props.mdc`:** Figma traceability without recommending `TODO(figma)`; other docs/rules (`component-structure`, `routes`, `create-flow`, **AGENTS**, **README**, **docs/README**, **create-flow.md**, **figma-component-registry**, backend tickets doc) updated for the new layout.
- **Tests & Storybook:** Paths and names updated (`CardSteps`, `Top`, `Selection`, `Step`, etc.); removed tests for deleted components; added/adjusted coverage for **`Section`**, **`TextBlock`**, **`CommunityRule`** where applicable.
## How to Test
1. **Install and run:** `npm install` if needed; `npm run dev` for the app; `npm run storybook` for component stories.
2. **Verify flows:** Home (step cards / CardSteps), create flow (top nav, footer, final review, template review), profile, **`/monitor`** (Web Vitals dashboard), marketing **`/rules/[id]`**, and **`not-found`** if you hit an unknown route.
3. **Checks (per AGENTS.md):**
- `npx tsc --noEmit`
- `npx vitest run`
- `npx eslint app/components --ext .ts,.tsx` (expect clean; confirms Icon + a11y hook warnings addressed)
- `npx next build`
4. **Spot-check:** Icons in UI (including any path that hits the string-URL SVG branch), create-modal focus trap and escape-to-close, template review chips if you touch that screen.
## Notes
- **Figma:** Container docstrings now favor `Figma: "…" (node-id)` and short “canonical code under …” notes; filling in **real node IDs** everywhere can be a follow-up.
- **Linear / CR-104:** If issue **CR-104** should mirror `docs/figma-component-registry.md`, update the issue body separately; the repo doc is the source of truth for the Type/registry section.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Component library reorg, Figma registry updates, and cleanup
Overview
This PR reorganizes
app/componentsinto clearer buckets (asset, cards, controls, modals, navigation, sections, type, utility), aligns naming with Figma-oriented conventions, moves admin-only UI (Web Vitals dashboard) next to its route, and refreshes docs and Cursor rules. It also applies a focused ESLint/React fix pass (hook deps, modal composition,next/imagefor the string-URL icon fallback) and removes staleTODO(figma)placeholders from container docstrings in favor of explicit paths and canonical-code notes.Changes
IconCard→Icon,MiniCard→Mini,RuleCard→Rule,Card→Selection,NumberCard→Step;NumberedCards→CardSteps(home / marketing step lists).MenuBar→Menu,MenuBarItem→MenuItem,TopNav→Top(including pathname-aware wrapper).asset/;Iconusesnext/imagewithunoptimizedwhen SVG imports resolve to a string URL ( satisfies@next/next/no-img-element).type/CommunityRule,type/Section,type/TextBlock;SectionHeaderlives undertype/; removes unusedCommunityRuleDocument/DecisionMakingSidebar/Separatorand Context menu components and their stories/tests.ModalHeader/ModalFooterundermodals/;InfoMessageBoxundercontrols/;CreateFlowFooter/CreateFlowTopNavstay under navigation but paths updated;useCreateModalA11yeffect deps includedialogReffor exhaustive-deps.WebVitalsDashboardcolocated underapp/(admin)/monitor/_components/.buildPublishPayload/templateReviewMappingand related guards adjusted;messagesupdated (cardSteps,menurename, removal ofnumberedCardskeys where replaced).public/assets/vector/with normalized filenames.Dialog.container: renderchildrenas JSX children of the view (avoid duplicate prop pattern).TemplateReviewCard:useMemodependency list fixed for compiler /react-hooksrules..cursor/rules/component-props.mdc: Figma traceability without recommendingTODO(figma); other docs/rules (component-structure,routes,create-flow, AGENTS, README, docs/README, create-flow.md, figma-component-registry, backend tickets doc) updated for the new layout.CardSteps,Top,Selection,Step, etc.); removed tests for deleted components; added/adjusted coverage forSection,TextBlock,CommunityRulewhere applicable.How to Test
npm installif needed;npm run devfor the app;npm run storybookfor component stories./monitor(Web Vitals dashboard), marketing/rules/[id], andnot-foundif you hit an unknown route.npx tsc --noEmitnpx vitest runnpx eslint app/components --ext .ts,.tsx(expect clean; confirms Icon + a11y hook warnings addressed)npx next buildNotes
Figma: "…" (node-id)and short “canonical code under …” notes; filling in real node IDs everywhere can be a follow-up.docs/figma-component-registry.md, update the issue body separately; the repo doc is the source of truth for the Type/registry section.