refactor: isolate playback and upload use cases

apps/web/src/features/uploads/BatchEditDialog.tsx

@@ -0,0 +1,69 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useErrorText } from '../../shared/lib/errors';
+import { useUploadsApi } from './queries';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string; onClose: () => void; onSaved: () => void }) {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const errorText = useErrorText();
+  const [artist, setArtist] = useState('');
+  const [album, setAlbum] = useState('');
+  const [year, setYear] = useState('');
+  const [cover, setCover] = useState<string | null | undefined>(undefined);
+  const save = useMutation({
+    mutationFn: () => api.updateBatch(batchId, {
+      ...(artist.trim() ? { artist: artist.trim() } : {}),
+      ...(album.trim() ? { album: album.trim() } : {}),
+      ...(year.trim() ? { year: Number.parseInt(year, 10) } : {}),
+      ...(cover !== undefined ? { cover_base64: cover } : {}),
+    }),
+    onSuccess: onSaved,
+  });
+  const pickCover = (file: File | undefined) => {
+    if (!file) {
+      setCover(undefined);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const data = String(reader.result ?? '');
+      const comma = data.indexOf(',');
+      setCover(comma >= 0 ? data.slice(comma + 1) : data);
+    };
+    reader.readAsDataURL(file);
+  };
+  return (
+    <Dialog
+      title={t('uploads.batch_edit_title')}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
+            {t('uploads.save')}
+          </Button>
+        </>
+      }
+    >
+      <div className={s.sessions}>
+        <p className={s.note}>{t('uploads.batch_edit_hint')}</p>
+        <Field label={t('uploads.meta_artist')} value={artist} onChange={setArtist} maxLength={500} />
+        <Field label={t('uploads.meta_album')} value={album} onChange={setAlbum} maxLength={500} />
+        <Field label={t('uploads.meta_year')} value={year} inputMode="numeric" onChange={setYear} />
+        <label className={s.sessions}>
+          <span>{t('uploads.batch_cover')}</span>
+          <input type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => pickCover(e.target.files?.[0])} />
+        </label>
+        <Button variant="ghost" onClick={() => setCover(null)}>
+          {t('uploads.batch_cover_clear')}
+        </Button>
+        <FormError>{save.error ? errorText(save.error) : null}</FormError>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/EditDialog.test.tsx

@@ -0,0 +1,56 @@
+import { AuthSession } from '@pipu/core';
+import { createI18n } from '@pipu/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, expect, it, vi } from 'vitest';
+import { SessionProvider } from '../../app/session';
+import { mobileFixtures } from '../../test/mobileFixtures';
+import { EditDialog } from './EditDialog';
+import type { UploadFile } from './common';
+
+afterEach(cleanup);
+
+async function fixture(fail = false) {
+  const file = (mobileFixtures['/api/v1/admin/uploads'] as { items: UploadFile[] }).items[0]!;
+  const requests: unknown[] = [];
+  const fetchImpl: typeof fetch = async (input) => {
+    const req = input as Request;
+    if (req.method === 'PATCH') {
+      requests.push(await req.json());
+      return new Response(JSON.stringify(fail ? { status: 409, code: 'uploads.wrong_status' } : file), { status: fail ? 409 : 200 });
+    }
+    return new Response(JSON.stringify(mobileFixtures['/api/v1/admin/sources']));
+  };
+  const session = new AuthSession({ baseUrl: 'http://localhost', fetch: fetchImpl, clientType: 'web' });
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  const onSaved = vi.fn();
+  const onClose = vi.fn();
+  const i18n = await createI18n('ru');
+  render(<I18nextProvider i18n={i18n}><SessionProvider session={session}><QueryClientProvider client={queryClient}>
+    <EditDialog file={file} onSaved={onSaved} onClose={onClose} />
+  </QueryClientProvider></SessionProvider></I18nextProvider>);
+  const user = userEvent.setup();
+  await user.type(screen.getByLabelText('Исполнитель', { exact: true }), 'Кино');
+  await user.type(screen.getByLabelText('Название', { exact: true }), 'Перемен');
+  return { requests, onSaved, onClose, user };
+}
+
+it('saves edited metadata with the target source and closes only after success', async () => {
+  const f = await fixture();
+  await f.user.click(screen.getByRole('button', { name: 'Сохранить' }));
+  await waitFor(() => expect(f.onSaved).toHaveBeenCalledOnce());
+  expect(f.onClose).toHaveBeenCalledOnce();
+  expect(f.requests).toEqual([expect.objectContaining({ metadata: expect.objectContaining({ artist: 'Кино', title: 'Перемен' }), target_source_id: expect.any(String) })]);
+});
+
+it('keeps the editor and input when a concurrent review rejects the save', async () => {
+  const f = await fixture(true);
+  await f.user.click(screen.getByRole('button', { name: 'Сохранить' }));
+  await waitFor(() => expect(screen.getByRole('alert')).toBeVisible());
+  expect(screen.getByRole('dialog')).toBeVisible();
+  expect(screen.getByLabelText('Название', { exact: true })).toHaveValue('Перемен');
+  expect(f.onSaved).not.toHaveBeenCalled();
+  expect(f.onClose).not.toHaveBeenCalled();
+});

