Merge pull request #188 from loss-and-quick/feat/tray-context-menu-ux

feat(tray): routing switch, live tooltip/icon, ping in recent list

Author: loss-and-quick

frontend/src/generated/bindings.ts

@@ -25,7 +25,14 @@ export const commands = {
 	 *  calls this on hydrate and whenever the active/recent profiles or language
 	 *  change; clicks come back as [`TrayAction`] events (or `show`/`quit`).
 	 */
-	updateTray: (profiles: TrayProfile[], labels: TrayLabels, running: boolean, connected: boolean) => typedError<null, string>(__TAURI_INVOKE("update_tray", { profiles, labels, running, connected })),
+	updateTray: (profiles: TrayProfile[], labels: TrayLabels, running: boolean, connected: boolean, routingMode: string) => typedError<null, string>(__TAURI_INVOKE("update_tray", { profiles, labels, running, connected, routingMode })),
+	/**
+	 *  Update only the tray tooltip + state icon (not the menu). Called on every status
+	 *  tick, so it stays cheap: the menu is rebuilt separately via [`update_tray`] only
+	 *  when its own contents change. (Tooltips are honoured on Windows/macOS; the Linux
+	 *  app-indicator ignores them, but the state icon still updates there.)
+	 */
+	setTrayStatus: (tooltip: string, state: RunState) => typedError<null, string>(__TAURI_INVOKE("set_tray_status", { tooltip, state })),
 };
 
 /** Events */
@@ -921,8 +928,9 @@ export type Transport = {
 } & QuicTransport;
 
 /**
- *  A tray menu action for the webview to handle: `"restart"` / `"start"` / `"stop"` or
- *  `"activate:<id>"`. `show`/`quit` never reach here — they're handled in Rust directly.
+ *  A tray menu action for the webview to handle: `"restart"` / `"start"` / `"stop"`,
+ *  `"activate:<id>"`, or `"routing:<mode>"`. `show`/`quit` never reach here — they're
+ *  handled in Rust directly.
  */
 export type TrayAction = string;
 
@@ -934,6 +942,11 @@ export type TrayLabels = {
 	stop: string,
 	restart: string,
 	recent: string,
+	/**  "Routing mode" submenu title, then its three radio entries. */
+	routing: string,
+	routingGlobal: string,
+	routingCustom: string,
+	routingRules: string,
 };
 
 /**  One profile entry the UI wants in the tray's quick-switch list. */

frontend/src/lib/useTraySync.ts

@@ -1,46 +1,73 @@
 // ============================================================
 // src/lib/useTraySync.ts
-// Keeps the native tray menu in sync with the UI: pushes the recent-profile
-// quick-switch list + localized labels to Rust (`update_tray`), and routes menu
-// clicks (`tray-action` events) back to the store. Desktop-only — a no-op in the
-// Android / browser shells.
+// Keeps the native tray in sync with the UI. Pushes the recent-profile quick-switch
+// list, the routing-mode radio state + localized labels to Rust (`update_tray`), and
+// separately pushes a live tooltip + state icon (`set_tray_status`) on every status
+// tick. Menu clicks come back as `tray-action` events and are routed to the store.
+// Desktop-only — a no-op in the Android / browser shells.
 // ============================================================
 
 import { useEffect } from "react";
-import { commands, events } from "../generated/bindings";
+import { commands, events, type RoutingMode_Serialize } from "../generated/bindings";
 import { useT } from "../i18n";
 import { isServiceUp } from "../lib/bridge";
+import { formatRate } from "../lib/format";
 import { useAppStore } from "../store/useAppStore";
 
 function isTauri(): boolean {
   return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
 }
 
