mrleo1nidandClaude Opus 5.5
de4e59d9f8
An axe-core audit of every screen in both themes found low contrast on white text over the accent and on caption text, track rows using row roles without cells, and unlabelled progress bars. Accent fills now use a darker token, caption text meets 4.5:1, track lists are lists and progress bars are labelled. The queue drawer slides in from the right as designed, takes focus, closes on Escape and notes that the wave never ends. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import type { components } from '@pipu/api-client';
|
|
import { useId } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { formatDateTime } from '../../shared/lib/format';
|
|
import { cx } from '../../shared/ui/ui';
|
|
import s from './library.module.css';
|
|
|
|
type ScanProgress = components['schemas']['ScanProgress'];
|
|
export type SourceStatus = components['schemas']['SourceStatus'];
|
|
|
|
export function StatusBadge({ status }: { status: SourceStatus }) {
|
|
const { t } = useTranslation('admin');
|
|
return <span className={cx(s.status, s[`st_${status}`])}>{t(`sources.status_${status}`)}</span>;
|
|
}
|
|
|
|
/** Прогресс идущего скана или итог последнего. */
|
|
export function ScanLine({ scan, lastScanAt }: { scan: ScanProgress | null; lastScanAt: string | null }) {
|
|
const { t, i18n } = useTranslation('admin');
|
|
const id = useId();
|
|
if (scan?.running) {
|
|
const pct = scan.to_process > 0 ? Math.round((scan.processed / scan.to_process) * 100) : 0;
|
|
return (
|
|
<div className={s.scan}>
|
|
<div className={s.scanText} id={id}>
|
|
{scan.found === 0 ? t('sources.scan_walking') : t('sources.scanning', { processed: scan.processed, total: scan.to_process })}
|
|
</div>
|
|
<div className={s.bar} role="progressbar" aria-labelledby={id} aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100}>
|
|
<span style={{ width: `${pct}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className={s.scan}>
|
|
<div className={s.scanText}>
|
|
{lastScanAt ? t('sources.last_scan', { date: formatDateTime(lastScanAt, i18n.language) }) : t('sources.never_scanned')}
|
|
</div>
|
|
{scan?.error ? (
|
|
<div className={s.scanError}>{t('sources.scan_failed', { error: scan.error })}</div>
|
|
) : (
|
|
scan && <div className={s.scanSummary}>{t('sources.scan_done', { ...scan })}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|