CyberCoveLLC/Triple-C
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Add styled hover tooltip to STT button showing Ctrl+Shift+M shortcut
All checks were successful
Build App / compute-version (pull_request) Successful in 3s
Details
Build App / build-macos (pull_request) Successful in 2m25s
Details
Build App / build-windows (pull_request) Successful in 4m36s
Details
Build App / build-linux (pull_request) Successful in 4m43s
Details
Build App / create-tag (pull_request) Has been skipped
Details
Build App / sync-to-github (pull_request) Has been skipped
Details

Browse Source 
Replaces the native title attribute with a custom tooltip that appears
instantly on hover, displaying the shortcut in a styled kbd element.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-04-13 05:58:29 -07:00
parent 3bbd7fd55f
commit 3e9053946f
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/src/components/terminal/SttButton.tsx
View File

@@ -11,6 +11,7 @@ interface Props {
export default function SttButton({ state, error, onToggle, onCancel }: Props) { export default function SttButton({ state, error, onToggle, onCancel }: Props) {
const [elapsed, setElapsed] = useState(0); const [elapsed, setElapsed] = useState(0);
const [hovered, setHovered] = useState(false);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null); const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
// Track recording duration // Track recording duration
@@ -62,38 +63,42 @@ export default function SttButton({ state, error, onToggle, onCancel }: Props) {
return ( return (
<div className="absolute bottom-1 left-1 z-50 flex items-center gap-2"> <div className="absolute bottom-1 left-1 z-50 flex items-center gap-2">
<button <div className="relative">
onClick={handleClick} <button
onContextMenu={handleContextMenu} onClick={handleClick}
onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal onContextMenu={handleContextMenu}
disabled={state === "transcribing"} onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal
className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${ onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
disabled={state === "transcribing"}
className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
state === "recording" state === "recording"
? "bg-[#f85149] text-white shadow-lg animate-pulse" ? "bg-[#f85149] text-white shadow-lg animate-pulse"
: state === "transcribing" : state === "transcribing"
? "bg-[#1f2937] text-[#58a6ff] border border-[#30363d] opacity-80" ? "bg-[#1f2937] text-[#58a6ff] border border-[#30363d] opacity-80"
: "bg-[#1f2937]/80 text-[#8b949e] border border-[#30363d] hover:text-[#e6edf3] hover:bg-[#2d3748]" : "bg-[#1f2937]/80 text-[#8b949e] border border-[#30363d] hover:text-[#e6edf3] hover:bg-[#2d3748]"
}`} }`}
title={ >
state === "recording" {state === "transcribing" ? (
? "Click or Ctrl+Shift+M to stop and transcribe" <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
: state === "transcribing" <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
? "Transcribing..." <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
: "Speech to text (Ctrl+Shift+M)" </svg>
} ) : (
> <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
{state === "transcribing" ? ( <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none"> <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" /> </svg>
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> )}
</svg> </button>
) : ( {hovered && state !== "recording" && (
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"> <div className="absolute bottom-full left-0 mb-1.5 px-2 py-1 text-[11px] leading-snug text-[#e6edf3] bg-[#21262d] border border-[#30363d] rounded shadow-lg whitespace-nowrap pointer-events-none">
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" /> {state === "transcribing" ? "Transcribing..." : (
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" /> <>Speech to text <kbd className="ml-1 px-1 py-0.5 text-[10px] bg-[#0d1117] border border-[#30363d] rounded font-mono">Ctrl+Shift+M</kbd></>
</svg> )}
</div>
)} )}
</button> </div>
{state === "recording" && ( {state === "recording" && (
<span className="text-xs text-[#f85149] font-mono bg-[#1f2937] px-2 py-0.5 rounded border border-[#30363d]"> <span className="text-xs text-[#f85149] font-mono bg-[#1f2937] px-2 py-0.5 rounded border border-[#30363d]">
{formatTime(elapsed)} {formatTime(elapsed)}