large update

src/renderer/components/TitleBar.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback } from "react";
+import { Minus, Square, X } from "@phosphor-icons/react";
+
+export default function TitleBar() {
+  const [maximized, setMaximized] = useState(false);
+
+  const refreshMaximized = useCallback(() => {
+    void window.agentCompany.windowIsMaximized().then(setMaximized);
+  }, []);
+
+  useEffect(() => {
+    refreshMaximized();
+    const onResize = () => refreshMaximized();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [refreshMaximized]);
+
+  return (
+    <div className="titlebar-drag flex h-[32px] shrink-0 select-none items-center justify-between bg-card border-b border-border">
+      <div className="flex items-center gap-0.5 pl-3">
+        <span className="text-[12px] font-semibold tracking-[-0.01em] text-muted-foreground">
+          AgentCompany
+        </span>
+      </div>
+
+      <div className="flex h-full">
+        <button
+          type="button"
+          aria-label="Minimize"
+          className="titlebar-button flex h-full w-[46px] items-center justify-center text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          onClick={() => void window.agentCompany.windowMinimize()}
+        >
+          <Minus size={14} weight="bold" />
+        </button>
+        <button
+          type="button"
+          aria-label={maximized ? "Restore" : "Maximize"}
+          className="titlebar-button flex h-full w-[46px] items-center justify-center text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          onClick={() => {
+            void window.agentCompany.windowMaximize();
+            setTimeout(refreshMaximized, 50);
+          }}
+        >
+          {maximized ? (
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.2">
+              <rect x="2" y="0" width="8" height="8" rx="1" />
+              <rect x="0" y="2" width="8" height="8" rx="1" fill="var(--card)" />
+              <rect x="0" y="2" width="8" height="8" rx="1" />
+            </svg>
+          ) : (
+            <Square size={12} weight="bold" />
+          )}
+        </button>
+        <button
+          type="button"
+          aria-label="Close"
+          className="titlebar-button flex h-full w-[46px] items-center justify-center text-muted-foreground transition hover:bg-red-500 hover:text-white"
+          onClick={() => void window.agentCompany.windowClose()}
+        >
+          <X size={14} weight="bold" />
+        </button>
+      </div>
+    </div>
+  );
+}