zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: drop vestigial mid-page progress block on album upload (#1261)

Since #1238 added per-track toasts and TrackEntryCard now renders an
inline status pill (uploading/processing/completed/failed) next to each
track, the mid-page "N of M completed, K uploading..." progress block
was showing the same information a third time. Removed it along with
the completedCount/activeUploadCount derived state and the
.upload-progress CSS.

The toasts are the richest view (per-track title, live XHR %, SSE phase
messages, success/fail with error detail) and the per-card pill keeps
users oriented within the form. The mid-page block added noise without
new information.

Known trade-off left for later: a very large album (e.g. 20 tracks)
will stack a lot of toasts. If that becomes a real problem, we can
reintroduce a centralized summary or change the toast strategy — for
now the concern is theoretical.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4.6 (1M context) and committed by
GitHub d285a857 cfe3d03d

-51
-51
frontend/src/lib/components/AlbumUploadForm.svelte
··· 35 35 albums.some((a) => a.title.toLowerCase() === albumTitle.trim().toLowerCase()), 36 36 ); 37 37 38 - let completedCount = $derived(tracks.filter((t) => t.status === 'completed').length); 39 - let activeUploadCount = $derived(tracks.filter((t) => t.status === 'uploading' || t.status === 'processing').length); 40 38 let hasUnresolvedFeatures = $derived(tracks.some((t) => t.hasUnresolvedFeaturesInput)); 41 39 42 40 let canSubmit = $derived( ··· 483 481 /> 484 482 </div> 485 483 486 - {#if uploading} 487 - <div class="upload-progress"> 488 - {#if activeUploadCount > 0} 489 - <p class="progress-text"> 490 - {completedCount} of {tracks.length} completed, {activeUploadCount} uploading... 491 - </p> 492 - {:else} 493 - <p class="progress-text"> 494 - {completedCount} of {tracks.length} track{tracks.length > 1 ? 's' : ''} completed 495 - </p> 496 - {/if} 497 - <div class="progress-bar-bg"> 498 - <div 499 - class="progress-bar-fill" 500 - style="width: {(completedCount / tracks.length) * 100}%" 501 - ></div> 502 - </div> 503 - </div> 504 - {/if} 505 - 506 484 <div class="form-group attestation"> 507 485 <label class="checkbox-label"> 508 486 <input ··· 691 669 clip: rect(0, 0, 0, 0); 692 670 white-space: nowrap; 693 671 border: 0; 694 - } 695 - 696 - .upload-progress { 697 - margin-bottom: 1.5rem; 698 - padding: 1rem; 699 - background: var(--bg-primary); 700 - border-radius: var(--radius-sm); 701 - border: 1px solid var(--border-default); 702 - } 703 - 704 - .progress-text { 705 - font-size: var(--text-sm); 706 - color: var(--text-secondary); 707 - margin-bottom: 0.5rem; 708 - } 709 - 710 - .progress-bar-bg { 711 - width: 100%; 712 - height: 4px; 713 - background: var(--border-subtle); 714 - border-radius: 2px; 715 - overflow: hidden; 716 - } 717 - 718 - .progress-bar-fill { 719 - height: 100%; 720 - background: var(--accent); 721 - border-radius: 2px; 722 - transition: width 0.3s ease; 723 672 } 724 673 725 674 .attestation {