diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index 0256658..c3a561a 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -12,6 +12,10 @@ "fs:allow-read-file", "fs:allow-read-dir", "fs:read-files", - "fs:read-dirs" + "fs:read-dirs", + "core:window:allow-minimize", + "core:window:allow-close", + "core:window:allow-toggle-maximize", + "core:window:allow-is-maximized" ] } diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 06eb60f..ea720ac 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -16,7 +16,9 @@ "width": 1280, "height": 800, "minWidth": 800, - "minHeight": 600 + "minHeight": 600, + "decorations": false, + "shadow": true } ], "security": { diff --git a/src/App.tsx b/src/App.tsx index cd5fa58..9884233 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { Toolbar } from "./components/Toolbar"; import { Gallery } from "./components/Gallery"; import { Lightbox } from "./components/Lightbox"; import { TagCloud } from "./components/TagCloud"; +import { TitleBar } from "./components/TitleBar"; export default function App() { const loadFolders = useGalleryStore((state) => state.loadFolders); @@ -29,22 +30,29 @@ export default function App() { }, []); return ( -
- -
- {activeView === "explore" ? ( - <> - - - - ) : ( - <> - - - - - )} -
+
+ {/* Custom title bar — sits at the very top */} + + + {/* Main app content below the title bar */} +
+ +
+ {activeView === "explore" ? ( + <> + + + + ) : ( + <> + + + + + )} +
+
+
); diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx new file mode 100644 index 0000000..274367d --- /dev/null +++ b/src/components/TitleBar.tsx @@ -0,0 +1,117 @@ +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 ( + // data-tauri-drag-region is the recommended Tauri approach for drag regions. + // WebkitAppRegion is kept as a CSS fallback for compatibility. +
+ {/* 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 */} + +
+
+ ); +}