Tauri Plugin NSpopover

Only for MacOS

Install

# Cargo.toml
[dependencies]
tauri-plugin-nspopover = { git = "https://github.com/freethinkel/tauri-nspopover-plugin.git", version = "4.0.0" }

// package.json
"dependencies": {
  "tauri-plugin-nspopover": "git+https://github.com/freethinkel/tauri-nspopover-plugin"
}

Usage

// main.rs
use tauri::{ActivationPolicy, Manager};
use tauri_plugin_nspopover::{AppExt, ToPopoverOptions, WindowExt};

fn main() {
    tauri::Builder::default()
        .setup(|app| {
          app.set_activation_policy(ActivationPolicy::Accessory);
          let window = app.handle().get_webview_window("main").unwrap();

          window.to_popover(ToPopoverOptions {
            is_fullsize_content: true,
          });

          Ok(())
        })
        .plugin(tauri_plugin_nspopover::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// main.ts
import { TrayIcon } from "@tauri-apps/api/tray";
import { isOpen, show, hide } from "tauri-plugin-nspopover";

TrayIcon.new({
  id: "main",
  async action(event) {
    console.log(event);
    if (
      event.type === "Click" &&
      event.buttonState === "Up" &&
      event.button === "Left"
    ) {
      const isShown = await isOpen();

      if (isShown) {
        hide();
      } else {
        show();
      }
    }
  },
});

OR you can use rust api

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_nspopover::init())
        .setup(|app| {
          app.set_activation_policy(ActivationPolicy::Accessory);
          let window = app.handle().get_webview_window("main").unwrap();
          window.to_popover(ToPopoverOptions {
              is_fullsize_content: true,
          });

          let tray = app.tray_by_id("main").unwrap();
          let handle = app.handle().clone();

          tray.on_tray_icon_event(move |_, event| match event {
              TrayIconEvent::Click {
                  button,
                  button_state,
                  ..
              } => {
                  if button == MouseButton::Left && button_state == MouseButtonState::Up {
                      if !handle.is_popover_shown() {
                          handle.show_popover();
                      } else {
                          handle.hide_popover();
                      }
                  }
              }
              _ => {}
          });

          Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// tauri.config.json
"systemTray": {
  "iconPath": "icons/statusbar-icon.png",
  "iconAsTemplate": true,
  "id": "main"
},
...
"windows": [
  {
    "fullscreen": false,
    "visible": false,
    "title": "example",
    "width": 300,
    "height": 450,
    "transparent": true
  }
]

Permissions

Don't forget to add the necessary permissions to your src-tauri/capabilities/default.json file.

...
  "nspopover:allow-show-popover",
  "nspopover:allow-hide-popover",
  "nspopover:allow-is-popover-shown",
  "core:tray:allow-new",
  "core:tray:default"
...

Example

git clone https://github.com/freethinkel/tauri-plugin-nspopover
cd tauri-plugin-nspopover/example
pnpm install
pnpm tauri dev