diff --git a/frontend/src/components/config-page/config-page.ts b/frontend/src/components/config-page/config-page.ts index d3bf6a9..eb74e11 100644 --- a/frontend/src/components/config-page/config-page.ts +++ b/frontend/src/components/config-page/config-page.ts @@ -856,8 +856,9 @@ export class ConfigPage extends LitElement { .library-row { display: flex; + flex-wrap: wrap; align-items: center; - gap: 0.75em; + gap: 0.5em 0.75em; padding: 0.6em 0.5em; border-bottom: 1px solid var(--yj-border-subtle, #333); } @@ -871,6 +872,22 @@ export class ConfigPage extends LitElement { border-radius: 4px; } + .library-row .inline-progress { + flex-basis: 100%; + padding-left: 1.75em; + } + + .library-row .inline-progress .progress-track { + margin-top: 0.25em; + } + + .library-scan-status { + font-size: 0.75em; + font-weight: 400; + color: var(--yj-accent, #ffd43b); + white-space: nowrap; + } + .library-name { flex: 1; cursor: pointer; @@ -2328,7 +2345,24 @@ export class ConfigPage extends LitElement { ${this.libraries.map( - (lib) => html` + (lib) => { + const isScanning = this.scanProgress?.libraryId === lib.id + && this.scanning; + const p = isScanning ? this.scanProgress : null; + const percent = p && p.total > 0 + ? Math.min(100, Math.round((p.processed / p.total) * 100)) + : 0; + const phaseLabels: Record = { + counting: 'Counting\u2026', + scanning: `Scanning\u2026 ${percent}%`, + orphans: 'Cleaning up\u2026', + thumbnails: 'Thumbnails\u2026', + }; + const statusText = p + ? phaseLabels[p.phase] ?? 'Scanning\u2026' + : ''; + + return html`
${lib.name} + ${statusText + ? html`${statusText}` + : nothing} `} ${lib.path} @@ -2395,8 +2432,21 @@ export class ConfigPage extends LitElement { ` : nothing}
+ ${p && p.phase !== 'counting' + ? html` +
+
+
+
+
+ ` + : nothing} - `, + `; + }, )} ` @@ -2433,9 +2483,7 @@ export class ConfigPage extends LitElement { > ${this.scanPaused ? 'Scan paused.' - : this.scanProgress - ? this.renderScanProgress() - : this.statusMessage || 'Ready.'} + : this.statusMessage || 'Ready.'} ${this.scanErrors @@ -2640,105 +2688,6 @@ export class ConfigPage extends LitElement { `; } - private renderScanProgress() { - const p = this.scanProgress; - - if (!p) return nothing; - - const libraryPrefix = p.libraryName - ? `Scanning: ${p.libraryName}` - : ''; - - if (p.phase === 'counting') { - return html` -
- ${libraryPrefix - ? html`${libraryPrefix} \u2014 ` - : ''} - Counting files\u2026 -
- ${p.queuedCount > 0 - ? html`
- ${p.queuedCount} - ${p.queuedCount === 1 ? 'library' : 'libraries'} - queued -
` - : nothing} - `; - } - - const percent = - p.total > 0 - ? Math.min( - 100, - Math.round( - (p.processed / p.total) * 100, - ), - ) - : 0; - - const phaseLabel: Record = { - scanning: 'Scanning', - orphans: 'Cleaning up', - thumbnails: 'Generating thumbnails', - }; - - const baseLabel = - phaseLabel[p.phase] ?? 'Scanning'; - const label = p.libraryName - ? `${baseLabel}: ${p.libraryName}` - : baseLabel; - - // Build detail string: "1,247 / 2,013 files (891 new, 23 updated, 356 skipped)" - const parts: string[] = []; - - if (p.added > 0) - parts.push(`${p.added.toLocaleString()} new`); - if (p.updated > 0) - parts.push( - `${p.updated.toLocaleString()} updated`, - ); - if (p.skipped > 0) - parts.push( - `${p.skipped.toLocaleString()} skipped`, - ); - - const detail = - p.phase === 'scanning' && p.total > 0 - ? html` - ${p.processed.toLocaleString()} / - ${p.total.toLocaleString()} files${parts.length - ? ` (${parts.join(', ')})` - : ''} - ` - : nothing; - - return html` -
- - ${label}\u2026 - - ${detail} - - ${percent}% - -
-
-
-
- ${p.queuedCount > 0 - ? html`
- ${p.queuedCount} - ${p.queuedCount === 1 ? 'library' : 'libraries'} - queued -
` - : nothing} - `; - } - private renderMetrics() { const m = this.metrics;