Skip to content

Polish frontend details for capture app #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cesarszv wants to merge 1 commit into
base: 2026-rebirth
Choose a base branch
from
Open

Polish frontend details for capture app #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/capture/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions apps/capture/src/components/SettingsPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,3 +252,24 @@ kbd {
color: #64748b;
font-size: 0.75rem;
}

.status-container {
display: flex;
align-items: center;
gap: 1rem;
}

.copied-badge {
background: #22c55e;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
40 changes: 35 additions & 5 deletions apps/capture/src/components/SettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,13 @@ const getStateText = (state: RecordingState) => {
function SettingsPanel() {
const { config, devices, loading, updateConfig, refreshDevices } =
useConfig();
const { state, lastTranscription, error, toggleRecording } = useRecording();
const {
state,
lastTranscription,
showCopiedFeedback,
error,
toggleRecording,
} = useRecording();

// Derived state for button text/state
const isProcessing = state === "processing";
Expand Down Expand Up @@ -67,6 +73,7 @@ function SettingsPanel() {
fill="none"
stroke="currentColor"
strokeWidth="2"
aria-hidden="true"
>
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
Expand All @@ -75,8 +82,20 @@ function SettingsPanel() {
</svg>
</div>
<h1>Capture</h1>
<div className="status-indicator" style={{ background: getStateColor(state) }}>
{getStateText(state)}
<div className="status-container">
{showCopiedFeedback && (
<div className="copied-badge" role="status">
¡Copiado!
</div>
)}
<div
className="status-indicator"
style={{ background: getStateColor(state) }}
role="status"
aria-live="polite"
>
{getStateText(state)}
</div>
</div>
</header>

Expand All @@ -96,8 +115,19 @@ function SettingsPanel() {
</option>
))}
</select>
<button className="icon-button" onClick={refreshDevices} title="Refrescar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<button
className="icon-button"
onClick={refreshDevices}
title="Refrescar"
aria-label="Refrescar dispositivos"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
aria-hidden="true"
>
<path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
<path d="M21 3v5h-5" />
</svg>
Expand Down
13 changes: 9 additions & 4 deletions apps/capture/src/hooks/useRecording.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface UseRecordingReturn {
state: RecordingState;
isModelLoaded: boolean;
lastTranscription: string | null;
showCopiedFeedback: boolean;
error: string | null;
toggleRecording: () => Promise<void>;
loadModel: () => Promise<void>;
Expand All @@ -17,6 +18,7 @@ export function useRecording(): UseRecordingReturn {
const [lastTranscription, setLastTranscription] = useState<string | null>(
null
);
const [showCopiedFeedback, setShowCopiedFeedback] = useState(false);
const [error, setError] = useState<string | null>(null);

// Use refs for values accessed inside listeners to avoid re-subscription
Expand All @@ -41,7 +43,6 @@ export function useRecording(): UseRecordingReturn {
if (!mountedRef.current) return;

const payload = event.payload;
console.log("Pipeline event:", payload);

switch (payload.type) {
case "state_changed":
Expand All @@ -51,18 +52,21 @@ export function useRecording(): UseRecordingReturn {
break;
case "speech_started":
// Feedback visual opcional
console.log("Speech started");
break;
case "speech_ended":
console.log("Speech ended:", payload.duration_ms, "ms");
break;
case "transcription_complete":
if (payload.text) {
setLastTranscription(payload.text);
}
break;
case "copied_to_clipboard":
console.log("Copied to clipboard:", payload.text);
setShowCopiedFeedback(true);
setTimeout(() => {
if (mountedRef.current) {
setShowCopiedFeedback(false);
}
}, 2000);
break;
case "error":
if (payload.message) {
Expand Down Expand Up @@ -110,6 +114,7 @@ export function useRecording(): UseRecordingReturn {
state,
isModelLoaded,
lastTranscription,
showCopiedFeedback,
error,
toggleRecording,
loadModel,
Expand Down