feat: better integrate with macos titlebar

.vscode/settings.json

@@ -1,23 +1,45 @@
 {
   "cSpell.words": [
+    "applescript",
+    "autoconfig",
     "autologin",
+    "cdylib",
     "CFURL",
+    "checkin",
     "clippy",
+    "codegen",
     "donutbrowser",
+    "dtolnay",
+    "elif",
+    "gifs",
     "launchservices",
     "mountpoint",
+    "Mullvad",
     "nodecar",
     "ntlm",
+    "objc",
+    "osascript",
+    "plasmohq",
     "propertylist",
+    "reqwest",
     "rlib",
     "rustc",
     "serde",
     "shadcn",
     "signon",
+    "sonner",
     "sspi",
     "staticlib",
+    "swatinem",
     "sysinfo",
     "systempreferences",
-    "turbopack"
+    "tauri",
+    "titlebar",
+    "Torbrowser",
+    "turbopack",
+    "unlisten",
+    "wiremock",
+    "xattr",
+    "zhom"
   ]
 }

components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "",
+    "config": "tailwind.config.js",
     "css": "src/styles/globals.css",
     "baseColor": "zinc",
     "cssVariables": true,
@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

src-tauri/Cargo.lock

@@ -971,6 +971,8 @@ dependencies = [
  "directories",
  "futures-util",
  "lazy_static",
+ "objc2 0.6.1",
+ "objc2-app-kit",
  "reqwest",
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -37,6 +37,8 @@ futures-util = "0.3"
 
 [target.'cfg(target_os = "macos")'.dependencies]
 core-foundation="0.10"
+objc2 = "0.6.1"
+objc2-app-kit = { version = "0.3.1", features = ["NSWindow"] }
 
 [dev-dependencies]
 tempfile = "3.13.0"

src-tauri/capabilities/default.json

@@ -6,6 +6,11 @@
   "permissions": [
     "core:default",
     "core:event:default",
+    "core:window:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
     "opener:default",
     "fs:default",
     "shell:allow-execute",

src-tauri/src/lib.rs

@@ -1,7 +1,7 @@
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 use std::sync::Mutex;
 use std::time::{SystemTime, UNIX_EPOCH};
-use tauri::{Emitter, Manager};
+use tauri::{Emitter, Manager, Runtime, WebviewUrl, WebviewWindow, WebviewWindowBuilder};
 use tauri_plugin_deep_link::DeepLinkExt;
 
 // Store pending URLs that need to be handled when the window is ready
@@ -58,6 +58,51 @@ use app_auto_updater::{
   get_app_version_info,
 };
 
+// Trait to extend WebviewWindow with transparent titlebar functionality
+pub trait WindowExt {
+  #[cfg(target_os = "macos")]
+  fn set_transparent_titlebar(&self, transparent: bool) -> Result<(), String>;
+}
+
+impl<R: Runtime> WindowExt for WebviewWindow<R> {
+  #[cfg(target_os = "macos")]
+  fn set_transparent_titlebar(&self, transparent: bool) -> Result<(), String> {
+    use objc2::rc::Retained;
+    use objc2_app_kit::{NSWindow, NSWindowStyleMask, NSWindowTitleVisibility};
+
+    unsafe {
+      let ns_window: Retained<NSWindow> =
+        Retained::retain(self.ns_window().unwrap().cast()).unwrap();
+
+      if transparent {
+        // Hide the title text
+        ns_window.setTitleVisibility(NSWindowTitleVisibility(2)); // NSWindowTitleHidden
+
+        // Make titlebar transparent
+        ns_window.setTitlebarAppearsTransparent(true);
+
+        // Set full size content view
+        let current_mask = ns_window.styleMask();
+        let new_mask = NSWindowStyleMask(current_mask.0 | (1 << 15)); // NSFullSizeContentViewWindowMask
+        ns_window.setStyleMask(new_mask);
+      } else {
+        // Show the title text
+        ns_window.setTitleVisibility(NSWindowTitleVisibility(0)); // NSWindowTitleVisible
+
+        // Make titlebar opaque
+        ns_window.setTitlebarAppearsTransparent(false);
+
+        // Remove full size content view
+        let current_mask = ns_window.styleMask();
+        let new_mask = NSWindowStyleMask(current_mask.0 & !(1 << 15));
+        ns_window.setStyleMask(new_mask);
+      }
+    }
+
+    Ok(())
+  }
+}
+
 #[tauri::command]
 fn greet() -> String {
   let now = SystemTime::now();
@@ -124,6 +169,61 @@ async fn check_and_handle_startup_url(app_handle: tauri::AppHandle) -> Result<bo
   Ok(false)
 }
 
+#[tauri::command]
+async fn set_window_background_color(
+  app_handle: tauri::AppHandle,
+  is_dark_mode: bool,
+) -> Result<(), String> {
+  #[cfg(target_os = "macos")]
+  {
+    if let Some(window) = app_handle.get_webview_window("main") {
+      use objc2::rc::Retained;
+      use objc2_app_kit::{NSColor, NSWindow};
+
+      let ns_window: Retained<NSWindow> =
+        unsafe { Retained::retain(window.ns_window().unwrap().cast()).unwrap() };
+
+      let bg_color = if is_dark_mode {
+        // Dark mode - pure black background
+        unsafe { NSColor::colorWithRed_green_blue_alpha(0.0, 0.0, 0.0, 1.0) }
+      } else {
+        // Light mode - pure white background
+        unsafe { NSColor::colorWithRed_green_blue_alpha(1.0, 1.0, 1.0, 1.0) }
+      };
+
+      // Ensure this runs on the main thread for immediate visual update
+      unsafe {
+        // Set the window background color
+        ns_window.setBackgroundColor(Some(&bg_color));
+
+        // Force immediate visual updates using multiple refresh methods
+        ns_window.invalidateShadow();
+        ns_window.display();
+
+        // Ensure the window content is redrawn
+        if let Some(content_view) = ns_window.contentView() {
+          content_view.setNeedsDisplay(true);
+          content_view.displayIfNeeded();
+        }
+
+        // Trigger a window update
+        ns_window.update();
+      }
+
+      // Also emit an event to the frontend to ensure synchronization
+      let _ = app_handle.emit("window-background-updated", is_dark_mode);
+    }
+  }
+
+  #[cfg(not(target_os = "macos"))]
+  {
+    // For non-macOS platforms, we can't change the native window background
+    let _ = (app_handle, is_dark_mode); // Suppress unused variable warnings
+  }
+
+  Ok(())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
   tauri::Builder::default()
@@ -132,6 +232,23 @@ pub fn run() {
     .plugin(tauri_plugin_shell::init())
     .plugin(tauri_plugin_deep_link::init())
     .setup(|app| {
+      // Create the main window programmatically
+      let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
+        .title("Donut Browser")
+        .inner_size(900.0, 600.0)
+        .resizable(false)
+        .fullscreen(false);
+
+      let window = win_builder.build().unwrap();
+
+      // Set transparent titlebar for macOS
+      #[cfg(target_os = "macos")]
+      {
+        if let Err(e) = window.set_transparent_titlebar(true) {
+          eprintln!("Failed to set transparent titlebar: {e}");
+        }
+      }
+
       // Set up deep link handler
       let handle = app.handle().clone();
 
@@ -264,6 +381,7 @@ pub fn run() {
       check_for_app_updates_manual,
       download_and_install_app_update,
       get_app_version_info,
+      set_window_background_color,
     ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -10,15 +10,7 @@
     "frontendDist": "../dist"
   },
   "app": {
-    "windows": [
-      {
-        "title": "Donut Browser",
-        "width": 900,
-        "height": 600,
-        "resizable": false,
-        "fullscreen": false
-      }
-    ],
+    "windows": [],
     "security": {
       "csp": null
     }

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "@/styles/globals.css";
 import { CustomThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { WindowDragArea } from "@/components/window-drag-area";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -26,6 +27,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <CustomThemeProvider>
+          <WindowDragArea />
           <TooltipProvider>{children}</TooltipProvider>
           <Toaster />
         </CustomThemeProvider>

src/app/page.tsx

@@ -394,13 +394,13 @@ export default function Home() {
   );
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 gap-8 sm:p-12 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center w-full max-w-3xl">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 gap-8 sm:p-12 font-[family-name:var(--font-geist-sans)]  bg-white dark:bg-black">
+      <main className="flex flex-col row-start-2 gap-8 items-center w-full max-w-3xl">
         <Card className="w-full">
           <CardHeader>
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between items-center">
               <CardTitle>Profiles</CardTitle>
-              <div className="flex items-center gap-2">
+              <div className="flex gap-2 items-center">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -409,9 +409,9 @@ export default function Home() {
                       onClick={() => {
                         setSettingsDialogOpen(true);
                       }}
-                      className="flex items-center gap-2"
+                      className="flex gap-2 items-center"
                     >
-                      <GoGear className="h-4 w-4" />
+                      <GoGear className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Settings</TooltipContent>
@@ -423,9 +423,9 @@ export default function Home() {
                       onClick={() => {
                         setCreateProfileDialogOpen(true);
                       }}
-                      className="flex items-center gap-2"
+                      className="flex gap-2 items-center"
                     >
-                      <GoPlus className="h-4 w-4" />
+                      <GoPlus className="w-4 h-4" />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Create a new profile</TooltipContent>

src/components/window-drag-area.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useEffect, useState } from "react";
+
+export function WindowDragArea() {
+  const [isMacOS, setIsMacOS] = useState(false);
+
+  useEffect(() => {
+    // Check if we're on macOS using user agent detection
+    const checkPlatform = () => {
+      const userAgent = navigator.userAgent.toLowerCase();
+      setIsMacOS(userAgent.includes("mac"));
+    };
+
+    checkPlatform();
+  }, []);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // Only handle left mouse button
+    if (e.button !== 0) return;
+
+    // Start dragging asynchronously
+    const startDrag = async () => {
+      try {
+        const window = getCurrentWindow();
+        await window.startDragging();
+      } catch (error) {
+        console.error("Failed to start window dragging:", error);
+      }
+    };
+
+    void startDrag();
+  };
+
+  // Only render on macOS
+  if (!isMacOS) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 right-0 left-0 z-50 h-8 cursor-move"
+      style={{
+        // Ensure it's above all other content
+        zIndex: 9999,
+        // Make it transparent but still capture mouse events
+        backgroundColor: "transparent",
+        // Prevent text selection during drag
+        userSelect: "none",
+        WebkitUserSelect: "none",
+      }}
+      onMouseDown={handleMouseDown}
+      // Prevent context menu
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+    />
+  );
+}

tailwind.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        black: "#000000",
+      },
+      backgroundColor: {
+        dark: "#000000",
+      },
+    },
+  },
+};