fix: remove desktop translucency to reduce macOS compositing cost

This commit is contained in:
Bohdan Triapitsyn
2026-04-07 21:46:38 +03:00
parent 605e4bf42c
commit 952132a08d
96 changed files with 163 additions and 401 deletions
@@ -664,7 +664,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -727,7 +727,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -763,7 +763,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -808,7 +808,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
{!isDesktopExpandedInput && sessionMessages.length > 0 && (
@@ -3387,7 +3387,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
onDrop={handleDrop}
>
{isDragging && (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-xl">
<div className="absolute inset-0 z-50 flex items-center justify-center bg-background/90 rounded-xl">
<div className="text-center">
<div className="inline-flex justify-center">
<button
@@ -474,8 +474,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
)}
style={{
paddingBottom: 'calc(0.5rem + env(safe-area-inset-bottom, 0px))',
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
>
<button
@@ -547,10 +545,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
)}
style={{
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
>
<button
onClick={handleAddToChat}
@@ -420,7 +420,7 @@ const ImagePreviewDialog: React.FC<{
<div
aria-hidden="true"
className={cn(
'absolute inset-0 bg-black/25 backdrop-blur-md',
'absolute inset-0 bg-black/40',
isTransitioning && 'transition-opacity duration-150 ease-out',
isVisible ? 'opacity-100' : 'opacity-0'
)}
@@ -433,7 +433,7 @@ const ImagePreviewDialog: React.FC<{
type="button"
onMouseDown={(event) => event.stopPropagation()}
onClick={showPrevious}
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
aria-label="Previous image"
>
<RiArrowLeftSLine className="h-6 w-6" />
@@ -442,7 +442,7 @@ const ImagePreviewDialog: React.FC<{
type="button"
onMouseDown={(event) => event.stopPropagation()}
onClick={showNext}
className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
aria-label="Next image"
>
<RiArrowRightSLine className="h-6 w-6" />
@@ -891,7 +891,7 @@ const MermaidPreviewDialog: React.FC<{
<div
aria-hidden="true"
className={cn(
'absolute inset-0 bg-black/25 backdrop-blur-md',
'absolute inset-0 bg-black/40',
isTransitioning && 'transition-opacity duration-150 ease-out',
isVisible ? 'opacity-100' : 'opacity-0'
)}