feat(transcribe): UX improvements — progress bar, stats row, copy btn, char counter, batch errors
- Vocab textarea now shows live 0/500 char counter (turns amber at 450+) - Animated progress bar during transcription; determinate for multi-clip, indeterminate for single - Results card shows inline stats row (duration, language, speakers) and AI cleanup badge - Copy button + Download TXT moved above transcript box; SRT/VTT remain below - Speaker role legend repeats inside Segments panel for easy cross-reference - Batch errors no longer halt the queue; remaining clips continue, failed files named in status bar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3232,6 +3232,15 @@ a.dr-source-title-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-cats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* ── Search results ───────────────────────────────────────────────────── */
|
||||
.corpus-search-results {
|
||||
margin: 0 0 32px;
|
||||
@@ -3318,6 +3327,33 @@ a.dr-source-title-link:hover {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.passage-expand-btn {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.passage-expand-btn:hover { border-color: var(--teal); color: var(--teal); }
|
||||
|
||||
.passage-full-text {
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--ink);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Category card browse button ──────────────────────────────────────── */
|
||||
.cat-browse-btn {
|
||||
display: inline-block;
|
||||
@@ -3373,6 +3409,56 @@ a.dr-source-title-link:hover {
|
||||
}
|
||||
.drill-close-btn:hover { border-color: var(--teal); color: var(--teal); }
|
||||
|
||||
.drill-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.drill-count {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.drill-controls-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.drill-search-input {
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
width: 160px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.drill-search-input:focus { border-color: var(--teal); }
|
||||
|
||||
.drill-sort-select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.drill-sort-select:focus { border-color: var(--teal); }
|
||||
|
||||
.drill-loading,
|
||||
.drill-empty,
|
||||
.drill-error {
|
||||
@@ -3515,6 +3601,8 @@ a.dr-source-title-link:hover {
|
||||
@media (max-width: 760px) {
|
||||
.source-expand-grid { grid-template-columns: 1fr; }
|
||||
.corpus-search-controls { flex-direction: column; align-items: flex-start; }
|
||||
.drill-controls { flex-direction: column; align-items: flex-start; }
|
||||
.drill-search-input { width: 100%; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
@@ -5574,3 +5662,123 @@ body.lt-landing {
|
||||
.lt-auth-nav__email { display: none; }
|
||||
.lt-hero__auth-cta { gap: 8px; }
|
||||
}
|
||||
|
||||
/* ── Transcription UX improvements ──────────────────────────────────────── */
|
||||
|
||||
/* Vocab footer: hint + char counter side by side */
|
||||
.vocab-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.vocab-char-count { margin: 0; white-space: nowrap; }
|
||||
.vocab-char-count--warn { color: #b45309; font-weight: 600; }
|
||||
|
||||
/* Progress bar shown while transcribing */
|
||||
.transcribe-progress-wrap {
|
||||
padding: 2.5rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.transcribe-progress-track {
|
||||
height: 6px;
|
||||
background: var(--line);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.transcribe-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--teal);
|
||||
border-radius: 3px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.transcribe-progress-fill.is-indeterminate {
|
||||
width: 40%;
|
||||
animation: progress-slide 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes progress-slide {
|
||||
0% { transform: translateX(-150%); }
|
||||
100% { transform: translateX(400%); }
|
||||
}
|
||||
.transcribe-progress-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Transcript meta stats row */
|
||||
.transcript-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.transcript-meta-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
/* AI cleanup badge */
|
||||
.cleanup-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.6rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: #166534;
|
||||
background: #dcfce7;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Action row above transcript (copy + download txt) */
|
||||
.transcript-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Segment legend (speaker role key inside the segments panel) */
|
||||
.segment-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* === Advocate UX additions 2026-05-18 === */
|
||||
.adv-input-footer { display:flex; justify-content:flex-end; margin-top:4px; }
|
||||
.adv-char-count { font-size:.78rem; color:var(--muted); }
|
||||
.adv-char-count.is-warn { color:var(--amber); }
|
||||
.adv-char-count.is-crit { color:var(--coral); font-weight:600; }
|
||||
.dr-section-head { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
|
||||
.dr-section-head h3 { margin:0; font-size:1rem; }
|
||||
.dr-copy-btn { font-size:.78rem; padding:2px 10px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--teal); cursor:pointer; }
|
||||
.dr-copy-btn:hover { background:var(--soft-teal); }
|
||||
.adv-result-actions { display:flex; justify-content:flex-end; margin-bottom:16px; }
|
||||
.adv-new-query-btn { font-size:.82rem; padding:4px 14px; border:1px solid var(--teal); border-radius:4px; background:var(--soft-teal); color:var(--teal-dark); cursor:pointer; }
|
||||
.adv-restore-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:6px; background:var(--soft-teal); border:1px solid var(--teal); margin-bottom:12px; font-size:.85rem; flex-wrap:wrap; }
|
||||
.adv-restore-banner__text em { font-style:normal; color:var(--muted); }
|
||||
.adv-restore-banner__actions { display:flex; gap:8px; }
|
||||
.adv-restore-banner__actions button { font-size:.82rem; padding:3px 12px; border-radius:4px; cursor:pointer; }
|
||||
.adv-restore-banner__actions button:first-child { background:var(--teal); color:#fff; border:none; }
|
||||
.adv-restore-banner__actions button:last-child { background:transparent; border:1px solid var(--line); color:var(--muted); }
|
||||
.dr-collapsible > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; padding:8px 0; }
|
||||
.dr-collapsible > summary::-webkit-details-marker { display:none; }
|
||||
.dr-collapsible > summary h3 { margin:0; font-size:.95rem; }
|
||||
.dr-collapsible > summary::before { content:'▸'; font-size:.7rem; color:var(--muted); margin-right:4px; }
|
||||
.dr-collapsible[open] > summary::before { content:'▾'; }
|
||||
.adv-slice-hint { margin:8px 0 0; font-size:.83rem; color:var(--ink); background:var(--soft-teal); border:1px solid var(--teal); border-radius:6px; padding:8px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
|
||||
.adv-slice-hint button { font-size:.8rem; padding:2px 10px; border-radius:4px; cursor:pointer; }
|
||||
#advSliceHintEnable { background:var(--teal); color:#fff; border:none; }
|
||||
#advSliceHintDismiss { background:transparent; border:1px solid var(--line); color:var(--muted); }
|
||||
|
||||
Reference in New Issue
Block a user