various control window visibility groundwork

Author: yujonglee

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

@@ -0,0 +1,64 @@
+use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
+
+use tauri_plugin_listener::SessionLifecycleEvent;
+use tauri_plugin_windows::{AppWindow, VisibilityEvent};
+use tauri_specta::Event;
+
+pub fn setup(app_handle: &tauri::AppHandle<tauri::Wry>) {
+    let session_active = Arc::new(AtomicBool::new(false));
+
+    setup_session_lifecycle_listener(app_handle, session_active.clone());
+    setup_visibility_listener(app_handle, session_active);
+}
+
+fn setup_session_lifecycle_listener(
+    app_handle: &tauri::AppHandle<tauri::Wry>,
+    session_active: Arc<AtomicBool>,
+) {
+    let handle = app_handle.clone();
+
+    SessionLifecycleEvent::listen_any(app_handle, move |event| match event.payload {
+        SessionLifecycleEvent::Active { .. } => {
+            session_active.store(true, Ordering::SeqCst);
+
+            let main_visible = AppWindow::Main
+                .get(&handle)
+                .and_then(|w| w.is_visible().ok())
+                .unwrap_or(false);
+
+            let _ = AppWindow::Control.show(&handle);
+            if main_visible {
+                let _ = AppWindow::Control.hide(&handle);
+            }
+        }
+        SessionLifecycleEvent::Inactive { .. } => {
+            session_active.store(false, Ordering::SeqCst);
+            let _ = AppWindow::Control.destroy(&handle);
+        }
+        SessionLifecycleEvent::Finalizing { .. } => {}
+    });
+}
+
+fn setup_visibility_listener(
+    app_handle: &tauri::AppHandle<tauri::Wry>,
+    session_active: Arc<AtomicBool>,
+) {
+    let handle = app_handle.clone();
+
+    VisibilityEvent::listen_any(app_handle, move |event| {
+        if event.payload.window != AppWindow::Main {
+            return;
+        }
+
+        if !session_active.load(Ordering::SeqCst) {
+            return;
+        }
+
+        if event.payload.visible {
+            let _ = AppWindow::Control.hide(&handle);
+        } else {
+            let _ = AppWindow::Control.show(&handle);
+        }
+    });
+}

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

@@ -1,4 +1,5 @@
 mod commands;
+mod control;
 mod ext;
 mod store;
 mod supervisor;
@@ -158,6 +159,8 @@ pub async fn main() {
             let app_handle = app.handle().clone();
             let app_clone = app_handle.clone();
 
+            specta_builder.mount_events(&app_handle);
+
             #[cfg(any(windows, target_os = "linux"))]
             {
                 // https://v2.tauri.app/ko/plugin/deep-linking/#desktop-1
@@ -183,7 +186,7 @@ pub async fn main() {
                 supervisor::monitor_supervisor(handle, ctx.is_exiting.clone(), app_handle.clone());
             }
 
-            specta_builder.mount_events(&app_handle);
+            // control::setup(&app_handle);
 
             Ok(())
         })

apps/desktop/src/components/main/sidebar/devtool.tsx

@@ -224,6 +224,10 @@ function NavigationCard() {
     });
   }, []);
 
