);
}
const c = STATE_COLOR[state] || STATE_COLOR.idle;
return (
);
}
function WinTaskbarIcon({ state, level, onClick, active }) {
const dotColor = STATE_COLOR[state];
return (
);
}
// =============================================================
// Windows: tray menu (Win11 Fluent style)
// =============================================================
function WinTrayMenu({ activeStyle, onPickStyle, activeLang, onPickLang }) {
return (
{STYLES.map((s) => (
{LANGS.map((l) => (
);
}
// =============================================================
// Mac menubar tray icon. Idle shows the monochrome glyph; during
// recording the glyph is replaced by the status dot (pulsing).
// Transcribing keeps the dot blue. Done is a green flash, then idle.
// =============================================================
function MacMenuBarIcon({ state, onClick, active }) {
const dotColor = STATE_COLOR[state];
const showDotInsteadOfIcon = state === "recording" || state === "transcribing" || state === "done";
return (
);
}
// =============================================================
// Mac tray menu (NSMenu / Big Sur+ vibrancy, rounded corners)
// =============================================================
function MacTrayMenu({ activeStyle, onPickStyle, activeLang, onPickLang }) {
return (
);
}
// =============================================================
// Shared menu primitives (Win and Mac flavors share row API)
// =============================================================
function Group({ label, children }) {
return (
);
}
function Dot({ color }) {
return ;
}
// Inline SVG icons. Line style, Ã la Segoe Fluent / SF Symbols.
function IconToggle() { return ; }
function IconCog() { return ; }
function IconPower() { return ; }
function IconNoTranslate() { return ; }
function IconPin() { return ; }
function IconDev() { return ; }
function IconUnpin() { return ; }
function IconClose() { return ; }
// =============================================================
// WINDOWS desktop mockup
// =============================================================
function WinDesktopMockup({ phase, level, menuOpen, setMenuOpen, activeStyle, setActiveStyle, activeLang, setActiveLang, stateLabel }) {
return (
{/* Win11-style taskbar, left-aligned. Status pill (top-center), Dimmy
icon (leftmost in the dock) and the dropdown menu now all sit on
the same side. */}
{/* Dimmy first in the cluster, with its dropdown anchored to it. */}
{/* Apple menu */}
DimmyFileEditViewWindowHelp
{/* Right cluster: status icons + clock */}
{/* the live Dimmy menubar icon */}
setMenuOpen((v) => !v)}/>
Fri 1 May 20:21
{/* Tray menu, drops down from menubar, anchored under the Dimmy icon */}
{/* mac dock with realistic-ish app icons. clickable but inert. */}
);
}
function StateCaption({ phase, stateLabel, top = 18, anchor = "left" }) {
// anchor:
// "left" → top-left corner (Windows mockup, away from the dropdown
// that drops above the bottom-left taskbar Dimmy icon).
// "center" → horizontal center (Mac mockup, so the pill stays clear of
// the dropdown that descends from the menubar Dimmy icon).
// "right" → tucked under the menubar Dimmy icon (legacy).
let horiz;
if (anchor === "center") horiz = { left: "50%", transform: "translateX(-50%)" };
else if (anchor === "right") horiz = { right: 16 };
else horiz = { left: 22 };
return (
{stateLabel}
);
}
function Stub({ children }) {
return (
{children}
);
}
function WinLogo() { return ; }
function IconSearch() { return ; }
function IconCamera() { return ; }
function IconChrome() { return ; }
function IconExplorer() { return ; }
function IconStore() { return ; }
function IconWifiMac() { return ; }
function IconBatteryMac() { return ; }
function IconSpotlight() { return ; }
function IconControlCenter() { return ; }
// =============================================================
// Section
// =============================================================
function VideoSection() {
// Default = macOS (the Windows taskbar lives in InvisibleSection too, but
// the toggle stays so users can compare both platforms here).
const [platform, setPlatform] = useViS("mac"); // mac | win
const [phase, setPhase] = useViS("idle"); // idle | recording | transcribing | done
const [level, setLevel] = useViS(0.3);
const [activeStyle, setActiveStyle] = useViS("correct");
const [activeLang, setActiveLang] = useViS("it");
const [menuOpen, setMenuOpen] = useViS(true);
const sectionRef = useViR(null);
const inViewRef = useViR(true);
useViE(() => {
const el = sectionRef.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
inViewRef.current = !!(e && e.isIntersecting);
}, { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, []);
// Auto-cycle: idle → recording → transcribing → done → idle
useViE(() => {
let timers = [];
let levelInterval;
const wait = (ms) => new Promise((r) => timers.push(setTimeout(r, ms)));
let cancelled = false;
const cycle = async () => {
while (!cancelled) {
if (!inViewRef.current) { await wait(800); continue; }
await wait(900);
if (cancelled) return;
setPhase("recording");
let target = 0.5;
levelInterval = setInterval(() => {
target = Math.max(0.15, Math.min(0.95, target + (Math.random() - 0.5) * 0.4));
setLevel((l) => l + (target - l) * 0.35);
}, 80);
// Hold the recording state long enough for the static rainbow ring
// to register visually. 3s felt like a flash, 4.5s feels deliberate.
await wait(4500);
clearInterval(levelInterval);
setLevel(0);
if (cancelled) return;
setPhase("transcribing");
await wait(1500);
if (cancelled) return;
setPhase("done");
await wait(700);
if (cancelled) return;
setPhase("idle");
}
};
cycle();
return () => {
cancelled = true;
timers.forEach(clearTimeout);
if (levelInterval) clearInterval(levelInterval);
};
}, []);
const stateLabel = { idle: "ready", recording: "recording", transcribing: "transcribing", done: "done" }[phase];
return (
live demo
Press, speak, release. That's the whole UX.
One icon, one status dot, a right-click menu. That's all the UI you ever need to see. Watch it cycle live.