Remove green dot in favor of cutout for tray item (#128)

Author: Hacksore

apps/desktop/src-tauri/Cargo.lock

@@ -44,7 +44,6 @@ tokio = { version = "1", features = [
 tauri-plugin-websocket = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-dark-light = "1.0.0"
 
 # macos dependencies
 [target.'cfg(target_os = "macos")'.dependencies]

apps/desktop/src-tauri/Cargo.toml

@@ -1,24 +1,6 @@
 use tauri::{Manager, State, SystemTrayHandle, Window};
 
-use crate::{constants::*, Clickthrough, Storage};
-
-#[tauri::command]
-pub fn sync_theme(window: Window, storage: State<Storage>, value: String) {
-  let mut theme = storage.theme.lock().unwrap();
-  match value.as_str() {
-    "light" => *theme = ThemeType::Light,
-    "dark" => *theme = ThemeType::Dark,
-    _ => {}
-  };
-
-  // update the tray icon
-  let app = window.app_handle();
-  let clickthrough = get_clickthrough(app.state::<Clickthrough>());
-  let tray_handle = app.tray_handle();
-  let theme = *theme;
-
-  update_tray_icon(tray_handle, theme, clickthrough);
-}
+use crate::{constants::*, Clickthrough};
 
 #[tauri::command]
 pub fn open_settings(window: Window, update: bool) {
@@ -94,27 +76,18 @@ fn _set_clickthrough(value: bool, window: &Window, clickthrough: State<Clickthro
   // update the tray icon
   update_tray_icon(
     window.app_handle().tray_handle(),
-    *window.app_handle().state::<Storage>().theme.lock().unwrap(),
     value,
   );
 }
 
-// BUG: there is a bug if you have an inverted menubar it will be dark and we still load the wrong icon
-// TODO: investigate if this is easy to do with tauri alone
-fn update_tray_icon(tray: SystemTrayHandle, theme: ThemeType, clickthrough: bool) {
-  let icon = if theme == ThemeType::Dark {
-    if clickthrough {
-      tauri::Icon::Raw(include_bytes!("../icons/tray/icon-pinned.png").to_vec())
-    } else {
-      tauri::Icon::Raw(include_bytes!("../icons/tray/icon.png").to_vec())
-    }
+fn update_tray_icon(tray: SystemTrayHandle, clickthrough: bool) {
+  let icon;
+  if clickthrough {
+    icon = tauri::Icon::Raw(include_bytes!("../icons/tray/icon-pinned.png").to_vec());
   } else {
-    if clickthrough {
-      tauri::Icon::Raw(include_bytes!("../icons/tray/icon-pinned-dark.png").to_vec())
-    } else {
-      tauri::Icon::Raw(include_bytes!("../icons/tray/icon-dark.png").to_vec())
-    }
-  };
+    icon = tauri::Icon::Raw(include_bytes!("../icons/tray/icon.png").to_vec());
+  }
+
+  tray.set_icon(icon);
 
-  tray.set_icon(icon).unwrap();
 }

apps/desktop/src-tauri/icons/tray/icon-dark.png

@@ -12,9 +12,3 @@ pub const TRAY_QUIT: &str = "quit";
 
 /// random events
 pub const SHOW_UPDATE_MODAL: &str = "show_update_modal";
-
-#[derive(PartialEq, Copy, Clone, Debug)]
-pub enum ThemeType {
-  Light,
-  Dark,
-}

apps/desktop/src-tauri/icons/tray/icon-pinned-dark.png

@@ -15,7 +15,7 @@ mod window_custom;
 
 use crate::commands::*;
 use constants::*;
-use std::sync::{atomic::AtomicBool, Mutex};
+use std::sync::atomic::AtomicBool;
 use tauri::{generate_handler, Manager};
 use tauri_plugin_window_state::StateFlags;
 use tray::{create_tray_items, handle_tray_events};
@@ -26,12 +26,6 @@ use tauri::{App, Window};
 
 pub struct Clickthrough(AtomicBool);
 
-// play with a struct with interior mutability
-#[derive(Debug)]
-pub struct Storage {
-  theme: Mutex<ThemeType>,
-}
-
 #[cfg(target_os = "macos")]
 fn apply_macos_specifics(_app: &mut App, window: &Window) {
   window.set_visisble_on_all_workspaces(true);
@@ -49,12 +43,9 @@ fn main() {
     .plugin(window_state_plugin.build())
     .plugin(tauri_plugin_websocket::init())
     .plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
-        println!("{}, {argv:?}, {cwd}", app.package_info().name);
+      println!("{}, {argv:?}, {cwd}", app.package_info().name);
     }))
     .manage(Clickthrough(AtomicBool::new(false)))
-    .manage(Storage {
-      theme: Mutex::new(ThemeType::Dark),
-    })
     .setup(|app| {
       let window = app.get_window(MAIN_WINDOW_NAME).unwrap();
       let settings = app.get_window(SETTINGS_WINDOW_NAME).unwrap();
@@ -84,16 +75,6 @@ fn main() {
         settings.open_devtools();
       }
 
-      let mode = dark_light::detect();
-      let mode_string = match mode {
-        dark_light::Mode::Dark => "dark",
-        dark_light::Mode::Light => "light",
-        _ => "dark",
-      };
-
-      // sync the theme
-      sync_theme(window, app.state::<Storage>(), mode_string.to_string());
-
       Ok(())
     })
     // Add the system tray
@@ -104,7 +85,6 @@ fn main() {
       toggle_clickthrough,
       get_clickthrough,
       set_clickthrough,
-      sync_theme,
       open_devtools,
       close_settings,
       open_settings

apps/desktop/src-tauri/icons/tray/icon-pinned.png

@@ -19,7 +19,7 @@
     },
     "systemTray": {
       "iconPath": "icons/tray/icon.png",
-      "iconAsTemplate": false
+      "iconAsTemplate": true 
     },
     "allowlist": {
       "os": {

apps/desktop/src-tauri/src/commands.rs

@@ -11,13 +11,11 @@ import { useAlign } from "./hooks/use-align";
 import { useDisableWebFeatures } from "./hooks/use-disable-context-menu";
 import { useUpdate } from "./hooks/use-update";
 import { useAppStore } from "./store";
-import { useThemeSync } from "./hooks/use-theme-sync";
 import { Toaster } from "./components/ui/toaster";
 import { useEffect } from "react";
 
 function App() {
   useSocket();
-  useThemeSync();
   useDisableWebFeatures();
 
   useEffect(() => {