Add tray icon and custom window impl

src-tauri/Cargo.toml

@@ -13,7 +13,7 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.5", features = [ "window-set-size", "window-set-always-on-top", "window-start-dragging", "macos-private-api", "devtools", "http-all"] }
+tauri = { version = "1.5", features = [ "system-tray", "window-set-size", "window-set-always-on-top", "window-start-dragging", "macos-private-api", "devtools", "http-all"] }
 serde = { version = "1.0", features = ["derive"] }
 tauri-plugin-websocket = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 serde_json = "1.0"

src-tauri/src/main.rs

@@ -1,9 +1,63 @@
-// Prevents additional console window on Windows in release, DO NOT REMOVE!!
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+#![cfg_attr(
+  all(not(debug_assertions), target_os = "windows"),
+  windows_subsystem = "windows"
+)]
+
+#[cfg(target_os = "macos")]
+#[macro_use]
+extern crate objc;
+
+mod window_custom;
+
+use tauri::{
+  CustomMenuItem, Manager, RunEvent, SystemTray, SystemTrayEvent,
+  SystemTrayMenu,
+};
+use window_custom::WindowExt as _;
 
 fn main() {
-  tauri::Builder::default()
+  // System tray configuration
+  let tray = SystemTray::new().with_menu(
+    SystemTrayMenu::new()
+      .add_item(CustomMenuItem::new("show_overlayed", "Show Overlayed"))
+      .add_item(CustomMenuItem::new("quit", "Quit"))
+  );
+
+  let app = tauri::Builder::default()
     .plugin(tauri_plugin_websocket::init())
-    .run(tauri::generate_context!())
-    .expect("error while running tauri application");
+    .setup(|app| {
+      let window = app.get_window("main").unwrap();
+      #[cfg(target_os = "macos")]
+      window.set_transparent_titlebar(true, true);
+      // Move the window to the center of the screen
+      window.center().expect("Cannot move window!");
+
+      // Open dev tools
+      #[cfg(debug_assertions)]
+      window.open_devtools();
+      Ok(())
+    })
+    // Add the system tray
+    .system_tray(tray)
+    // Handle system tray events
+    .on_system_tray_event(|app, event| match event {
+      SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
+        "quit" => std::process::exit(0),
+        "show_overlayed" => {
+          let window = app.get_window("main").unwrap();
+          window.show().unwrap();
+          window.set_focus().unwrap();
+        }
+        _ => {}
+      },
+      _ => {}
+    })
+    .build(tauri::generate_context!())
+    .expect("An error occured while running the app!");
+
+  app.run(|_app_handle, e| match e {
+    RunEvent::Ready => {
+    }
+    _ => {}
+  })
 }

src-tauri/src/window_custom.rs

@@ -0,0 +1,46 @@
+#[cfg(target_os = "macos")]
+use cocoa::appkit::{NSWindow, NSWindowButton, NSWindowStyleMask, NSWindowTitleVisibility};
+
+#[cfg(target_os = "macos")]
+use objc::runtime::YES;
+use tauri::{Runtime, Window};
+
+pub trait WindowExt {
+    #[cfg(target_os = "macos")]
+    fn set_transparent_titlebar(&self, title_transparent: bool, remove_toolbar: bool);
+}
+
+impl<R: Runtime> WindowExt for Window<R> {
+    #[cfg(target_os = "macos")]
+    fn set_transparent_titlebar(&self, title_transparent: bool, remove_tool_bar: bool) {
+        unsafe {
+            let id = self.ns_window().unwrap() as cocoa::base::id;
+            NSWindow::setTitlebarAppearsTransparent_(id, cocoa::base::YES);
+            let mut style_mask = id.styleMask();
+            style_mask.set(
+                NSWindowStyleMask::NSFullSizeContentViewWindowMask,
+                title_transparent,
+            );
+            id.setStyleMask_(style_mask);
+            if remove_tool_bar {
+                let close_button = id.standardWindowButton_(NSWindowButton::NSWindowCloseButton);
+                let _: () = msg_send![close_button, setHidden: YES];
+                let min_button =
+                    id.standardWindowButton_(NSWindowButton::NSWindowMiniaturizeButton);
+                let _: () = msg_send![min_button, setHidden: YES];
+                let zoom_button = id.standardWindowButton_(NSWindowButton::NSWindowZoomButton);
+                let _: () = msg_send![zoom_button, setHidden: YES];
+            }
+            id.setTitleVisibility_(if title_transparent {
+                NSWindowTitleVisibility::NSWindowTitleHidden
+            } else {
+                NSWindowTitleVisibility::NSWindowTitleVisible
+            });
+            id.setTitlebarAppearsTransparent_(if title_transparent {
+                cocoa::base::YES
+            } else {
+                cocoa::base::NO
+            });
+        }
+    }
+}

src-tauri/tauri.conf.json

@@ -11,6 +11,10 @@
     "version": "0.0.0"
   },
   "tauri": {
+    "systemTray": {
+      "iconPath": "icons/32x32.png",
+      "iconAsTemplate": true
+    },
     "allowlist": {
       "all": false,
       "http": {
@@ -44,7 +48,6 @@
         "fullscreen": false,
         "resizable": true,
         "transparent": true,
-        "decorations": false,
         "title": "overlayed-rust-test",
         "width": 420,
         "height": 600

src/components/nav-bar.tsx

@@ -28,7 +28,7 @@ export const NavBar = () => {
   return (
     <div
       data-tauri-drag-region
-      className="cursor-default rounded-t-md font-bold select-none p-2 bg-zinc-900 text-white"
+      className="transition ease-in text-transparent hover:text-white cursor-default rounded-t-lg font-bold select-none p-2 hover:bg-zinc-900"
     >
       overlayed
       <div className="float-right">{getNavLink()}</div>

src/components/user.tsx

@@ -17,7 +17,7 @@ export const User = ({ item }: { item: OverlayedUser }) => {
         <img src={avatarUrl} alt="avatar" className="rounded-full" />
       </div>
 
-      <div className="text-white rounded-md bg-zinc-900 p-1">{item.username}</div>
+      <div className="text-white rounded-md bg-zinc-800 p-1 pl-2 pr-2">{item.username}</div>
     </div>
   );
 };

src/views/settings.tsx

@@ -2,6 +2,17 @@ export const Settings = () => {
   return (
     <div className="h-screen pt-2 bg-zinc-800 p-2">
       <h1 className="text-xl pl-2 pt-2 font-bold">Settings</h1>
+      <div className="pt-2 pl-2">
+        <button
+          onClick={() => {
+            localStorage.removeItem("discord_access_token");
+            window.location.reload();
+          }}
+          className="bg-blue-800 p-2 rounded-md"
+        >
+          logout
+        </button>
+      </div>
     </div>
   );
 };