fix: remove desktop translucency to reduce macOS compositing cost
This commit is contained in:
Bohdan Triapitsyn
@@ -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'
|
||||
)}
|
||||
|
||||
@@ -2194,9 +2194,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
const headerClassName = cn(
|
||||
'header-safe-area relative z-10',
|
||||
isMobile && 'border-b border-border/50',
|
||||
isMobile
|
||||
? 'bg-background'
|
||||
: (isDesktopApp ? 'bg-background' : 'bg-background/95 supports-[backdrop-filter]:bg-background/80')
|
||||
'bg-background'
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -626,7 +626,7 @@ export const MainLayout: React.FC = () => {
|
||||
className={cn(
|
||||
'main-content-safe-area h-[100dvh]',
|
||||
isMobile ? 'flex flex-col' : 'flex',
|
||||
isDesktopShellRuntime ? 'bg-transparent' : 'bg-background'
|
||||
'bg-background'
|
||||
)}
|
||||
>
|
||||
<CommandPalette />
|
||||
@@ -725,7 +725,7 @@ export const MainLayout: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
|
||||
'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
|
||||
'cursor-grab active:cursor-grabbing'
|
||||
)}
|
||||
aria-hidden={!mobileLeftDrawerOpen}
|
||||
@@ -776,7 +776,7 @@ export const MainLayout: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
|
||||
'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
|
||||
'cursor-grab active:cursor-grabbing'
|
||||
)}
|
||||
aria-hidden={!isRightSidebarOpen}
|
||||
@@ -834,9 +834,7 @@ export const MainLayout: React.FC = () => {
|
||||
<div className="flex flex-1 overflow-hidden relative">
|
||||
<div className={cn(
|
||||
'absolute inset-0 flex overflow-hidden',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar'
|
||||
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
|
||||
)}>
|
||||
{isSidebarOpen ? (
|
||||
<>
|
||||
@@ -844,9 +842,7 @@ export const MainLayout: React.FC = () => {
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'pointer-events-none absolute top-0 z-0',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar'
|
||||
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
|
||||
)}
|
||||
style={{
|
||||
left: `${visibleSidebarWidth}px`,
|
||||
@@ -860,9 +856,7 @@ export const MainLayout: React.FC = () => {
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'pointer-events-none absolute bottom-0 z-0',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar'
|
||||
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
|
||||
)}
|
||||
style={{
|
||||
left: `${visibleSidebarWidth}px`,
|
||||
@@ -880,9 +874,7 @@ export const MainLayout: React.FC = () => {
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'pointer-events-none absolute top-0 z-0',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar'
|
||||
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
|
||||
)}
|
||||
style={{
|
||||
right: `${visibleRightSidebarWidth}px`,
|
||||
@@ -896,9 +888,7 @@ export const MainLayout: React.FC = () => {
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'pointer-events-none absolute bottom-0 z-0',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar'
|
||||
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
|
||||
)}
|
||||
style={{
|
||||
right: `${visibleRightSidebarWidth}px`,
|
||||
@@ -919,9 +909,7 @@ export const MainLayout: React.FC = () => {
|
||||
</Sidebar>
|
||||
<div className={cn(
|
||||
'relative flex flex-1 min-w-0 flex-col overflow-hidden',
|
||||
isDesktopShellRuntime
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar',
|
||||
'bg-sidebar',
|
||||
isSidebarOpen && 'border-l border-border/50 rounded-tl-md rounded-bl-md',
|
||||
isRightSidebarOpen && 'border-r border-border/50 rounded-tr-md rounded-br-md'
|
||||
)}>
|
||||
|
||||
@@ -137,9 +137,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
|
||||
ref={sidebarRef}
|
||||
className={cn(
|
||||
'relative flex h-full overflow-hidden border-l border-border/40',
|
||||
isOpen
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar',
|
||||
'bg-sidebar',
|
||||
isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
|
||||
!isOpen && 'border-l-0',
|
||||
className,
|
||||
|
||||
@@ -26,8 +26,8 @@ export const RightSidebarTabs: React.FC = () => {
|
||||
], []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
|
||||
<div className="h-9 bg-transparent pt-1 px-2">
|
||||
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
|
||||
<div className="h-9 bg-sidebar pt-1 px-2">
|
||||
<SortableTabsStrip
|
||||
items={tabItems}
|
||||
activeId={rightSidebarTab}
|
||||
|
||||
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ErrorBoundary } from '../ui/ErrorBoundary';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { isDesktopShell } from '@/lib/desktop';
|
||||
|
||||
export const SIDEBAR_CONTENT_WIDTH = 250;
|
||||
const SIDEBAR_MIN_WIDTH = 250;
|
||||
@@ -18,7 +17,6 @@ interface SidebarProps {
|
||||
export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, className }) => {
|
||||
const sidebarWidth = useUIStore((state) => state.sidebarWidth);
|
||||
const setSidebarWidth = useUIStore((state) => state.setSidebarWidth);
|
||||
const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const startXRef = React.useRef(0);
|
||||
const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
|
||||
@@ -119,9 +117,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, cl
|
||||
ref={sidebarRef}
|
||||
className={cn(
|
||||
'relative flex h-full overflow-hidden border-r border-border/40',
|
||||
isDesktopApp
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
: 'bg-sidebar',
|
||||
'bg-sidebar',
|
||||
isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
|
||||
!isOpen && 'border-r-0',
|
||||
className,
|
||||
|
||||
@@ -49,7 +49,7 @@ export const SidebarContextSummary: React.FC<SidebarContextSummaryProps> = ({ cl
|
||||
}, [directoryFull]);
|
||||
|
||||
return (
|
||||
<div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar/60 px-3 py-2 backdrop-blur md:flex md:pb-2', className)}>
|
||||
<div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar px-3 py-2 md:flex md:pb-2', className)}>
|
||||
<span className="typography-meta text-muted-foreground">Session</span>
|
||||
<span className="typography-ui-label font-semibold text-foreground truncate" title={activeSessionTitle}>
|
||||
{activeSessionTitle}
|
||||
|
||||
@@ -769,7 +769,7 @@ export const SidebarFilesTree: React.FC = () => {
|
||||
const hasTree = Boolean(root && childrenByDir[root]);
|
||||
|
||||
return (
|
||||
<section className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
|
||||
<section className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
|
||||
<div className="flex items-center gap-2 border-b border-border/40 px-3 py-2">
|
||||
<div className="relative min-w-0 flex-1">
|
||||
<RiSearchLine className="pointer-events-none absolute left-2 top-2 h-4 w-4 text-muted-foreground" />
|
||||
|
||||
@@ -87,13 +87,9 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
|
||||
id={id}
|
||||
size="lg"
|
||||
className={cn(
|
||||
'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
|
||||
'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
|
||||
className,
|
||||
)}
|
||||
style={{
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
}}
|
||||
>
|
||||
<SelectValue placeholder="Select an agent" />
|
||||
</SelectTrigger>
|
||||
|
||||
@@ -328,13 +328,9 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
||||
size="sm"
|
||||
className={cn(
|
||||
CHIP_HEIGHT_CLASS,
|
||||
'!border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70',
|
||||
'!border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70',
|
||||
addButtonClassName,
|
||||
)}
|
||||
style={{
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
}}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<RiAddLine className="h-3.5 w-3.5 mr-1" />
|
||||
@@ -540,11 +536,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
|
||||
>
|
||||
<SelectTrigger
|
||||
size="chip"
|
||||
className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
|
||||
style={{
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
}}
|
||||
className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
|
||||
>
|
||||
<RiBrainAi3Line
|
||||
className={cn(
|
||||
|
||||
@@ -207,7 +207,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="h-full flex items-center justify-center bg-transparent p-8 relative cursor-default select-none"
|
||||
className="h-full flex items-center justify-center bg-background p-8 relative cursor-default select-none"
|
||||
onMouseDown={handleDragStart}
|
||||
>
|
||||
<div className="w-full space-y-4 text-center">
|
||||
@@ -241,7 +241,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
|
||||
)}
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="bg-background/60 backdrop-blur-sm border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
|
||||
<div className="bg-background border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
|
||||
{copied ? (
|
||||
<div className="flex items-center justify-center gap-2" style={{ color: 'var(--status-success)' }}>
|
||||
<RiCheckLine className="h-4 w-4" />
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { isDesktopShell, isVSCodeRuntime, isWebRuntime, desktopSetVibrancy } from '@/lib/desktop';
|
||||
import { isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { usePwaDetection } from '@/hooks/usePwaDetection';
|
||||
import { updateDesktopSettings } from '@/lib/persistence';
|
||||
@@ -209,7 +209,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
} = useThemeSystem();
|
||||
|
||||
const [themesReloading, setThemesReloading] = React.useState(false);
|
||||
const [vibrancyEnabled, setVibrancyEnabled] = React.useState(true);
|
||||
const [chatRenderPreviewTick, setChatRenderPreviewTick] = React.useState(0);
|
||||
const reportUsage = useUIStore(state => state.reportUsage);
|
||||
const setReportUsage = useUIStore(state => state.setReportUsage);
|
||||
@@ -220,28 +219,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
void updateDesktopSettings({ reportUsage: enabled });
|
||||
}, [setReportUsage]);
|
||||
|
||||
const isMacDesktop = React.useMemo(() => {
|
||||
if (!isDesktopShell()) return false;
|
||||
if (typeof navigator === 'undefined') return false;
|
||||
return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isMacDesktop) return;
|
||||
const stored = localStorage.getItem('desktopVibrancy');
|
||||
if (stored !== null) {
|
||||
setVibrancyEnabled(stored !== 'false');
|
||||
}
|
||||
}, [isMacDesktop]);
|
||||
|
||||
const handleVibrancyChange = React.useCallback((enabled: boolean) => {
|
||||
setVibrancyEnabled(enabled);
|
||||
localStorage.setItem('desktopVibrancy', String(enabled));
|
||||
document.documentElement.classList.toggle('no-vibrancy', !enabled);
|
||||
void desktopSetVibrancy(enabled);
|
||||
void updateDesktopSettings({ desktopVibrancy: enabled });
|
||||
}, []);
|
||||
|
||||
const shouldAnimateChatPreview = isSettingsDialogOpen
|
||||
&& (visibleSettings ? visibleSettings.includes('chatRenderMode') : true);
|
||||
|
||||
@@ -555,24 +532,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{isMacDesktop && (
|
||||
<div className="flex items-center gap-2 py-1.5">
|
||||
<Checkbox
|
||||
checked={vibrancyEnabled}
|
||||
onChange={handleVibrancyChange}
|
||||
ariaLabel="Toggle window vibrancy"
|
||||
/>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="typography-ui-label text-foreground">
|
||||
Window vibrancy
|
||||
</span>
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
Translucent window background. Disabling may reduce energy usage. Existing windows update immediately, but full transparency changes apply to new windows or after restart.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showPwaInstallNameSetting && (
|
||||
<div className="py-1.5 space-y-1.5">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
|
||||
@@ -17,7 +17,7 @@ export const ConfigUpdateOverlay: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md">
|
||||
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 bg-background/90">
|
||||
<OpenChamberLogo width={80} height={80} />
|
||||
<p className="typography-body text-muted-foreground">
|
||||
{message}
|
||||
|
||||
@@ -70,7 +70,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
|
||||
|
||||
const content = (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex flex-col bg-background/40 backdrop-blur-sm"
|
||||
className="fixed inset-0 z-50 flex flex-col bg-background/70"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
onClick={onClose}
|
||||
|
||||
@@ -50,7 +50,7 @@ const DialogOverlay = React.forwardRef<
|
||||
ref={ref}
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/50 backdrop-blur-md",
|
||||
"fixed inset-0 z-50 bg-black/50 dark:bg-black/75",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,8 +43,6 @@ function DropdownMenuContent({
|
||||
style={{
|
||||
backgroundColor: 'var(--surface-elevated)',
|
||||
color: 'var(--surface-elevated-foreground)',
|
||||
backdropFilter: 'blur(28px)',
|
||||
WebkitBackdropFilter: 'blur(28px)',
|
||||
...style,
|
||||
}}
|
||||
className={cn(
|
||||
@@ -238,8 +236,6 @@ function DropdownMenuSubContent({
|
||||
style={{
|
||||
backgroundColor: 'var(--surface-elevated)',
|
||||
color: 'var(--surface-elevated-foreground)',
|
||||
backdropFilter: 'blur(28px)',
|
||||
WebkitBackdropFilter: 'blur(28px)',
|
||||
}}
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-none",
|
||||
|
||||
@@ -67,8 +67,6 @@ function SelectContent({
|
||||
style={{
|
||||
backgroundColor: 'var(--surface-elevated)',
|
||||
color: 'var(--surface-elevated-foreground)',
|
||||
backdropFilter: 'blur(28px)',
|
||||
WebkitBackdropFilter: 'blur(28px)',
|
||||
}}
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-none transform-gpu will-change-transform",
|
||||
|
||||
@@ -15,8 +15,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
|
||||
toastOptions={{
|
||||
style: {
|
||||
borderRadius: "var(--radius-lg)",
|
||||
backdropFilter: 'blur(28px)',
|
||||
WebkitBackdropFilter: 'blur(28px)',
|
||||
},
|
||||
classNames: {
|
||||
toast: "rounded-[var(--radius-lg)]",
|
||||
|
||||
@@ -52,8 +52,6 @@ function TooltipContent({
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backdropFilter: 'blur(28px)',
|
||||
WebkitBackdropFilter: 'blur(28px)',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
|
||||
@@ -2214,7 +2214,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/95 p-1 shadow-sm backdrop-blur-sm">
|
||||
<div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
|
||||
{canEdit && textViewMode === 'edit' && (
|
||||
isSaving ? (
|
||||
<span className="flex items-center gap-1 px-1 text-muted-foreground typography-meta">
|
||||
|
||||
@@ -1941,7 +1941,7 @@ export const GitView: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col overflow-hidden', 'bg-transparent')} data-keyboard-avoid="true">
|
||||
<div className={cn('flex h-full flex-col overflow-hidden', 'bg-sidebar')} data-keyboard-avoid="true">
|
||||
<GitHeader
|
||||
status={status}
|
||||
localBranches={localBranches}
|
||||
@@ -1983,7 +1983,7 @@ export const GitView: React.FC = () => {
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<div className="h-full min-h-0 flex flex-col">
|
||||
<div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-transparent')}>
|
||||
<div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-sidebar')}>
|
||||
<div className={cn(isMobile ? 'h-10 px-1.5' : 'h-8 px-2')}>
|
||||
<SortableTabsStrip
|
||||
items={actionTabItems}
|
||||
|
||||
@@ -31,7 +31,7 @@ export const MultiRunWindow: React.FC<MultiRunWindowProps> = ({
|
||||
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
|
||||
<DialogPrimitive.Portal>
|
||||
<DialogPrimitive.Overlay
|
||||
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
|
||||
className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
|
||||
/>
|
||||
<DialogPrimitive.Content
|
||||
aria-describedby={descriptionId}
|
||||
|
||||
@@ -648,7 +648,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-2 border-b',
|
||||
'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
|
||||
'bg-background'
|
||||
)}
|
||||
style={{ borderColor: 'var(--interactive-border)' }}
|
||||
>
|
||||
@@ -730,7 +730,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
className={cn(
|
||||
'relative flex h-full min-h-0 flex-col overflow-hidden border-r',
|
||||
isDesktopApp
|
||||
? 'bg-[color:var(--sidebar-overlay-strong)] supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
|
||||
? 'bg-sidebar'
|
||||
: runtimeCtx.isVSCode
|
||||
? 'bg-background'
|
||||
: 'bg-sidebar',
|
||||
|
||||
@@ -29,7 +29,7 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
|
||||
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
|
||||
<DialogPrimitive.Portal>
|
||||
<DialogPrimitive.Overlay
|
||||
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
|
||||
className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
|
||||
/>
|
||||
<DialogPrimitive.Content
|
||||
aria-describedby={descriptionId}
|
||||
|
||||
Reference in New Issue
Block a user