apps/web/src/features/uploads/EditDialog.tsx

@@ -0,0 +1,85 @@
+import type { components } from '@pipu/api-client';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useErrorText, useFieldError } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
+import { useUploadsApi, useUploadSources } from './queries';
+import type { UploadFile } from './common';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+type Meta = components['schemas']['UploadMeta'];
+const EMPTY_META: Meta = { artist: '', albumartist: '', album: '', title: '', genre: '', year: null, track: null, disc: null };
+
+export function EditDialog({ file, onClose, onSaved }: { file: UploadFile; onClose: () => void; onSaved: () => void }) {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const errorText = useErrorText();
+  const fieldError = useFieldError();
+  const [m, setM] = useState<Meta>(file.metadata ?? EMPTY_META);
+  const [source, setSource] = useState(file.target_source_id ?? '');
+  const sources = useUploadSources();
+  const save = useMutation({
+    mutationFn: () => api.updateFile(file.id, { metadata: m, ...(source ? { target_source_id: source } : {}) }),
+    onSuccess: () => {
+      onSaved();
+      onClose();
+    },
+  });
+  const text = (k: 'artist' | 'albumartist' | 'album' | 'title' | 'genre') => (
+    <Field label={t(`uploads.meta_${k}`)} value={m[k]} onChange={(v) => setM({ ...m, [k]: v })} maxLength={500} />
+  );
+  const num = (k: 'year' | 'track' | 'disc') => (
+    <Field
+      label={t(`uploads.meta_${k}`)}
+      value={m[k] === null ? '' : String(m[k])}
+      inputMode="numeric"
+      onChange={(v) => setM({ ...m, [k]: v.trim() === '' ? null : Number.parseInt(v, 10) || null })}
+    />
+  );
+  const accepting = sources.data?.filter((x) => x.accepts_uploads) ?? [];
+  return (
+    <Dialog
+      title={t('uploads.edit_title')}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="primary" busy={save.isPending} disabled={!m.artist.trim() || !m.title.trim()} onClick={() => save.mutate()}>
+            {t('uploads.save')}
+          </Button>
+        </>
+      }
+    >
+      <div className={s.sessions}>
+        <p className={s.note}>{file.client_rel_path ?? file.original_name}</p>
+        <div className={u.grid}>
+          {text('artist')}
+          {text('albumartist')}
+          {text('album')}
+          {text('title')}
+          {text('genre')}
+          {num('year')}
+          {num('track')}
+          {num('disc')}
+        </div>
+        <label className={s.sessions}>
+          <span>{t('uploads.target_source')}</span>
+          <select className={s.select} value={source} onChange={(e) => setSource(e.target.value)}>
+            <option value="">{t('uploads.target_default')}</option>
+            {accepting.map((x) => (
+              <option key={x.id} value={x.id}>
+                {x.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className={s.note}>{t('uploads.tags_note')}</p>
+        <FormError>{save.error ? (fieldError(save.error, 'metadata') ?? errorText(save.error)) : null}</FormError>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/QueueRows.tsx

@@ -0,0 +1,153 @@
+import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
+import { editIcon, refreshIcon } from '../../shared/ui/icons';
+import { needsFormatAttention } from './files';
+import { UploadStatusBadge, useReasonText, type UploadFile } from './common';
+import { useTranslation } from 'react-i18next';
+import { Button, cx, Icon } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+export function BatchCard({
+  files,
+  selectable,
+  selected,
+  onToggle,
+  onEdit,
+  onEditBatch,
+  onRetry,
+}: {
+  files: UploadFile[];
+  selectable: boolean;
+  selected: Set<string>;
+  onToggle: (ids: string[], on: boolean) => void;
+  onEdit: (f: UploadFile) => void;
+  onEditBatch: (batchId: string) => void;
+  onRetry: (id: string) => void;
+}) {
+  const { t, i18n } = useTranslation('admin');
+  const first = files[0]!;
+  const ids = files.map((f) => f.id);
+  const all = ids.every((id) => selected.has(id));
+  const size = files.reduce((n, f) => n + f.size_bytes, 0);
+  return (
+    <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
+      <div className={u.batchHead}>
+        {selectable && (
+          <input type="checkbox" aria-label={t('uploads.select_batch')} checked={all} onChange={(e) => onToggle(ids, e.target.checked)} />
+        )}
+        <b>{first.author.username}</b>
+        <span>{formatDateTime(first.created_at, i18n.language)}</span>
+        <span>{t('uploads.batch_size', { count: files.length, size: formatBytes(size, i18n.language) })}</span>
+        {first.batch_comment && <span className={u.comment}>«{first.batch_comment}»</span>}
+        <span style={{ flex: 1 }} />
+        {selectable && (
+          <Button variant="ghost" onClick={() => onEditBatch(first.batch_id)}>
+            {t('uploads.edit_batch')}
+          </Button>
+        )}
+      </div>
+      {files.map((f) => (
+        <QueueRow
+          key={f.id}
+          file={f}
+          selectable={selectable}
+          checked={selected.has(f.id)}
+          onCheck={(on) => onToggle([f.id], on)}
+          onEdit={() => onEdit(f)}
+          onRetry={() => onRetry(f.id)}
+        />
+      ))}
+    </section>
+  );
+}
+
+function QueueRow({
+  file: f,
+  selectable,
+  checked,
+  onCheck,
+  onEdit,
+  onRetry,
+}: {
+  file: UploadFile;
+  selectable: boolean;
+  checked: boolean;
+  onCheck: (on: boolean) => void;
+  onEdit: () => void;
+  onRetry: () => void;
+}) {
+  const { t, i18n } = useTranslation('admin');
+  const reason = useReasonText()(f.status_reason);
+  const m = f.metadata;
+  const quality = [
+    f.format?.toUpperCase(),
+    f.bitrate ? `${Math.round(f.bitrate / 1000)} kbps` : null,
+    f.sample_rate ? `${(f.sample_rate / 1000).toFixed(1)} kHz` : null,
+    f.bit_depth ? `${f.bit_depth} bit` : null,
+    f.duration_ms ? formatDuration(f.duration_ms) : null,
+    formatBytes(f.size_bytes, i18n.language),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  const editable = f.status === 'pending_review' || f.status === 'import_failed';
+  return (
+    <div className={u.queueRow}>
+      {selectable ? (
+        <input type="checkbox" aria-label={t('uploads.select_file', { name: f.original_name })} checked={checked} onChange={(e) => onCheck(e.target.checked)} />
+      ) : (
+        <span />
+      )}
+      <div className={u.meta}>
+        <span className={u.metaTitle}>{m ? `${m.artist} — ${m.title}` : f.original_name}</span>
+        {m && (
+          <span className={u.sub}>
+            {[m.album, m.year, m.disc && m.disc > 1 ? t('uploads.disc', { n: m.disc }) : null, m.track ? `#${m.track}` : null, m.genre]
+              .filter(Boolean)
+              .join(' · ')}
+            {f.metadata_edited && ` · ${t('uploads.edited')}`}
+          </span>
+        )}
+        <span className={u.sub}>{quality}</span>
+        <span className={u.sub} title={f.client_rel_path ?? undefined}>
+          {f.client_rel_path ?? f.original_name}
+        </span>
+      </div>
+      <div className={u.meta}>
+        <div className={u.flags}>
+          <UploadStatusBadge status={f.status} />
+          {needsFormatAttention(f.format, f.original_name) && (
+            <span className={cx(s.badge, u.tone_warn)} title={t('uploads.format_attention')}>
+              {t('uploads.flag_attention')}
+            </span>
+          )}
+          {f.possible_duplicate && <span className={cx(s.badge, u.tone_warn)}>{t('uploads.flag_possible')}</span>}
+          {f.quality_upgrade && <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_quality')}</span>}
+          {f.matched_album_id ? (
+            <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_existing_album')}</span>
+          ) : (
+            m && <span className={cx(s.badge, u.tone_muted)}>{t('uploads.flag_new_album')}</span>
+          )}
+        </div>
+        {f.target_rel_path && <span className={u.target}>{f.target_rel_path}</span>}
+        {reason && <span className={f.status === 'pending_review' ? u.warn : u.bad}>{reason}</span>}
+        {f.duplicate_level && f.status === 'duplicate' && (
+          <span className={u.sub}>{t(`uploads.dup_level_${f.duplicate_level}`)}</span>
+        )}
+      </div>
+      <div className={u.rowActions}>
+        {f.stream_url && (
+          <audio controls preload="none" src={f.stream_url} aria-label={t('uploads.listen', { name: f.original_name })} />
+        )}
+        {editable && (
+          <Button variant="ghost" aria-label={t('uploads.edit', { name: f.original_name })} onClick={onEdit}>
+            <Icon src={editIcon} size={18} />
+          </Button>
+        )}
+        {f.status === 'import_failed' && (
+          <Button variant="ghost" icon={refreshIcon} onClick={onRetry}>
+            {t('uploads.retry')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/features/uploads/RejectDialog.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+export function RejectDialog({
+  count,
+  busy,
+  onClose,
+  onReject,
+}: {
+  count: number;
+  busy: boolean;
+  onClose: () => void;
+  onReject: (reason: string) => void;
+}) {
+  const { t } = useTranslation(['admin', 'common']);
+  const [reason, setReason] = useState('');
+  return (
+    <Dialog
+      title={t('uploads.reject_title', { count })}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="danger" busy={busy} onClick={() => onReject(reason)}>
+            {t('uploads.reject')}
+          </Button>
+        </>
+      }
+    >
+      <label className={s.sessions}>
+        <span>{t('uploads.reject_reason')}</span>
+        <textarea className={u.textarea} value={reason} maxLength={1000} onChange={(e) => setReason(e.target.value)} />
+      </label>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/UploadQueue.tsx

@@ -0,0 +1,180 @@
+import { ApiError } from '@pipu/core';
+import type { components } from '@pipu/api-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { checkIcon, closeIcon, inboxIcon } from '../../shared/ui/icons';
+import { useErrorText } from '../../shared/lib/errors';
+import { QuotaMeter, type UploadFile, type UploadStatus } from './common';
+import { BatchCard } from './QueueRows';
+import { BatchEditDialog } from './BatchEditDialog';
+import { EditDialog } from './EditDialog';
+import { RejectDialog } from './RejectDialog';
+import { useUploadQueue, useUploadsApi } from './queries';
+import { useTranslation } from 'react-i18next';
+import { Button, EmptyState, FormError } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+const TABS = {
+  review: ['pending_review'],
+  failed: ['import_failed'],
+  progress: ['uploading', 'processing', 'approved', 'importing'],
+  imported: ['imported'],
+  declined: ['rejected', 'duplicate', 'invalid', 'withdrawn', 'expired'],
+} satisfies Record<string, UploadStatus[]>;
+type Tab = keyof typeof TABS;
+
+/** «Очередь на добавление» (docs/uploads.md#8): рассмотрение по пачкам, правка метаданных, массовые решения. */
+export function UploadQueue() {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const [tab, setTab] = useState<Tab>('review');
+  const [onlyPossible, setOnlyPossible] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [editing, setEditing] = useState<UploadFile | null>(null);
+  const [batchEdit, setBatchEdit] = useState<string | null>(null);
+  const [rejecting, setRejecting] = useState(false);
+
+  const list = useUploadQueue(TABS[tab], tab, onlyPossible);
+  const items = useMemo(() => list.data?.pages.flatMap((p) => p.items) ?? [], [list.data]);
+  useEffect(() => setSelected(new Set()), [tab, onlyPossible]);
+
+  const refresh = async () => {
+    setSelected(new Set());
+    await queryClient.invalidateQueries({ queryKey: ['admin-uploads'] });
+    await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+  };
+  const review = useMutation({
+    mutationFn: (v: { decision: 'approve' | 'reject'; ids: string[]; reason?: string }) => api.review(v),
+    onSuccess: refresh,
+  });
+  const retry = useMutation({
+    mutationFn: api.retry,
+    onSuccess: refresh,
+  });
+  const failed = review.data?.items.filter((r) => !r.ok) ?? [];
+
+  // Группировка по пачке: файлы одной загрузки (обычно альбом) рассматриваются вместе.
+  const batches = useMemo(() => {
+    const m = new Map<string, UploadFile[]>();
+    for (const f of items) m.set(f.batch_id, [...(m.get(f.batch_id) ?? []), f]);
+    return [...m.values()];
+  }, [items]);
+  const toggle = (ids: string[], on: boolean) =>
+    setSelected((cur) => {
+      const next = new Set(cur);
+      for (const id of ids) {
+        if (on) next.add(id);
+        else next.delete(id);
+      }
+      return next;
+    });
+  const selectable = tab === 'review' || tab === 'failed';
+  const ids = [...selected];
+
+  return (
+    <div className={s.page}>
+      <div className={s.head}>
+        <div>
+          <h1>{t('uploads.queue_title')}</h1>
+          <p className={s.subtitle}>{t('uploads.queue_subtitle')}</p>
+        </div>
+        <QuotaMeter />
+      </div>
+      <div className={s.toolbar}>
+        <div className={s.chips} role="group" aria-label={t('uploads.filter')}>
+          {(Object.keys(TABS) as Tab[]).map((k) => (
+            <button key={k} type="button" className={s.chip} aria-pressed={tab === k} onClick={() => setTab(k)}>
+              {t(`uploads.tab_${k}`)}
+            </button>
+          ))}
+        </div>
+        <span style={{ flex: 1 }} />
+        <label className={u.sub} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input type="checkbox" checked={onlyPossible} onChange={(e) => setOnlyPossible(e.target.checked)} />
+          {t('uploads.only_possible')}
+        </label>
+      </div>
+      <FormError>{(list.error ?? review.error ?? retry.error) ? errorText(list.error ?? review.error ?? retry.error) : null}</FormError>
+      {failed.length > 0 && (
+        <FormError>{t('uploads.review_failed', { count: failed.length, reason: failed[0]?.error ? errorText(problemError(failed[0].error)) : '' })}</FormError>
+      )}
+      {list.isSuccess && items.length === 0 && <EmptyState icon={inboxIcon}>{t('uploads.queue_empty')}</EmptyState>}
+
+      {batches.map((files) => (
+        <BatchCard
+          key={files[0]!.batch_id}
+          files={files}
+          selectable={selectable}
+          selected={selected}
+          onToggle={toggle}
+          onEdit={setEditing}
+          onEditBatch={setBatchEdit}
+          onRetry={(id) => retry.mutate(id)}
+        />
+      ))}
+      {list.hasNextPage && (
+        <Button busy={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>
+          {t('uploads.load_more')}
+        </Button>
+      )}
+
+      {ids.length > 0 && (
+        <div className={u.bulk} role="region" aria-label={t('uploads.bulk')}>
+          <span>{t('uploads.selected', { count: ids.length })}</span>
+          <span style={{ flex: 1 }} />
+          <Button variant="ghost" onClick={() => setSelected(new Set())}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="danger" icon={closeIcon} onClick={() => setRejecting(true)}>
+            {t('uploads.reject')}
+          </Button>
+          {tab === 'review' && (
+            <Button variant="primary" icon={checkIcon} busy={review.isPending} onClick={() => review.mutate({ decision: 'approve', ids })}>
+              {t('uploads.approve')}
+            </Button>
+          )}
+        </div>
+      )}
+
+      {batchEdit && (
+        <BatchEditDialog
+          batchId={batchEdit}
+          onClose={() => setBatchEdit(null)}
+          onSaved={() => {
+            setBatchEdit(null);
+            void refresh();
+          }}
+        />
+      )}
+
+      {editing && (
+        <EditDialog
+          file={editing}
+          onClose={() => setEditing(null)}
+          onSaved={() => {
+            review.reset();
+            void refresh();
+          }}
+        />
+      )}
+      {rejecting && (
+        <RejectDialog
+          count={ids.length}
+          busy={review.isPending}
+          onClose={() => setRejecting(false)}
+          onReject={(reason) => {
+            setRejecting(false);
+            review.mutate({ decision: 'reject', ids, reason });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Problem из ответа массового решения → объект, понятный useErrorText. */
+function problemError(p: components['schemas']['Problem']) {
+  return new ApiError(p.status, p.code, p.params ?? {});
+}

apps/web/src/features/uploads/UploadSettingsSection.tsx

@@ -0,0 +1,101 @@
+import type { components } from '@pipu/api-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Field, FormError } from '../../shared/ui/ui';
+import { useUploadsApi, useUploadSources, useUploadSettings } from './queries';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+type Settings = components['schemas']['UploadSettings'];
+const GB = 1024 ** 3;
+
+/** Настройки очереди: общий лимит, лимит на модератора, размер файла, хранилище по умолчанию. */
+export function UploadSettingsSection() {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const settings = useUploadSettings();
+  const sources = useUploadSources();
+  const [form, setForm] = useState<{ queue: string; perUser: string; maxFile: string; source: string; upgrade: boolean } | null>(null);
+  useEffect(() => {
+    if (settings.data) setForm(toForm(settings.data));
+  }, [settings.data]);
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const f = form!;
+      const gb = (v: string) => Math.round(Number.parseFloat(v.replace(',', '.')) * GB);
+      return api.updateSettings({
+        queue_limit_bytes: gb(f.queue), max_file_bytes: gb(f.maxFile),
+        per_user_limit_bytes: f.perUser.trim() ? gb(f.perUser) : null,
+        default_source_id: f.source || null, allow_quality_upgrade: f.upgrade,
+      });
+    },
+    onSuccess: async (data) => {
+      queryClient.setQueryData(['upload-settings'], data);
+      await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+    },
+  });
+  if (!form) return null;
+  const valid = [form.queue, form.maxFile].every((v) => Number.parseFloat(v.replace(',', '.')) > 0) &&
+    (!form.perUser.trim() || Number.parseFloat(form.perUser.replace(',', '.')) > 0);
+  const dirty = settings.data ? JSON.stringify(toForm(settings.data)) !== JSON.stringify(form) : false;
+  return (
+    <section className={s.section}>
+      <h2>{t('uploads.settings_title')}</h2>
+      <div className={u.settingsGrid}>
+        <Field label={t('uploads.set_queue')} value={form.queue} onChange={(v) => setForm({ ...form, queue: v })} inputMode="decimal" />
+        <Field
+          label={t('uploads.set_per_user')}
+          value={form.perUser}
+          hint={t('uploads.set_per_user_hint')}
+          onChange={(v) => setForm({ ...form, perUser: v })}
+          inputMode="decimal"
+        />
+        <Field label={t('uploads.set_max_file')} value={form.maxFile} onChange={(v) => setForm({ ...form, maxFile: v })} inputMode="decimal" />
+        <label>
+          <span className={u.settingsLabel}>{t('uploads.set_source')}</span>
+          <select className={s.select} value={form.source} onChange={(e) => setForm({ ...form, source: e.target.value })}>
+            <option value="">{t('uploads.set_source_auto')}</option>
+            {sources.data
+              ?.filter((x) => x.accepts_uploads)
+              .map((x) => (
+                <option key={x.id} value={x.id}>
+                  {x.name}
+                </option>
+              ))}
+          </select>
+        </label>
+        <div>
+          <label className={u.settingsCheck}>
+            <input type="checkbox" checked={form.upgrade} onChange={(e) => setForm({ ...form, upgrade: e.target.checked })} />
+            <span>{t('uploads.set_upgrade')}</span>
+          </label>
+        </div>
+      </div>
+      <p className={s.note}>{t('uploads.set_note')}</p>
+      <div className={s.toolbar}>
+        <span style={{ flex: 1 }} />
+        <Button variant="primary" busy={save.isPending} disabled={!dirty || !valid} onClick={() => save.mutate()}>
+          {t('uploads.save')}
+        </Button>
+      </div>
+      {save.isSuccess && !dirty && <span className={s.ok}>{t('uploads.saved')}</span>}
+      <FormError>{save.error ? errorText(save.error) : null}</FormError>
+    </section>
+  );
+}
+
+function toForm(st: Settings) {
+  const gb = (n: number) => String(Math.round((n / GB) * 100) / 100);
+  return {
+    queue: gb(st.queue_limit_bytes),
+    perUser: st.per_user_limit_bytes === null ? '' : gb(st.per_user_limit_bytes),
+    maxFile: gb(st.max_file_bytes),
+    source: st.default_source_id ?? '',
+    upgrade: st.allow_quality_upgrade,
+  };
+}

apps/web/src/features/uploads/api.ts

@@ -0,0 +1,26 @@
+import type { ApiClient, components, paths } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+
+type FilePatch = paths['/api/v1/admin/uploads/files/{id}']['patch']['requestBody']['content']['application/json'];
+type BatchPatch = paths['/api/v1/admin/uploads/batches/{id}']['patch']['requestBody']['content']['application/json'];
+type SettingsPatch = paths['/api/v1/admin/settings/uploads']['patch']['requestBody']['content']['application/json'];
+
+/** The feature owns transport mapping; views only provide form values. */
+export function uploadsApi(client: ApiClient) {
+  return {
+    list: async (status: components['schemas']['UploadStatus'][], possible: boolean, cursor?: string) => unwrap(
+      await client.GET('/api/v1/admin/uploads', {
+        params: { query: { status, possible_duplicate: possible || undefined, cursor, limit: 100 } },
+      }),
+    ),
+    review: async (v: { ids: string[]; decision: 'approve' | 'reject'; reason?: string }) => unwrap(
+      await client.POST('/api/v1/admin/uploads/review', { body: { file_ids: v.ids, decision: v.decision, reason: v.reason } }),
+    ),
+    retry: async (id: string) => unwrap(await client.POST('/api/v1/admin/uploads/files/{id}/retry', { params: { path: { id } } })),
+    updateFile: async (id: string, body: FilePatch) => unwrap(await client.PATCH('/api/v1/admin/uploads/files/{id}', { params: { path: { id } }, body })),
+    updateBatch: async (id: string, body: BatchPatch) => unwrap(await client.PATCH('/api/v1/admin/uploads/batches/{id}', { params: { path: { id } }, body })),
+    sources: async () => unwrap(await client.GET('/api/v1/admin/sources')).items,
+    settings: async () => unwrap(await client.GET('/api/v1/admin/settings/uploads')),
+    updateSettings: async (body: SettingsPatch) => unwrap(await client.PATCH('/api/v1/admin/settings/uploads', { body })),
+  };
+}

apps/web/src/features/uploads/common.tsx

@@ -0,0 +1,84 @@
+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 '../../pages/page.module.css';
+import u from '../../pages/uploads/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;
+  };
+}

apps/web/src/features/uploads/queries.ts

@@ -0,0 +1,27 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useSession } from '../../app/session';
+import { uploadsApi } from './api';
+import { MOVING, type UploadStatus } from './common';
+
+export function useUploadsApi() { return uploadsApi(useSession().client); }
+
+export function useUploadQueue(status: UploadStatus[], tab: string, onlyPossible: boolean) {
+  const api = useUploadsApi();
+  return useInfiniteQuery({
+    queryKey: ['admin-uploads', tab, onlyPossible],
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) => api.list(status, onlyPossible, pageParam),
+    getNextPageParam: (p) => p.next_cursor ?? undefined,
+    refetchInterval: (q) => q.state.data?.pages.some((p) => p.items.some((it) => MOVING.includes(it.status))) ? 5000 : false,
+  });
+}
+
+export function useUploadSources() {
+  const api = useUploadsApi();
+  return useQuery({ queryKey: ['sources'], queryFn: api.sources });
+}
+
+export function useUploadSettings() {
+  const api = useUploadsApi();
+  return useQuery({ queryKey: ['upload-settings'], queryFn: api.settings });
+}