diff --git a/CHANGELOG.md b/CHANGELOG.md index 56b76854..d6670f02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/). +## 0.7.3 +- Add persistent title bars so it matches with the theme + ## 0.7.2 - Implement custom title bars diff --git a/README.md b/README.md index d0b0dc53..97dc26a8 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ Pachtop is a cross-platform desktop application built with Rust that allows you > NOTE: Pachtop is under active development, most of the features are still experimental and subject to change.

- +

@@ -44,28 +44,30 @@ Please see the release The inspiration for Pachtop stems mainly from using [Stacer](https://oguzhaninan.github.io/Stacer-Web/) which is a comprehensive System optimizer and monitoring solution. Although, Pachtop does not implement any system optimizer functionality (yet!), It provides more in-depth metrics and information about your system. I wanted to create a similar application to Stacer but with a more modern UI and a more robust codebase. I also wanted to learn Rust and this seemed like a good opportunity to do so. If you hadn't guessed, Pachtop is named after the legendary [top]() linux program that displays information about CPU and memory utilization. Pachtop will always remain open-source and free to use. +# 📚 Themes -# 🚀 Showcase -![image](https://github.com/pacholoamit/pachtop/assets/69985528/ff1cc06a-f451-439f-ace9-6e28cf0a4c64) +## Midnight -![image](https://github.com/pacholoamit/pachtop/assets/69985528/64e89f89-7e15-4dd0-a5f8-69b5e719b2ed) +![image](https://github.com/pacholoamit/pachtop/assets/69985528/197bf5ba-7c71-45cb-9b6e-dac92df71eeb) -![image](https://github.com/pacholoamit/pachtop/assets/69985528/529daa85-f0e6-4b2f-a358-09d36398fcef) +## Bumblebee -# 📚 Themes +![image](https://github.com/pacholoamit/pachtop/assets/69985528/41db4a6d-511e-498f-8d44-68b48123753a) ## Slate -![image](https://github.com/pacholoamit/pachtop/assets/69985528/15518077-abf4-4e4b-9dbb-589ed8ae1b25) +![image](https://github.com/pacholoamit/pachtop/assets/69985528/f746921b-efbb-49fc-b65a-2bb375df4924) -## Midnight - -![image](https://github.com/pacholoamit/pachtop/assets/69985528/304f9acc-91b3-42a7-8003-3882d0548e22) +# 🚀 Showcase -## Bumblebee +## Dashboard +![image](https://github.com/pacholoamit/pachtop/assets/69985528/f746921b-efbb-49fc-b65a-2bb375df4924) -![image](https://github.com/pacholoamit/pachtop/assets/69985528/ce06a95d-942f-4f5a-95cd-dbc27f8f702b) +## Disks +![image](https://github.com/pacholoamit/pachtop/assets/69985528/50c78111-029c-4517-899c-8b4472cff6fe) +## Processes +![image](https://github.com/pacholoamit/pachtop/assets/69985528/f4d1ab2d-773a-4851-818d-d5ad58f10e29) # 🏗️ Architecture diff --git a/index.html b/index.html index ab267537..a5c6fb8d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,38 @@ - + + + @@ -122,9 +159,6 @@ - - - Pachtop diff --git a/package.json b/package.json index 17d2a88a..30d30840 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pachtop", "private": true, - "version": "0.7.2", + "version": "0.7.3", "type": "module", "scripts": { "dev": "vite", diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 62f8237f..43d42066 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -81,7 +81,7 @@ checksum = "25bdb32cbbdce2b519a9cd7df3a678443100e265d5e25ca763b7572a5104f5f3" [[package]] name = "app" -version = "0.7.2" +version = "0.7.3" dependencies = [ "chrono", "cocoa 0.25.0", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 927313a9..5cbbecf9 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "app" -version = "0.7.2" +version = "0.7.3" description = "Cross-platform (Linux, WIndows, MacOS) Desktop GUI system monitor" authors = ["Pacholo Amit"] license = "MIT" @@ -19,7 +19,7 @@ chrono = {version = "0.4.23", features= ["serde"] } # rusqlite = { version = "0.28.0", features = ["bundled", "chrono"] } serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } -tauri = { version = "1.6.5", features = ["api-all", "system-tray", "updater", "window-start-dragging"] } +tauri = { version = "1.6.5", features = ["api-all", "system-tray", "updater"] } sysinfo = "0.29.11" tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" } tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" } diff --git a/src-tauri/src/win/window.rs b/src-tauri/src/win/window.rs index 7d8c0da5..6cf3c241 100644 --- a/src-tauri/src/win/window.rs +++ b/src-tauri/src/win/window.rs @@ -18,6 +18,10 @@ use windows::Win32::Graphics::Dwm::DWMWA_USE_IMMERSIVE_DARK_MODE; use windows::Win32::UI::Controls::SetWindowThemeAttribute; use windows::Win32::UI::Controls::WTNCA_NODRAWCAPTION; +use std::path::PathBuf; +use tauri::Wry; +use tauri_plugin_store::with_store; +use tauri_plugin_store::StoreCollection; use winver::WindowsVersion; fn hex_color_to_colorref(color: HexColor) -> COLORREF { @@ -25,6 +29,10 @@ fn hex_color_to_colorref(color: HexColor) -> COLORREF { unsafe { COLORREF(transmute::<[u8; 4], u32>([color.r, color.g, color.b, 0])) } } +fn hex_color_to_string(color: HexColor) -> String { + format!("#{:02X}{:02X}{:02X}", color.r, color.g, color.b) +} + struct WinThemeAttribute { flag: u32, mask: u32, @@ -79,17 +87,15 @@ pub fn setup_win_window(app: &mut App) { let window = app.get_window("main").unwrap(); let win_handle = window.hwnd().unwrap(); - let win_clone = win_handle.clone(); - //TODO: Update this to update based on theme - app.listen_global("hopp-bg-changed", move |ev| { + app.listen_global("bg-changed", move |ev| { let payload = serde_json::from_str::<&str>(ev.payload().unwrap()) .unwrap() .trim(); let color = HexColor::parse_rgb(payload).unwrap(); - update_bg_color(&HWND(win_clone.0), color); + update_bg_color(&HWND(win_handle.0), color); }); update_bg_color(&HWND(win_handle.0), HexColor::rgb(9, 9, 11)); diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index a3a8993e..95234f31 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "pachtop", - "version": "0.7.2" + "version": "0.7.3" }, "tauri": { "systemTray": { diff --git a/src/lib/events.ts b/src/lib/events.ts new file mode 100644 index 00000000..3c47bc03 --- /dev/null +++ b/src/lib/events.ts @@ -0,0 +1,3 @@ +import { emit } from "@tauri-apps/api/event"; + +export const setWindowColor = (color: string) => emit("bg-changed", color); diff --git a/src/lib/index.ts b/src/lib/index.ts index e07b9d7b..5549ea0c 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -3,4 +3,4 @@ export * from "@/lib/types"; export * from "@/lib/store"; export * from "@/lib/autostart"; export * from "@/lib/commands"; - +export * from "@/lib/events"; diff --git a/src/lib/store.ts b/src/lib/store.ts index 8741c3a4..e50d1a64 100644 --- a/src/lib/store.ts +++ b/src/lib/store.ts @@ -11,6 +11,16 @@ const userId = (store: Store) => { }; }; +const windowColor = (store: Store) => { + return { + get: async () => await store.get("windowColor"), + set: async (value: string) => { + await store.set("windowColor", value); + await store.save(); + }, + }; +}; + const theme = (store: Store) => { return { get: async () => await store.get("theme"), @@ -26,6 +36,7 @@ const createStore = (path: string) => { return { userId: userId(store), + windowColor: windowColor(store), theme: theme(store), }; }; diff --git a/src/providers/theme.provider.tsx b/src/providers/theme.provider.tsx index 1a33bbb9..daf0604e 100644 --- a/src/providers/theme.provider.tsx +++ b/src/providers/theme.provider.tsx @@ -1,6 +1,7 @@ import { MantineProvider, MantineThemeOverride } from "@mantine/core"; import { createContext, useEffect, useState } from "react"; -import store from "../lib/store"; +import { setWindowColor } from "@/lib"; +import store from "@/lib/store"; import "non.geist"; import "non.geist/mono"; @@ -33,6 +34,7 @@ const themes: Record = { ], }, other: { + titlebar: "#0d1830", charts: { // Use DefaultMantineColor for the color statsRing: { @@ -138,6 +140,7 @@ const themes: Record = { ], }, other: { + titlebar: "#09090b", charts: { // Use DefaultMantineColor for the color statsRing: { @@ -224,6 +227,7 @@ const themes: Record = { ], }, other: { + titlebar: "#09090b", charts: { // Use DefaultMantineColor for the color statsRing: { @@ -299,6 +303,9 @@ export const ThemeContext = createContext({ setTheme: (theme: THEME_OPTION) => {}, }); +// TODO: Add this to constants? +const DEFAULT_TITLEBAR_COLOR = "#0d1830"; + const ThemeProvider: React.FC = ({ children }) => { const [theme, setTheme] = useState(themes[THEME_OPTION.SLATE]); const [currentTheme, setCurrentTheme] = useState(THEME_OPTION.SLATE); @@ -308,6 +315,7 @@ const ThemeProvider: React.FC = ({ children }) => { if (theme) { setTheme(themes[theme as THEME_OPTION]); setCurrentTheme(theme as THEME_OPTION); + setWindowColor(themes[theme as THEME_OPTION]?.other?.titlebar || DEFAULT_TITLEBAR_COLOR); } }); }, []); @@ -315,7 +323,9 @@ const ThemeProvider: React.FC = ({ children }) => { const handleSetTheme = (theme: THEME_OPTION) => { setTheme(themes[theme]); setCurrentTheme(theme); + setWindowColor(themes[theme]?.other?.titlebar || DEFAULT_TITLEBAR_COLOR); store.theme.set(theme); + store.windowColor.set(themes[theme]?.other?.titlebar || DEFAULT_TITLEBAR_COLOR); }; return (