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

fix(frontend): render project watermark icons full-size above the composer with detail-preserving grayscale — #353 (QA verte)

Browse Source 
Cause: the monochrome-first treatment from #351 flattened the emoji
artwork through an alpha mask (transparent fill + zero-offset
text-shadow), dropping internal details (the ghost lost its tongue and
eyes), and the watermark box did not occupy the full space available
above the chat composer.
Fix: new .project-cell-illustration-area container (container-type:
size) wrapping the scroll zone so the absolute watermark spans the
whole region between the agent toolbar and the composer; glyph keeps
the OS full-colour emoji artwork as source and is neutralised with a
non-destructive CSS filter (grayscale(1) contrast(0.92)) so internal
tones and details stay visible in black and white; glyph sized to
min(100cqw - 8px, 100cqh - 12px); text-variation selector U+FE0E
stripping removed (full emoji preserved) and project-theme tint
plumbing (accessibleProjectAccent/onProjectThemeChanged) dropped as
superseded by grayscale; empty label and overlay z-layering untouched.
QA verte reconfirmée par Git: npm test -- CustomAgentChatView.test.tsx
projectIcons.test.tsx 96/96, npm run typecheck OK, npm run build OK,
npm test 1396/1396, git diff --check OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Blomios
2026-09-14 07:31:44 +02:00
parent 3413664d3d
commit 4581470fb3
5 changed files with 102 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/features/projects/projectIcons.test.tsx
View File

@ -43,7 +43,7 @@ describe("project emoji catalogue", () => {
expect(getByRole("img").dataset.projectIcon).toBe("none");
});
it("requests a monochrome text presentation for watermark emoji only", () => {
it("keeps the full emoji artwork available for grayscale watermark rendering", () => {
const { getByTestId } = render(
<>
<ProjectIcon icon={{ set: "emoji", name: "star" }} data-testid="product-icon" />
@ -57,8 +57,8 @@ describe("project emoji catalogue", () => {
);
expect(getByTestId("product-icon").textContent).toBe("⭐");
expect(getByTestId("watermark-icon").textContent).toBe("⭐\uFE0E");
expect((getByTestId("watermark-icon") as HTMLElement).style.fontFamily).toContain("system-ui");
expect(getByTestId("watermark-icon").textContent).toBe("⭐");
expect((getByTestId("watermark-icon") as HTMLElement).style.fontFamily).toContain("Color Emoji");
});
});