Repository navigation
feat(frontend): redesign token aliases + brand decision - #763
Merged
Merged
Conversation
Lands PR 1 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10) — pure CSS-additive change, zero JSX touched. Tokens (packages/frontend/src/index.css @theme) Short-form aliases added alongside existing --color-lucky-* tokens so redesign JSX classes (bg-sidebar, text-text-strong, border-panel, etc.) work verbatim against the Vite SPA. Same hex values as the existing --lucky-* tokens. Both naming systems coexist during the migration; --lucky-* aliases get dropped in a later cleanup PR after every page has been ported. Added: --color-canvas/sidebar/panel/elevated/highlight, --color-brand-discord/brand-accent, --color-text-strong/body/muted/subtle, --shadow-soft/panel. Utilities Net-new @Utility blocks: discord-gradient (landing hero text), lucky-focus-ring (3px blurple focus). Existing surface-panel/card/elevated/glass kept as-is; same values. Brand guide (packages/frontend/branding/BRANDING_GUIDE.md) Adopts the redesign's resolved decision: dual accent (Discord blurple primary + neon pink secondary) and Sora display + Manrope body + JetBrains Mono — matching what the live CSS has been shipping. Drops the stale "single accent, Inter only" language. See docs/decisions/2026-04-21-redesign-port-target.md. Validation - npm run type:check: clean - npm run lint: clean (0 warnings) - npm run build: 732ms, main bundle 50.97 KB gzipped (+0.29 KB vs pre-i18n baseline) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
LucasSantana-Dev
enabled auto-merge (squash)
April 22, 2026 05:20
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 1 minutes and 23 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Size Change: 0 B Total Size: 362 kB ℹ️ View Unchanged
|
|
This was referenced Apr 22, 2026
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 22, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 22, 2026
… docs (#772) Adds the load-bearing redesign-migration documents that were sitting untracked in the working tree: - docs/decisions/2026-04-21-redesign-port-target.md — accepted ADR (Vite-port + dual accent + Sora/Manrope). Already marked [x] in docs/specs/2026-04-21-backlog-map/tasks.md; already driving the landed #763 (token aliases) and #765 (SectionHeader) PRs. - docs/specs/2026-04-21-backlog-map/{spec,tasks}.md — structured backlog spec tracking the 2026-04-21 map + redesign migration work. - docs/FRONTEND_AI_STUDIO_CONTEXT.md, docs/LOVABLE_PROMPT.md — referenced from the ADR's "Related" section and "Execution plan" section; preserving them alongside their index. Also gitignores packages/*/*.zip — packages/frontend.zip is a 25 MB AI-Studio export, not source, and shouldn't be tracked. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3 tasks done
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 22, 2026
…ce (#775) * docs(backlog): mark completed 2026-04-21 backlog items with PR evidence 10 of the 16 tasks in docs/specs/2026-04-21-backlog-map/tasks.md already shipped — the unchecked state was sending future agents down dead ends. Splits the list into Open / Completed, cites the landing PR for each done item, and promotes the truly-remaining work to the top. Completed: - A-R2 token aliases (#763) - A-R3 SectionHeader eyebrowIcon + statusBand (#765) - PR #729 webhook coverage (ef06904) - tar Dependabot alerts (#766, replacing #755 which was closed) - PR queue rebase sweep — 14 PRs landed 2026-04-22 - Shared Top.gg constants (already in packages/shared/src/constants/topgg.ts) - validateBody + unskipped tests (#769) - Frontend token/font decision (#763) - Sonar coverage on #737 and #740 (both merged) Still open: follow-redirects/hono lock refresh, release/tag drift (production-visible), autoplay diversity dedup, queueManipulation refactor, /integrations page collapse (B-R4), BRANDING_GUIDE update (D-R2), per-page ports (13 pages). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(backlog): normalize version prefix (v2.6.148) per CodeRabbit Use `v` prefix consistently alongside `v2.6.132`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 22, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 22, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 24, 2026
…#781) * feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(frontend): improve accessibility polish and test stability Promotes semantic navigation and interaction patterns across shell, config, and landing for a safer keyboard-first UX while preserving visual intent. Updates frontend tests and isolates Music page async side effects so Vitest exits cleanly in CI. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 of 2 tasks
LucasSantana-Dev
added a commit
that referenced
this pull request
Apr 25, 2026
`packages/frontend/branding/BRANDING_GUIDE.md` was updated for the 2026-04-21 redesign port-target decision (#763) but the parallel `DESIGN_SYSTEM.md` was missed: - "Single accent — Discord Blurple" + "single accent" principle still read as Inter-only, blurple-only. - Typography section still listed Inter as the only font. `packages/frontend/src/index.css` already loads Sora + Manrope + JetBrains Mono at line 1 and ships both `--color-brand-discord` (`#5865f2`) and `--color-brand-accent` (`#ec4899`); the doc now matches what's actually live. Adds a brief note that the short-form `--color-*` aliases coexist with the long-form `--lucky-*` tokens during the page-port migration, with a cleanup PR queued for after the ports land — same scope as the ADR. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
) Lands PR 1 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10) — pure CSS-additive change, zero JSX touched. Tokens (packages/frontend/src/index.css @theme) Short-form aliases added alongside existing --color-lucky-* tokens so redesign JSX classes (bg-sidebar, text-text-strong, border-panel, etc.) work verbatim against the Vite SPA. Same hex values as the existing --lucky-* tokens. Both naming systems coexist during the migration; --lucky-* aliases get dropped in a later cleanup PR after every page has been ported. Added: --color-canvas/sidebar/panel/elevated/highlight, --color-brand-discord/brand-accent, --color-text-strong/body/muted/subtle, --shadow-soft/panel. Utilities Net-new @Utility blocks: discord-gradient (landing hero text), lucky-focus-ring (3px blurple focus). Existing surface-panel/card/elevated/glass kept as-is; same values. Brand guide (packages/frontend/branding/BRANDING_GUIDE.md) Adopts the redesign's resolved decision: dual accent (Discord blurple primary + neon pink secondary) and Sora display + Manrope body + JetBrains Mono — matching what the live CSS has been shipping. Drops the stale "single accent, Inter only" language. See docs/decisions/2026-04-21-redesign-port-target.md. Validation - npm run type:check: clean - npm run lint: clean (0 warnings) - npm run build: 732ms, main bundle 50.97 KB gzipped (+0.29 KB vs pre-i18n baseline) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
… docs (#772) Adds the load-bearing redesign-migration documents that were sitting untracked in the working tree: - docs/decisions/2026-04-21-redesign-port-target.md — accepted ADR (Vite-port + dual accent + Sora/Manrope). Already marked [x] in docs/specs/2026-04-21-backlog-map/tasks.md; already driving the landed #763 (token aliases) and #765 (SectionHeader) PRs. - docs/specs/2026-04-21-backlog-map/{spec,tasks}.md — structured backlog spec tracking the 2026-04-21 map + redesign migration work. - docs/FRONTEND_AI_STUDIO_CONTEXT.md, docs/LOVABLE_PROMPT.md — referenced from the ADR's "Related" section and "Execution plan" section; preserving them alongside their index. Also gitignores packages/*/*.zip — packages/frontend.zip is a 25 MB AI-Studio export, not source, and shouldn't be tracked. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
…ce (#775) * docs(backlog): mark completed 2026-04-21 backlog items with PR evidence 10 of the 16 tasks in docs/specs/2026-04-21-backlog-map/tasks.md already shipped — the unchecked state was sending future agents down dead ends. Splits the list into Open / Completed, cites the landing PR for each done item, and promotes the truly-remaining work to the top. Completed: - A-R2 token aliases (#763) - A-R3 SectionHeader eyebrowIcon + statusBand (#765) - PR #729 webhook coverage (a8edbe8) - tar Dependabot alerts (#766, replacing #755 which was closed) - PR queue rebase sweep — 14 PRs landed 2026-04-22 - Shared Top.gg constants (already in packages/shared/src/constants/topgg.ts) - validateBody + unskipped tests (#769) - Frontend token/font decision (#763) - Sonar coverage on #737 and #740 (both merged) Still open: follow-redirects/hono lock refresh, release/tag drift (production-visible), autoplay diversity dedup, queueManipulation refactor, /integrations page collapse (B-R4), BRANDING_GUIDE update (D-R2), per-page ports (13 pages). * docs(backlog): normalize version prefix (v2.6.148) per CodeRabbit Use `v` prefix consistently alongside `v2.6.132`. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
* feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
…#781) * feat(frontend): SectionHeader eyebrowIcon + statusBand PR 2 of the 8-PR Lucky redesign port plan (docs/LOVABLE_PROMPT.md §10, infrastructure phase). Pure additive extension to packages/frontend/src/ components/ui/SectionHeader.tsx — no existing props changed, no existing usages broken. New props - eyebrowIcon?: ReactNode — renders before the eyebrow text at 16×16 in the lucky-text-tertiary tone. The canonical redesign pattern (mono uppercase eyebrow + lucide icon — e.g. ShieldAlert + "Moderation Security"). - statusBand?: StatusBandTile[] — renders a responsive 2-up-md-4-up grid below the header with each tile showing uppercase mono label + colored status. Uses the new short-form tokens landed in PR #763 (bg-sidebar, border-panel, bg-canvas, bg-elevated, bg-highlight) so no further token work needed. StatusBandTone New exported type: 'success' | 'brand' | 'accent' | 'warning' | 'error' | 'muted'. Mapped to lucky-success/brand/brand-strong/warning/error/ text-tertiary respectively. Page ports pass one tone per tile based on real data (moderation health, automation count, music connection, etc.) — no mocked status strings, per LOVABLE_PROMPT.md §4.2. Tests (src/components/ui/DesignPrimitives.test.tsx) New test: "renders section header with eyebrow icon + status band". Covers eyebrowIcon render, band role=list with aria-label=Module status, per-tile label + status text, and per-tile icon slot. Existing test "renders section header with actions" kept as-is — all original props still work. Accessibility - Eyebrow icon: aria-hidden=true (decorative; the eyebrow text carries the semantics). - Status band: role=list + listitems, aria-label="Module status" for screen readers. - Tile icons: aria-hidden=true. Bundle impact: 4 new SVG icons pulled in via lucide-react in tests only; zero net bundle growth at runtime (the component imports no icons itself). Validation - npm run type:check: clean - npm run lint: clean, 0 warnings - npx vitest run src/components/ui/DesignPrimitives.test.tsx: 6/6 passing - npm run build: clean, 4.42s * fix(frontend): stable React keys for SectionHeader statusBand tiles Addresses CodeRabbit minor: key={tile.label} could collide if two tiles share a label. Adds optional id?: string to StatusBandTile interface and falls back to a deterministic ${label}:${status}:${index} composite key. packages/frontend/src/components/ui/SectionHeader.tsx - StatusBandTile gains optional id field - map callback receives (tile, index); key uses tile.id ?? composite * feat(frontend): improve accessibility polish and test stability Promotes semantic navigation and interaction patterns across shell, config, and landing for a safer keyboard-first UX while preserving visual intent. Updates frontend tests and isolates Music page async side effects so Vitest exits cleanly in CI. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LucasSantana-Dev
added a commit
that referenced
this pull request
May 13, 2026
`packages/frontend/branding/BRANDING_GUIDE.md` was updated for the 2026-04-21 redesign port-target decision (#763) but the parallel `DESIGN_SYSTEM.md` was missed: - "Single accent — Discord Blurple" + "single accent" principle still read as Inter-only, blurple-only. - Typography section still listed Inter as the only font. `packages/frontend/src/index.css` already loads Sora + Manrope + JetBrains Mono at line 1 and ships both `--color-brand-discord` (`#5865f2`) and `--color-brand-accent` (`#ec4899`); the doc now matches what's actually live. Adds a brief note that the short-form `--color-*` aliases coexist with the long-form `--lucky-*` tokens during the page-port migration, with a cleanup PR queued for after the ports land — same scope as the ADR. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR 1 of the 8-PR Lucky redesign port plan (
docs/LOVABLE_PROMPT.md§10). Pure CSS-additive change — zero JSX touched, no tests changed.--color-canvas,--color-sidebar,--color-panel,--color-brand-discord,--color-brand-accent,--color-text-strong/body/muted/subtle,--shadow-soft/panel) to the@themeblock alongside existing--color-lucky-*tokens. Same hex values — both naming systems coexist during the port; legacy aliases get dropped in a later cleanup PR.@utility discord-gradient(landing hero text) and@utility lucky-focus-ring(3px blurple focus). Existingsurface-panel/card/elevated/glasskept as-is.branding/BRANDING_GUIDE.mdto match the resolved brand decision: dual accent (blurple primary + neon pink secondary) + Sora display + Manrope body + JetBrains Mono. Drops the stale "single accent, Inter only" language. Anchored againstdocs/decisions/2026-04-21-redesign-port-target.md.Why this first
Lands the vocabulary needed for subsequent page-port PRs (§5 of LOVABLE_PROMPT.md: DashboardOverview → Moderation → Music → AutoMod → ServerLogs → CustomCommands → AutoMessages → EmbedBuilder → ReactionRoles → Levels → Starboard → Settings → Integrations). Once tokens exist, redesign JSX copies in verbatim.
Test plan
npm run type:check→ cleannpm run lint→ clean, 0 warningsnpm run build→ 732ms, main bundle 50.97 KB gzipped (+0.29 KB vs pre-i18n baseline, well within +5 KB budget)Not in this PR
--lucky-*alias removal (PR 14, after ports complete).🤖 Generated with Claude Code