82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export default function TitleBar() {
|
|
const [pinned, setPinned] = useState(false);
|
|
|
|
const call = async (method: string) => {
|
|
const api = (window as any)?.aeBridge;
|
|
if (!api || !api[method]) return;
|
|
const res = await api[method]();
|
|
if (method === "togglePin") setPinned(res);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
height: 36,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "0 12px",
|
|
background: "#050814",
|
|
color: "#9ca3af",
|
|
WebkitAppRegion: "drag",
|
|
borderBottom: "1px solid #0f172a",
|
|
letterSpacing: "0.08em",
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
<div style={{ fontFamily: "Space Mono, monospace" }}>AeThex Terminal</div>
|
|
<div
|
|
style={{
|
|
marginLeft: "auto",
|
|
display: "flex",
|
|
gap: 8,
|
|
WebkitAppRegion: "no-drag",
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => call("togglePin")}
|
|
style={btnStyle(pinned ? "#38bdf8" : "#1f2937")}
|
|
title="Pin / Unpin"
|
|
>
|
|
{pinned ? "Pinned" : "Pin"}
|
|
</button>
|
|
<button
|
|
onClick={() => call("minimize")}
|
|
style={btnStyle("#1f2937")}
|
|
title="Minimize"
|
|
>
|
|
_
|
|
</button>
|
|
<button
|
|
onClick={() => call("maximize")}
|
|
style={btnStyle("#1f2937")}
|
|
title="Maximize / Restore"
|
|
>
|
|
▢
|
|
</button>
|
|
<button
|
|
onClick={() => call("close")}
|
|
style={btnStyle("#ef4444")}
|
|
title="Close"
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function btnStyle(bg: string) {
|
|
return {
|
|
border: "1px solid #111827",
|
|
background: bg,
|
|
color: "#e5e7eb",
|
|
borderRadius: 6,
|
|
padding: "4px 8px",
|
|
cursor: "pointer",
|
|
fontSize: 12,
|
|
minWidth: 46,
|
|
} as React.CSSProperties;
|
|
}
|
|
|