Repo cleanup pass: assets, FeatureGrid, templates, create-flow UX, and API tests #53

Merged
an.di merged 7 commits from adilallo/Cleanup into main 2026-05-22 20:14:15 +00:00
Owner

Overview

This PR is a broad maintenance and design-alignment pass on adilallo/Cleanup. It consolidates static assets under predictable paths, aligns marketing sections (especially FeatureGrid and home template cards) with Figma, replaces legacy window.confirm in the create flow with an accessible async pattern, adds API route test coverage, and documents local verification tooling (knip, static assets).

Changes

Static assets & lib/assetUtils.ts

  • Reorganized public/assets/ into marketing/, logos/, share/, shapes/, icons/, etc.
  • Removed legacy PNG/raster duplicates; added SVG replacements (avatars, section numbers, partner logos, feature grid icons).
  • Added docs/guides/static-assets.md cataloging asset paths and consumers.
  • Centralized path helpers in lib/assetUtils.ts (featurePanelPath, featurePanelLayout, partner logos, case study art, etc.).
  • Added downloadable governance booklet PDF for About/Book section.
  • Swapped favicon to Community Rule logo.

FeatureGrid (Figma 18633:49999 / 18632:10911 / 18847:22410)

  • Kept existing responsive layout/spacing (2×2 mobile → 1×4 tablet → horizontal desktop).
  • Updated styling: invert-brand tile colors, secondary surface shell, grain texture on icons (lib/svgGrainFilter.ts).
  • Responsive ContentLockup typography per breakpoint (18/14 mobile → 24/16 at md+).
  • Fixed mobile 2×2 row spacing (labels no longer overlap panels below).
  • Per-icon aspect ratios from Figma (FEATURE_PANEL_LAYOUT); tools dove orientation fixed via rotate-180 -scale-x-100 on raw SVG asset.
  • New SVGs: public/assets/marketing/feature-{support,exercises,guidance,tools}.svg.

Home template cards (Figma 21764:16435 / 22083:855584)

  • Fixed Quadratic Governance invert surface token (--color-surface-inverse-brand-secondary → yellow200).
  • Home RuleStack now features: Consensus, Do-ocracy, Devolution, Quadratic Governance (seed + catalog slugs updated).
  • Tests updated across RuleStack, page-flow, user-journey, E2E, and governance catalog.

Create flow

  • Split monolithic create components into container/view/types (CustomMethodCardFieldBlocksSummary, wizard blocks list, upload row, etc.).
  • Replaced window.confirm with useAsyncConfirm / useDiscardCustomizeConfirm on customize-exit screens and FinalReviewChipEditModal.
  • CreateFlowTopNav refactor; footer/top-nav i18n additions.
  • Minor upload screen asset path fix.

Components & i18n

  • Removed unused LanguageSwitcher component + stories/tests.
  • Localized hardcoded strings (LogoWall, Top nav, footer, feature grid, controls chrome, etc.).
  • Share modal restored to SVG glyphs under public/assets/share/.
  • Figma docstrings added across containers; QuoteStatementDecor uses shared grain filter.

Testing & tooling

  • 23 new API route tests: auth session, magic-link request, uploads POST/GET, rules stakeholder mutations, health.
  • FeatureGrid, Mini, ContentLockup, governance catalog, LogoWall, blog, page-flow, user-journey coverage updates.
  • Removed disabled legacy tests (MarkdownProcessing.test.js.disabled, content.test.js.disabled).
  • Added npm run knip config + docs in AGENTS.md and docs/testing-guide.md (local only; no Gitea Actions CI — no runners on Cloudron).

Storybook

  • New/updated stories: Book, Stat, Shapes, SelectOption, TripleTextBlock, AskOrganizerInquiry, Dialog, Popover; FeatureGrid/Mini/Rule/LogoWall/QuoteBlock updates.

Other

  • useAsyncConfirm hook for reusable confirm dialogs.
  • Backend roadmap / ops docs touch-ups; knip.json entries expanded.
  • Prisma seed featured-template flags aligned with home slugs.

Screenshots

Screenshot 2026-05-22 at 1.55.46 PM.png Screenshot 2026-05-22 at 2.11.43 PM.png

