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>
85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import type { components } from '@pipu/api-client';
|
|
import { unwrap } from '@pipu/core';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useId } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { useSession } from '../../app/session';
|
|
import { formatBytes } from '../../shared/lib/format';
|
|
import { cx } from '../../shared/ui/ui';
|
|
import s from '../page.module.css';
|
|
import u from './uploads.module.css';
|
|
|
|
export type UploadStatus = components['schemas']['UploadStatus'];
|
|
export type UploadFile = components['schemas']['UploadFile'];
|
|
|
|
const TONE: Record<UploadStatus, 'ok' | 'warn' | 'bad' | 'info' | 'muted'> = {
|
|
uploading: 'info',
|
|
processing: 'info',
|
|
pending_review: 'warn',
|
|
approved: 'info',
|
|
importing: 'info',
|
|
imported: 'ok',
|
|
import_failed: 'bad',
|
|
duplicate: 'muted',
|
|
invalid: 'bad',
|
|
rejected: 'bad',
|
|
withdrawn: 'muted',
|
|
expired: 'muted',
|
|
};
|
|
|
|
/** Статусы, которые ещё меняются сами (обработка, импорт) — список опрашивается. */
|
|
export const MOVING: UploadStatus[] = ['uploading', 'processing', 'approved', 'importing'];
|
|
|
|
export function UploadStatusBadge({ status }: { status: UploadStatus }) {
|
|
const { t } = useTranslation('admin');
|
|
return <span className={cx(s.badge, u[`tone_${TONE[status]}`])}>{t(`uploads.status.${status}`)}</span>;
|
|
}
|
|
|
|
export function useUploadQuota() {
|
|
const session = useSession();
|
|
return useQuery({
|
|
queryKey: ['upload-quota'],
|
|
queryFn: async () => unwrap(await session.client.GET('/api/v1/uploads/quota')),
|
|
});
|
|
}
|
|
|
|
/** «Очередь: 6,2 ГБ из 10 ГБ» — видят модераторы и админ (docs/uploads.md#3). */
|
|
export function QuotaMeter() {
|
|
const { t, i18n } = useTranslation('admin');
|
|
const quota = useUploadQuota();
|
|
const id = useId();
|
|
if (!quota.data) return null;
|
|
const q = quota.data;
|
|
const ratio = q.limit_bytes > 0 ? Math.min(q.used_bytes / q.limit_bytes, 1) : 1;
|
|
const fmt = (n: number) => formatBytes(n, i18n.language);
|
|
return (
|
|
<div className={u.quota}>
|
|
<span className={u.quotaText} id={id}>
|
|
{t('uploads.quota', { used: fmt(q.used_bytes), limit: fmt(q.limit_bytes) })}
|
|
{q.per_user_limit_bytes !== null &&
|
|
` · ${t('uploads.quota_mine', { used: fmt(q.user_used_bytes), limit: fmt(q.per_user_limit_bytes) })}`}
|
|
</span>
|
|
<div className={u.progress} role="progressbar" aria-labelledby={id} aria-valuenow={Math.round(ratio * 100)} aria-valuemin={0} aria-valuemax={100}>
|
|
<span style={{ width: `${ratio * 100}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Понятный текст причины: код из errors:<code> или текст отклонения админа. */
|
|
export function useReasonText(): (reason: string | null) => string | null {
|
|
const { t, i18n } = useTranslation(['admin', 'errors']);
|
|
const tr = t as unknown as (k: string) => string;
|
|
return (reason) => {
|
|
if (!reason) return null;
|
|
const code = reason.split(':')[0]!.trim();
|
|
const key = `errors:${code}`;
|
|
if (i18n.exists(key)) {
|
|
const rest = reason.slice(code.length + 1).trim();
|
|
return rest ? `${tr(key)}: ${rest}` : tr(key);
|
|
}
|
|
return reason;
|
|
};
|
|
}
|