+  const handleShowControl = useCallback(() => {
+    void windowsCommands.windowShow({ type: "control" });
+  }, []);
+
   return (
     <DevtoolCard title="Navigation">
       <div className="flex flex-col gap-1.5">
@@ -253,6 +257,19 @@ function NavigationCard() {
         >
           Main
         </button>
+        <button
+          type="button"
+          onClick={handleShowControl}
+          className={cn([
+            "w-full px-2.5 py-1.5 rounded-md",
+            "text-xs font-medium text-left",
+            "border border-neutral-200 text-neutral-700",
+            "cursor-pointer transition-colors",
+            "hover:bg-neutral-50 hover:border-neutral-300",
+          ])}
+        >
+          Control
+        </button>
       </div>
     </DevtoolCard>
   );

apps/desktop/src/routes/app/control.tsx

@@ -1,7 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { ChevronDown, Mic, MicOff, Square, X } from "lucide-react";
+import { useRef } from "react";
 
+import { commands as iconCommands } from "@hypr/plugin-icon";
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
@@ -69,25 +72,75 @@ function CollapsedWidget({
   isActive: boolean;
   isFinalizing: boolean;
 }) {
+  const mouseDownPos = useRef<{ x: number; y: number } | null>(null);
+
+  const { data: iconBase64 } = useQuery({
+    queryKey: ["app-icon"],
+    queryFn: async () => {
+      const result = await iconCommands.getIcon();
+      if (result.status === "ok") {
+        return result.data;
+      }
+      return null;
+    },
+    staleTime: Infinity,
+  });
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    mouseDownPos.current = { x: e.clientX, y: e.clientY };
+  };
+
+  const handleMouseUp = (e: React.MouseEvent) => {
+    if (!mouseDownPos.current) return;
+
+    const dx = Math.abs(e.clientX - mouseDownPos.current.x);
+    const dy = Math.abs(e.clientY - mouseDownPos.current.y);
+    const wasDrag = dx > 5 || dy > 5;
+
+    mouseDownPos.current = null;
+
+    if (!wasDrag) {
+      onExpand();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    mouseDownPos.current = null;
+  };
+
   return (
     <div
-      onClick={onExpand}
+      data-tauri-drag-region
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseLeave}
       className={cn([
         "h-full w-full flex items-center justify-center cursor-pointer",
-        "bg-black/70 backdrop-blur-md rounded-full",
       ])}
     >
       {isActive || isFinalizing ? (
         <div
-          className={cn(
+          data-tauri-drag-region
+          className={cn([
             "w-3 h-3 rounded-full",
             isFinalizing
               ? "bg-yellow-500 animate-pulse"
               : "bg-red-500 animate-pulse",
-          )}
+          ])}
+        />
+      ) : iconBase64 ? (
+        <img
+          data-tauri-drag-region
+          src={`data:image/png;base64,${iconBase64}`}
+          alt="App Icon"
+          className="w-12 h-12 rounded-xl"
+          draggable={false}
         />
       ) : (
-        <div className="w-3 h-3 rounded-full bg-white/40" />
+        <div
+          data-tauri-drag-region
+          className="w-12 h-12 rounded-full bg-white/40"
+        />
       )}
     </div>
   );

apps/desktop/src/store/tinybase/persister/settings.ts

@@ -225,16 +225,17 @@ export function createSettingsPersister<Schemas extends OptionalSchemas>(
         interval: setInterval(listener, FALLBACK_POLL_INTERVAL),
       };
 
-      events.settingsChanged
-        .listen(() => {
-          listener();
-        })
-        .then((unlisten) => {
-          handle.unlisten = unlisten;
-        })
-        .catch((error) => {
-          console.error("[SettingsPersister] event listen error:", error);
+      (async () => {
+        const settingsPath = await commands.path();
+        const unlisten = await events.fileChanged.listen((event) => {
+          if (event.payload.path === settingsPath) {
+            listener();
+          }
         });
+        handle.unlisten = unlisten;
+      })().catch((error) => {
+        console.error("[SettingsPersister] event listen error:", error);
+      });
 
       return handle;
     },

plugins/listener/src/events.rs

@@ -3,7 +3,9 @@ use owhisper_interface::stream::StreamResponse;
 #[macro_export]
 macro_rules! common_event_derives {
     ($item:item) => {
-        #[derive(serde::Serialize, Clone, specta::Type, tauri_specta::Event)]
+        #[derive(
+            serde::Serialize, serde::Deserialize, Clone, specta::Type, tauri_specta::Event,
+        )]
         $item
     };
 }

plugins/windows/js/bindings.gen.ts

@@ -45,22 +45,6 @@ async windowIsExists(window: AppWindow) : Promise<Result<boolean, string>> {
     if(e instanceof Error) throw e;
     else return { status: "error", error: e  as any };
 }
