feat: show the queued format in the Downloading table (closes #551)

With the format picked per download rather than left on one setting, the
Downloading list gave no way to tell which item was queued as what until
it landed in Completed. The new column labels the format exactly as the
form does, reusing the same option lists, and falls back to the raw value
uppercased for a record queued before an option existed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

ui/src/app/app.html

@@ -693,6 +693,7 @@
             <app-select-all-checkbox #queueMasterCheckboxRef [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)" />
           </th>
           <th scope="col">Video</th>
+          <th scope="col" style="width: 7rem;">Format</th>
           <th scope="col" style="width: 8rem;">Speed</th>
           <th scope="col" style="width: 7rem;">ETA</th>
           <th scope="col" style="width: 6rem;"></th>
@@ -726,6 +727,7 @@
                 }
               </div>
             </td>
+            <td class="text-nowrap">{{ formatLabel(download.value) }}</td>
             <td>{{ download.value.speed | speed }}</td>
             <td>{{ download.value.eta | eta }}</td>
             <td>

ui/src/app/app.spec.ts

@@ -6,6 +6,7 @@ import { DownloadsService } from './services/downloads.service';
 import { SubscriptionsService } from './services/subscriptions.service';
 import { ToastService } from './services/toast.service';
 import { CookieService } from 'ngx-cookie-service';
+import { Download } from './interfaces';
 
 class DownloadsServiceStub {
   loading = false;
@@ -229,6 +230,46 @@ describe('App', () => {
     expect(root.textContent).toContain('starts in');
   });
 
+  it('shows the queued format in the Downloading table', () => {
+    downloads.queue.set('https://example.com/v', {
+      id: 'v1',
+      title: 'Some Video',
+      url: 'https://example.com/v',
+      download_type: 'audio',
+      quality: 'best',
+      format: 'flac',
+      folder: '',
+      custom_name_prefix: '',
+      playlist_item_limit: 0,
+      status: 'downloading',
+      msg: '',
+      percent: 10,
+      speed: 0,
+      eta: 0,
+      filename: '',
+      checked: false,
+    });
+    downloads.queueChanged.next();
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const row = (fixture.nativeElement as HTMLElement).querySelector('tbody tr');
+    expect(row?.textContent).toContain('FLAC');
+  });
+
+  it('labels formats the way the form does, and copes with an unknown one', () => {
+    const app = TestBed.createComponent(App).componentInstance;
+    const base = { format: '' } as Download;
+
+    expect(app.formatLabel({ ...base, format: 'any' })).toBe('Auto');
+    expect(app.formatLabel({ ...base, format: 'mp4' })).toBe('MP4');
+    expect(app.formatLabel({ ...base, format: 'srt' })).toBe('SRT');
+    // A format from a record older than the option list still reads sensibly.
+    expect(app.formatLabel({ ...base, format: 'mkv' })).toBe('MKV');
+    expect(app.formatLabel(base)).toBe('-');
+  });
+
   it('includes titleRegex in subscribe payload', () => {
     const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;

ui/src/app/app.ts

@@ -909,6 +909,22 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
     return type.charAt(0).toUpperCase() + type.slice(1);
   }
 
+  // The format the download was queued with, labelled the way the form labels
+  // it, so a queued item can be told apart while it is still downloading.
+  formatLabel(download: Download): string {
+    const format = (download.format || '').trim();
+    if (!format) {
+      return '-';
+    }
+    const options: Option[] = [
+      ...this.videoFormats,
+      ...this.audioFormats,
+      ...this.captionFormats,
+      ...this.thumbnailFormats,
+    ];
+    return options.find(o => o.id === format)?.text ?? format.toUpperCase();
+  }
+
   formatCodecLabel(download: Download): string {
     if (download.download_type !== 'video') {
       const format = (download.format || '').toUpperCase();