feat(style): refactor layout, remove Header & Improve gateway readiness checks (#12)

2026-02-09 01:00:27 -08:00
parent 86ddd843c4
commit 05b5874832
14 changed files with 217 additions and 132 deletions
--- a/src/components/layout/TitleBar.tsx
+++ b/src/components/layout/TitleBar.tsx
@@ -0,0 +1,83 @@
+/**
+ * TitleBar Component
+ * macOS: empty drag region (native traffic lights handled by hiddenInset).
+ * Windows/Linux: icon + "ClawX" on left, minimize/maximize/close on right.
+ */
+import { useState, useEffect } from 'react';
+import { Minus, Square, X, Copy } from 'lucide-react';
+import logoSvg from '@/assets/logo.svg';
+
+const isMac = window.electron?.platform === 'darwin';
+
+export function TitleBar() {
+  if (isMac) {
+    // macOS: just a drag region, traffic lights are native
+    return <div className="drag-region h-10 shrink-0 border-b bg-background" />;
+  }
+
+  return <WindowsTitleBar />;
+}
+
+function WindowsTitleBar() {
+  const [maximized, setMaximized] = useState(false);
+
+  useEffect(() => {
+    // Check initial state
+    window.electron.ipcRenderer.invoke('window:isMaximized').then((val) => {
+      setMaximized(val as boolean);
+    });
+  }, []);
+
+  const handleMinimize = () => {
+    window.electron.ipcRenderer.invoke('window:minimize');
+  };
+
+  const handleMaximize = () => {
+    window.electron.ipcRenderer.invoke('window:maximize').then(() => {
+      window.electron.ipcRenderer.invoke('window:isMaximized').then((val) => {
+        setMaximized(val as boolean);
+      });
+    });
+  };
+
+  const handleClose = () => {
+    window.electron.ipcRenderer.invoke('window:close');
+  };
+
+  return (
+    <div className="drag-region flex h-10 shrink-0 items-center justify-between border-b bg-background">
+      {/* Left: Icon + App Name */}
+      <div className="no-drag flex items-center gap-2 pl-3">
+        <img src={logoSvg} alt="ClawX" className="h-5 w-auto" />
+        <span className="text-xs font-medium text-muted-foreground select-none">
+          ClawX
+        </span>
+      </div>
+
+      {/* Right: Window Controls */}
+      <div className="no-drag flex h-full">
+        <button
+          onClick={handleMinimize}
+          className="flex h-full w-11 items-center justify-center text-muted-foreground hover:bg-accent transition-colors"
+          title="Minimize"
+        >
+          <Minus className="h-4 w-4" />
+        </button>
+        <button
+          onClick={handleMaximize}
+          className="flex h-full w-11 items-center justify-center text-muted-foreground hover:bg-accent transition-colors"
+          title={maximized ? 'Restore' : 'Maximize'}
+        >
+          {maximized ? <Copy className="h-3.5 w-3.5" /> : <Square className="h-3.5 w-3.5" />}
+        </button>
+        <button
+          onClick={handleClose}
+          className="flex h-full w-11 items-center justify-center text-muted-foreground hover:bg-red-500 hover:text-white transition-colors"
+          title="Close"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}