fix(uploads): refresh destination previews and improve queue layout

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

@@ -1,5 +1,6 @@
 import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
-import { editIcon, refreshIcon } from '../../shared/ui/icons';
+import { chevronRightIcon, editIcon, refreshIcon } from '../../shared/ui/icons';
+import { useId, useState } from 'react';
 import { needsFormatAttention } from './files';
 import { UploadStatusBadge, useReasonText, type UploadFile } from './common';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +25,8 @@ export function BatchCard({
   onRetry: (id: string) => void;
 }) {
   const { t, i18n } = useTranslation('admin');
+  const [collapsed, setCollapsed] = useState(true);
+  const contentId = useId();
   const first = files[0]!;
   const ids = files.map((f) => f.id);
   const all = ids.every((id) => selected.has(id));
@@ -31,31 +34,36 @@ export function BatchCard({
   return (
     <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
       <div className={u.batchHead}>
+        <Button variant="ghost" className={u.batchToggle} aria-label={t(collapsed ? 'uploads.expand_batch' : 'uploads.collapse_batch')} title={t(collapsed ? 'uploads.expand_batch' : 'uploads.collapse_batch')} aria-expanded={!collapsed} aria-controls={contentId} onClick={() => setCollapsed((value) => !value)}>
+          <Icon src={chevronRightIcon} size={20} className={!collapsed ? u.batchExpanded : undefined} />
+        </Button>
         {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>
         )}
+        {first.batch_comment && <span className={u.comment}>«{first.batch_comment}»</span>}
+      </div>
+      <div id={contentId} hidden={collapsed}>
+        {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)}
+          />
+        ))}
       </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>
   );
 }
@@ -155,6 +163,10 @@ function QueueRow({
             <>
               <code className={u.target}>{f.target_rel_path}</code>
               <span className={u.sub}>{t('uploads.target_path_hint')}</span>
+              {f.target_storage_path && <>
+                <span className={u.placementLabel}>{t('uploads.target_full_path')}</span>
+                <code className={u.target}>{f.target_storage_path}</code>
+              </>}
             </>
           ) : (
             <>