How to Test

  1. Install & run

    npm install
    npm run dev
    
  2. Verify locally

    npx tsc --noEmit
    npm run knip
    npx vitest run
    npx next build
    
  3. Home page

    • FeatureGrid: lockup typography scales at mobile/tablet/desktop; 2×2 grid spacing on ~320px; invert-brand tiles; grain on icons; dove right-side up.
    • RuleStack: shows Consensus, Do-ocracy, Devolution, Quadratic Governance with correct template surface colors.
  4. Create flow

    • Enter customize on Communication Methods / Membership / Conflict / Decision Approaches / Core Values; attempt exit — confirm uses in-app modal, not browser window.confirm.
    • Final review chip edit discard confirm behaves the same.
  5. Storybook (optional)

    npm run storybook
    
    • Check Components/Sections/FeatureGrid, Components/Cards/Mini, Components/Cards/Rule.
  6. Share modal — icons render from public/assets/share/*.svg.

## Overview This PR is a broad maintenance and design-alignment pass on `adilallo/Cleanup`. It consolidates static assets under predictable paths, aligns marketing sections (especially FeatureGrid and home template cards) with Figma, replaces legacy `window.confirm` in the create flow with an accessible async pattern, adds API route test coverage, and documents local verification tooling (`knip`, static assets). ## Changes ### Static assets & `lib/assetUtils.ts` - Reorganized `public/assets/` into `marketing/`, `logos/`, `share/`, `shapes/`, `icons/`, etc. - Removed legacy PNG/raster duplicates; added SVG replacements (avatars, section numbers, partner logos, feature grid icons). - Added `docs/guides/static-assets.md` cataloging asset paths and consumers. - Centralized path helpers in `lib/assetUtils.ts` (`featurePanelPath`, `featurePanelLayout`, partner logos, case study art, etc.). - Added downloadable governance booklet PDF for About/Book section. - Swapped favicon to Community Rule logo. ### FeatureGrid (Figma 18633:49999 / 18632:10911 / 18847:22410) - Kept existing responsive layout/spacing (2×2 mobile → 1×4 tablet → horizontal desktop). - Updated styling: invert-brand tile colors, secondary surface shell, grain texture on icons (`lib/svgGrainFilter.ts`). - Responsive ContentLockup typography per breakpoint (18/14 mobile → 24/16 at `md+`). - Fixed mobile 2×2 row spacing (labels no longer overlap panels below). - Per-icon aspect ratios from Figma (`FEATURE_PANEL_LAYOUT`); tools dove orientation fixed via `rotate-180 -scale-x-100` on raw SVG asset. - New SVGs: `public/assets/marketing/feature-{support,exercises,guidance,tools}.svg`. ### Home template cards (Figma 21764:16435 / 22083:855584) - Fixed Quadratic Governance invert surface token (`--color-surface-inverse-brand-secondary` → yellow200). - Home RuleStack now features: Consensus, Do-ocracy, Devolution, Quadratic Governance (seed + catalog slugs updated). - Tests updated across RuleStack, page-flow, user-journey, E2E, and governance catalog. ### Create flow - Split monolithic create components into container/view/types (`CustomMethodCardFieldBlocksSummary`, wizard blocks list, upload row, etc.). - Replaced `window.confirm` with `useAsyncConfirm` / `useDiscardCustomizeConfirm` on customize-exit screens and `FinalReviewChipEditModal`. - CreateFlowTopNav refactor; footer/top-nav i18n additions. - Minor upload screen asset path fix. ### Components & i18n - Removed unused `LanguageSwitcher` component + stories/tests. - Localized hardcoded strings (LogoWall, Top nav, footer, feature grid, controls chrome, etc.). - Share modal restored to SVG glyphs under `public/assets/share/`. - Figma docstrings added across containers; QuoteStatementDecor uses shared grain filter. ### Testing & tooling - **23 new API route tests**: auth session, magic-link request, uploads POST/GET, rules stakeholder mutations, health. - FeatureGrid, Mini, ContentLockup, governance catalog, LogoWall, blog, page-flow, user-journey coverage updates. - Removed disabled legacy tests (`MarkdownProcessing.test.js.disabled`, `content.test.js.disabled`). - Added `npm run knip` config + docs in `AGENTS.md` and `docs/testing-guide.md` (local only; no Gitea Actions CI — no runners on Cloudron). ### Storybook - New/updated stories: Book, Stat, Shapes, SelectOption, TripleTextBlock, AskOrganizerInquiry, Dialog, Popover; FeatureGrid/Mini/Rule/LogoWall/QuoteBlock updates. ### Other - `useAsyncConfirm` hook for reusable confirm dialogs. - Backend roadmap / ops docs touch-ups; `knip.json` entries expanded. - Prisma seed featured-template flags aligned with home slugs. ## Screenshots <img width="878" alt="Screenshot 2026-05-22 at 1.55.46 PM.png" src="attachments/05ea3203-3e32-4f83-8b19-cd0eabdeea35"> <img width="878" alt="Screenshot 2026-05-22 at 2.11.43 PM.png" src="attachments/eb9dbf0f-cc81-4524-aaa5-71774028b83b"> ## How to Test 1. **Install & run** ```bash npm install npm run dev ``` 2. **Verify locally** ```bash npx tsc --noEmit npm run knip npx vitest run npx next build ``` 3. **Home page** - FeatureGrid: lockup typography scales at mobile/tablet/desktop; 2×2 grid spacing on ~320px; invert-brand tiles; grain on icons; dove right-side up. - RuleStack: shows Consensus, Do-ocracy, Devolution, Quadratic Governance with correct template surface colors. 4. **Create flow** - Enter customize on Communication Methods / Membership / Conflict / Decision Approaches / Core Values; attempt exit — confirm uses in-app modal, not browser `window.confirm`. - Final review chip edit discard confirm behaves the same. 5. **Storybook** (optional) ```bash npm run storybook ``` - Check `Components/Sections/FeatureGrid`, `Components/Cards/Mini`, `Components/Cards/Rule`. 6. **Share modal** — icons render from `public/assets/share/*.svg`.
an.di added 7 commits 2026-05-22 20:12:04 +00:00
an.di self-assigned this 2026-05-22 20:12:16 +00:00
an.di merged commit cef7c98205 into main 2026-05-22 20:14:15 +00:00
an.di deleted branch adilallo/Cleanup 2026-05-22 20:14:16 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#53