From e8c22ba953ea6008d8fdffa765a0d2dfac8cf422 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Sun, 10 Nov 2024 21:53:17 +0100
Subject: [PATCH] first glassy theme draft

---
 src-tauri/Cargo.lock                    |  1 +
 src-tauri/Cargo.toml                    |  1 +
 src-tauri/src/main.rs                   | 21 ++++++++++++-
 src-tauri/tauri.conf.json               |  3 +-
 src/app.css                             | 40 +++++++++++++++++++++++++
 src/lib/components/StatsBar.svelte      |  6 ++--
 src/lib/components/ThemeSwitcher.svelte |  2 +-
 src/lib/stores/index.ts                 |  9 ++++++
 src/lib/styles/index.ts                 | 27 +++++++++++++++++
 9 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index f4374d4..448c51d 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1644,6 +1644,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-shell",
+ "window-vibrancy",
 ]
 
 [[package]]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 5e132ce..80c7e02 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -14,6 +14,7 @@ serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2", features = [] }
 sysinfo = "0.29.0"
 tauri-plugin-shell = "2"
+window-vibrancy = "0.5.2"
 
 [features]
 default = [ "custom-protocol" ]
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 8ab9031..4b6e79c 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -7,7 +7,11 @@ use sysinfo::{
     CpuExt, Disk, DiskExt, NetworkExt, NetworksExt, PidExt, ProcessExt, ProcessStatus, System,
     SystemExt,
 };
-use tauri::State;
+use tauri::{Manager, State};
+
+use window_vibrancy::apply_vibrancy;
+#[cfg(target_os = "windows")]
+use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -297,6 +301,21 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, Stri
 
 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");
+            }
+
+            Ok(())
+        })
         .plugin(tauri_plugin_shell::init())
         .manage(AppState::new())
         .invoke_handler(tauri::generate_handler![get_processes, kill_process])
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 27616e2..369f0cf 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -42,7 +42,8 @@
         "minWidth": 1120,
         "minHeight": 700,
         "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true
       }
     ],
     "security": {
diff --git a/src/app.css b/src/app.css
index 861543c..223680a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -64,3 +64,43 @@ body {
 ::-webkit-scrollbar-corner {
   background: var(--mantle);
 }
+
+[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;
+  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.5) !important;
+  z-index: 100;
+}
+
+[data-theme="glassy"] th {
+  background: rgba(24, 24, 37, 0.5) !important;
+}
+
+[data-theme="glassy"] .col-actions {
+  background: rgba(24, 24, 37, 0.2) !important;
+}
+
+[data-theme="glassy"] .process-table tr:hover td {
+  background: rgba(24, 24, 37, 0.55) !important;
+}
+
diff --git a/src/lib/components/StatsBar.svelte b/src/lib/components/StatsBar.svelte
index 33b5762..034c00b 100644
--- a/src/lib/components/StatsBar.svelte
+++ b/src/lib/components/StatsBar.svelte
@@ -180,9 +180,7 @@
 
 <style>
   .dashboard-stats {
-    background: var(--base);
     padding: 0.5rem;
-    border-radius: 8px;
     overflow-x: auto;
   }
 
@@ -195,10 +193,10 @@
   .stat-panel {
     flex: 1;
     min-width: 0;
-    background: var(--mantle);
+    background-color: var(--mantle);
     border-radius: 6px;
     padding: 0.75rem;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
     display: flex;
     flex-direction: column;
   }
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index 56f638d..c94b912 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"],
+      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"],
     },
     {
       label: "Light",
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 3e14eab..6087dbb 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -23,6 +23,8 @@ function createThemeStore() {
       if (theme) {
         if (typeof window !== "undefined") {
           localStorage.setItem("theme", themeName);
+          // Add this line to set the data-theme attribute
+          document.documentElement.setAttribute("data-theme", themeName);
         }
         set(theme);
         applyTheme(theme);
@@ -32,6 +34,13 @@ function createThemeStore() {
       const storedTheme =
         typeof window !== "undefined" ? localStorage.getItem("theme") : null;
       const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
+      if (typeof window !== "undefined") {
+        // Add this line to set the data-theme attribute on init
+        document.documentElement.setAttribute(
+          "data-theme",
+          storedTheme || "catppuccin",
+        );
+      }
       applyTheme(theme);
     },
   };
diff --git a/src/lib/styles/index.ts b/src/lib/styles/index.ts
index 36cfa70..5d28bb9 100644
--- a/src/lib/styles/index.ts
+++ b/src/lib/styles/index.ts
@@ -540,4 +540,31 @@ export const themes: Record<string, Theme> = {
       teal: "#55FFFF", // Another cyan
     },
   },
+  glassy: {
+    name: "glassy",
+    label: "Glassy",
+    colors: {
+      base: "#1e1e2e",
+      mantle: "#181825",
+      crust: "#11111b",
+      text: "#cdd6f4",
+      subtext0: "#a6adc8",
+      subtext1: "#bac2de",
+      surface0: "#313244",
+      surface1: "#45475a",
+      surface2: "#585b70",
+      overlay0: "#6c7086",
+      overlay1: "#7f849c",
+      blue: "#89b4fa",
+      lavender: "#b4befe",
+      sapphire: "#74c7ec",
+      sky: "#89dceb",
+      red: "#f38ba8",
+      maroon: "#eba0ac",
+      peach: "#fab387",
+      yellow: "#f9e2af",
+      green: "#a6e3a1",
+      teal: "#94e2d5",
+    },
+  },
 };