feat(windows): add custom Windows title bar to replace the default #9133
Conversation
- Introduce a new WindowsTitleBar component for a native-like title bar experience on Windows platform. - Conditionally render WindowsTitleBar in the main layout when running on Windows. - Modify window creation logic to disable default window decorations (title bar) on Windows, enabling the custom title bar to be used. - Keep default decorations on other platforms to preserve native look. - Improve app branding by showing version and build type badges in the custom title bar. - Enhance user experience with zoom controls and window management integrated into the custom title bar. This change improves UI consistency and usability for Windows users by providing a tailored window chrome that matches platform conventions.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@SilkePilon is attempting to deploy a commit to the GitButler Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
bot
added
rust
|
Thanks a lot for tackling this! Here is a screenshot for how it looks on MacOS - the window in the foreground is the current nightly. 
We probably have to check it on Linux as well, but I will skip this for now. I also pushed some minor fixes, leaving only some CSS related lints unaddressed. |
|
The current issue is i cant build or preview my changes on my pc atm, as i need to restart my pc every time i make an change as the port becomes locked |
Introduce a new WindowsTitleBar.svelte component for the desktop app that displays app version, build type badge, and app icon. Implement zoom controls, theme switching, sidebar toggling, project management actions, and developer tools access. Detect build type dynamically and update UI accordingly. This enhances user experience on Windows by providing quick access to common actions and app status directly in the title bar.
|
Here is an demo of how it will look on windows (old ui): 
|
|
Needs to be tested on mac and linux to see if this does not break anything on those platforms |
- Replace static project context with reactive project state updated on route changes to reflect the active project dynamically. - Import and integrate KeyboardShortcutsModal component to display shortcuts UI. - Register global keyboard shortcuts for common actions (add repo, clone, settings, theme switch, zoom, reload, share debug) via ShortcutService. - Enhance File menu with keyboard shortcut hints and auto-close behavior on selection. - Remove unused toggleSidebar function and related event emission. - Improve user experience by enabling quick access to features through shortcuts and keeping project context in sync with navigation.
Disable window decorations to remove the default title bar on Windows, enabling a custom title bar implementation. Also, update the maximize button SVG markup for improved readability and consistency in the WindowsTitleBar component.
|
Fully working on windows 1:1 |
|
Here is an demo video of the new ui (current): Recording.2025-06-24.000652.mp4 |
Display the default code editor's name as a badge in the Windows title bar when set in user settings. This improves visibility of the selected editor and enhances user context. Integrate the badge snippet into the context menu control for consistent UI behavior.
|
|
||
| #[cfg(target_os = "windows")] | ||
| let window = tauri::WebviewWindowBuilder::new( | ||
| handle, | ||
| label, | ||
| tauri::WebviewUrl::App(window_relative_url.into()), | ||
| ) | ||
| .resizable(true) | ||
| .title(handle.package_info().name.clone()) | ||
| .disable_drag_drop_handler() | ||
| .min_inner_size(1000.0, 600.0) | ||
| .inner_size(1160.0, 720.0) | ||
| .decorations(true) // Start with decorations enabled, frontend will disable if user has custom title bar enabled | ||
| .build()?; | ||
|
|
||
| #[cfg(not(any(target_os = "windows", target_os = "macos")))] |
There was a problem hiding this comment.
Is this not identical to below?
- gb icon change - title bar height made smaller
| @@ -556,7 +555,7 @@ | |||
|
|
|||
| .native-control-button:hover { | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| } | |||
There was a problem hiding this comment.
might be auto-formatting. I'll clean this up
- update color for the Badge component - move title bar into a CSS variable - fix paddings - remove the app name
don't like how they look there - too big and outline icons would be nicer.
| @@ -556,7 +555,7 @@ | |||
|
|
|||
| .native-control-button:hover { | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| } | |||
There was a problem hiding this comment.
might be auto-formatting. I'll clean this up
|
So what I would like to avoid is code duplication. Here we repeat all menu items that we have in the rust file. And I already see some inconsistencies like this:
There should be "..." at the end of the "Share debug info" because it opens a modal it's not an instant "send" action. @krlvi is there a way to handle this? |
|
@SilkePilon When you click on the menu item it opens the menu and when click again it should close the menu, not trigger it. Should work like a toggle: Screen.Recording.2025-06-25.072019.mp4 |
|
Another thing is that it looks like the custom title bar can maximize the window, but not minimize it: Screen.Recording.2025-06-25.072138.mp4 |
Weird, this seems to work for me just fine. |
Refactor Badge.svelte to use string interpolation for class names instead of multiple class:directive conditionals. This approach reduces code duplication and improves readability while maintaining the same functionality.
Implement state tracking for menu dropdowns in WindowsTitleBar. Add toggle functions for file, view, project, and help dropdowns to handle open/close states. Update menu item click handlers to close dropdowns after actions are performed, providing better UX by preventing menus from staying open after interaction.
Refactor dropdown handling in WindowsTitleBar component to use a centralized data structure and generic toggle/close functions. This replaces multiple individual state variables and duplicate toggle functions with a single unified approach, making the code more maintainable and reducing repetition while preserving the same functionality.
Change it so its an toggle |
Thanks! but it should be smarter I think because currently I have to click two times to trigger the dropdown (check the video below) Screen.Recording.2025-06-26.010317.mp4 |
we already doing this inside the component
|
This issue is caused because you modified the dropdown component using global styles:
However, this is not actually a dropdown button component. A proper dropdown button component triggers the menu when clicking on the arrow and hide the menu just fine. But in your implementation not the arrow triggers the menu to show, it's the whole button. Screen.Recording.2025-06-26.at.10.21.55.movLet's remove the dropdown component from here. It doesn’t make sense to use a component whose logic and styles have been overridden. Instead, it should be a custom element specifically designed for this custom title bar. @mtsgrd you also asked if we can modify the dropdown button. In my view, it's not a dropdown button component anymore — it looks and work differently. So it could be just a simple |
👍 I'm on it |
bar experience on Windows platform.
on Windows.
(title bar) on Windows, enabling the custom title bar to be used.
custom title bar.
integrated into the custom title bar.
This change improves UI consistency and usability for Windows users by
providing a tailored window chrome that matches platform conventions.