diff --git a/apps/capture/pnpm-lock.yaml b/apps/capture/pnpm-lock.yaml index c3d0d06..8fbf3d7 100644 --- a/apps/capture/pnpm-lock.yaml +++ b/apps/capture/pnpm-lock.yaml @@ -6,7 +6,7 @@ settings: importers: - apps/capture: + .: dependencies: '@tauri-apps/api': specifier: ^2.0.0 diff --git a/apps/capture/src/components/SettingsPanel.css b/apps/capture/src/components/SettingsPanel.css index afe28ec..9e463ca 100644 --- a/apps/capture/src/components/SettingsPanel.css +++ b/apps/capture/src/components/SettingsPanel.css @@ -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); } +} diff --git a/apps/capture/src/components/SettingsPanel.tsx b/apps/capture/src/components/SettingsPanel.tsx index fe3308a..0caeea4 100644 --- a/apps/capture/src/components/SettingsPanel.tsx +++ b/apps/capture/src/components/SettingsPanel.tsx @@ -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"; @@ -67,6 +73,7 @@ function SettingsPanel() { fill="none" stroke="currentColor" strokeWidth="2" + aria-hidden="true" > @@ -75,8 +82,20 @@ function SettingsPanel() {

Capture

-
- {getStateText(state)} +
+ {showCopiedFeedback && ( +
+ ¡Copiado! +
+ )} +
+ {getStateText(state)} +
@@ -96,8 +115,19 @@ function SettingsPanel() { ))} -