Import UI: show per-file rejection reasons in the processing window (#804)

CubeComming had to dig through app.log to learn WHY a file failed ("integrity
check failed: Duration mismatch ..."). The reason was already returned in the
singles/process `errors` array and carried on the queue entry — the window just
showed "Failed" with no detail.

Now each failed file's reason renders under its row (red, left-bordered, with a
title tooltip for the full text). Pure presentation of data already present; no
API change. Vite build clean.
This commit is contained in:
BoulderBadgeDad 2026-06-07 22:53:47 -07:00
parent d9dcf57f43
commit 2742f1fa47
2 changed files with 32 additions and 0 deletions

View file

@ -769,6 +769,29 @@
margin-top: 2px;
}
/* Per-file rejection reasons (quarantine / integrity / match failures) so the
"why" shows in the window, not just in the log (#804). */
.importPageQueueErrors {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.importPageQueueErrors li {
font-size: 11px;
line-height: 1.35;
color: #ff6b6b;
background: rgba(255, 107, 107, 0.08);
border-left: 2px solid rgba(255, 107, 107, 0.5);
padding: 2px 6px;
border-radius: 3px;
overflow: hidden;
text-overflow: ellipsis;
}
.importPageQueueProgress {
width: 120px;
flex-shrink: 0;

View file

@ -160,6 +160,15 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
<div className={styles.importPageQueueInfo}>
<div className={styles.importPageQueueName}>{entry.label}</div>
<div className={styles.importPageQueueDetail}>{entry.sublabel}</div>
{entry.errors.length > 0 && (
<ul className={styles.importPageQueueErrors}>
{entry.errors.map((err, i) => (
<li key={i} title={err}>
{err}
</li>
))}
</ul>
)}
</div>
<div className={styles.importPageQueueProgress}>
<div className={styles.importPageQueueBar}>