feat(frontend): add icon/size header, spinner, and styled download button to FileCard

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/FileCard.jsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DownloadSimple } from '@phosphor-icons/react';
+import { File as FileIcon, CircleNotch, DownloadSimple } from '@phosphor-icons/react';
 import { fetchJobStatus, downloadUrl } from './api.js';
+import { formatBytes } from './utils/formatBytes.js';
 
-export function FileCard({ fileName, jobId, initialError }) {
+export function FileCard({ fileName, fileSize, jobId, initialError }) {
   const { t } = useTranslation();
   const [status, setStatus] = useState(initialError ? 'failed' : 'pending');
   const [errorMessage, setErrorMessage] = useState(initialError ?? null);
@@ -28,10 +29,19 @@ export function FileCard({ fileName, jobId, initialError }) {
 
   return (
     <li className="file-card">
-      <span className="file-config-name">{fileName}</span>
-      {(status === 'pending' || status === 'processing') && <span>{t('job.converting')}</span>}
+      <div className="file-tile-header">
+        <FileIcon size={24} weight="regular" />
+        <span className="file-tile-name">{fileName}</span>
+        <span className="file-tile-size">{formatBytes(fileSize)}</span>
+      </div>
+      {(status === 'pending' || status === 'processing') && (
+        <span className="job-status">
+          <CircleNotch size={18} weight="bold" className="spin" />
+          {t('job.converting')}
+        </span>
+      )}
       {status === 'done' && (
-        <a href={downloadUrl(jobId)}>
+        <a className="download-button" href={downloadUrl(jobId)}>
           <DownloadSimple size={20} weight="regular" /> {t('job.download')}
         </a>
       )}