feat(windows): add custom Windows title bar to replace the default

apps/desktop/src/components/v3/projectSettings/AppearanceSettings.svelte

@@ -47,6 +47,7 @@
 	{/snippet}
 	<ThemeSelector {userSettings} />
 </SectionCard>
+
 <div class="stack-v">
 	<SectionCard centerAlign roundedBottom={false}>
 		{#snippet title()}

apps/desktop/src/lib/backend/tauri.ts

@@ -1,10 +1,34 @@
 import { invoke as invokeIpc, listen as listenIpc } from '$lib/backend/ipc';
 import { getVersion } from '@tauri-apps/api/app';
+import { getCurrentWindow } from '@tauri-apps/api/window';
 import { check } from '@tauri-apps/plugin-updater';
 
 export class Tauri {
 	invoke = invokeIpc;
 	listen = listenIpc;
 	checkUpdate = check;
 	currentVersion = getVersion;
+
+	private window = getCurrentWindow();
+
+	async minimize() {
+		await this.window.minimize();
+	}
+
+	async toggleMaximize() {
+		const isMaximized = await this.window.isMaximized();
+		if (isMaximized) {
+			await this.window.unmaximize();
+		} else {
+			await this.window.maximize();
+		}
+	}
+
+	async close() {
+		await this.window.close();
+	}
+
+	async setDecorations(decorations: boolean) {
+		await this.window.setDecorations(decorations);
+	}
 }

apps/desktop/src/routes/+layout.svelte

@@ -15,11 +15,13 @@
 	import ShareIssueModal from '$components/ShareIssueModal.svelte';
 	import SwitchThemeMenuAction from '$components/SwitchThemeMenuAction.svelte';
 	import ToastController from '$components/ToastController.svelte';
+	import WindowsTitleBar from '$components/WindowsTitleBar.svelte';
 	import ZoomInOutMenuAction from '$components/ZoomInOutMenuAction.svelte';
 	import { PromptService as AIPromptService } from '$lib/ai/promptService';
 	import { AIService } from '$lib/ai/service';
 	import { PostHogWrapper } from '$lib/analytics/posthog';
 	import { CommandService, invoke } from '$lib/backend/ipc';
+	import { Tauri } from '$lib/backend/tauri';
 	import BaseBranchService from '$lib/baseBranch/baseBranchService.svelte';
 	import { BranchService } from '$lib/branches/branchService.svelte';
 	import {
@@ -98,6 +100,7 @@
 	const gitLabClient = new GitLabClient();
 	setContext(GitHubClient, gitHubClient);
 	setContext(GitLabClient, gitLabClient);
+	setContext(Tauri, data.tauri);
 	const user = data.userService.user;
 	const accessToken = $derived($user?.github_access_token);
 	$effect(() => gitHubClient.setToken(accessToken));
@@ -259,6 +262,13 @@
 	let shareIssueModal: ShareIssueModal;
 
 	onMount(() => {
+		// Initialize window decorations for Windows
+		// Always use custom title bar on Windows, so hide default decorations
+		if (platformName === 'windows') {
+			// Decorations are inverted: true = show default title bar, false = hide default title bar
+			data.tauri.setDecorations(false);
+		}
+
 		return unsubscribe(
 			events.on('goto', async (path: string) => await goto(path)),
 			events.on('openSendIssueModal', () => shareIssueModal?.show())
@@ -297,10 +307,21 @@
 	onkeydown={handleKeyDown}
 />
 
-<div class="app-root" role="application" oncontextmenu={(e) => !dev && e.preventDefault()}>
+<div
+	class="app-root"
+	class:has-custom-titlebar={platformName === 'windows'}
+	role="application"
+	oncontextmenu={(e) => !dev && e.preventDefault()}
+>
 	{#if platformName === 'macos' && !$settingsStore?.featureFlags.v3}
 		<div class="drag-region" data-tauri-drag-region></div>
 	{/if}
+
+	<!-- Windows custom title bar -->
+	{#if platformName === 'windows'}
+		<WindowsTitleBar />
+	{/if}
+
 	{@render children()}
 </div>
 <Toaster />

apps/desktop/src/routes/[projectId]/+layout.svelte

@@ -126,11 +126,22 @@
 		setContext(StackingReorderDropzoneManagerFactory, stackingReorderDropzoneManagerFactory);
 	});
 
+	const focusManager = new FocusManager();
+	setContext(FocusManager, focusManager);
+
+	// Set the Project context immediately so child components can access it
+	// Even if project is undefined, we set the context to prevent "no instance" errors
+	setContext(Project, data.project);
+
+	// Debug logging to help diagnose the issue
+	if (!data.project) {
+		console.warn('Project is undefined in [projectId] layout, projectId:', data.projectId);
+	}
+
 	$effect.pre(() => {
 		setContext(HistoryService, data.historyService);
 		setContext(TemplateService, data.templateService);
 		setContext(BaseBranch, baseBranch);
-		setContext(Project, project);
 		setContext(GitBranchService, data.gitBranchService);
 		setContext(UncommitedFilesWatcher, data.uncommitedFileWatcher);
 		setContext(ProjectService, data.projectService);
@@ -141,9 +152,6 @@
 		setContext(StackPublishingService, data.stackPublishingService);
 	});
 
-	const focusManager = new FocusManager();
-	setContext(FocusManager, focusManager);
-
 	let intervalId: any;
 
 	const forgeFactory = getContext(DefaultForgeFactory);

crates/gitbutler-tauri/capabilities/main.json

@@ -7,6 +7,12 @@
 	"permissions": [
 		"core:default",
 		"core:window:allow-start-dragging",
+		"core:window:allow-close",
+		"core:window:allow-minimize",
+		"core:window:allow-maximize",
+		"core:window:allow-unmaximize",
+		"core:window:allow-is-maximized",
+		"core:window:allow-set-decorations",
 		"core:window:default",
 		"dialog:allow-open",
 		"fs:allow-read-file",

crates/gitbutler-tauri/src/window.rs

@@ -255,6 +255,22 @@ pub fn create(
     window_relative_url: String,
 ) -> tauri::Result<tauri::WebviewWindow> {
     tracing::info!("creating window '{label}' created at '{window_relative_url}'");
+
+    #[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")))]
     let window = tauri::WebviewWindowBuilder::new(
         handle,
         label,
@@ -265,6 +281,7 @@ pub fn create(
     .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()?;
     Ok(window)
 }

packages/ui/src/lib/Badge.svelte

@@ -32,7 +32,21 @@
 	<!-- A badge is not a clickable UI element, but with exceptions. No button styling desired. -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<div class="badge {style} {kind} {size}-size" class:reversedDirection {onclick}>
+	<div
+		class="badge"
+		class:neutral={style === 'neutral'}
+		class:pop={style === 'pop'}
+		class:success={style === 'success'}
+		class:error={style === 'error'}
+		class:warning={style === 'warning'}
+		class:purple={style === 'purple'}
+		class:solid={kind === 'solid'}
+		class:soft={kind === 'soft'}
+		class:icon-size={size === 'icon'}
+		class:tag-size={size === 'tag'}
+		class:reversedDirection
+		{onclick}
+	>
 		{#if children}
 			<span
 				class="badge__label text-bold"

turbo.json

@@ -20,7 +20,8 @@
 		"dev": {
 			"dependsOn": ["package"],
 			"cache": false,
-			"persistent": true
+			"persistent": true,
+			"interruptible": true
 		},
 		"check": {
 			"dependsOn": ["package"]