+// service.state -> the same label key the Overview header shows.
+function stateLabelKey(state: string) {
+  switch (state) {
+    case "connected":
+      return "overview.running" as const;
+    case "noInternet":
+      return "overview.noInternet" as const;
+    case "connecting":
+      return "overview.connecting" as const;
+    case "failed":
+      return "overview.failed" as const;
+    default:
+      return "overview.stopped" as const;
+  }
+}
+
 export function useTraySync(): void {
   const t = useT();
   const profiles = useAppStore((s) => s.profiles);
   const activeId = useAppStore((s) => s.activeId);
   const recentIds = useAppStore((s) => s.recentProfileIds);
   const service = useAppStore((s) => s.service);
+  const uploadRate = useAppStore((s) => s.uploadRate);
+  const downloadRate = useAppStore((s) => s.downloadRate);
+  const testResults = useAppStore((s) => s.testResults);
+  const routingMode = useAppStore((s) => s.settings.routingMode);
   const setActive = useAppStore((s) => s.setActive);
+  const setSetting = useAppStore((s) => s.setSetting);
   const toggleService = useAppStore((s) => s.toggleService);
   const restart = useAppStore((s) => s.restart);
 
   const running = isServiceUp(service.state);
   const connected = service.state === "connected";
 
-  // Rebuild the menu whenever the quick-switch list, active profile, service
-  // state, or language changes.
+  // Rebuild the menu whenever the quick-switch list, active profile, per-profile
+  // ping, routing mode, service state, or language changes.
   useEffect(() => {
     if (!isTauri()) return;
     const items = recentIds
       .map((id) => profiles.find((p) => p.meta.id === id))
       .filter((p): p is NonNullable<typeof p> => !!p)
-      .map((p) => ({
-        id: p.meta.id,
-        name: p.meta.remarks || p.meta.id,
-        active: p.meta.id === activeId,
-      }));
+      .map((p) => {
+        const name = p.meta.remarks || p.meta.id;
+        const ping = testResults[p.meta.id]?.ping;
+        return {
+          id: p.meta.id,
+          name: ping != null && ping >= 0 ? `${name} · ${ping} ms` : name,
+          active: p.meta.id === activeId,
+        };
+      });
     void commands.updateTray(
       items,
       {
@@ -50,11 +77,31 @@ export function useTraySync(): void {
         stop: t("overview.stop"),
         restart: t("overview.restart"),
         recent: t("tray.recent"),
+        routing: t("settings.routingMode"),
+        routingGlobal: t("settings.routingGlobal"),
+        routingCustom: t("settings.routingCustom"),
+        routingRules: t("settings.routingRulesEditor"),
       },
       running,
       connected,
+      routingMode,
     );
-  }, [profiles, activeId, recentIds, running, connected, t]);
+  }, [profiles, activeId, recentIds, testResults, routingMode, running, connected, t]);
+
+  // Push a live tooltip + state icon on every status tick (cheap — no menu rebuild).
+  useEffect(() => {
+    if (!isTauri()) return;
+    const active = profiles.find((p) => p.meta.id === activeId);
+    const activeName = active ? active.meta.remarks || active.meta.id : null;
+    const stateLabel = t(stateLabelKey(service.state));
+    let tooltip = `Kasumi Proxy — ${stateLabel}`;
+    if (activeName) tooltip += ` · ${activeName}`;
+    if (running) tooltip += `\n↓ ${formatRate(downloadRate)}  ↑ ${formatRate(uploadRate)}`;
+    // The routing submenu writes a setting the running core won't pick up on its own,
+    // so the tooltip carries the same restart cue the Overview banner shows.
+    if (running && service.pendingRestart) tooltip += `\n${t("overview.pendingRestart")}`;
+    void commands.setTrayStatus(tooltip, service.state);
+  }, [service, uploadRate, downloadRate, activeId, profiles, running, t]);
 
   // Route native menu clicks back to the store.
   useEffect(() => {
@@ -64,7 +111,9 @@ export function useTraySync(): void {
       if (action === "start" || action === "stop") void toggleService();
       else if (action === "restart") void restart();
       else if (action.startsWith("activate:")) void setActive(action.slice("activate:".length));
+      else if (action.startsWith("routing:"))
+        void setSetting("routingMode", action.slice("routing:".length) as RoutingMode_Serialize);
     });
     return () => void pending.then((un) => un()).catch(() => {});
-  }, [toggleService, restart, setActive]);
+  }, [toggleService, restart, setActive, setSetting]);
 }

src-tauri/src/lib.rs

@@ -19,7 +19,7 @@ use tauri_specta::{Builder, Event, collect_commands, collect_events};
 
 use kasumi_backend::platform::Platform;
 use kasumi_backend::{Command, Response, Service};
-use kasumi_core::contract::{PushFrame, ServiceStatus, SubAppliedEvent};
+use kasumi_core::contract::{PushFrame, RunState, ServiceStatus, SubAppliedEvent};
 
 pub mod defaults;
 pub mod desktop;
@@ -35,8 +35,9 @@ pub struct StatusChanged(pub ServiceStatus);
 #[derive(Debug, Clone, Serialize, Deserialize, specta::Type, Event)]
 pub struct SubscriptionApplied(pub SubAppliedEvent);
 
