feat: panel-toggle-button

src/renderer/components/WindowTitleBar/WindowTitleBar.css

@@ -181,6 +181,25 @@
   background-color: currentColor;
 }
 
+.window-titlebar-panel-icon {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.window-titlebar-panel-pane {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 33.3333%;
+  background-color: currentColor;
+}
+
 .window-titlebar-action-button:hover {
   background-color: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
 }

src/renderer/components/WindowTitleBar/WindowTitleBar.tsx

@@ -11,7 +11,7 @@ type WindowControlsOverlayLike = {
 };
 
 export const WindowTitleBar: React.FC = () => {
-  const { sidebarVisible, toggleSidebar } = useAppStore();
+  const { sidebarVisible, panelVisible, toggleSidebar, togglePanel } = useAppStore();
   const [windowTitle, setWindowTitle] = useState<string>(document.title || 'Blogging Desktop Server');
   const [openMenu, setOpenMenu] = useState<{ label: string; left: number } | null>(null);
   const [showMnemonics, setShowMnemonics] = useState<boolean>(false);
@@ -416,6 +416,16 @@ export const WindowTitleBar: React.FC = () => {
             <span className="window-titlebar-sidebar-pane" data-shape="left-half" />
           </span>
         </button>
+        <button
+          className="window-titlebar-action-button"
+          aria-label="Toggle Panel"
+          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-pane" data-shape="bottom-half" />
+          </span>
+        </button>
       </div>
       {openMenu && activeMenu && (
         <div