diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx new file mode 100644 index 0000000..592078d --- /dev/null +++ b/src/components/TitleBar.tsx @@ -0,0 +1,114 @@ +import { useState, useEffect } from "react"; +import { getCurrentWindow } from "@tauri-apps/api/window"; + +// SVG icons for window controls +function MinimizeIcon() { + return ( + + + + ); +} + +function MaximizeIcon() { + return ( + + + + ); +} + +function RestoreIcon() { + return ( + + + + + ); +} + +function CloseIcon() { + return ( + + + + ); +} + +export function TitleBar() { + const [isMaximized, setIsMaximized] = useState(false); + const appWindow = getCurrentWindow(); + + useEffect(() => { + // Get initial maximized state + appWindow.isMaximized().then(setIsMaximized); + + // Listen for resize events to update maximized state + const unlisten = appWindow.onResized(() => { + appWindow.isMaximized().then(setIsMaximized); + }); + + return () => { + unlisten.then((fn) => fn()); + }; + }, []); + + const handleMinimize = () => appWindow.minimize(); + const handleMaximize = () => appWindow.toggleMaximize(); + const handleClose = () => appWindow.close(); + + return ( +
+ {/* App icon + name — left side */} +
+
+ {/* Phokus logo placeholder — replace with if you have an SVG */} + + + + +
+ Phokus +
+ + {/* Spacer — draggable region fills here */} +
+ + {/* Window control buttons — right side, non-draggable */} +
+ {/* Minimize */} + + + {/* Maximize / Restore */} + + + {/* Close */} + +
+
+ ); +}