-},
-async setFakeWindowBounds(name: string, bounds: OverlayBound) : Promise<Result<null, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("plugin:windows|set_fake_window_bounds", { name, bounds }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-},
-async removeFakeWindow(name: string) : Promise<Result<null, string>> {
-    try {
-    return { status: "ok", data: await TAURI_INVOKE("plugin:windows|remove_fake_window", { name }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
 }
 }
 
@@ -70,10 +54,12 @@ async removeFakeWindow(name: string) : Promise<Result<null, string>> {
 export const events = __makeEvents__<{
 navigate: Navigate,
 openTab: OpenTab,
+visibilityEvent: VisibilityEvent,
 windowDestroyed: WindowDestroyed
 }>({
 navigate: "plugin:windows:navigate",
 openTab: "plugin:windows:open-tab",
+visibilityEvent: "plugin:windows:visibility-event",
 windowDestroyed: "plugin:windows:window-destroyed"
 })
 
@@ -96,11 +82,11 @@ export type ExtensionsState = { selectedExtension: string | null }
 export type JsonValue = null | boolean | number | string | JsonValue[] | Partial<{ [key in string]: JsonValue }>
 export type Navigate = { path: string; search: Partial<{ [key in string]: JsonValue }> | null }
 export type OpenTab = { tab: TabInput }
-export type OverlayBound = { x: number; y: number; width: number; height: number }
 export type PromptsState = { selectedTask: string | null }
 export type SessionsState = { view: EditorView | null; autoStart: boolean | null }
 export type TabInput = { type: "sessions"; id: string; state?: SessionsState | null } | { type: "contacts"; state?: ContactsState | null } | { type: "templates"; state?: TemplatesState | null } | { type: "prompts"; state?: PromptsState | null } | { type: "chat_shortcuts"; state?: ChatShortcutsState | null } | { type: "extensions"; state?: ExtensionsState | null } | { type: "humans"; id: string } | { type: "organizations"; id: string } | { type: "folders"; id: string | null } | { type: "empty" } | { type: "extension"; extensionId: string; state?: Partial<{ [key in string]: JsonValue }> | null } | { type: "calendar" } | { type: "changelog"; state: ChangelogState } | { type: "settings" } | { type: "ai"; state?: AiState | null } | { type: "data"; state?: DataState | null }
 export type TemplatesState = { showHomepage: boolean | null; isWebMode: boolean | null; selectedMineId: string | null; selectedWebIndex: number | null }
+export type VisibilityEvent = { window: AppWindow; visible: boolean }
 export type WindowDestroyed = { window: AppWindow }
 
 /** tauri-specta globals **/

plugins/windows/src/events.rs

@@ -6,22 +6,19 @@ use crate::AppWindow;
 
 // TODO: https://github.com/fastrepl/hyprnote/commit/150c8a1 this not worked. webview_window not found.
 pub fn on_window_event(window: &tauri::Window<tauri::Wry>, event: &tauri::WindowEvent) {
-    let _app = window.app_handle();
+    let app = window.app_handle();
 
     match event {
         tauri::WindowEvent::CloseRequested { api, .. } => {
             match window.label().parse::<AppWindow>() {
                 Err(e) => tracing::warn!("window_parse_error: {:?}", e),
                 Ok(w) => {
-                    if w == AppWindow::Main && window.hide().is_ok() {
+                    if w == AppWindow::Main && w.hide(&app).is_ok() {
                         api.prevent_close();
                     }
                     if w == AppWindow::Onboarding {
                         use tauri_plugin_sfx::SfxPluginExt;
-                        window
-                            .app_handle()
-                            .sfx()
-                            .stop(tauri_plugin_sfx::AppSounds::BGM);
+                        app.sfx().stop(tauri_plugin_sfx::AppSounds::BGM);
                     }
                 }
             }
@@ -85,6 +82,13 @@ common_event_derives! {
     }
 }
 
+common_event_derives! {
+    pub struct VisibilityEvent {
+        pub window: AppWindow,
+        pub visible: bool,
+    }
+}
+
 #[cfg(test)]
 mod test {
     use super::*;