feat(uploads): show batch format counts and quality ranges

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

@@ -3,6 +3,7 @@ import { chevronRightIcon, editIcon, refreshIcon } from '../../shared/ui/icons';
 import { useId, useState } from 'react';
 import { needsFormatAttention } from './files';
 import { AudioPreview } from './AudioPreview';
+import { batchSummary } from './batchSummary';
 import { UploadStatusBadge, useReasonText, type UploadFile } from './common';
 import { useTranslation } from 'react-i18next';
 import { Button, cx, Icon } from '../../shared/ui/ui';
@@ -32,6 +33,7 @@ export function BatchCard({
   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);
+  const summary = batchSummary(files);
   return (
     <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
       <div className={u.batchHead}>
@@ -44,6 +46,8 @@ export function BatchCard({
         <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>
+        <span>{summary.formats.map(([format, count]) => `${count} × ${format || t('uploads.format_unknown')}`).join(' · ')}</span>
+        {summary.quality && <span>{summary.quality}</span>}
         <span className={cx(s.badge, first.batch_has_cover ? u.tone_info : u.tone_muted)}>
           {t(first.batch_has_cover ? 'uploads.batch_cover_present' : 'uploads.batch_cover_absent')}
         </span>