BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove desktop translucency to reduce macOS compositing cost

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/Header.tsx
+1 -3
View File
@@ -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 (
packages/ui/src/components/layout/MainLayout.tsx
+9 -21
View File
@@ -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'
)}>
packages/ui/src/components/layout/RightSidebar.tsx
+1 -3
View File
@@ -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,
packages/ui/src/components/layout/RightSidebarTabs.tsx
+2 -2
View File
@@ -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}
packages/ui/src/components/layout/Sidebar.tsx
+1 -5
View File
@@ -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,
packages/ui/src/components/layout/SidebarContextSummary.tsx
+1 -1
View File
@@ -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}
packages/ui/src/components/layout/SidebarFilesTree.tsx
+1 -1
View File
@@ -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" />