| author |  maria-rcks <maria@kuuro.net> 2026-07-22 23:20:12-04:00 |
| committer | maria <maria@kuuro.net> 2026-07-23 01:13:29-04:00 |
| log | d330759f58bad677b9296d4dd9134ccc902821ce |
| tree | 4c3ec1af06a7ee587050e5a90679b7e7ffedfa75 |
| parent | 5961d36769b1147604ac0fb847f7c058697447e0 |
fix(web): add glass composer alerts
3 files changed, 43 insertions(+), 3 deletions(-)
apps
web
src
components
- index.css
apps/web/src/components/chat/ComposerBannerStack.test.tsx+4
| ... | @@ -33,6 +33,10 @@ describe("ComposerBannerStack", () => { | ... | @@ -33,6 +33,10 @@ describe("ComposerBannerStack", () => { |
| 33 | const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />); | 33 | const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />); |
| 34 | 34 | ||
| 35 | expect(markup).not.toContain("data-composer-banner-stack-expanded-items"); | 35 | expect(markup).not.toContain("data-composer-banner-stack-expanded-items"); |
| 36 | expect(markup).toContain("alert-glass"); | ||
| 37 | expect(markup).toContain('data-variant="warning"'); | ||
| 38 | expect(markup).toContain("transform:none"); | ||
| 39 | expect(markup).not.toContain("will-change:transform"); | ||
| 36 | }); | 40 | }); |
| 37 | 41 | ||
| 38 | it("applies item-specific surface and action layout classes", () => { | 42 | it("applies item-specific surface and action layout classes", () => { |
apps/web/src/components/chat/ComposerBannerStack.tsx+6-3
| ... | @@ -16,11 +16,10 @@ const stackedExitStyle = { | ... | @@ -16,11 +16,10 @@ const stackedExitStyle = { |
| 16 | } satisfies CSSProperties; | 16 | } satisfies CSSProperties; |
| 17 | const restingStyle = { | 17 | const restingStyle = { |
| 18 | opacity: 1, | 18 | opacity: 1, |
| 19 | transform: "translate3d(0, 0, 0)", | 19 | transform: "none", |
| 20 | } satisfies CSSProperties; | 20 | } satisfies CSSProperties; |
| 21 | const exitTransitionStyle = { | 21 | const exitTransitionStyle = { |
| 22 | transition: `transform ${DISMISS_TRANSITION_MS}ms ease-in, opacity ${DISMISS_TRANSITION_MS}ms ease-in`, | 22 | transition: `transform ${DISMISS_TRANSITION_MS}ms ease-in, opacity ${DISMISS_TRANSITION_MS}ms ease-in`, |
| 23 | willChange: "transform, opacity", | ||
| 24 | } satisfies CSSProperties; | 23 | } satisfies CSSProperties; |
| 25 | 24 | ||
| 26 | export interface ComposerBannerStackItem { | 25 | export interface ComposerBannerStackItem { |
| ... | @@ -173,7 +172,11 @@ function ComposerBannerStackAlert({ | ... | @@ -173,7 +172,11 @@ function ComposerBannerStackAlert({ |
| 173 | const dismissOnly = item.onDismiss && !item.actions; | 172 | const dismissOnly = item.onDismiss && !item.actions; |
| 174 | 173 | ||
| 175 | return ( | 174 | return ( |
| 176 | <Alert variant={item.variant} className={item.className}> | 175 | <Alert |
| 176 | variant={item.variant} | ||
| 177 | className={cn("alert-glass", item.className)} | ||
| 178 | data-variant={item.variant} | ||
| 179 | > | ||
| 177 | {item.icon} | 180 | {item.icon} |
| 178 | <AlertTitle>{item.title}</AlertTitle> | 181 | <AlertTitle>{item.title}</AlertTitle> |
| 179 | {item.description ? <AlertDescription>{item.description}</AlertDescription> : null} | 182 | {item.description ? <AlertDescription>{item.description}</AlertDescription> : null} |
apps/web/src/index.css+33
| ... | @@ -375,6 +375,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -375,6 +375,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 375 | backdrop-filter: blur(16px); | 375 | backdrop-filter: blur(16px); |
| 376 | } | 376 | } |
| 377 | 377 | ||
| 378 | .alert-glass { | ||
| 379 | --alert-glass-tint: transparent; | ||
| 380 | |||
| 381 | background: | ||
| 382 | linear-gradient( | ||
| 383 | color-mix(in srgb, var(--alert-glass-tint) 4%, transparent), | ||
| 384 | color-mix(in srgb, var(--alert-glass-tint) 4%, transparent) | ||
| 385 | ), | ||
| 386 | color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important; | ||
| 387 | -webkit-backdrop-filter: blur(16px) saturate(1.1); | ||
| 388 | backdrop-filter: blur(16px) saturate(1.1); | ||
| 389 | } | ||
| 390 | |||
| 391 | .alert-glass[data-variant="error"] { | ||
| 392 | --alert-glass-tint: var(--destructive); | ||
| 393 | } | ||
| 394 | |||
| 395 | .alert-glass[data-variant="info"] { | ||
| 396 | --alert-glass-tint: var(--info); | ||
| 397 | } | ||
| 398 | |||
| 399 | .alert-glass[data-variant="success"] { | ||
| 400 | --alert-glass-tint: var(--success); | ||
| 401 | } | ||
| 402 | |||
| 403 | .alert-glass[data-variant="warning"] { | ||
| 404 | --alert-glass-tint: var(--warning); | ||
| 405 | } | ||
| 406 | |||
| 378 | .dropdown-glass, | 407 | .dropdown-glass, |
| 379 | .dialog-glass, | 408 | .dialog-glass, |
| 380 | .workflow-dialog-surface, | 409 | .workflow-dialog-surface, |
| ... | @@ -566,6 +595,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -566,6 +595,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 566 | 595 | ||
| 567 | @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { | 596 | @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { |
| 568 | .chat-composer-glass, | 597 | .chat-composer-glass, |
| 598 | .alert-glass { | ||
| 599 | background: var(--background) !important; | ||
| 600 | } | ||
| 601 | |||
| 569 | .chat-composer-glass-host { | 602 | .chat-composer-glass-host { |
| 570 | background: var(--background); | 603 | background: var(--background); |
| 571 | } | 604 | } |