refactor: isolate playback and upload use cases

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

@@ -1,84 +1 @@
-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;
-  };
-}
+export * from '../../features/uploads/common';