blomios/IdeA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): expand empty-state watermark to full cell and tint monochrome project icons by project color — #351 (QA verte)

Browse Source 
Cause: the empty-state watermark filled only 92% of a centered box and
kept residual palette colors from host emoji fonts, non-compliant with
the monochrome-first project icon rule (#351 user capture).
Fix: illustration spans the cell with 6px/4px insets and an unclipped
glyph at min(88cqw, 88cqh); emoji painted as monochrome silhouettes via
transparent fill + zero-offset text-shadow tint
(--project-illustration-tint) derived from accessibleProjectAccent when
a project color exists, neutral muted fallback otherwise; empty label
anchored bottom-center and hidden first on constrained containers
(@container 280px width / 240px height); overlay priorities, composer
and z-layering untouched.
QA verte reconfirmée par Git: npm test -- CustomAgentChatView.test.tsx
80/80, git diff --check; QA: ProjectSettingsPanel 12/12, typecheck,
build OK (warning Vite chunk >500 kB préexistant).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blomios
2026-09-13 19:04:32 +02:00
parent 64da043a8e
commit 08c05c1841
3 changed files with 67 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/features/agents/CustomAgentChatView.test.tsx
View File

@ -212,16 +212,19 @@ describe("CustomAgentChatView", () => {
const watermark = await screen.findByTestId("project-icon-watermark");
expect(watermark.style.pointerEvents).toBe("none");
expect(watermark.getAttribute("aria-hidden")).toBe("true");
expect((watermark.firstElementChild as HTMLElement | null)?.style.width).toBe("92%");
expect((watermark.firstElementChild as HTMLElement | null)?.style.height).toBe("92%");
expect(watermark.className).toContain("project-cell-illustration");
expect((watermark.firstElementChild as HTMLElement | null)?.style.width).toBe("100%");
expect((watermark.firstElementChild as HTMLElement | null)?.style.height).toBe("100%");
expect((watermark.firstElementChild as HTMLElement | null)?.className).toContain("project-cell-illustration__glyph");
expect(watermark.textContent).toBe("🐍\uFE0E");
expect(watermark.dataset.colorMode).toBe("monochrome");
expect(watermark.style.getPropertyValue("--project-illustration-tint")).toBe("var(--color-muted, #9aa7b4)");
publishProjectIconChanged({ projectId: "project-1", icon: { set: "emoji", name: "star" } });
await waitFor(() => expect(watermark.textContent).toBe("⭐\uFE0E"));
publishProjectThemeChanged({ projectId: "project-1", themeColor: "#7c3aed" });
await waitFor(() => {
expect(watermark.dataset.colorMode).toBe("project");
expect(watermark.style.color).toBe("rgb(124, 58, 237)");
expect(watermark.style.getPropertyValue("--project-illustration-tint")).toBe("#945DF0");
});
expect(screen.getByTestId("custom-agent-chat-scroll").className).toContain("z-10");
expect(screen.getByTestId("custom-agent-chat-composer").className).toContain("bg-raised/40");