-/// A tray menu action for the webview to handle: `"restart"` / `"start"` / `"stop"` or
-/// `"activate:<id>"`. `show`/`quit` never reach here — they're handled in Rust directly.
+/// A tray menu action for the webview to handle: `"restart"` / `"start"` / `"stop"`,
+/// `"activate:<id>"`, or `"routing:<mode>"`. `show`/`quit` never reach here — they're
+/// handled in Rust directly.
 #[derive(Debug, Clone, Serialize, Deserialize, specta::Type, Event)]
 pub struct TrayAction(pub String);
 
@@ -59,6 +60,11 @@ pub struct TrayLabels {
     pub stop: String,
     pub restart: String,
     pub recent: String,
+    /// "Routing mode" submenu title, then its three radio entries.
+    pub routing: String,
+    pub routing_global: String,
+    pub routing_custom: String,
+    pub routing_rules: String,
 }
 
 /// Rebuild the tray menu from the UI's current profiles + active selection. The UI
@@ -72,14 +78,44 @@ fn update_tray(
     labels: TrayLabels,
     running: bool,
     connected: bool,
+    routing_mode: String,
 ) -> Result<(), String> {
     #[cfg(desktop)]
     {
-        rebuild_tray_menu(&app, &profiles, &labels, running, connected)
+        rebuild_tray_menu(&app, &profiles, &labels, running, connected, &routing_mode)
             .map_err(|e| e.to_string())?;
     }
     #[cfg(not(desktop))]
-    let _ = (app, profiles, labels, running, connected);
+    let _ = (app, profiles, labels, running, connected, routing_mode);
+    Ok(())
+}
+
+/// Update only the tray tooltip + state icon (not the menu). Called on every status
+/// tick, so it stays cheap: the menu is rebuilt separately via [`update_tray`] only
+/// when its own contents change. (Tooltips are honoured on Windows/macOS; the Linux
+/// app-indicator ignores them, but the state icon still updates there.)
+#[tauri::command]
+#[specta::specta]
+fn set_tray_status(app: tauri::AppHandle, tooltip: String, state: RunState) -> Result<(), String> {
+    #[cfg(desktop)]
+    if let Some(tray) = app.tray_by_id("main") {
+        // Tooltip is cheap, refresh it every tick (live traffic). The icon only
+        // changes on a state transition — swapping it each tick would needlessly
+        // rewrite the Linux app-indicator's temp icon file.
+        tray.set_tooltip(Some(&tooltip))
+            .map_err(|e| e.to_string())?;
+        use std::sync::atomic::{AtomicU8, Ordering};
+        static LAST_ICON: AtomicU8 = AtomicU8::new(u8::MAX);
+        let idx = state as u8;
+        if LAST_ICON.load(Ordering::Relaxed) != idx
+            && let Some(icon) = tray_icon(state)
+        {
+            tray.set_icon(Some(icon)).map_err(|e| e.to_string())?;
+            LAST_ICON.store(idx, Ordering::Relaxed);
+        }
+    }
+    #[cfg(not(desktop))]
+    let _ = (app, tooltip, state);
     Ok(())
 }
 
@@ -186,15 +222,17 @@ fn setup_tray(app: &tauri::App) -> tauri::Result<()> {
     Ok(())
 }
 
