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

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:
2026-09-14 07:31:44 +02:00
parent 3413664d3d
commit 4581470fb3
5 changed files with 102 additions and 135 deletions

View File

@ -107,23 +107,21 @@
container-type: size;
}
.project-cell-illustration-area {
container-type: size;
}
.project-cell-illustration {
inset: 6px 4px;
color: transparent;
opacity: 0.045;
opacity: 0.085;
}
.project-cell-illustration[data-color-mode="project"] {
opacity: 0.065;
}
/* Emoji fonts may ignore the text-variation selector and retain their own
palette. Painting a zero-offset text shadow through the glyph alpha mask
guarantees one semantic project tint without depending on the host font. */
/* Keep the operating system's full-colour emoji artwork as the source image:
grayscale preserves internal tones and details that a monochrome alpha
mask (for example color: transparent + text-shadow) would flatten. */
.project-cell-illustration__glyph {
color: transparent;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 0 var(--project-illustration-tint, var(--color-muted));
filter: grayscale(1) contrast(0.92);
font-size: min(calc(100cqw - 8px), calc(100cqh - 12px)) !important;
}
.project-cell-empty-label {