custom navbar

winfunc · 123vivekr · Aug 11, 2025 · Aug 4, 2025 · Aug 4, 2025 · Aug 6, 2025
commit ba60b63cdeee1b08b105e789540ac63a81f0e6d1
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -20,7 +20,7 @@ crate-type = ["lib", "cdylib", "staticlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["protocol-asset", "tray-icon", "image-png"] }
+tauri = { version = "2", features = [ "macos-private-api", "protocol-asset", "tray-icon", "image-png"] }
 tauri-plugin-shell = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-fs = "2"
@@ -30,6 +30,7 @@ tauri-plugin-notification = "2"
 tauri-plugin-clipboard-manager = "2"
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-http = "2"
+window-vibrancy = "0.5"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tokio = { version = "1", features = ["full"] }

diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
@@ -49,6 +49,11 @@
     "notification:default",
     "clipboard-manager:default",
     "global-shortcut:default",
-    "updater:default"
+    "updater:default",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize", 
+    "core:window:allow-close",
+    "core:window:allow-is-maximized"
   ]
 }
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -45,22 +45,11 @@ use commands::storage::{
 use commands::proxy::{get_proxy_settings, save_proxy_settings, apply_proxy_settings};
 use process::ProcessRegistryState;
 use std::sync::Mutex;
-use tauri::{Manager, Theme};
+use tauri::Manager;
+
+#[cfg(target_os = "macos")]
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 
-#[tauri::command]
-async fn set_window_theme(window: tauri::Window, theme: String) -> Result<(), String> {
-    let theme_enum = match theme.as_str() {
-        "dark" => Some(Theme::Dark),
-        "light" => Some(Theme::Light),
-        _ => None,
-    };
-
-    if let Some(theme) = theme_enum {
-        window.set_theme(Some(theme)).map_err(|e| e.to_string())?;
-    }
-
-    Ok(())
-}
 
 fn main() {
     // Initialize logger
@@ -151,6 +140,14 @@ fn main() {
             // Initialize Claude process state
             app.manage(ClaudeProcessState::default());
 
+            // Apply window vibrancy with rounded corners on macOS
+            #[cfg(target_os = "macos")]
+            {
+                let window = app.get_webview_window("main").unwrap();
+                apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, Some(12.0))
+                    .expect("Failed to apply window vibrancy");
+            }
+
             Ok(())
         })
         .invoke_handler(tauri::generate_handler![
@@ -264,9 +261,6 @@ fn main() {
             // Proxy Settings
             get_proxy_settings,
             save_proxy_settings,
-
-            // Window Theme
-            set_window_theme,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -10,13 +10,15 @@
     "frontendDist": "../dist"
   },
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "title": "Claudia",
         "width": 800,
         "height": 600,
-        "titleBarStyle": "transparent",
-        "theme": "dark"
+        "decorations": false,
+        "transparent": true,
+        "shadow": true
       }
     ],
     "security": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import { ProjectList } from "@/components/ProjectList";
 import { SessionList } from "@/components/SessionList";
 import { RunningClaudeSessions } from "@/components/RunningClaudeSessions";
 import { Topbar } from "@/components/Topbar";
+import { CustomTitlebar } from "@/components/CustomTitlebar";
 import { MarkdownEditor } from "@/components/MarkdownEditor";
 import { ClaudeFileEditor } from "@/components/ClaudeFileEditor";
 import { Settings } from "@/components/Settings";
@@ -476,15 +477,25 @@ function AppContent() {
 
   return (
     <div className="h-screen bg-background flex flex-col">
-      {/* Topbar */}
-      <Topbar
+      {/* Custom Titlebar */}
+      <CustomTitlebar
+        onAgentsClick={() => setShowAgentsModal(true)}
+        onUsageClick={() => createUsageTab()}
+        onClaudeClick={() => createClaudeMdTab()}
+        onMCPClick={() => createMCPTab()}
+        onSettingsClick={() => createSettingsTab()}
+        onInfoClick={() => setShowNFO(true)}
+      />
+
+      {/* Topbar - Commented out since navigation moved to titlebar */}
+      {/* <Topbar
         onClaudeClick={() => createClaudeMdTab()}
         onSettingsClick={() => createSettingsTab()}
         onUsageClick={() => createUsageTab()}
         onMCPClick={() => createMCPTab()}
         onInfoClick={() => setShowNFO(true)}
         onAgentsClick={() => setShowAgentsModal(true)}
-      />
+      /> */}
 
       {/* Analytics Consent Banner */}
       <AnalyticsConsentBanner />

diff --git a/src/components/App.cleaned.tsx b/src/components/App.cleaned.tsx
@@ -8,6 +8,7 @@ import { Toast, ToastContainer } from "@/components/ui/toast";
 import { TabManager } from "@/components/TabManager";
 import { TabContent } from "@/components/TabContent";
 import { AgentsModal } from "@/components/AgentsModal";
+import { CustomTitlebar } from "@/components/CustomTitlebar";
 import { useTabState } from "@/hooks/useTabState";
 
 /**
@@ -111,8 +112,21 @@ function AppContent() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="min-h-screen bg-background flex flex-col"
+        className="min-h-screen bg-background flex flex-col rounded-xl overflow-hidden shadow-2xl border border-border/20"
       >
+        {/* Custom Titlebar */}
+        <CustomTitlebar
+          onSettingsClick={() => {
+            // Open settings tab or modal
+            window.dispatchEvent(new CustomEvent('create-settings-tab'));
+          }}
+          onAgentsClick={() => setShowAgentsModal(true)}
+          onMenuClick={() => {
+            // Could open a command palette or menu
+            console.log('Menu clicked');
+          }}
+        />
+
         {/* Tab-based interface */}
         <div className="flex-1 flex flex-col">
           <TabManager />