{this.state.error.message}
)}
-
-
+
+
diff --git a/src/renderer/components/ui/ProgressBar/__tests__/ProgressBar.test.tsx b/src/renderer/components/ui/ProgressBar/__tests__/ProgressBar.test.tsx
new file mode 100644
index 0000000..00e6263
--- /dev/null
+++ b/src/renderer/components/ui/ProgressBar/__tests__/ProgressBar.test.tsx
@@ -0,0 +1,254 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ProgressBar } from '../ProgressBar';
+
+describe('ProgressBar', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it('renders with basic props', () => {
+ render();
+
+ const progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toBeInTheDocument();
+ expect(progressBar).toHaveAttribute('aria-valuenow', '50');
+ expect(progressBar).toHaveAttribute('aria-valuemin', '0');
+ expect(progressBar).toHaveAttribute('aria-valuemax', '100');
+ });
+
+ it('displays status text', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Analyzing audio...')).toBeInTheDocument();
+ });
+
+ it('shows elapsed time when active with startTime', () => {
+ const startTime = Date.now() - 5000; // 5 seconds ago
+
+ render(
+
+ );
+
+ // Check that elapsed time element is rendered (even if timing might vary slightly)
+ const progressInfo = document.querySelector('.progress-info');
+ expect(progressInfo).toBeInTheDocument();
+ });
+
+ it('updates elapsed time every second', () => {
+ const startTime = Date.now();
+
+ render(
+
+ );
+
+ // Check that the component renders and updates
+ const progressInfo = document.querySelector('.progress-info');
+ expect(progressInfo).toBeInTheDocument();
+ });
+
+ it('does not show elapsed time when not active', () => {
+ const startTime = Date.now() - 10000;
+
+ render();
+
+ expect(screen.queryByText(/0:/)).not.toBeInTheDocument();
+ });
+
+ it('does not show elapsed time when startTime is null', () => {
+ render();
+
+ expect(screen.queryByText(/0:/)).not.toBeInTheDocument();
+ });
+
+ it('resets elapsed time when becomes inactive', () => {
+ const startTime = Date.now() - 5000;
+ const { rerender } = render(
+
+ );
+
+ rerender(
+
+ );
+
+ expect(screen.queryByText(/0:/)).not.toBeInTheDocument();
+ });
+
+ it('shows indeterminate progress for mid-range percentages (15-85%)', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).toHaveClass('indeterminate');
+ });
+
+ it('shows determinate progress for low percentages (< 15%)', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).not.toHaveClass('indeterminate');
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '10%' });
+ });
+
+ it('shows determinate progress for high percentages (> 85%)', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).not.toHaveClass('indeterminate');
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '90%' });
+ });
+
+ it('shows indeterminate progress at exactly 15%', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).toHaveClass('indeterminate');
+ });
+
+ it('shows indeterminate progress at exactly 85%', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).toHaveClass('indeterminate');
+ });
+
+ it('shows determinate progress when not active', () => {
+ const { container } = render(
+
+ );
+
+ const progressBar = container.querySelector('.progress-bar');
+ expect(progressBar).not.toHaveClass('indeterminate');
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '50%' });
+ });
+
+ it('uses 30% width for indeterminate progress', () => {
+ const { container } = render(
+
+ );
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '30%' });
+ });
+
+ it('handles 0% progress', () => {
+ const { container } = render(
+
+ );
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '0%' });
+ });
+
+ it('handles 100% progress', () => {
+ const { container } = render(
+
+ );
+
+ const progressFill = container.querySelector('.progress-fill');
+ expect(progressFill).toHaveStyle({ width: '100%' });
+ });
+
+ it('has correct accessibility attributes', () => {
+ render();
+
+ const progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toHaveAttribute('aria-label', 'Transcription progress: 75%');
+ });
+
+ it('updates aria-label when percent changes', () => {
+ const { rerender } = render(
+
+ );
+
+ let progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toHaveAttribute('aria-label', 'Transcription progress: 25%');
+
+ rerender();
+
+ progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toHaveAttribute('aria-label', 'Transcription progress: 75%');
+ });
+
+ it('updates status with aria-live region', () => {
+ render(
+
+ );
+
+ const statusElement = screen.getByText('Processing audio...');
+ expect(statusElement).toHaveAttribute('aria-live', 'polite');
+ });
+
+ it('clears interval when component unmounts', () => {
+ const startTime = Date.now();
+ const { unmount } = render(
+
+ );
+
+ unmount();
+
+ // Advance time - should not cause any errors
+ vi.advanceTimersByTime(5000);
+ });
+
+ it('clears and recreates interval when startTime changes', () => {
+ const startTime1 = Date.now() - 3000;
+ const { rerender } = render(
+
+ );
+
+ const startTime2 = Date.now();
+ rerender(
+
+ );
+
+ // Component should update properly
+ const progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toHaveAttribute('aria-valuenow', '60');
+ });
+
+ it('renders empty status correctly', () => {
+ render();
+
+ const progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toBeInTheDocument();
+ });
+
+ it('handles rapid state changes', () => {
+ const { rerender } = render(
+
+ );
+
+ rerender(
+
+ );
+ rerender(
+
+ );
+ rerender();
+
+ const progressBar = screen.getByRole('progressbar');
+ expect(progressBar).toHaveAttribute('aria-valuenow', '100');
+ });
+});
diff --git a/src/renderer/components/ui/SystemWarning/SystemWarning.css b/src/renderer/components/ui/SystemWarning/SystemWarning.css
index de8f087..6c93630 100644
--- a/src/renderer/components/ui/SystemWarning/SystemWarning.css
+++ b/src/renderer/components/ui/SystemWarning/SystemWarning.css
@@ -74,25 +74,6 @@
box-shadow: var(--shadow-inner);
}
-.copy-button {
- background: transparent;
- border: 1px solid transparent;
- cursor: pointer;
- color: var(--text-muted);
- padding: 6px;
- border-radius: var(--radius-sm);
- transition: all 0.2s;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.copy-button:hover {
- color: var(--text-primary);
- background-color: var(--bg-secondary);
- border-color: var(--border);
-}
-
.alternative-option {
font-size: 0.85rem;
color: var(--text-muted);
@@ -103,66 +84,3 @@
gap: 4px;
align-items: center;
}
-
-.link-button {
- background: none;
- border: none;
- padding: 0;
- font: inherit;
- cursor: pointer;
- color: var(--accent);
- text-decoration: none;
- font-weight: 500;
-}
-
-.link-button:hover {
- text-decoration: underline;
-}
-
-.refresh-button {
- background: var(--warning);
- border: none;
- color: white;
- padding: 10px 16px;
- border-radius: var(--radius-sm);
- font-size: 0.95rem;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
-}
-
-.refresh-button:hover:not(:disabled) {
- background: var(--warning-dark);
- transform: translateY(-1px);
-}
-
-.refresh-button:focus-visible:not(:disabled) {
- transform: translateY(-1px);
-}
-
-.refresh-button:active:not(:disabled) {
- transform: translateY(0);
-}
-
-.refresh-button:disabled {
- opacity: 0.7;
- cursor: not-allowed;
-}
-
-.spin {
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/renderer/components/ui/SystemWarning/SystemWarning.tsx b/src/renderer/components/ui/SystemWarning/SystemWarning.tsx
index 6669ba2..407545e 100644
--- a/src/renderer/components/ui/SystemWarning/SystemWarning.tsx
+++ b/src/renderer/components/ui/SystemWarning/SystemWarning.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { Copy, Check, AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from '../Button';
import './SystemWarning.css';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
import { trackEvent, openExternal, getAppInfo, logger } from '../../../services';
@@ -107,43 +108,41 @@ function SystemWarning({ onRefresh }: SystemWarningProps): React.JSX.Element {
Run this command in your terminal:
{installCommand}
- : }
+ iconOnly
onClick={handleCopy}
title="Copy to clipboard"
aria-label={copySuccess ? 'Copied to clipboard' : 'Copy install command to clipboard'}
- >
- {copySuccess ? (
-
- ) : (
-
- )}
-
+ />
Or download manually from
-
+
-
+ }
+ onClick={handleRefresh}
+ disabled={isChecking}
+ loading={isChecking}
+ fullWidth
+ className="warning"
+ >
+ {isChecking ? 'Verifying Installation...' : 'I have installed FFmpeg'}
+
);
}
diff --git a/src/renderer/components/ui/index.ts b/src/renderer/components/ui/index.ts
index f450df6..1f7410e 100644
--- a/src/renderer/components/ui/index.ts
+++ b/src/renderer/components/ui/index.ts
@@ -1,3 +1,5 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
export { ErrorBoundary } from './ErrorBoundary';
export type { ErrorBoundaryProps } from './ErrorBoundary';
export { ProgressBar } from './ProgressBar';
diff --git a/src/renderer/config/__tests__/constants.test.ts b/src/renderer/config/__tests__/constants.test.ts
index cf7e033..d65b2b6 100644
--- a/src/renderer/config/__tests__/constants.test.ts
+++ b/src/renderer/config/__tests__/constants.test.ts
@@ -8,6 +8,7 @@ import {
getLanguageLabel,
APP_CONFIG,
} from '../../config/constants';
+import type { LanguageCode, QualityLevel } from '../../types';
describe('config/constants', () => {
describe('SUPPORTED_EXTENSIONS', () => {
@@ -95,15 +96,15 @@ describe('config/constants', () => {
});
it('handles out of range values', () => {
- const tooLow = getQualityStars(0 as unknown as 1);
- const tooHigh = getQualityStars(10 as unknown as 1);
+ const tooLow = getQualityStars(0 as QualityLevel);
+ const tooHigh = getQualityStars(10 as QualityLevel);
expect(tooLow).toBe('★☆☆☆☆');
expect(tooHigh).toBe('★★★★★');
});
it('clamps negative values', () => {
- const result = getQualityStars(-5 as unknown as 1);
+ const result = getQualityStars(-5 as QualityLevel);
expect(result).toBe('★☆☆☆☆');
});
});
@@ -136,5 +137,15 @@ describe('config/constants', () => {
expect(label).toBe(lang.label);
});
});
+
+ it('returns the code itself for unknown language code', () => {
+ const unknownCode = 'xx' as LanguageCode;
+ expect(getLanguageLabel(unknownCode)).toBe('xx');
+ });
+
+ it('handles edge cases with unknown codes', () => {
+ expect(getLanguageLabel('unknown' as LanguageCode)).toBe('unknown');
+ expect(getLanguageLabel('test-lang' as LanguageCode)).toBe('test-lang');
+ });
});
});
diff --git a/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.css b/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.css
index 25901c6..5db06a3 100644
--- a/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.css
+++ b/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.css
@@ -48,6 +48,13 @@
}
}
+.update-close-btn {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ z-index: 1;
+}
+
.update-available,
.update-downloading,
.update-downloaded,
@@ -141,44 +148,6 @@
margin-top: 8px;
}
-.btn-download,
-.btn-install {
- flex: 1;
- padding: 12px 24px;
- background: var(--accent);
- color: white;
- border: none;
- border-radius: var(--radius-sm);
- font-size: 1rem;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.btn-download:hover,
-.btn-install:hover {
- background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: var(--shadow);
-}
-
-.btn-dismiss {
- padding: 12px 24px;
- background: transparent;
- color: var(--text-secondary);
- border: 1px solid var(--border);
- border-radius: var(--radius-sm);
- font-size: 1rem;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.btn-dismiss:hover {
- background: var(--bg-hover);
- border-color: var(--border-hover);
- color: var(--text-primary);
-}
-
.progress-bar {
width: 100%;
height: 6px;
@@ -208,30 +177,6 @@
color: #ef4444;
}
-.btn-close {
- position: absolute;
- top: 16px;
- right: 16px;
- width: 32px;
- height: 32px;
- border-radius: var(--radius-sm);
- border: none;
- background: transparent;
- color: var(--text-muted);
- font-size: 20px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
- z-index: 1;
-}
-
-.btn-close:hover {
- background: var(--bg-hover);
- color: var(--text-primary);
-}
-
@media (max-width: 768px) {
.update-notification-content {
width: 95%;
diff --git a/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.tsx b/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.tsx
index 7533701..02f8d5a 100644
--- a/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.tsx
+++ b/src/renderer/features/auto-update/components/UpdateNotification/UpdateNotification.tsx
@@ -1,5 +1,6 @@
import { useAutoUpdate } from '../../hooks/useAutoUpdate';
import { convertHtmlToText, formatFileSize } from '../../../../utils';
+import { Button } from '../../../../components/ui';
import { X, AlertTriangle, Sparkles, Download, CheckCircle } from 'lucide-react';
import './UpdateNotification.css';
@@ -30,9 +31,14 @@ function UpdateNotification() {
return (
e.stopPropagation()}>
-
+
}
+ iconOnly
+ onClick={dismissUpdate}
+ aria-label="Close"
+ className="update-close-btn"
+ />
{error && (
@@ -45,13 +51,14 @@ function UpdateNotification() {
{error}
-
+
)}
@@ -75,12 +82,12 @@ function UpdateNotification() {
)}
-
)}
@@ -126,12 +133,12 @@ function UpdateNotification() {
-
)}
diff --git a/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.css b/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.css
index 393df48..eb07318 100644
--- a/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.css
+++ b/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.css
@@ -35,29 +35,6 @@
gap: 8px;
}
-.history-actions button {
- padding: 6px 10px;
- font-size: 0.8rem;
- background: var(--surface);
- border: 1px solid var(--border);
- color: var(--text-primary);
- border-radius: var(--radius-sm);
- transition: all var(--transition-fast);
-}
-
-.history-actions button:hover {
- background: var(--surface-hover);
-}
-
-.history-actions .danger {
- color: var(--danger);
- border-color: var(--danger);
-}
-
-.history-actions .danger:hover {
- background: var(--danger-light);
-}
-
.history-content {
flex: 1;
padding: 12px;
diff --git a/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.tsx b/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.tsx
index b82ab2a..374af92 100644
--- a/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.tsx
+++ b/src/renderer/features/history/components/TranscriptionHistory/TranscriptionHistory.tsx
@@ -1,5 +1,6 @@
import React, { type KeyboardEvent } from 'react';
import { History, Trash2, X, Inbox, Clock } from 'lucide-react';
+import { Button } from '../../../../components/ui';
import { formatDate, formatDuration } from '../../../../utils';
import { getLanguageLabel } from '../../../../config';
import './TranscriptionHistory.css';
@@ -48,13 +49,18 @@ function TranscriptionHistory({
{history.length > 0 && (
-
+ }
+ onClick={handleClearAll}
+ className="danger"
+ >
+ Clear All
+
)}
-
+ } onClick={onClose}>
+ Close
+
@@ -82,14 +88,16 @@ function TranscriptionHistory({
{item.fileName}
{formatDate(item.date)}
- }
+ iconOnly
onClick={(event) => handleDelete(event, item.id, item.fileName)}
title="Delete transcription"
aria-label={`Delete ${item.fileName}`}
- >
-
-
+ className="history-item-delete"
+ />
diff --git a/src/renderer/features/settings/components/ModelDetails/ModelDetails.css b/src/renderer/features/settings/components/ModelDetails/ModelDetails.css
index ef019fd..14117dc 100644
--- a/src/renderer/features/settings/components/ModelDetails/ModelDetails.css
+++ b/src/renderer/features/settings/components/ModelDetails/ModelDetails.css
@@ -38,24 +38,6 @@
margin-top: 10px;
}
-.btn-download {
- width: 100%;
- padding: 8px 12px;
- font-size: 0.85rem;
- background: var(--accent-light);
- border: 1px solid var(--accent-border);
- color: var(--accent);
- border-radius: var(--radius-sm);
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.btn-download:hover {
- background: var(--accent);
- color: white;
- border-color: var(--accent);
-}
-
.downloading {
display: flex;
align-items: center;
@@ -107,26 +89,3 @@
justify-content: space-between;
margin-top: 8px;
}
-
-.btn-delete-model {
- background: transparent;
- border: none;
- cursor: pointer;
- padding: 4px;
- border-radius: var(--radius-sm);
- transition: all var(--transition-fast);
- font-size: 1rem;
- opacity: 0.6;
- color: var(--text-muted);
-}
-
-.btn-delete-model:hover {
- background: var(--danger-light);
- opacity: 1;
- color: var(--danger);
-}
-
-.btn-delete-model:disabled {
- opacity: 0.3;
- cursor: not-allowed;
-}
diff --git a/src/renderer/features/settings/components/ModelDetails/ModelDetails.tsx b/src/renderer/features/settings/components/ModelDetails/ModelDetails.tsx
index 65da7f2..99d2096 100644
--- a/src/renderer/features/settings/components/ModelDetails/ModelDetails.tsx
+++ b/src/renderer/features/settings/components/ModelDetails/ModelDetails.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { Download, Check, Trash2 } from 'lucide-react';
+import { Button } from '../../../../components/ui';
import './ModelDetails.css';
import type { ModelInfo, ModelDownloadProgress } from '../../../../types';
import { QUALITY_STARS } from '../../../../config';
@@ -53,14 +54,17 @@ function ModelDetails({
)}
) : (
- }
onClick={() => onDownload(model.name)}
disabled={disabled}
aria-label={`Download ${model.name} model, size ${model.size}`}
+ fullWidth
+ className="accent"
>
- Download {model.size}
-
+ Download {model.size}
+
)}
)}
@@ -70,15 +74,17 @@ function ModelDetails({
Ready to use
- }
+ iconOnly
onClick={() => onDelete(model.name)}
disabled={disabled}
title="Delete model"
aria-label={`Delete ${model.name} model`}
- >
-
-
+ className="danger"
+ />
)}
diff --git a/src/renderer/features/transcription/components/FileDropZone/FileDropZone.tsx b/src/renderer/features/transcription/components/FileDropZone/FileDropZone.tsx
index a781638..029c2f0 100644
--- a/src/renderer/features/transcription/components/FileDropZone/FileDropZone.tsx
+++ b/src/renderer/features/transcription/components/FileDropZone/FileDropZone.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, type DragEvent, type KeyboardEvent } from 'react';
import { X } from 'lucide-react';
+import { Button } from '../../../../components/ui';
import { isValidMediaFile, formatFileSize } from '../../../../utils';
import type { SelectedFile } from '../../../../types';
import { openFileDialog, getPathForFile } from '../../../../services/electronAPI';
@@ -79,14 +80,16 @@ function FileDropZone({
>
{selectedFile ? (
-
}
+ iconOnly
onClick={handleRemoveClick}
title="Remove file"
aria-label="Remove selected file"
- >
-
-
+ className="file-remove"
+ />
📁
{selectedFile.name}
diff --git a/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.css b/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.css
index 135a9da..fd5e4a0 100644
--- a/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.css
+++ b/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.css
@@ -39,35 +39,3 @@
padding: 0 8px;
white-space: nowrap;
}
-
-.search-nav-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 28px;
- height: 28px;
- padding: 0;
- font-size: 0.85rem;
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: var(--radius-sm);
- color: var(--text-primary);
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.search-nav-btn:hover:not(:disabled) {
- background: var(--surface-hover);
- border-color: var(--border-hover);
-}
-
-.search-nav-btn:disabled {
- opacity: 0.4;
- cursor: not-allowed;
-}
-
-.search-nav-btn.close:hover {
- background: var(--danger-light);
- border-color: var(--danger);
- color: var(--danger);
-}
diff --git a/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.tsx b/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.tsx
index eb47ab9..1aa90c9 100644
--- a/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.tsx
+++ b/src/renderer/features/transcription/components/TranscriptionSearch/TranscriptionSearch.tsx
@@ -1,5 +1,6 @@
import React, { useRef, useEffect, type ChangeEvent } from 'react';
import { ChevronUp, ChevronDown, X } from 'lucide-react';
+import { Button } from '../../../../components/ui';
import './TranscriptionSearch.css';
export interface TranscriptionSearchProps {
@@ -50,32 +51,35 @@ function TranscriptionSearch({
{totalMatches > 0 ? `${currentMatchIndex + 1} of ${totalMatches}` : 'No matches'}
)}
- }
+ iconOnly
onClick={onPrevMatch}
disabled={totalMatches === 0}
title="Previous match (Shift+Enter)"
aria-label="Previous match"
- >
-
-
-
+ }
+ iconOnly
onClick={onNextMatch}
disabled={totalMatches === 0}
title="Next match (Enter)"
aria-label="Next match"
- >
-
-
-
+ }
+ iconOnly
onClick={onClose}
title="Close search (Esc)"
aria-label="Close search"
- >
-
-
+ />
-
}
onClick={onToggleSearch}
title="Search transcript (⌘F)"
aria-label="Search transcript"
+ active={isSearchActive}
>
-
Search
-
-
+ {copySuccess ? 'Copied!' : 'Copy'}
+
-
}
onClick={() => setShowSaveMenu(!showSaveMenu)}
title="Save to file"
aria-label="Save transcription to file"
aria-expanded={showSaveMenu}
>
-
Save
-
+ Save
+
{showSaveMenu && (
{OUTPUT_FORMATS.map((format) => (
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 78eff66..45b03de 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -171,3 +171,16 @@ body {
transition-duration: 150ms;
}
}
+
+.spin {
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}