feat: custom TitleBar with window controls (no native decorations) #7
Reference in New Issue
Block a user
Delete Branch "feat/custom-titlebar"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Custom TitleBar — Frameless Window
Replaces the native OS title bar with a fully custom, in-app title bar that matches Phokus's dark aesthetic.
Changes
src-tauri/tauri.conf.json"decorations": false— removes the native OS window frame"shadow": true— keeps the native drop shadow on Windows/macOSsrc-tauri/capabilities/default.jsoncore:window:allow-minimizecore:window:allow-maximize/allow-unmaximizecore:window:allow-toggle-maximizecore:window:allow-closecore:window:allow-start-draggingcore:window:allow-is-maximizedsrc/components/TitleBar.tsx(new)bg-gray-950to match the app backgrounddata-tauri-drag-region/-webkit-app-region: dragso you can click-drag anywhere to move the windowonResizedeventbg-red-500/80) for familiar affordancesrc/App.tsxflex-rowtoflex-colwithTitleBarat the topflex flex-1 min-h-0div to preserve existing sidebar/main layoutVisual
The title bar sits flush at the top of the frameless window. The drag region spans the full width except the control buttons, double-clicking the bar toggles maximize (native behaviour via
toggleMaximize).Summary by CodeRabbit
Release Notes
New Features
Style & UI
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Free
Run ID:
ba9c09e8-7ec2-4f6f-8580-61bbaf34860e📥 Commits
Reviewing files that changed from the base of the PR and between
2807240fabandce5c3d0033.📒 Files selected for processing (2)
src-tauri/capabilities/default.jsonsrc/components/TitleBar.tsx🚧 Files skipped from review as they are similar to previous changes (2)
📝 Walkthrough
Walkthrough
Adds a custom draggable TitleBar component to the React app, enables Tauri window control permissions for minimize/maximise/close queries, and updates Tauri window config to disable native decorations and enable window shadowing.
Changes
src-tauri/capabilities/default.json,src-tauri/tauri.conf.jsondefaultcapability permissions to includecore:window:allow-minimize,core:window:allow-close,core:window:allow-toggle-maximize, andcore:window:allow-is-maximized. Disabled native window decorations and enabled window shadow in Tauri config.src/App.tsx,src/components/TitleBar.tsxTitleBarcomponent (draggable region, minimize/maximise/restore/close handlers, maximised-state tracking) and integrated it into the app by converting the root layout to a columnar structure so the title bar sits atop the content.Sequence Diagram
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Poem
Comment
@coderabbitai helpto get the list of available commands and usage tips.Pull request overview
This PR introduces a frameless Tauri window setup and replaces native window decorations with an in-app custom
TitleBarthat provides window controls and (intended) drag behavior.Changes:
tauri.conf.json.TitleBarReact component and update the main app layout to include it.Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
decorations: false) and enables window shadow.💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
@@ -12,6 +12,10 @@"fs:allow-read-file",core:window:allow-start-draggingis added to the capability set, but the UI code in this PR doesn’t callstartDragging()anywhere (and also doesn’t currently usedata-tauri-drag-region). If dragging will be handled via the HTML attribute, consider removing this permission; if dragging will be handled via the API, add the corresponding call in the title bar so the extra permission is justified.@@ -16,1 +17,4 @@"core:window:allow-close","core:window:allow-toggle-maximize","core:window:allow-is-maximized"]The capabilities add
core:window:allow-maximizeandcore:window:allow-unmaximize, but the UI code introduced here only callstoggleMaximize()(plusminimize(),close(),isMaximized()). To keep least-privilege, consider removing permissions that aren’t required for the current implementation (unless Tauri’s permission model fortoggleMaximizeimplicitly depends on them).@@ -0,0 +64,4 @@data-tauri-drag-regionclassName="titlebar relative z-50 flex h-9 shrink-0 items-center bg-gray-950 select-none"style={{ WebkitAppRegion: "drag" } as React.CSSProperties}>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 withdata-tauri-drag-region(and/or explicitly callappWindow.startDragging()on pointer-down). As-is, the window may not be draggable and the PR description’sdata-tauri-drag-regionbehavior isn’t present.