Merge pull request #96 from Abdenasser/glassy-theme

Glassy theme

package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "macos-task-manager",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "macos-task-manager",
-      "version": "1.0.9",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@tauri-apps/api": "^2.0.3",
+        "@tauri-apps/plugin-os": "^2.0.0",
         "@tauri-apps/plugin-shell": "^2.0.1",
         "simple-icons": "^13.15.0",
         "svelte-fa": "^4.0.3"
@@ -1067,6 +1068,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/plugin-os": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-os/-/plugin-os-2.0.0.tgz",
+      "integrity": "sha512-M7hG/nNyQYTJxVG/UhTKhp9mpXriwWzrs9mqDreB8mIgqA3ek5nHLdwRZJWhkKjZrnDT4v9CpA9BhYeplTlAiA==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.0.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-shell": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-shell/-/plugin-shell-2.0.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@tauri-apps/api": "^2.0.3",
+    "@tauri-apps/plugin-os": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.1",
     "simple-icons": "^13.15.0",
     "svelte-fa": "^4.0.3"

src-tauri/Cargo.lock

@@ -723,6 +723,16 @@ dependencies = [
  "typeid",
 ]
 
+[[package]]
+name = "errno"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "534c5cf6194dfab3db3242765c03bbe257cf92f22b38f6bc0c58d59108a820ba"
+dependencies = [
+ "libc",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "fdeflate"
 version = "0.3.6"
@@ -1003,6 +1013,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "gethostname"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc3655aa6818d65bc620d6911f05aa7b6aeb596291e1e9f79e52df85583d1e30"
+dependencies = [
+ "rustix",
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.1.16"
@@ -1612,6 +1632,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "linux-raw-sys"
+version = "0.4.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89"
+
 [[package]]
 name = "lock_api"
 version = "0.4.12"
@@ -1643,7 +1669,9 @@ dependencies = [
  "sysinfo",
  "tauri",
  "tauri-build",
+ "tauri-plugin-os",
  "tauri-plugin-shell",
+ "window-vibrancy",
 ]
 
 [[package]]
@@ -2084,6 +2112,17 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
 
+[[package]]
+name = "os_info"
+version = "3.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae99c7fa6dd38c7cafe1ec085e804f8f555a2f8659b0dbe03f1f9963a9b51092"
+dependencies = [
+ "log",
+ "serde",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "os_pipe"
 version = "1.2.1"
@@ -2638,6 +2677,19 @@ dependencies = [
  "semver",
 ]
 
+[[package]]
+name = "rustix"
+version = "0.38.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99e4ea3e1cdc4b559b8e5650f9c8e5998e3e5c1343b4eaf034565f32318d63c0"
+dependencies = [
+ "bitflags 2.6.0",
+ "errno",
+ "libc",
+ "linux-raw-sys",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "ryu"
 version = "1.0.18"
@@ -3055,6 +3107,15 @@ dependencies = [
  "futures-core",
 ]
 
+[[package]]
+name = "sys-locale"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8eab9a99a024a169fe8a903cf9d4a3b3601109bcc13bd9e3c6fff259138626c4"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "sysinfo"
 version = "0.29.11"
@@ -3269,6 +3330,24 @@ dependencies = [
  "walkdir",
 ]
 
+[[package]]
+name = "tauri-plugin-os"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc5f23a86f37687c7f4fecfdc706b279087bc44f7a46702f7307ff1551ee03a"
+dependencies = [
+ "gethostname",
+ "log",
+ "os_info",
+ "serde",
+ "serde_json",
+ "serialize-to-javascript",
+ "sys-locale",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 1.0.65",
+]
+
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.0.2"

src-tauri/Cargo.toml

@@ -11,9 +11,11 @@ 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"
+tauri-plugin-os = "2"
+window-vibrancy = "0.5.2"
 
 [features]
 default = [ "custom-protocol" ]

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};
+#[cfg(target_os = "windows")]
+use window_vibrancy::apply_acrylic;
+#[cfg(target_os = "macos")]
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -295,9 +299,38 @@ 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(target_os = "macos")]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_vibrancy(
+        window,
+        NSVisualEffectMaterial::HudWindow,
+        Some(NSVisualEffectState::Active),
+        None,
+    )?;
+    Ok(())
+}
+
+#[cfg(not(any(target_os = "windows", target_os = "macos")))]
+fn setup_window_effects(_window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    // No-op for other platforms
+    Ok(())
+}
+
 fn main() {
     tauri::Builder::default()
+        .setup(|app| {
+            let window = app.get_webview_window("main").unwrap();
+            setup_window_effects(&window).expect("Failed to apply window effects");
+            Ok(())
+        })
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_os::init())
         .manage(AppState::new())
         .invoke_handler(tauri::generate_handler![get_processes, kill_process])
         .run(tauri::generate_context!())

src-tauri/tauri.conf.json

@@ -30,11 +30,17 @@
   "mainBinaryName": "NeoHtop",
   "version": "1.1.0",
   "identifier": "com.neohtop.dev",
-  "plugins": {},
+  "plugins": {
+    "os": {
+      "all": true
+    }
+  },
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "fullscreen": false,
+        "theme":"Dark",
         "height": 900,
         "resizable": true,
         "title": "NeoHtop",
@@ -42,7 +48,8 @@
         "minWidth": 1120,
         "minHeight": 700,
         "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true
       }
     ],
     "security": {

src/app.css

@@ -64,3 +64,58 @@ body {
 ::-webkit-scrollbar-corner {
   background: var(--mantle);
 }
+
+/* Glassy theme */
+
+[data-theme="glassy"] body {
+  background: transparent !important;
+}
+
+[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"] .stat-panel {
+  background: rgba(24, 24, 37, 0.2) !important;
+  z-index: 100;
+}
+
+[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"] td {
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
+  background: rgba(24, 24, 37, 0.2) !important;
+}

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;
   }

src/lib/components/ThemeSwitcher.svelte

@@ -7,6 +7,7 @@
     faChevronDown,
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons";
+  import { platform } from "@tauri-apps/plugin-os";
 
   let showMenu = false;
 
@@ -45,6 +46,14 @@
       label: "Accessibility",
       themes: ["highContrast"],
     },
+    ...(platform() === "windows" || platform() === "macos"
+      ? [
+          {
+            label: "Glassy",
+            themes: ["glassy"],
+          },
+        ]
+      : []),
   ];
 </script>
 

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);
     },
   };

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",
+    },
+  },
 };