wip: plumbing for building a web app

js/desktop/src/components/window-controls.tsx

@@ -3,20 +3,23 @@ import { Copy, Minus, Square, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { platform } from "@/lib/platform";
 
 export function WindowControls() {
   const [isMaximized, setIsMaximized] = useState(false);
 
   useEffect(() => {
-    return window.electronWindow.onMaximizeChange(setIsMaximized);
+    return platform.window.onMaximizeChange(setIsMaximized);
   }, []);
 
+  if (platform.kind !== "electron") return null;
+
   const minimize = (
     <Button
       key="minimize"
       variant="ghost"
       size="icon-sm"
-      onClick={() => window.electronWindow.minimize()}
+      onClick={() => platform.window.minimize()}
       aria-label="Minimize"
       className="dark:hover:bg-white/10 rounded text-white/50"
     >
@@ -29,7 +32,7 @@ export function WindowControls() {
       key="maximize"
       variant="ghost"
       size="icon-sm"
-      onClick={() => window.electronWindow.maximize()}
+      onClick={() => platform.window.maximize()}
       aria-label={isMaximized ? "Restore" : "Maximize"}
       className="dark:hover:bg-white/10 rounded text-white/50"
     >
@@ -42,7 +45,7 @@ export function WindowControls() {
       key="close"
       variant="ghost"
       size="icon-sm"
-      onClick={() => window.electronWindow.close()}
+      onClick={() => platform.window.close()}
       aria-label="Close"
       className="hover:text-destructive dark:hover:bg-white/10 rounded text-white/50"
     >