From 60793b983410f20ccf996d6fde34a6ff4d2c700d Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Sun, 10 Nov 2024 23:04:28 +0100
Subject: [PATCH] glassy: first transparent theme

---
 src-tauri/Cargo.toml                    |  2 +-
 src-tauri/src/main.rs                   | 33 ++++++++-------
 src-tauri/tauri.conf.json               |  2 +
 src/app.css                             | 54 ++++++++++++++++---------
 src/lib/components/ThemeSwitcher.svelte |  6 ++-
 5 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 80c7e02..6adeeca 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -11,7 +11,7 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["macos-private-api"] }
 sysinfo = "0.29.0"
 tauri-plugin-shell = "2"
 window-vibrancy = "0.5.2"
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 4b6e79c..6d36873 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -9,9 +9,7 @@ use sysinfo::{
 };
 use tauri::{Manager, State};
 
-use window_vibrancy::apply_vibrancy;
-#[cfg(target_os = "windows")]
-use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState};
+use window_vibrancy::{apply_acrylic, apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -299,21 +297,28 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, Stri
     }
 }
 
+#[cfg(target_os = "windows")]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_acrylic(window, Some((0, 0, 25, 125)))?;
+    Ok(())
+}
+
+#[cfg(not(target_os = "windows"))]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_vibrancy(
+        window,
+        NSVisualEffectMaterial::HudWindow,
+        Some(NSVisualEffectState::Active),
+        None,
+    )?;
+    Ok(())
+}
+
 fn main() {
     tauri::Builder::default()
         .setup(|app| {
             let window = app.get_webview_window("main").unwrap();
-
-            #[cfg(target_os = "windows")]
-            {
-                // You can choose either blur or acrylic effect
-                apply_acrylic(&window, Some((0, 0, 25, 125))).expect("Failed to apply blur effect");
-
-                // Or use acrylic effect (Windows 10/11)
-                // apply_acrylic(&window, Some((18, 18, 18, 125)))
-                //     .expect("Failed to apply acrylic effect");
-            }
-
+            setup_window_effects(&window).expect("Failed to apply window effects");
             Ok(())
         })
         .plugin(tauri_plugin_shell::init())
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 369f0cf..22f791f 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -32,9 +32,11 @@
   "identifier": "com.neohtop.dev",
   "plugins": {},
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "fullscreen": false,
+        "theme":"Dark",
         "height": 900,
         "resizable": true,
         "title": "NeoHtop",
diff --git a/src/app.css b/src/app.css
index 223680a..c2b80ce 100644
--- a/src/app.css
+++ b/src/app.css
@@ -65,42 +65,58 @@ body {
   background: var(--mantle);
 }
 
+
+/* Glassy theme */
+
 [data-theme="glassy"] body {
   background: transparent !important;
 }
 
-[data-theme="glassy"] .title-bar {
-  position: relative;
-  background: rgba(24, 24, 37, 0.5) !important;
-  z-index: 10;
-}
-
 [data-theme="glassy"] .toolbar {
   position: relative;
   background: rgba(24, 24, 37, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
   z-index: 9;
 }
 
-[data-theme="glassy"] .process-table {
-  position: relative;
-  background: rgba(24, 24, 37, 0.5) !important;
-  z-index: 8;
+[data-theme="glassy"] .stat-panel {
+  background: rgba(24, 24, 37, 0.2) !important;
+  z-index: 100;
 }
 
-[data-theme="glassy"] .stat-panel {
-  background: rgba(24, 24, 37, 0.5) !important;
+[data-theme="glassy"] .panel-header {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+[data-theme="glassy"] .col-actions {
+  background: rgba(24, 24, 37, 0.2) !important;
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
+  border-left: 1px solid rgba(232, 232, 232, 0.1) !important;
+}
+
+[data-theme="glassy"] .search-input,
+[data-theme="glassy"] .btn-toggle,
+[data-theme="glassy"] .btn-action,
+[data-theme="glassy"] .info-button,
+[data-theme="glassy"] .btn-page,
+[data-theme="glassy"] .theme-button,
+[data-theme="glassy"] .usage-pill,
+[data-theme="glassy"] .bar-container,
+[data-theme="glassy"] .select-input {
+  background: rgba(24, 24, 37, 0.2) !important;
   z-index: 100;
 }
 
+[data-theme="glassy"] tr.pinned,
+[data-theme="glassy"] tr:hover {
+  background: rgba(24, 24, 37, 0.3) !important;
+}
+
 [data-theme="glassy"] th {
   background: rgba(24, 24, 37, 0.5) !important;
 }
 
-[data-theme="glassy"] .col-actions {
+[data-theme="glassy"] td {
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
   background: rgba(24, 24, 37, 0.2) !important;
-}
-
-[data-theme="glassy"] .process-table tr:hover td {
-  background: rgba(24, 24, 37, 0.55) !important;
-}
-
+}
\ No newline at end of file
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index c94b912..d33237b 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -13,7 +13,7 @@
   const themeGroups = [
     {
       label: "Dark",
-      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"],
+      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"],
     },
     {
       label: "Light",
@@ -45,6 +45,10 @@
       label: "Accessibility",
       themes: ["highContrast"],
     },
+    {
+      label: "Glassy",
+      themes: ["glassy"],
+    },
   ];
 </script>