Merge pull request #130 from pacholoamit/master

master

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
 

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.
 
 <p align="center">
-    <img src="https://github.com/pacholoamit/pachtop/assets/69985528/3972a5af-44f7-4880-89c1-37ab66a1b7a3"/>
+    <img src="https://github.com/pacholoamit/pachtop/assets/69985528/104bac3d-3778-42a0-b358-8fc111f3a658"/>
     <br/>
     <br/>
     <img src="https://rust-reportcard.xuri.me/badge/github.com/pacholoamit/pachtop" />
@@ -44,28 +44,30 @@ Please see the <a href="https://github.com/pacholoamit/pachtop/releases">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](<https://en.wikipedia.org/wiki/Top_(software)>) 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
 

index.html

@@ -4,7 +4,38 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <style type="text/css">
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        overflow: overlay;
+      }
+
+      .div1 {
+        background: grey;
+        margin-top: 200px;
+        margin-bottom: 20px;
+        height: 20px;
+      }
+
+      ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: rgba(90, 90, 90);
+      }
+
+      ::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.2);
+      }
+    </style>
+    <!-- <style type="text/css">
       ::-webkit-scrollbar {
         width: 6px;
         height: 6px;
@@ -38,8 +69,14 @@
       ::-webkit-scrollbar-corner {
         background: transparent;
       }
-    </style>
-
+    </style> -->
+    <!-- Hide scrollbars -->
+    <!-- <style>
+      body {
+        overflow-y: hidden; /* Hide vertical scrollbar */
+        overflow-x: hidden; /* Hide horizontal scrollbar */
+      }
+    </style> -->
     <!-- LOAD GOOGLE FONTS START -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -122,9 +159,6 @@
     </style>
     <!-- LOAD GOOGLE FONTS END -->
 
-    <!-- CUSTOM TITLE BAR START -->
-
-    <!-- CUSTOM TITLE BAR END -->
     <title>Pachtop</title>
   </head>
   <body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pachtop",
   "private": true,
-  "version": "0.7.2",
+  "version": "0.7.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

src-tauri/src/win/window.rs

@@ -18,13 +18,21 @@ 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 {
     // TODO: Remove this unsafe, This operation doesn't need to be unsafe!
     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));

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "pachtop",
-    "version": "0.7.2"
+    "version": "0.7.3"
   },
   "tauri": {
     "systemTray": {

src/lib/events.ts

@@ -0,0 +1,3 @@
+import { emit } from "@tauri-apps/api/event";
+
+export const setWindowColor = (color: string) => emit("bg-changed", color);

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

src/lib/store.ts

@@ -11,6 +11,16 @@ const userId = (store: Store) => {
   };
 };
 
+const windowColor = (store: Store) => {
+  return {
+    get: async () => await store.get<string>("windowColor"),
+    set: async (value: string) => {
+      await store.set("windowColor", value);
+      await store.save();
+    },
+  };
+};
+
 const theme = (store: Store) => {
   return {
     get: async () => await store.get<string>("theme"),
@@ -26,6 +36,7 @@ const createStore = (path: string) => {
 
   return {
     userId: userId(store),
+    windowColor: windowColor(store),
     theme: theme(store),
   };
 };

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<THEME_OPTION, MantineThemeOverride> = {
       ],
     },
     other: {
+      titlebar: "#0d1830",
       charts: {
         // Use DefaultMantineColor for the color
         statsRing: {
@@ -138,6 +140,7 @@ const themes: Record<THEME_OPTION, MantineThemeOverride> = {
       ],
     },
     other: {
+      titlebar: "#09090b",
       charts: {
         // Use DefaultMantineColor for the color
         statsRing: {
@@ -224,6 +227,7 @@ const themes: Record<THEME_OPTION, MantineThemeOverride> = {
       ],
     },
     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<ThemeProviderProps> = ({ children }) => {
   const [theme, setTheme] = useState<MantineThemeOverride>(themes[THEME_OPTION.SLATE]);
   const [currentTheme, setCurrentTheme] = useState<THEME_OPTION>(THEME_OPTION.SLATE);
@@ -308,14 +315,17 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ 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);
       }
     });
   }, []);
 
   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 (