fastrepl · yujonglee · Jun 3, 2025 · May 28, 2025 · May 28, 2025 · May 29, 2025
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/apps/desktop/index.html b/apps/desktop/index.html
@@ -8,6 +8,12 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>Hyprnote</title>
+    <style>
+      html, body, #root {
+        background: transparent !important;
+        background-color: transparent !important;
+      }
+    </style>
   </head>
   <body spellcheck="false">
     <div id="root"></div>

diff --git a/apps/desktop/src/components/editor-area/note-header/listen-button.tsx b/apps/desktop/src/components/editor-area/note-header/listen-button.tsx
@@ -1,5 +1,6 @@
 import { Trans } from "@lingui/react/macro";
 import { useMutation, UseMutationResult, useQuery } from "@tanstack/react-query";
+import { emit, listen } from "@tauri-apps/api/event";
 import {
   CheckIcon,
   MicIcon,
@@ -227,7 +228,8 @@ export function WhenActive() {
 
   useEffect(() => {
     if (showConsent) {
-      listenerCommands.setSpeakerMuted(true).then(() => {
+      listenerCommands.setSpeakerMuted(true).then(async () => {
+        await emit("audio-speaker-state-changed", { muted: true });
         audioControls.refetchSpeakerMuted();
       });
     }
@@ -237,9 +239,12 @@ export function WhenActive() {
     mutationFn: async (recordEveryone: boolean) => {
       if (recordEveryone) {
         await listenerCommands.setSpeakerMuted(false);
+        await emit("audio-speaker-state-changed", { muted: false });
       } else {
         await listenerCommands.setSpeakerMuted(true);
         await listenerCommands.setMicMuted(false);
+        await emit("audio-speaker-state-changed", { muted: true });
+        await emit("audio-mic-state-changed", { muted: false });
       }
       setHasShownConsent(true);
     },
@@ -438,13 +443,43 @@ function useAudioControls() {
     queryFn: () => listenerCommands.getSpeakerMuted(),
   });
 
+  // Listen for audio state changes from other windows
+  useEffect(() => {
+    const unsubscribeMicState = listen<{ muted: boolean }>("audio-mic-state-changed", ({ payload }) => {
+      console.log(`[Main Window] Received mic state change:`, payload);
+      refetchMicMuted();
+    });
+
+    const unsubscribeSpeakerState = listen<{ muted: boolean }>("audio-speaker-state-changed", ({ payload }) => {
+      console.log(`[Main Window] Received speaker state change:`, payload);
+      refetchSpeakerMuted();
+    });
+
+    return () => {
+      unsubscribeMicState.then(unlisten => unlisten());
+      unsubscribeSpeakerState.then(unlisten => unlisten());
+    };
+  }, [refetchMicMuted, refetchSpeakerMuted]);
+
   const toggleMicMuted = useMutation({
-    mutationFn: () => listenerCommands.setMicMuted(!isMicMuted),
+    mutationFn: async () => {
+      const newMuted = !isMicMuted;
+      await listenerCommands.setMicMuted(newMuted);
+      // Emit event to synchronize with other windows
+      await emit("audio-mic-state-changed", { muted: newMuted });
+      return newMuted;
+    },
     onSuccess: () => refetchMicMuted(),
   });
 
   const toggleSpeakerMuted = useMutation({
-    mutationFn: () => listenerCommands.setSpeakerMuted(!isSpeakerMuted),
+    mutationFn: async () => {
+      const newMuted = !isSpeakerMuted;
+      await listenerCommands.setSpeakerMuted(newMuted);
+      // Emit event to synchronize with other windows
+      await emit("audio-speaker-state-changed", { muted: newMuted });
+      return newMuted;
+    },
     onSuccess: () => refetchSpeakerMuted(),
   });
 

diff --git a/apps/desktop/src/routeTree.gen.ts b/apps/desktop/src/routeTree.gen.ts
@@ -17,6 +17,7 @@ import { Route as AppIndexImport } from './routes/app.index'
 import { Route as AppSettingsImport } from './routes/app.settings'
 import { Route as AppPlansImport } from './routes/app.plans'
 import { Route as AppNewImport } from './routes/app.new'
+import { Route as AppControlImport } from './routes/app.control'
 import { Route as AppCalendarImport } from './routes/app.calendar'
 import { Route as AppOrganizationIdImport } from './routes/app.organization.$id'
 import { Route as AppNoteIdImport } from './routes/app.note.$id'
@@ -61,6 +62,12 @@ const AppNewRoute = AppNewImport.update({
   getParentRoute: () => AppRoute,
 } as any)
 
+const AppControlRoute = AppControlImport.update({
+  id: '/control',
+  path: '/control',
+  getParentRoute: () => AppRoute,
+} as any)
+
 const AppCalendarRoute = AppCalendarImport.update({
   id: '/calendar',
   path: '/calendar',
@@ -116,6 +123,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppCalendarImport
       parentRoute: typeof AppImport
     }
+    '/app/control': {
+      id: '/app/control'
+      path: '/control'
+      fullPath: '/app/control'
+      preLoaderRoute: typeof AppControlImport
+      parentRoute: typeof AppImport
+    }
     '/app/new': {
       id: '/app/new'
       path: '/new'
@@ -179,6 +193,7 @@ declare module '@tanstack/react-router' {
 
 interface AppRouteChildren {
   AppCalendarRoute: typeof AppCalendarRoute
+  AppControlRoute: typeof AppControlRoute
   AppNewRoute: typeof AppNewRoute
   AppPlansRoute: typeof AppPlansRoute
   AppSettingsRoute: typeof AppSettingsRoute
@@ -191,6 +206,7 @@ interface AppRouteChildren {
 
 const AppRouteChildren: AppRouteChildren = {
   AppCalendarRoute: AppCalendarRoute,
+  AppControlRoute: AppControlRoute,
   AppNewRoute: AppNewRoute,
   AppPlansRoute: AppPlansRoute,
   AppSettingsRoute: AppSettingsRoute,
@@ -207,6 +223,7 @@ export interface FileRoutesByFullPath {
   '/app': typeof AppRouteWithChildren
   '/video': typeof VideoRoute
   '/app/calendar': typeof AppCalendarRoute
+  '/app/control': typeof AppControlRoute
   '/app/new': typeof AppNewRoute
   '/app/plans': typeof AppPlansRoute
   '/app/settings': typeof AppSettingsRoute
@@ -220,6 +237,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/video': typeof VideoRoute
   '/app/calendar': typeof AppCalendarRoute
+  '/app/control': typeof AppControlRoute
   '/app/new': typeof AppNewRoute
   '/app/plans': typeof AppPlansRoute
   '/app/settings': typeof AppSettingsRoute
@@ -235,6 +253,7 @@ export interface FileRoutesById {
   '/app': typeof AppRouteWithChildren
   '/video': typeof VideoRoute
   '/app/calendar': typeof AppCalendarRoute
+  '/app/control': typeof AppControlRoute
   '/app/new': typeof AppNewRoute
   '/app/plans': typeof AppPlansRoute
   '/app/settings': typeof AppSettingsRoute
@@ -251,6 +270,7 @@ export interface FileRouteTypes {
     | '/app'
     | '/video'
     | '/app/calendar'
+    | '/app/control'
     | '/app/new'
     | '/app/plans'
     | '/app/settings'
@@ -263,6 +283,7 @@ export interface FileRouteTypes {
   to:
     | '/video'
     | '/app/calendar'
+    | '/app/control'
     | '/app/new'
     | '/app/plans'
     | '/app/settings'
@@ -276,6 +297,7 @@ export interface FileRouteTypes {
     | '/app'
     | '/video'
     | '/app/calendar'
+    | '/app/control'
     | '/app/new'
     | '/app/plans'
     | '/app/settings'
@@ -315,6 +337,7 @@ export const routeTree = rootRoute
       "filePath": "app.tsx",
       "children": [
         "/app/calendar",
+        "/app/control",
         "/app/new",
         "/app/plans",
         "/app/settings",
@@ -332,6 +355,10 @@ export const routeTree = rootRoute
       "filePath": "app.calendar.tsx",
       "parent": "/app"
     },
+    "/app/control": {
+      "filePath": "app.control.tsx",
+      "parent": "/app"
+    },
     "/app/new": {
       "filePath": "app.new.tsx",
       "parent": "/app"

diff --git a/apps/desktop/src/routes/__root.tsx b/apps/desktop/src/routes/__root.tsx
@@ -3,6 +3,7 @@ import { scan } from "react-scan";
 
 import { useQuery } from "@tanstack/react-query";
 import { CatchNotFound, createRootRouteWithContext, Outlet, useNavigate } from "@tanstack/react-router";
+import { listen } from "@tauri-apps/api/event";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { lazy, Suspense, useEffect } from "react";
@@ -66,6 +67,19 @@ function Component() {
     scan({ enabled: false });
   }, []);
 
+  // Listen for debug events from control window
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+
+    listen<string>("debug", (event) => {
+      console.log(`[Control Debug] ${event.payload}`);
+    }).then((fn) => {
+      unlisten = fn;
+    });
+
+    return () => unlisten?.();
+  }, []);
+
   return (
     <>
       <ClipboardHandler />