fix: some work-over for the sidebar toggle

src/renderer/components/WindowTitleBar/WindowTitleBar.css

@@ -7,6 +7,7 @@
   border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder, #1e1e1e);
   flex-shrink: 0;
   -webkit-app-region: drag;
+  padding-right: 10px;
 }
 
 .window-titlebar-drag-region {
@@ -18,25 +19,46 @@
   height: 100%;
   display: flex;
   align-items: center;
-  margin-right: 8px;
+  margin-right: 6px;
 }
 
 .window-titlebar-action-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   background: transparent;
   border: none;
-  color: var(--vscode-titleBar-activeForeground, var(--vscode-icon-foreground, #c5c5c5));
+  color: var(--vscode-foreground, #cccccc);
   cursor: pointer;
   border-radius: 4px;
   -webkit-app-region: no-drag;
 }
 
-.window-titlebar-action-button svg {
+.window-titlebar-action-button:focus,
+.window-titlebar-action-button:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.window-titlebar-sidebar-icon {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
   display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.window-titlebar-sidebar-pane {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  background-color: currentColor;
 }
 
 .window-titlebar-action-button:hover {

src/renderer/components/WindowTitleBar/WindowTitleBar.tsx

@@ -15,15 +15,9 @@ export const WindowTitleBar: React.FC = () => {
           onClick={toggleSidebar}
           title={`${sidebarVisible ? 'Hide' : 'Show'} Sidebar (Ctrl+B)`}
         >
-          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
-            <path
-              d="M3 3.75A1.75 1.75 0 0 1 4.75 2h6.5A1.75 1.75 0 0 1 13 3.75v8.5A1.75 1.75 0 0 1 11.25 14h-6.5A1.75 1.75 0 0 1 3 12.25v-8.5z"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1"
-            />
-            <path d="M4.5 3.5h3.75v9H4.5z" fill="currentColor"/>
-          </svg>
+          <span className="window-titlebar-sidebar-icon" data-shape="frame-square" aria-hidden="true">
+            <span className="window-titlebar-sidebar-pane" data-shape="left-half" />
+          </span>
         </button>
       </div>
     </div>

tests/renderer/components/WindowTitleBar.test.tsx

@@ -28,11 +28,12 @@ describe('WindowTitleBar', () => {
     render(<WindowTitleBar />);
 
     const toggleButton = screen.getByLabelText('Toggle Sidebar');
-    const svg = toggleButton.querySelector('svg');
-    const paths = svg?.querySelectorAll('path');
+    const iconFrame = toggleButton.querySelector('.window-titlebar-sidebar-icon');
+    const iconPane = toggleButton.querySelector('.window-titlebar-sidebar-pane');
 
-    expect(svg).not.toBeNull();
-    expect(paths?.[0]?.getAttribute('d')).toBe('M3 3.75A1.75 1.75 0 0 1 4.75 2h6.5A1.75 1.75 0 0 1 13 3.75v8.5A1.75 1.75 0 0 1 11.25 14h-6.5A1.75 1.75 0 0 1 3 12.25v-8.5z');
-    expect(paths?.[1]?.getAttribute('d')).toBe('M4.5 3.5h3.75v9H4.5z');
+    expect(iconFrame).not.toBeNull();
+    expect(iconPane).not.toBeNull();
+    expect(iconFrame).toHaveAttribute('data-shape', 'frame-square');
+    expect(iconPane).toHaveAttribute('data-shape', 'left-half');
   });
 });