fix: titlebar on windows

src-tauri/capabilities/default.json

@@ -26,6 +26,7 @@
 		"core:window:allow-set-size",
 		"core:window:allow-set-focus",
 		"core:window:allow-start-dragging",
+		"core:window:allow-toggle-maximize",
 		"decorum:allow-show-snap-overlay",
 		"prevent-default:default",
 		"updater:default",

src-tauri/src/main.rs

@@ -73,10 +73,6 @@ fn main() {
 			let handle = app.handle();
 			let main_window = app.get_webview_window("main").unwrap();
 
-			// Open devtools
-			#[cfg(debug_assertions)]
-			main_window.open_devtools();
-
 			// Set custom decoration
 			#[cfg(target_os = "windows")]
 			main_window.create_overlay_titlebar().unwrap();
@@ -85,7 +81,7 @@ fn main() {
 			#[cfg(target_os = "macos")]
 			main_window.set_traffic_lights_inset(12.0, 18.0).unwrap();
 
-			// Workaround for reset traffic light when window resized
+			// Workaround for reset traffic light when theme changed
 			#[cfg(target_os = "macos")]
 			let win_ = main_window.clone();
 			#[cfg(target_os = "macos")]
@@ -165,9 +161,8 @@ fn main() {
 
 			Ok(())
 		})
-		.enable_macos_default_menu(false)
+		.plugin(prevent_default())
 		.plugin(tauri_plugin_fs::init())
-		.plugin(tauri_plugin_prevent_default::init())
 		.plugin(tauri_plugin_process::init())
 		.plugin(tauri_plugin_updater::Builder::new().build())
 		.plugin(tauri_plugin_os::init())
@@ -179,3 +174,17 @@ fn main() {
 		.run(tauri::generate_context!())
 		.expect("error while running tauri application");
 }
+
+#[cfg(debug_assertions)]
+fn prevent_default() -> tauri::plugin::TauriPlugin<tauri::Wry> {
+	use tauri_plugin_prevent_default::Flags;
+
+	tauri_plugin_prevent_default::Builder::new()
+		.with_flags(Flags::all().difference(Flags::CONTEXT_MENU))
+		.build()
+}
+
+#[cfg(not(debug_assertions))]
+fn prevent_default() -> tauri::plugin::TauriPlugin<tauri::Wry> {
+	tauri_plugin_prevent_default::Builder::new().build()
+}

src/global.css

@@ -3,98 +3,106 @@
 @tailwind utilities;
 
 @layer utilities {
-  .break-message {
-    word-break: break-word;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-  }
+	.break-message {
+		word-break: break-word;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+	}
 }
 
 html {
-  font-size: 14px;
+	font-size: 14px;
 }
 
 a {
-  @apply cursor-default no-underline !important;
+	@apply cursor-default no-underline !important;
 }
 
 button {
-  @apply cursor-default focus:outline-none;
+	@apply cursor-default focus:outline-none;
 }
 
 input::-ms-reveal,
 input::-ms-clear {
-  display: none;
+	display: none;
 }
 
 ::-webkit-input-placeholder {
-  line-height: normal;
+	line-height: normal;
+}
+
+div[data-tauri-decorum-tb] {
+	@apply h-12 !important;
+}
+
+button.decorum-tb-btn {
+	@apply h-12 !important;
 }
 
 .spinner-leaf {
-  position: absolute;
-  top: 0;
-  left: calc(50% - 12.5% / 2);
-  width: 12.5%;
-  height: 100%;
-  animation: spinner-leaf-fade 800ms linear infinite;
+	position: absolute;
+	top: 0;
+	left: calc(50% - 12.5% / 2);
+	width: 12.5%;
+	height: 100%;
+	animation: spinner-leaf-fade 800ms linear infinite;
 
-  &::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 30%;
-    background-color: currentColor;
-    @apply rounded;
-  }
+	&::before {
+		content: "";
+		display: block;
+		width: 100%;
+		height: 30%;
+		background-color: currentColor;
+		@apply rounded;
+	}
 
-  &:where(:nth-child(1)) {
-    transform: rotate(0deg);
-    animation-delay: -800ms;
-  }
+	&:where(:nth-child(1)) {
+		transform: rotate(0deg);
+		animation-delay: -800ms;
+	}
 
-  &:where(:nth-child(2)) {
-    transform: rotate(45deg);
-    animation-delay: -700ms;
-  }
+	&:where(:nth-child(2)) {
+		transform: rotate(45deg);
+		animation-delay: -700ms;
+	}
 
-  &:where(:nth-child(3)) {
-    transform: rotate(90deg);
-    animation-delay: -600ms;
-  }
+	&:where(:nth-child(3)) {
+		transform: rotate(90deg);
+		animation-delay: -600ms;
+	}
 
-  &:where(:nth-child(4)) {
-    transform: rotate(135deg);
-    animation-delay: -500ms;
-  }
+	&:where(:nth-child(4)) {
+		transform: rotate(135deg);
+		animation-delay: -500ms;
+	}
 
-  &:where(:nth-child(5)) {
-    transform: rotate(180deg);
-    animation-delay: -400ms;
-  }
+	&:where(:nth-child(5)) {
+		transform: rotate(180deg);
+		animation-delay: -400ms;
+	}
 
-  &:where(:nth-child(6)) {
-    transform: rotate(225deg);
-    animation-delay: -300ms;
-  }
+	&:where(:nth-child(6)) {
+		transform: rotate(225deg);
+		animation-delay: -300ms;
+	}
 
-  &:where(:nth-child(7)) {
-    transform: rotate(270deg);
-    animation-delay: -200ms;
-  }
+	&:where(:nth-child(7)) {
+		transform: rotate(270deg);
+		animation-delay: -200ms;
+	}
 
-  &:where(:nth-child(8)) {
-    transform: rotate(315deg);
-    animation-delay: -100ms;
-  }
+	&:where(:nth-child(8)) {
+		transform: rotate(315deg);
+		animation-delay: -100ms;
+	}
 }
 
 @keyframes spinner-leaf-fade {
-  from {
-    opacity: 1;
-  }
+	from {
+		opacity: 1;
+	}
 
-  to {
-    opacity: 0.25;
-  }
+	to {
+		opacity: 0.25;
+	}
 }

src/routes/$account.chats.$id.lazy.tsx

@@ -46,13 +46,17 @@ function Screen() {
 
 function Header() {
 	const { account, id } = Route.useParams();
+	const { platform } = Route.useRouteContext();
 
 	return (
 		<div
 			data-tauri-drag-region
-			className="h-12 shrink-0 flex items-center justify-between px-3.5 border-b border-neutral-100 dark:border-neutral-800"
+			className={cn(
+				"h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800",
+				platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5"
+			)}
 		>
-			<div>
+			<div className="z-[200]">
 				<div className="flex -space-x-1 overflow-hidden">
 					<User.Provider pubkey={account}>
 						<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">

src/routes/$account.chats.lazy.tsx

@@ -57,7 +57,7 @@ function Header() {
 		<div
 			data-tauri-drag-region
 			className={cn(
-				"shrink-0 h-12 flex items-center justify-between",
+				"z-[200] shrink-0 h-12 flex items-center justify-between",
 				platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5",
 			)}
 		>

src/routes/index.lazy.tsx

@@ -59,7 +59,7 @@ function Screen() {
 
 			if (res.status === "ok") {
 				navigate({
-					to: "/$account/chats",
+					to: "/$account/chats/new",
 					params: { account: res.data },
 					replace: true,
 				});