aethex-forge/client/pages/Overlay.tsx
2025-12-05 01:06:47 -07:00

107 lines
2.8 KiB
TypeScript

import { useState } from "react";
const defaultPath = "C:/Projects/Roblox"; // change as needed
export default function Overlay() {
const [dir, setDir] = useState(defaultPath);
const [status, setStatus] = useState<"idle" | "watching">("idle");
const start = async () => {
try {
await (window as any)?.aeBridge?.startWatcher(dir);
setStatus("watching");
} catch (e) {
console.error(e);
}
};
const stop = async () => {
try {
await (window as any)?.aeBridge?.stopWatcher();
setStatus("idle");
} catch (e) {
console.error(e);
}
};
return (
<div
style={{
width: "100vw",
height: "100vh",
background: "rgba(3, 7, 18, 0.88)",
color: "#e5e7eb",
fontFamily: "Inter, sans-serif",
padding: 20,
backdropFilter: "blur(10px)",
}}
>
<div style={{ marginBottom: 12, fontSize: 12, letterSpacing: "0.1em" }}>
AeThex Overlay On-Top Sidecar
</div>
<div
style={{
border: "1px solid #38bdf8",
borderRadius: 12,
padding: 14,
background: "rgba(14, 165, 233, 0.07)",
}}
>
<div style={{ fontWeight: 700, marginBottom: 8, fontSize: 14 }}>
File Watcher
</div>
<label style={{ display: "block", fontSize: 12, marginBottom: 4 }}>
Folder to watch (.lua / .cs / .ts / .tsx)
</label>
<input
value={dir}
onChange={(e) => setDir(e.target.value)}
style={{
width: "100%",
padding: 10,
borderRadius: 8,
border: "1px solid #1f2937",
background: "#0f172a",
color: "#e5e7eb",
marginBottom: 10,
}}
/>
<div style={{ display: "flex", gap: 8 }}>
<button
onClick={start}
style={{
padding: "10px 14px",
borderRadius: 10,
border: "1px solid #38bdf8",
background: "rgba(56, 189, 248, 0.14)",
color: "#e0f2fe",
cursor: "pointer",
}}
>
Start
</button>
<button
onClick={stop}
style={{
padding: "10px 14px",
borderRadius: 10,
border: "1px solid #ef4444",
background: "rgba(239, 68, 68, 0.1)",
color: "#fecdd3",
cursor: "pointer",
}}
>
Stop
</button>
<span style={{ fontSize: 12, opacity: 0.8, alignSelf: "center" }}>
Status: {status}
</span>
</div>
<div style={{ fontSize: 11, marginTop: 10, opacity: 0.75 }}>
PII is scrubbed locally before any processing.
</div>
</div>
</div>
);
}