fix: icon slight proportion change

src/renderer/components/WindowTitleBar/WindowTitleBar.css

@@ -172,13 +172,29 @@
   overflow: hidden;
 }
 
+.window-titlebar-sidebar-icon::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 33.3333%;
+  width: 1.5px;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
 .window-titlebar-sidebar-pane {
   position: absolute;
   left: 0;
   top: 0;
-  width: 50%;
+  width: 33.3333%;
   height: 100%;
   background-color: currentColor;
+  transition: opacity 120ms ease;
+}
+
+.window-titlebar-sidebar-icon.is-inactive .window-titlebar-sidebar-pane {
+  opacity: 0;
 }
 
 .window-titlebar-panel-icon {
@@ -191,6 +207,17 @@
   overflow: hidden;
 }
 
+.window-titlebar-panel-icon::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 66.6667%;
+  height: 1.5px;
+  transform: translateY(-50%);
+  background-color: currentColor;
+}
+
 .window-titlebar-panel-pane {
   position: absolute;
   left: 0;
@@ -198,6 +225,11 @@
   width: 100%;
   height: 33.3333%;
   background-color: currentColor;
+  transition: opacity 120ms ease;
+}
+
+.window-titlebar-panel-icon.is-inactive .window-titlebar-panel-pane {
+  opacity: 0;
 }
 
 .window-titlebar-action-button:hover {

src/renderer/components/WindowTitleBar/WindowTitleBar.tsx

@@ -412,7 +412,11 @@ export const WindowTitleBar: React.FC = () => {
           onClick={toggleSidebar}
           title={`${sidebarVisible ? 'Hide' : 'Show'} Sidebar (Ctrl+B)`}
         >
-          <span className="window-titlebar-sidebar-icon" data-shape="frame-square" aria-hidden="true">
+          <span
+            className={`window-titlebar-sidebar-icon ${sidebarVisible ? 'is-active' : 'is-inactive'}`}
+            data-shape="frame-square"
+            aria-hidden="true"
+          >
             <span className="window-titlebar-sidebar-pane" data-shape="left-half" />
           </span>
         </button>
@@ -422,7 +426,11 @@ export const WindowTitleBar: React.FC = () => {
           onClick={togglePanel}
           title={`${panelVisible ? 'Hide' : 'Show'} Panel (Ctrl+J)`}
         >
-          <span className="window-titlebar-panel-icon" data-shape="frame-square" aria-hidden="true">
+          <span
+            className={`window-titlebar-panel-icon ${panelVisible ? 'is-active' : 'is-inactive'}`}
+            data-shape="frame-square"
+            aria-hidden="true"
+          >
             <span className="window-titlebar-panel-pane" data-shape="bottom-half" />
           </span>
         </button>

tests/renderer/components/WindowTitleBar.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { WindowTitleBar } from '../../../src/renderer/components/WindowTitleBar/WindowTitleBar';
 import { useAppStore } from '../../../src/renderer/store';
 
@@ -64,6 +64,32 @@ describe('WindowTitleBar', () => {
     expect(iconPane).toHaveAttribute('data-shape', 'bottom-half');
   });
 
+  it('renders active and inactive icon states based on sidebar/panel visibility', () => {
+    render(<WindowTitleBar />);
+
+    const sidebarIcon = document.querySelector('.window-titlebar-sidebar-icon');
+    const panelIcon = document.querySelector('.window-titlebar-panel-icon');
+
+    expect(sidebarIcon).toHaveClass('is-active');
+    expect(sidebarIcon).not.toHaveClass('is-inactive');
+    expect(panelIcon).toHaveClass('is-inactive');
+    expect(panelIcon).not.toHaveClass('is-active');
+  });
+
+  it('updates icon states when visibility changes outside titlebar buttons', () => {
+    render(<WindowTitleBar />);
+
+    act(() => {
+      useAppStore.setState({ sidebarVisible: false, panelVisible: true });
+    });
+
+    const sidebarIcon = document.querySelector('.window-titlebar-sidebar-icon');
+    const panelIcon = document.querySelector('.window-titlebar-panel-icon');
+
+    expect(sidebarIcon).toHaveClass('is-inactive');
+    expect(panelIcon).toHaveClass('is-active');
+  });
+
   it('places panel toggle to the right of sidebar toggle', () => {
     render(<WindowTitleBar />);