JezzWTF/phokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: custom TitleBar with window controls (no native decorations) #7

Merged
LyAhn merged 6 commits from feat/custom-titlebar into main 2026-04-06 20:02:45 +00:00
Conversation 2 Commits 6 Files Changed 4
+4 -1
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ce5c3d0033 - Show all commits
src/components/TitleBar.tsx
+4 -1
View File
@@ -58,7 +58,10 @@ export function TitleBar() {
const handleClose = () => appWindow.close(); const handleClose = () => appWindow.close();
return ( return (
// data-tauri-drag-region is the recommended Tauri approach for drag regions.
// WebkitAppRegion is kept as a CSS fallback for compatibility.
<div <div
data-tauri-drag-region
className="titlebar relative z-50 flex h-9 shrink-0 items-center bg-gray-950 select-none" className="titlebar relative z-50 flex h-9 shrink-0 items-center bg-gray-950 select-none"
style={{ WebkitAppRegion: "drag" } as React.CSSProperties} style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
> >
copilot-pull-request-reviewer[bot] commented 2026-04-06 13:50:42 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

The title bar drag region is implemented only via WebkitAppRegion: "drag". In Tauri (especially on Windows/Linux with WebView2), this CSS property is not reliably honored; the recommended approach is to mark draggable areas with data-tauri-drag-region (and/or explicitly call appWindow.startDragging() on pointer-down). As-is, the window may not be draggable and the PR description’s data-tauri-drag-region behavior isn’t present.

The title bar drag region is implemented only via `WebkitAppRegion: "drag"`. In Tauri (especially on Windows/Linux with WebView2), this CSS property is not reliably honored; the recommended approach is to mark draggable areas with `data-tauri-drag-region` (and/or explicitly call `appWindow.startDragging()` on pointer-down). As-is, the window may not be draggable and the PR description’s `data-tauri-drag-region` behavior isn’t present.
@@ -75,7 +78,7 @@ export function TitleBar() {
</div> </div>
{/* Spacer — draggable region fills here */} {/* Spacer — draggable region fills here */}
<div className="flex-1" /> <div data-tauri-drag-region className="flex-1" />
{/* Window control buttons — right side, non-draggable */} {/* Window control buttons — right side, non-draggable */}
<div <div