Merge pull request #129 from pacholoamit/feat/implement-dynamic-title…

…bars feat/implement dynamic titlebars
pacholoamit · May 16, 2024 · 1c31a00 · 1c31a00
2 parents 5fbbe7e + 7eec2dc
commit 1c31a00
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 14 deletions.
diff --git a/index.html b/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>

diff --git a/package.json b/package.json
@@ -49,4 +49,4 @@
     "vite": "^5.2.11"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -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
@@ -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));

diff --git a/src/lib/events.ts 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
@@ -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
@@ -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),
   };
 };

diff --git 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<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 (
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,4 @@ @@
         "vite": "^5.2.11"
       },
       "packageManager": "[email protected]"
-    }
+    }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { emit } from "@tauri-apps/api/event";

		export const setWindowColor = (color: string) => emit("bg-changed", color);