feat(web): suggest tracks, my uploads and admin upload queue screens (M5.5)

- Suggest tracks: drag-and-drop of files and folders with relative
  paths, streaming SHA-256 in a Web Worker (hash-wasm), duplicate
  precheck, batch reservation and tus-js-client upload (8 MB chunks,
  4 in parallel, token refresh on 401, resume of failed files).
- My uploads: statuses, rejection reasons, withdraw, quota meter.
- Upload queue (admin): status tabs, possible-duplicate filter, batches,
  metadata and storage editing, bulk approve / reject with a reason,
  import retry, and the queue settings form.
- Sidebar section for moderators and admins; ru / en strings.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -0,0 +1,156 @@
+import { unwrap } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { formatBytes, formatDateTime } from '../../shared/lib/format';
+import { addIcon } from '../../shared/ui/icons';
+import { Button, cx, FormError } from '../../shared/ui/ui';
+import s from '../page.module.css';
+import { MOVING, QuotaMeter, UploadStatusBadge, useReasonText, type UploadFile, type UploadStatus } from './common';
+import u from './uploads.module.css';
+
+const FILTERS = {
+  all: undefined,
+  pending: ['uploading', 'processing', 'pending_review', 'approved', 'importing', 'import_failed'],
+  imported: ['imported'],
+  declined: ['rejected', 'duplicate', 'invalid', 'withdrawn', 'expired'],
+} satisfies Record<string, UploadStatus[] | undefined>;
+type Filter = keyof typeof FILTERS;
+
+const WITHDRAWABLE: UploadStatus[] = ['uploading', 'processing', 'pending_review'];
+
+/** «Мои предложения»: статусы своих загрузок и решения админа (docs/uploads.md#10). */
+export function MyUploadsPage() {
+  const { t } = useTranslation(['admin', 'common']);
+  const session = useSession();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const [filter, setFilter] = useState<Filter>('all');
+
+  const list = useInfiniteQuery({
+    queryKey: ['my-uploads', filter],
+    initialPageParam: undefined as string | undefined,
+    queryFn: async ({ pageParam }) =>
+      unwrap(
+        await session.client.GET('/api/v1/uploads/mine', {
+          params: { query: { status: FILTERS[filter] ? [...FILTERS[filter]] : undefined, cursor: pageParam, limit: 50 } },
+        }),
+      ),
+    getNextPageParam: (p) => p.next_cursor ?? undefined,
+    // Обработка и импорт идут в фоне — пока есть такие файлы, обновляем список.
+    refetchInterval: (q) =>
+      q.state.data?.pages.some((p) => p.items.some((it) => MOVING.includes(it.status))) ? 5000 : false,
+  });
+  const withdraw = useMutation({
+    mutationFn: async (id: string) =>
+      unwrap(await session.client.DELETE('/api/v1/uploads/files/{id}', { params: { path: { id } } })),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['my-uploads'] });
+      await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+    },
+  });
+  const items = list.data?.pages.flatMap((p) => p.items) ?? [];
+
+  return (
+    <div className={s.page}>
+      <div className={s.head}>
+        <div>
+          <h1>{t('uploads.mine_title')}</h1>
+          <p className={s.subtitle}>{t('uploads.mine_subtitle')}</p>
+        </div>
+        <QuotaMeter />
+      </div>
+      <div className={s.toolbar}>
+        <div className={s.chips} role="group" aria-label={t('uploads.filter')}>
+          {(Object.keys(FILTERS) as Filter[]).map((f) => (
+            <button key={f} type="button" className={s.chip} aria-pressed={filter === f} onClick={() => setFilter(f)}>
+              {t(`uploads.filter_${f}`)}
+            </button>
+          ))}
+        </div>
+        <span style={{ flex: 1 }} />
+        <Link to="/uploads/new">
+          <Button variant="primary" icon={addIcon}>
+            {t('uploads.suggest_title')}
+          </Button>
+        </Link>
+      </div>
+      <FormError>{(list.error ?? withdraw.error) ? errorText(list.error ?? withdraw.error) : null}</FormError>
+      {list.isSuccess && items.length === 0 && <div className={s.empty}>{t('uploads.mine_empty')}</div>}
+      {items.length > 0 && (
+        <div className={s.tableWrap}>
+          <table className={s.table}>
+            <thead>
+              <tr>
+                <th>{t('uploads.col_file')}</th>
+                <th>{t('uploads.col_status')}</th>
+                <th>{t('uploads.col_size')}</th>
+                <th>{t('uploads.col_date')}</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((f) => (
+                <MineRow
+                  key={f.id}
+                  file={f}
+                  busy={withdraw.isPending && withdraw.variables === f.id}
+                  onWithdraw={() => withdraw.mutate(f.id)}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {list.hasNextPage && (
+        <Button busy={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>
+          {t('uploads.load_more')}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function MineRow({ file: f, busy, onWithdraw }: { file: UploadFile; busy: boolean; onWithdraw: () => void }) {
+  const { t, i18n } = useTranslation('admin');
+  // Технические подробности ошибки импорта — для админа; автору достаточно причины.
+  const raw = f.status === 'import_failed' ? (f.status_reason?.split(':')[0] ?? null) : f.status_reason;
+  const reason = useReasonText()(raw);
+  const m = f.metadata;
+  return (
+    <tr>
+      <td className={u.trackCell}>
+        <div className={u.meta}>
+          <span className={u.metaTitle}>{m ? `${m.artist} — ${m.title}` : f.original_name}</span>
+          <span className={cx(u.sub, u.ellipsis)} title={f.client_rel_path ?? f.original_name}>
+            {f.client_rel_path ?? f.original_name}
+          </span>
+          {f.status === 'imported' && f.target_rel_path && <span className={u.target}>{f.target_rel_path}</span>}
+        </div>
+      </td>
+      <td>
+        <div className={u.meta}>
+          <UploadStatusBadge status={f.status} />
+          {f.status === 'uploading' && (
+            <span className={u.sub}>{t('uploads.received', { pct: Math.round((f.received_bytes / Math.max(f.size_bytes, 1)) * 100) })}</span>
+          )}
+          {f.status === 'duplicate' && <span className={u.sub}>{t('uploads.dup_found')}</span>}
+          {reason && f.status !== 'pending_review' && <span className={u.bad}>{reason}</span>}
+        </div>
+      </td>
+      <td className={s.muted}>{formatBytes(f.size_bytes, i18n.language)}</td>
+      <td className={s.muted}>{formatDateTime(f.created_at, i18n.language)}</td>
+      <td>
+        {WITHDRAWABLE.includes(f.status) && (
+          <Button variant="ghost" busy={busy} onClick={onWithdraw}>
+            {t('uploads.withdraw')}
+          </Button>
+        )}
+      </td>
+    </tr>
+  );
+}

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

@@ -0,0 +1,228 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useEffect, useRef, useState, useSyncExternalStore, type DragEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSession } from '../../app/session';
+import { AUDIO_EXTENSIONS, fromDrop, fromInput } from '../../features/uploads/files';
+import { uploaderFor, type UploadItem } from '../../features/uploads/uploader';
+import { useErrorText } from '../../shared/lib/errors';
+import { formatBytes } from '../../shared/lib/format';
+import { closeIcon, folderIcon, musicIcon } from '../../shared/ui/icons';
+import { Button, cx, FormError, Icon } from '../../shared/ui/ui';
+import s from '../page.module.css';
+import { QuotaMeter, useUploadQuota } from './common';
+import u from './uploads.module.css';
+
+const ACCEPT = AUDIO_EXTENSIONS.map((e) => `.${e}`).join(',');
+
+/**
+ * «Предложить треки» (docs/uploads.md#5): перетащить файлы или папки → SHA-256 в воркере → предпроверка дублей →
+ * резерв места → загрузка по tus с докачкой. Дубли отсеиваются до загрузки и не тратят квоту.
+ */
+export function SuggestPage() {
+  const { t, i18n } = useTranslation(['admin', 'common']);
+  const session = useSession();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const uploader = uploaderFor(session);
+  const st = useSyncExternalStore(uploader.subscribe, uploader.getState);
+  const quota = useUploadQuota();
+  const [drag, setDrag] = useState(false);
+  const [comment, setComment] = useState('');
+  const filesRef = useRef<HTMLInputElement>(null);
+  const dirRef = useRef<HTMLInputElement>(null);
+
+  // webkitdirectory нет в типах React — ставим атрибут напрямую.
+  useEffect(() => {
+    dirRef.current?.setAttribute('webkitdirectory', '');
+  }, []);
+
+  const ready = st.items.filter((it) => it.stage === 'ready');
+  const readyBytes = ready.reduce((n, it) => n + it.file.size, 0);
+  const hashing = st.items.some((it) => it.stage === 'hashing' || it.stage === 'checking');
+  const finished = !st.busy && st.batchId !== null;
+  const failedUploads = st.items.filter((it) => it.stage === 'error' && it.tusUrl).length;
+  const uploaded = st.items.filter((it) => it.stage === 'done').length;
+  const free = quota.data ? Math.max(quota.data.limit_bytes - quota.data.used_bytes, 0) : null;
+  const fmt = (n: number) => formatBytes(n, i18n.language);
+
+  const onDrop = async (e: DragEvent) => {
+    e.preventDefault();
+    setDrag(false);
+    uploader.add(await fromDrop(e.dataTransfer));
+  };
+  const start = async () => {
+    await uploader.start(comment);
+    setComment('');
+    await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+    await queryClient.invalidateQueries({ queryKey: ['my-uploads'] });
+  };
+
+  return (
+    <div className={s.page}>
+      <div className={s.head}>
+        <div>
+          <h1>{t('uploads.suggest_title')}</h1>
+          <p className={s.subtitle}>{t('uploads.suggest_subtitle')}</p>
+        </div>
+        <QuotaMeter />
+      </div>
+
+      <div
+        className={cx(u.drop, drag && u.dropActive)}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDrag(true);
+        }}
+        onDragLeave={() => setDrag(false)}
+        onDrop={(e) => void onDrop(e)}
+      >
+        <Icon src={musicIcon} size={36} />
+        <div className={u.dropTitle}>{t('uploads.drop_title')}</div>
+        <div className={s.note}>{t('uploads.drop_hint', { formats: AUDIO_EXTENSIONS.join(', ') })}</div>
+        <div className={u.dropActions}>
+          <Button disabled={st.busy} onClick={() => filesRef.current?.click()}>
+            {t('uploads.pick_files')}
+          </Button>
+          <Button icon={folderIcon} disabled={st.busy} onClick={() => dirRef.current?.click()}>
+            {t('uploads.pick_folder')}
+          </Button>
+        </div>
+        <input
+          ref={filesRef}
+          className={u.hiddenInput}
+          type="file"
+          multiple
+          accept={ACCEPT}
+          onChange={(e) => {
+            uploader.add(fromInput(e.target.files));
+            e.target.value = '';
+          }}
+        />
+        <input
+          ref={dirRef}
+          className={u.hiddenInput}
+          type="file"
+          multiple
+          onChange={(e) => {
+            uploader.add(fromInput(e.target.files));
+            e.target.value = '';
+          }}
+        />
+      </div>
+
+      {st.skipped > 0 && <p className={s.note}>{t('uploads.skipped', { count: st.skipped })}</p>}
+
+      {st.items.length > 0 && (
+        <div className={u.files} aria-label={t('uploads.files')}>
+          {st.items.map((it) => (
+            <FileRow key={it.id} item={it} locked={st.busy || finished} onRemove={() => uploader.remove(it.id)} />
+          ))}
+        </div>
+      )}
+
+      {st.items.length > 0 && !finished && (
+        <section className={s.section}>
+          <label className={s.sessions}>
+            <span>{t('uploads.comment')}</span>
+            <textarea
+              className={u.textarea}
+              value={comment}
+              maxLength={1000}
+              placeholder={t('uploads.comment_hint')}
+              onChange={(e) => setComment(e.target.value)}
+            />
+          </label>
+          {free !== null && readyBytes > free && (
+            <p className={u.warn}>{t('uploads.not_enough_space', { need: fmt(readyBytes), free: fmt(free) })}</p>
+          )}
+          <div className={s.toolbar}>
+            <Button variant="ghost" disabled={st.busy} onClick={() => uploader.clear()}>
+              {t('uploads.clear')}
+            </Button>
+            <span style={{ flex: 1 }} />
+            <Button variant="primary" busy={st.busy} disabled={hashing || !ready.length} onClick={() => void start()}>
+              {st.busy
+                ? t('uploads.uploading_now')
+                : hashing
+                  ? t('uploads.hashing_wait')
+                  : t('uploads.send', { count: ready.length, size: fmt(readyBytes) })}
+            </Button>
+          </div>
+        </section>
+      )}
+
+      {finished && (
+        <section className={s.section} role="status">
+          {uploaded > 0 && <p className={s.ok}>{t('uploads.sent', { count: uploaded })}</p>}
+          {failedUploads > 0 && <p className={u.bad}>{t('uploads.failed_some', { count: failedUploads })}</p>}
+          <div className={s.toolbar}>
+            {failedUploads > 0 && (
+              <Button variant="primary" onClick={() => void uploader.retryFailed()}>
+                {t('uploads.retry_failed')}
+              </Button>
+            )}
+            <Link to="/uploads/mine" className={s.more}>
+              {t('uploads.go_mine')}
+            </Link>
+            <span style={{ flex: 1 }} />
+            <Button onClick={() => uploader.clear()}>{t('uploads.more')}</Button>
+          </div>
+        </section>
+      )}
+      <FormError>{st.error ? errorText(st.error) : null}</FormError>
+    </div>
+  );
+}
+
+function FileRow({ item, locked, onRemove }: { item: UploadItem; locked: boolean; onRemove: () => void }) {
+  const { t, i18n } = useTranslation(['admin', 'errors']);
+  const tr = t as unknown as (k: string) => string;
+  const showProgress = item.stage === 'hashing' || item.stage === 'uploading';
+  let note: { text: string; cls?: string } | null = null;
+  switch (item.stage) {
+    case 'duplicate':
+      note = { text: t('uploads.dup_found'), cls: u.sub };
+      break;
+    case 'too_large':
+      note = { text: tr('errors:uploads.too_large'), cls: u.bad };
+      break;
+    case 'rejected':
+      note = { text: tr(`errors:${item.code ?? 'uploads.duplicate'}`), cls: u.bad };
+      break;
+    case 'error':
+      note = { text: t('uploads.file_error', { message: item.message ?? '' }), cls: u.bad };
+      break;
+    case 'ready':
+      if (item.possibleDuplicate) note = { text: t('uploads.possible_dup'), cls: u.warn };
+      break;
+  }
+  return (
+    <div className={u.file}>
+      <div className={u.fileName}>
+        <span className={u.path} title={item.relPath}>
+          {item.relPath}
+        </span>
+        <span className={u.sub}>
+          {t(`uploads.stage.${item.stage}`)}
+          {showProgress && ` · ${Math.round(item.progress * 100)}%`}
+        </span>
+        {showProgress && (
+          <div className={u.progress}>
+            <span style={{ width: `${item.progress * 100}%` }} />
+          </div>
+        )}
+        {note && <span className={note.cls}>{note.text}</span>}
+      </div>
+      <span className={u.size}>{formatBytes(item.file.size, i18n.language)}</span>
+      {locked ? (
+        <span />
+      ) : (
+        <Button variant="ghost" aria-label={t('uploads.remove', { name: item.relPath })} onClick={onRemove}>
+          <Icon src={closeIcon} size={18} />
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+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();
+  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}>
+        {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-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/pages/uploads/uploads.module.css

@@ -0,0 +1,271 @@
+.drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 180px;
+  padding: 24px;
+  border: 2px dashed var(--line2);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  text-align: center;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.dropActive {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.dropTitle {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.dropActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.hiddenInput {
+  display: none;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.file {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.file:first-child {
+  border-top: 0;
+}
+
+.fileName {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.path {
+  font-family: var(--font-mono, monospace);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sub {
+  font-size: 12px;
+  color: var(--text3);
+}
+
+.warn {
+  font-size: 12px;
+  color: var(--warn);
+}
+
+.bad {
+  font-size: 12px;
+  color: var(--danger);
+}
+
+.size {
+  font-size: 13px;
+  color: var(--text3);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.progress {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface3);
+  overflow: hidden;
+}
+
+.progress span {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--violet));
+  transition: width 0.3s;
+}
+
+.quota {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 220px;
+}
+
+.quotaText {
+  font-size: 13px;
+  color: var(--text2);
+}
+
+.tone_ok {
+  color: var(--ok);
+  background: var(--ok-soft);
+}
+
+.tone_warn {
+  color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.tone_bad {
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.tone_info {
+  color: var(--accent2);
+  background: var(--accent-soft);
+}
+
+.tone_muted {
+  color: var(--text3);
+  background: var(--surface3);
+}
+
+.batch {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.batchHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 16px;
+  padding: 12px 14px;
+  background: var(--surface2);
+  font-size: 13px;
+  color: var(--text2);
+}
+
+.batchHead b {
+  color: var(--text);
+}
+
+.comment {
+  flex-basis: 100%;
+  color: var(--text);
+  font-style: italic;
+}
+
+.queueRow {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: start;
+  padding: 12px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.metaTitle {
+  font-weight: 600;
+}
+
+.flags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.rowActions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.bulk {
+  position: sticky;
+  bottom: 12px;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--line2);
+  background: var(--elev);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line2);
+  background: var(--surface2);
+  color: var(--text);
+  font: inherit;
+  resize: vertical;
+}
+
+@media (max-width: 720px) {
+  .queueRow {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .file {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}
+
+.target {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text2);
+  overflow-wrap: anywhere;
+}
+
+.trackCell {
+  min-width: 260px;
+  max-width: 480px;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}