From 53f21580a21f9f600911dc14c33e1af1b3904a9a Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 14:05:07 +0100 Subject: [PATCH 1/6] feat: disable native decorations for custom titlebar --- src-tauri/tauri.conf.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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": { From aed8fcfd67dcbbeb937d7c0af4d5490b4c2f5cd1 Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 14:05:19 +0100 Subject: [PATCH 2/6] feat: add window management permissions for custom titlebar --- src-tauri/capabilities/default.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index 0256658..4325c15 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -12,6 +12,13 @@ "fs:allow-read-file", "fs:allow-read-dir", "fs:read-files", - "fs:read-dirs" + "fs:read-dirs", + "core:window:allow-minimize", + "core:window:allow-maximize", + "core:window:allow-unmaximize", + "core:window:allow-close", + "core:window:allow-start-dragging", + "core:window:allow-toggle-maximize", + "core:window:allow-is-maximized" ] } From 7779fe06967bf58550dfcac805ec166200de1087 Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 14:05:45 +0100 Subject: [PATCH 3/6] feat: add custom TitleBar component with window controls --- src/components/TitleBar.tsx | 114 ++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 src/components/TitleBar.tsx 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 */} + +
+
+ ); +} From 2807240fab46541c80895e1f0d28d1a059c22f5c Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 14:08:21 +0100 Subject: [PATCH 4/6] feat: integrate TitleBar into App layout --- src/App.tsx | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) 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" ? ( + <> + + + + ) : ( + <> + + + + + )} +
+
+
); From ab8fba2e3ffaeecfcdc48b777f046c2d82c8da92 Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 15:00:52 +0100 Subject: [PATCH 5/6] fix: remove unused window permissions (allow-maximize, allow-unmaximize, allow-start-dragging) --- src-tauri/capabilities/default.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index 4325c15..c3a561a 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -14,10 +14,7 @@ "fs:read-files", "fs:read-dirs", "core:window:allow-minimize", - "core:window:allow-maximize", - "core:window:allow-unmaximize", "core:window:allow-close", - "core:window:allow-start-dragging", "core:window:allow-toggle-maximize", "core:window:allow-is-maximized" ] From ce5c3d00339f2bbec1cc562351df10fe25d81285 Mon Sep 17 00:00:00 2001 From: LyAhn Date: Mon, 6 Apr 2026 15:01:15 +0100 Subject: [PATCH 6/6] fix: add data-tauri-drag-region attribute alongside WebkitAppRegion CSS --- src/components/TitleBar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index 592078d..274367d 100644 --- a/src/components/TitleBar.tsx +++ b/src/components/TitleBar.tsx @@ -58,7 +58,10 @@ export function TitleBar() { 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.
@@ -75,7 +78,7 @@ export function TitleBar() {
{/* Spacer — draggable region fills here */} -
+
{/* Window control buttons — right side, non-draggable */}