irongit
Sign inRegister
huncholanehuncholane/mutterboxPublic

Open source voice dictation for your whole desktop. Local whisper.cpp transcription, global hotkeys, optional LLM enhancement via Claude Code, Gemini CLI, Codex, or any API. Wayland-first.

mutterbox/src/Overlay.tsx
29 lines891 BJavaScript
RawDownloadHistory
1import { useEffect, useState } from "react";
2import { listen } from "@tauri-apps/api/event";
3import type { RecordingState } from "./types";
4
5export default function Overlay() {
6 const [state, setState] = useState<RecordingState>("recording");
7
8 useEffect(() => {
9 document.documentElement.classList.add("overlay-mode");
10 const unlisten = listen<{ state: RecordingState }>("recording-state", (e) => {
11 setState(e.payload.state);
12 });
13 return () => {
14 unlisten.then((fn) => fn());
15 };
16 }, []);
17
18 return (
19 <div className={`overlay-pill overlay-${state}`}>
20 <span className="overlay-dot" />
21 <span className="overlay-label">
22 {state === "recording" ? "listening" : state === "processing" ? "transcribing" : "idle"}
23 </span>
24 <span className="overlay-bars" aria-hidden>
25 <i /><i /><i /><i /><i />
26 </span>
27 </div>
28 );
29}