From fcb2a1151fd149a2d2ec6eb12900812db4eb4e21 Mon Sep 17 00:00:00 2001
From: Serhii Vecherenko <SDSLeon999@gmail.com>
Date: Mon, 15 Jun 2026 14:42:38 -0700
Subject: [PATCH 1/2] fix(sidebar): keep overlay panels opaque and fade docked
 content

- Use full-height opaque backgrounds for floating overlay sidebars
- Fade docked panel content while keeping the aside shell opaque
- Default sidebar translucency to on
---
 src/renderer/styles.css                       | 37 +++++++++++--
 .../parts/AppShell/parts/AsideSlot.tsx        | 55 +++++++++++++------
 src/shared/settings.ts                        |  6 +-
 3 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index ee9714b2..eafbdeab 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -1059,6 +1059,12 @@ html[data-native-material="on"] .lightcode-sidebar-aside {
 html[data-native-material="on"] .lightcode-sidebar-aside .lightcode-overlay-header {
   background: transparent;
 }
+/* The floating overlay sidebar sits over dimmed content, where a translucent
+   tint reads muddy and hurts legibility — paint it fully opaque (the glass tint
+   at 100%). Docked sidebars keep the translucent tint set above. */
+html[data-native-material="on"] .lightcode-sidebar-aside--overlay {
+  background: var(--content-background);
+}
 /* Windows-only frosting bump. DWM acrylic blurs whatever sits behind the window,
    so the backdrop bleeds through the tint and drags the sidebar toward it: a dark
    theme over a bright window washes out toward grey, while a light theme over a
@@ -1091,12 +1097,10 @@ html[data-sidebar-glass="on"]:not([data-native-material="on"])
   .lightcode-overlay-header {
   background: transparent;
 }
-/* Real blur only for the floating overlay sidebar (it sits over content). */
-@supports (backdrop-filter: blur(1px)) {
-  html[data-sidebar-glass="on"]:not([data-native-material="on"]) .lightcode-sidebar-aside--overlay {
-    background: color-mix(in oklab, var(--sidebar-background) 70%, transparent);
-    backdrop-filter: blur(18px) saturate(1.5);
-  }
+/* In-app fallback overlay sidebar: opaque too — it floats over dimmed content,
+   so the faux-glass tint/blur used for the docked fallback would read muddy. */
+html[data-sidebar-glass="on"]:not([data-native-material="on"]) .lightcode-sidebar-aside--overlay {
+  background: var(--sidebar-background);
 }
 
 /* Overlays (settings, git review, file editor, …) reuse the same AppShell, so
@@ -2405,6 +2409,27 @@ html[data-platform="darwin"] .lightcode-content-over-drag-region--drag {
   }
 }
 
+/* Docked right/bottom panel content fade. The panel's <aside> background stays
+   opaque (so the OS blur never shows through); only this content layer fades.
+   Keyframes, not a transition, because the layer is clipped to zero by the
+   aside's collapsing size and a transition's start value is unreliable there. */
+@keyframes lightcode-panel-content-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes lightcode-panel-content-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 .lightcode-image-lightbox__image {
   max-width: calc(100vw - 6rem);
   max-height: calc(100vh - 6rem);
diff --git a/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx b/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
index 4e9c1491..b454cfb5 100644
--- a/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
+++ b/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
@@ -39,8 +39,8 @@ export function AsideSlot(props: {
   // Docked path: width/height animates open <-> closed.
   const dockedDisplayWidth = !isHorizontal ? (isOpen ? targetWidth : 0) : undefined;
   const dockedDisplayHeight = isHorizontal ? (isOpen ? targetHeight : 0) : undefined;
-  // Show: Faster fade in (300ms), fast width/height (150ms)
-  // Hide: Fast width/height (150ms), fast-ish fade out (200ms)
+  // Show: content fades in (300ms) over the opaque background, fast size (150ms).
+  // Hide: fast size (150ms), fast-ish content fade out (200ms).
   // During an active drag, useResizablePanels writes transitionDuration: 0ms directly
   // to the panel element so per-frame width/height updates aren't smoothed.
   const dockedFadeDuration = isOpen ? "300ms" : "200ms";
@@ -49,31 +49,58 @@ export function AsideSlot(props: {
   let asideClassName: string;
   let asideStyle: CSSProperties;
   if (overlay) {
-    asideClassName = `fixed bottom-0 right-0 z-50 flex flex-col overflow-hidden border-l border-[color:var(--border)] bg-[var(--content-background)] shadow-2xl transition-transform duration-300 will-change-transform ${
+    asideClassName = `fixed inset-y-0 right-0 z-50 flex flex-col overflow-hidden border-l border-[color:var(--border)] bg-[var(--content-background)] shadow-2xl transition-transform duration-300 will-change-transform ${
       overlayReady ? "translate-x-0" : "translate-x-full"
     }`;
     asideStyle = {
-      top: overlayTop,
+      // Span the full window height so the opaque panel background reaches the
+      // very top — otherwise the strip above it shows the content-header row
+      // dimmed by the dialog backdrop, reading as a darker seam. The panel's own
+      // content is pushed below the OS titlebar/window-controls row via padding
+      // so its header buttons don't collide with the min/max/close controls.
+      paddingTop: overlayTop,
       width: targetWidth,
       minWidth: targetWidth,
     };
   } else {
+    // The background layer (this <aside>) stays fully opaque while the panel
+    // animates open, so the OS blur material (Windows acrylic / macOS vibrancy)
+    // never shows through. Only the size animates here; the panel *content*
+    // cross-fades on the inner layer below. Collapse the border to transparent
+    // while closed so the 0-size panel leaves no 1px hairline at the edge.
+    const borderColorClass = isOpen ? "border-[color:var(--border)]" : "border-transparent";
     asideClassName = `relative overflow-hidden bg-[var(--content-background)] ${
-      isHorizontal
-        ? "min-w-0 border-t border-[color:var(--border)]"
-        : "min-h-0 border-l border-[color:var(--border)]"
+      isHorizontal ? `min-w-0 border-t ${borderColorClass}` : `min-h-0 border-l ${borderColorClass}`
     }`;
     asideStyle = {
       ...(isHorizontal
         ? { height: dockedDisplayHeight, minHeight: dockedDisplayHeight }
         : { width: dockedDisplayWidth, minWidth: dockedDisplayWidth }),
-      opacity: isOpen ? 1 : 0,
-      transitionProperty: "width, min-width, height, min-height, opacity, border-color",
-      transitionDuration: `${dockedSizeDuration}, ${dockedSizeDuration}, ${dockedSizeDuration}, ${dockedSizeDuration}, ${dockedFadeDuration}, 200ms`,
+      transitionProperty: "width, min-width, height, min-height, border-color",
+      transitionDuration: `${dockedSizeDuration}, ${dockedSizeDuration}, ${dockedSizeDuration}, ${dockedSizeDuration}, 200ms`,
       transitionTimingFunction: isOpen ? "ease-out" : "ease-in",
-      willChange: "width, min-width, height, min-height, opacity",
+      willChange: "width, min-width, height, min-height",
     };
   }
+
+  // Content cross-fades on the inner layer so the opaque <aside> background
+  // never reveals the OS blur material during the animation. A keyframe (not a
+  // transition) is used so the fade reliably re-fires each time: the layer is
+  // clipped to zero by the docked panel's collapsing size, and a transition's
+  // start value is unreliable when an element is revealed from a zero-clipped
+  // state (the content would pop in at full opacity). The signal differs by
+  // mode — docked tracks isOpen (size animation); overlay tracks overlayReady so
+  // the content fades in step with the slide-in/out.
+  const contentVisible = overlay ? overlayReady : isOpen;
+  const contentFadeDuration = overlay ? "300ms" : dockedFadeDuration;
+  const innerStyle: CSSProperties = {
+    ...(isHorizontal ? { height: targetHeight } : { width: targetWidth }),
+    opacity: contentVisible ? 1 : 0,
+    animation: `${
+      contentVisible ? "lightcode-panel-content-in" : "lightcode-panel-content-out"
+    } ${contentFadeDuration} ${contentVisible ? "ease-out" : "ease-in"}`,
+    willChange: "opacity",
+  };
   const asideKey = overlay ? "overlay-aside" : "docked-aside";
 
   return (
@@ -91,11 +118,7 @@ export function AsideSlot(props: {
         />
       )}
       <aside key={asideKey} ref={panelRef} className={asideClassName} style={asideStyle}>
-        <div
-          ref={panelInnerRef}
-          className="h-full w-full"
-          style={isHorizontal ? { height: targetHeight } : { width: targetWidth }}
-        >
+        <div ref={panelInnerRef} className="h-full w-full" style={innerStyle}>
           {children}
         </div>
       </aside>
diff --git a/src/shared/settings.ts b/src/shared/settings.ts
index f204d800..d2118fba 100644
--- a/src/shared/settings.ts
+++ b/src/shared/settings.ts
@@ -196,9 +196,9 @@ export const sharedSettingsSchema = z.object({
   /** Show the projectless Home scope for OS-level agent sessions. */
   homeScopeEnabled: z.boolean(),
   /**
-   * Opt-in translucent ("liquid glass") sidebar. When on, the window uses a
+   * Translucent ("liquid glass") sidebar. When on, the window uses a
    * native blur material where supported (macOS vibrancy, Windows 11 acrylic)
-   * and an in-app translucent fallback elsewhere. Default off.
+   * and an in-app translucent fallback elsewhere. Default on.
    */
   sidebarTranslucency: z.boolean(),
   /**
@@ -349,7 +349,7 @@ export const defaultSharedSettings: SharedSettings = {
   threadRemoveAction: "archive",
   newThreadMode: "page",
   homeScopeEnabled: true,
-  sidebarTranslucency: false,
+  sidebarTranslucency: true,
   sidebarGlassTint: { light: null, dark: null },
   autoShowTerminalPanel: true,
   gitReviewMode: "panel",

From 18a94587219ef962d35d34ed543ece87e237ff4f Mon Sep 17 00:00:00 2001
From: Serhii Vecherenko <SDSLeon999@gmail.com>
Date: Mon, 15 Jun 2026 14:54:48 -0700
Subject: [PATCH 2/2] fix(sidebar): prevent acrylic flash during overlay
 collapse

- Tint overlay sidebar spacer to match collapsed rail glass
- Fade overlay aside content with opacity transition on close
---
 src/renderer/styles.css                       |  7 +++++
 .../MainView/parts/AppShell/AppShell.tsx      |  2 +-
 .../parts/AppShell/parts/AsideSlot.tsx        | 30 ++++++++++++-------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index eafbdeab..4c7d2e4b 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -1065,6 +1065,13 @@ html[data-native-material="on"] .lightcode-sidebar-aside .lightcode-overlay-head
 html[data-native-material="on"] .lightcode-sidebar-aside--overlay {
   background: var(--content-background);
 }
+/* While the overlay sidebar slides out and snaps to the collapsed rail, the
+   spacer that reserves the rail's slot is briefly uncovered. Give it the same
+   glass tint as the docked collapsed rail so the strip never flashes raw
+   acrylic before the rail paints in. */
+html[data-native-material="on"] .lightcode-sidebar-spacer {
+  background: var(--sidebar-glass-tint);
+}
 /* Windows-only frosting bump. DWM acrylic blurs whatever sits behind the window,
    so the backdrop bleeds through the tint and drags the sidebar toward it: a dark
    theme over a bright window washes out toward grey, while a light theme over a
diff --git a/src/renderer/views/MainView/parts/AppShell/AppShell.tsx b/src/renderer/views/MainView/parts/AppShell/AppShell.tsx
index 5a853261..62e1ec2a 100644
--- a/src/renderer/views/MainView/parts/AppShell/AppShell.tsx
+++ b/src/renderer/views/MainView/parts/AppShell/AppShell.tsx
@@ -206,7 +206,7 @@ function ShellSidebarSpacer(props: { hasHeaders: boolean; forceSidebarExpanded:
   if (!isOverlay) return null;
   return (
     <div
-      className={`shrink-0 ${!props.hasHeaders ? "-mt-5 h-[calc(100%+0.75rem)]" : ""}`}
+      className={`lightcode-sidebar-spacer shrink-0 ${!props.hasHeaders ? "-mt-5 h-[calc(100%+0.75rem)]" : ""}`}
       style={{ width: SIDEBAR_COLLAPSED_WIDTH, minWidth: SIDEBAR_COLLAPSED_WIDTH }}
     />
   );
diff --git a/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx b/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
index b454cfb5..e3e05343 100644
--- a/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
+++ b/src/renderer/views/MainView/parts/AppShell/parts/AsideSlot.tsx
@@ -83,22 +83,30 @@ export function AsideSlot(props: {
     };
   }
 
-  // Content cross-fades on the inner layer so the opaque <aside> background
-  // never reveals the OS blur material during the animation. A keyframe (not a
-  // transition) is used so the fade reliably re-fires each time: the layer is
-  // clipped to zero by the docked panel's collapsing size, and a transition's
-  // start value is unreliable when an element is revealed from a zero-clipped
-  // state (the content would pop in at full opacity). The signal differs by
-  // mode — docked tracks isOpen (size animation); overlay tracks overlayReady so
-  // the content fades in step with the slide-in/out.
+  // Content (header + body) cross-fades on the inner layer so the opaque <aside>
+  // background never reveals the OS blur material during the animation. The
+  // signal differs by mode: docked tracks isOpen (size animation); overlay
+  // tracks overlayReady so the content fades in step with the slide-in/out.
+  //
+  // Docked uses a keyframe because the layer is clipped to zero by the
+  // collapsing panel and a transition's start value is unreliable when revealed
+  // from a zero-clipped state (content would pop in at full opacity). The
+  // overlay is never clipped (it is a full-size panel that only translates), so
+  // a plain opacity transition is reliable there — and unlike the keyframe it
+  // fades cleanly on close from its current value instead of snapping to 0.
   const contentVisible = overlay ? overlayReady : isOpen;
   const contentFadeDuration = overlay ? "300ms" : dockedFadeDuration;
+  const contentFadeEase = contentVisible ? "ease-out" : "ease-in";
   const innerStyle: CSSProperties = {
     ...(isHorizontal ? { height: targetHeight } : { width: targetWidth }),
     opacity: contentVisible ? 1 : 0,
-    animation: `${
-      contentVisible ? "lightcode-panel-content-in" : "lightcode-panel-content-out"
-    } ${contentFadeDuration} ${contentVisible ? "ease-out" : "ease-in"}`,
+    ...(overlay
+      ? { transition: `opacity ${contentFadeDuration} ${contentFadeEase}` }
+      : {
+          animation: `${
+            contentVisible ? "lightcode-panel-content-in" : "lightcode-panel-content-out"
+          } ${contentFadeDuration} ${contentFadeEase}`,
+        }),
     willChange: "opacity",
   };
   const asideKey = overlay ? "overlay-aside" : "docked-aside";