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

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

@ -12,7 +12,6 @@ import {
hasProjectCliInteraction,
} from "@/features/projects/projectCliInteractionActivity";
import { publishProjectIconChanged } from "@/features/projects/projectIcons";
import { publishProjectThemeChanged } from "@/features/projects/projectTheme";
import {
PluginCommandRegistry,
PluginLayoutRegistry,
@ -217,16 +216,10 @@ describe("CustomAgentChatView", () => {
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)");
expect(watermark.textContent).toBe("🐍");
expect(watermark.parentElement?.className).toContain("project-cell-illustration-area");
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.getPropertyValue("--project-illustration-tint")).toBe("#945DF0");
});
await waitFor(() => expect(watermark.textContent).toBe("⭐"));
expect(screen.getByTestId("custom-agent-chat-scroll").className).toContain("z-10");
expect(screen.getByTestId("custom-agent-chat-composer").className).toContain("bg-raised/40");
});