Clickthrough works

src-tauri/Cargo.toml

@@ -15,6 +15,7 @@ tauri-build = { version = "1.5", features = [] }
 [dependencies]
 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"] }
+tokio = { version = "1", features = ["full"] }  # Required for asynchronous operations
 tauri-plugin-websocket = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 serde_json = "1.0"
 reqwest = { version = "0.11", features = ["json"] }

src-tauri/rustc-ice-2023-11-05T15:27:39.875107Z-48952.txt

@@ -0,0 +1 @@
+thread 'rustc' panicked at 

src-tauri/rustc-ice-2023-11-05T17:06:28.397207Z-60099.txt

@@ -0,0 +1 @@
+thread 'rustc' panicked at 

src-tauri/rustc-ice-2023-11-05T17:08:13.132113Z-60370.txt

@@ -0,0 +1 @@
+thread 'rustc' panicked at 

src-tauri/rustc-ice-2023-11-05T17:10:10.382553Z-60557.txt

@@ -0,0 +1 @@
+thread '

src-tauri/src/main.rs

@@ -2,37 +2,64 @@
   all(not(debug_assertions), target_os = "windows"),
   windows_subsystem = "windows"
 )]
+#![allow(unused_must_use)]
 
 #[cfg(target_os = "macos")]
 #[macro_use]
 extern crate objc;
 
-mod window_custom;
-
 use tauri::{
-  CustomMenuItem, Manager, RunEvent, SystemTray, SystemTrayEvent,
-  SystemTrayMenu,
+  generate_handler, CustomMenuItem, Manager, RunEvent, State, SystemTray, SystemTrayEvent,
+  SystemTrayMenu, Window,
 };
 use window_custom::WindowExt as _;
+mod window_custom;
+
+use std::sync::atomic::AtomicBool;
+
+struct Clickthrough(AtomicBool);
+
+#[tauri::command]
+fn toggle_clickthrough(window: Window, enabled: bool, clickthrough: State<'_, Clickthrough>) {
+  println!("Setting clickthrough to {}", enabled);
+
+  clickthrough
+    .0
+    .store(enabled, std::sync::atomic::Ordering::Relaxed);
+
+  #[cfg(target_os = "macos")]
+  window.with_webview(move |webview| {
+    #[cfg(target_os = "macos")]
+    unsafe {
+      let _: () = msg_send![webview.ns_window(), setIgnoresMouseEvents: enabled];
+    }
+  });
+}
 
 fn main() {
   // 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"))
+      .add_item(CustomMenuItem::new(
+        "toggle_clickthrough",
+        "Toogle Clickthrough",
+      ))
+      .add_item(CustomMenuItem::new("show_app", "Show Overlayed"))
+      // add seperator
+      .add_native_item(tauri::SystemTrayMenuItem::Separator)
+      .add_item(CustomMenuItem::new("quit", "Quit")),
   );
 
   let app = tauri::Builder::default()
     .plugin(tauri_plugin_websocket::init())
+    .manage(Clickthrough(AtomicBool::new(false)))
     .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
+      // Open dev tools only when in dev mode
       #[cfg(debug_assertions)]
       window.open_devtools();
       Ok(())
@@ -42,8 +69,31 @@ fn main() {
     // Handle system tray events
     .on_system_tray_event(|app, event| match event {
       SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
+        "toggle_clickthrough" => {
+          let window = app.get_window("main").unwrap();
+          let clickthrough = !app
+            .state::<Clickthrough>()
+            .0
+            .load(std::sync::atomic::Ordering::Relaxed);
+
+          println!("Setting clickthrough to {}", clickthrough);
+          app
+            .state::<Clickthrough>()
+            .0
+            .store(clickthrough, std::sync::atomic::Ordering::Relaxed);
+
+          #[cfg(target_os = "macos")]
+          window.with_webview(move |webview| {
+            #[cfg(target_os = "macos")]
+            unsafe {
+              let _: () = msg_send![webview.ns_window(), setIgnoresMouseEvents: clickthrough];
+            }
+          });
+          // we might want to knokw on the client
+          window.emit("toggle_clickthrough", clickthrough).unwrap();
+        }
         "quit" => std::process::exit(0),
-        "show_overlayed" => {
+        "show_app" => {
           let window = app.get_window("main").unwrap();
           window.show().unwrap();
           window.set_focus().unwrap();
@@ -52,12 +102,12 @@ fn main() {
       },
       _ => {}
     })
+    .invoke_handler(generate_handler![toggle_clickthrough])
     .build(tauri::generate_context!())
     .expect("An error occured while running the app!");
 
   app.run(|_app_handle, e| match e {
-    RunEvent::Ready => {
-    }
+    RunEvent::Ready => {}
     _ => {}
   })
 }

src-tauri/src/window_custom.rs

@@ -6,41 +6,44 @@ 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);
+  #[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
-            });
-        }
+  #[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
+      });
+
+      // disable shadows
+      id.setHasShadow_(false);
+
+      id.setTitlebarAppearsTransparent_(if title_transparent {
+        cocoa::base::YES
+      } else {
+        cocoa::base::NO
+      });
     }
