From 24340d3a8e4f732f94175ed818a09beac096f985 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 8 Jul 2025 21:24:18 +0300
Subject: [PATCH] refactor(next): remove use of :has for performance reasons

---
 apps/client/src/stylesheets/theme-next/shell.css          | 4 ++--
 apps/client/src/widgets/containers/left_pane_container.ts | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index d014e770b..844ac0135 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -71,13 +71,13 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container
 /* #endregion */
 
 /* Matches when the left pane is collapsed */
-#horizontal-main-container:has(#left-pane.hidden-int) {
+#horizontal-main-container.left-pane-hidden {
     --center-pane-border-radius: 0;
     --tab-first-item-horiz-offset: 5px;
 }
 
 /* Add a border to the vertical launch bar if collapsed. */
-body.layout-vertical #horizontal-main-container:has(#left-pane.hidden-int) #launcher-pane.vertical {
+body.layout-vertical #horizontal-main-container.left-pane-hidden #launcher-pane.vertical {
     border-right: 2px solid var(--left-pane-collapsed-border-color);
 }
 
diff --git a/apps/client/src/widgets/containers/left_pane_container.ts b/apps/client/src/widgets/containers/left_pane_container.ts
index d95f5091a..e6bc78e23 100644
--- a/apps/client/src/widgets/containers/left_pane_container.ts
+++ b/apps/client/src/widgets/containers/left_pane_container.ts
@@ -5,7 +5,7 @@ import type Component from "../../components/component.js";
 
 export default class LeftPaneContainer extends FlexContainer<Component> {
     private currentLeftPaneVisible: boolean;
-    
+
     constructor() {
         super("column");
 
@@ -24,6 +24,7 @@ export default class LeftPaneContainer extends FlexContainer<Component> {
         this.currentLeftPaneVisible = leftPaneVisible ?? !this.currentLeftPaneVisible;
         const visible = this.isEnabled();
         this.toggleInt(visible);
+        this.parent?.$widget.toggleClass("left-pane-hidden", !visible);
 
         if (visible) {
             this.triggerEvent("focusTree", {});