-/// Replace the tray menu: Restart, the recent-profile quick-switch list (active one
-/// checked), then Show / Quit. Item ids drive [`setup_tray`]'s `on_menu_event`.
+/// Replace the tray menu: state action(s), the recent-profile quick-switch list
+/// (active one checked), the routing-mode radio (current one checked), then
+/// Show / Quit. Item ids drive [`setup_tray`]'s `on_menu_event`.
 #[cfg(desktop)]
 fn rebuild_tray_menu(
     app: &tauri::AppHandle,
     profiles: &[TrayProfile],
     labels: &TrayLabels,
     running: bool,
     connected: bool,
+    routing_mode: &str,
 ) -> tauri::Result<()> {
     use tauri::menu::{CheckMenuItem, Menu, MenuItem, PredefinedMenuItem, Submenu};
 
@@ -221,8 +259,9 @@ fn rebuild_tray_menu(
         menu.append(&start)?;
     }
 
+    // Quick-switch + routing group.
+    menu.append(&sep1)?;
     if !profiles.is_empty() {
-        menu.append(&sep1)?;
         // A submenu keeps the root tidy when there are many profiles.
         let recent = Submenu::with_id(app, "recent", &labels.recent, true)?;
         for p in profiles {
@@ -239,13 +278,84 @@ fn rebuild_tray_menu(
         menu.append(&recent)?;
     }
 
+    // Routing-mode radio: exactly the current mode is checked. Tauri has no native
+    // radio item, so — like v2rayN's tray — we use check marks; clicks come back as
+    // `routing:<mode>` TrayActions the webview applies to `settings.routingMode`.
+    let routing = Submenu::with_id(app, "routing", &labels.routing, true)?;
+    for (mode, label) in [
+        ("rules", &labels.routing_rules),
+        ("global", &labels.routing_global),
+        ("custom", &labels.routing_custom),
+    ] {
+        let item = CheckMenuItem::with_id(
+            app,
+            format!("routing:{mode}"),
+            label,
+            true,
+            routing_mode == mode,
+            None::<&str>,
+        )?;
+        routing.append(&item)?;
+    }
+    menu.append(&routing)?;
+
     menu.append(&sep2)?;
     menu.append(&show)?;
     menu.append(&quit)?;
     tray.set_menu(Some(menu))?;
     Ok(())
 }
 
+/// A tray icon for the current state, derived at runtime from the bundled app icon so
+/// we ship no extra art: full colour when connected, desaturated + dimmed when off,
+/// and a muted tone while connecting / no-internet. Each variant is decoded and
+/// converted once, then cached. `None` if the bundled icon won't decode — the caller
+/// keeps whatever icon the tray already has rather than taking the process down.
+#[cfg(desktop)]
+fn tray_icon(state: RunState) -> Option<tauri::image::Image<'static>> {
+    use std::sync::OnceLock;
+    use tauri::image::Image;
+
+    const BASE_PNG: &[u8] =
+        include_bytes!(concat!(env!("CARGO_MANIFEST_DIR"), "/icons/128x128.png"));
+
+    fn base() -> Option<&'static Image<'static>> {
+        static ICON: OnceLock<Option<Image<'static>>> = OnceLock::new();
+        ICON.get_or_init(|| Image::from_bytes(BASE_PNG).ok())
+            .as_ref()
+    }
+    // Blend each pixel toward its luminance by `1 - sat` (0 = greyscale) and scale
+    // alpha by `alpha` (dim it). The bundled icon is always decoded to RGBA8.
+    fn recolour(sat: f32, alpha: f32) -> Option<Image<'static>> {
+        let src = base()?;
+        let (w, h) = (src.width(), src.height());
+        let mut rgba = src.rgba().to_vec();
+        for px in rgba.chunks_exact_mut(4) {
+            let (r, g, b) = (px[0] as f32, px[1] as f32, px[2] as f32);
+            let lum = 0.299 * r + 0.587 * g + 0.114 * b;
+            px[0] = (r * sat + lum * (1.0 - sat)).round() as u8;
+            px[1] = (g * sat + lum * (1.0 - sat)).round() as u8;
+            px[2] = (b * sat + lum * (1.0 - sat)).round() as u8;
+            px[3] = (f32::from(px[3]) * alpha).round() as u8;
+        }
+        Some(Image::new_owned(rgba, w, h))
+    }
+    fn off() -> Option<&'static Image<'static>> {
+        static ICON: OnceLock<Option<Image<'static>>> = OnceLock::new();
+        ICON.get_or_init(|| recolour(0.0, 0.55)).as_ref()
+    }
+    fn pending() -> Option<&'static Image<'static>> {
+        static ICON: OnceLock<Option<Image<'static>>> = OnceLock::new();
+        ICON.get_or_init(|| recolour(0.4, 0.9)).as_ref()
+    }
+
+    match state {
+        RunState::Connected => base().cloned(),
+        RunState::Connecting | RunState::NoInternet => pending().cloned(),
+        RunState::Stopped | RunState::Failed => off().cloned(),
+    }
+}
+
 /// Build the desktop [`Service`] (boot init → probe cores → background loops). Run
 /// on the app's async runtime during setup.
 async fn build_service(platform: Arc<dyn Platform>) -> Arc<Service> {
@@ -306,7 +416,12 @@ async fn build_platform() -> anyhow::Result<Arc<dyn Platform>> {
 /// export so the generated TS always matches what's mounted.
 fn specta_builder() -> Builder<tauri::Wry> {
     Builder::<tauri::Wry>::new()
-        .commands(collect_commands![app_version, dispatch, update_tray])
+        .commands(collect_commands![
+            app_version,
+            dispatch,
+            update_tray,
+            set_tray_status
+        ])
         .events(collect_events![
             StatusChanged,
             SubscriptionApplied,