+  }
 }

src-tauri/tauri.conf.json

@@ -13,7 +13,7 @@
   "tauri": {
     "systemTray": {
       "iconPath": "icons/32x32.png",
-      "iconAsTemplate": true
+      "iconAsTemplate":false 
     },
     "allowlist": {
       "all": false,

src/App.tsx

@@ -24,7 +24,7 @@ function App() {
   }, [location]);
 
   return (
-    <div className="text-white">
+    <div data-tauri-drag-region className="text-white select-none">
       <NavBar />
       <div className="container">
         <Routes>

src/components/nav-bar.tsx

@@ -15,20 +15,22 @@ export const NavBar = () => {
     }
 
     if (location.pathname === "/error") {
-      return null; 
+      return null;
     }
 
     if (location.pathname === "/settings") {
-      return <Link to="/channel">
-        <Home size={20} />
-      </Link>;
+      return (
+        <Link to="/channel">
+          <Home size={20} />
+        </Link>
+      );
     }
   }, [location.pathname]);
 
   return (
     <div
       data-tauri-drag-region
-      className="transition ease-in text-transparent hover:text-white cursor-default rounded-t-lg font-bold select-none p-2 hover:bg-zinc-900"
+      className="cursor-default rounded-t-lg font-bold select-none p-2 bg-zinc-900"
     >
       overlayed
       <div className="float-right">{getNavLink()}</div>

src/components/user.tsx

@@ -10,14 +10,16 @@ export const User = ({ item }: { item: OverlayedUser }) => {
   const talkingClass = item.talking ? "border-green-500" : "border-slate-900";
 
   return (
-    <div className="flex py-1 items-center">
+    <div data-tauri-drag-region className="flex py-1 items-center">
       <div
-        className={`rounded-full bg-black w-8 h-8 border-2 mr-2 ${talkingClass}`}
+        className={`pointer-events-none rounded-full bg-black w-8 h-8 border-2 mr-2 ${talkingClass}`}
       >
         <img src={avatarUrl} alt="avatar" className="rounded-full" />
       </div>
 
-      <div className="text-white rounded-md bg-zinc-800 p-1 pl-2 pr-2">{item.username}</div>
+      <div data-tauri-drag-region className="pointer-events-none rounded-md bg-zinc-800 p-1 pl-2 pr-2">
+        {item.username}
+      </div>
     </div>
   );
 };

src/store.ts

@@ -25,12 +25,14 @@ const createUserStateItem = (payload: VoiceStateUser) => {
 };
 
 export interface AppState {
+  clickThrough: boolean;
   me: OverlayedUser | null;
   currentChannel: string | null;
   users: Record<string, OverlayedUser>;
 }
 
 export interface AppActions {
+  setClickThrough: (enbabled: boolean) => void;
   setTalking: (id: string, talking: boolean) => void;
   setUsers: (users: any) => void;
   clearUsers: () => void;
@@ -44,6 +46,7 @@ export const useAppStore = create < AppState & AppActions > ()(
   // @ts-ignore
   immer((set) => ({
     me: null,
+    clickThrough: false,
     currentChannel: null,
     users: {},
     setMe: (data) =>
@@ -76,5 +79,9 @@ export const useAppStore = create < AppState & AppActions > ()(
       set((state) => {
         state.currentChannel = channelId;
       }),
+    setClickThrough: (enabled: boolean) =>
+      set((state) => {
+        state.clickThrough = enabled;
+      }),
   })),
 );

src/views/settings.tsx

@@ -1,7 +1,27 @@
+import { useAppStore } from "../store";
+import { invoke } from "@tauri-apps/api/tauri";
+
 export const Settings = () => {
+  const { setClickThrough, clickThrough } = useAppStore();
+
   return (
     <div className="h-screen pt-2 bg-zinc-800 p-2">
       <h1 className="text-xl pl-2 pt-2 font-bold">Settings</h1>
+      <button
+        className="bg-blue-800 p-2 rounded-md"
+        onClick={() => {
+          const updatedClickThrough = !clickThrough;
+
+          setClickThrough(updatedClickThrough);
+
+          invoke("toggle_clickthrough", {
+            enabled: updatedClickThrough,
+          });
+
+        }}
+      >
+        {clickThrough ? "Disable" : "Enable"} clickThrough
+      </button>
       <div className="pt-2 pl-2">
         <button
           onClick={() => {