Merge pull request #96 from Abdenasser/glassy-theme

Glassy theme
2025-04-04 17:56:42 +00:00 · 2024-11-11 00:39:08 +01:00 · 2024-11-11 00:39:08 +01:00 · bbe2504327
commit bbe2504327
parent a828937cab faa5b84231
11 changed files with 240 additions and 10 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src-tauri/Cargo.lock
+++ b/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"
--- a/src-tauri/Cargo.toml
+++ b/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" ]
--- 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};
+#[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!())
--- a/src-tauri/tauri.conf.json
+++ b/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": {
--- a/src/app.css
+++ b/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;
+}
--- 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;
  }
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/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>

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