Frontend: Implement file size display in Downloads interface (#322)

ui/src/app/app.component.html

@@ -153,6 +153,7 @@
           <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle"></fa-icon>&nbsp; Clear completed</button>
           <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle"></fa-icon>&nbsp; Clear failed</button>
         </th>
+        <th scope="col" >File Size</th>
         <th scope="col" style="width: 2rem;"></th>
         <th scope="col" style="width: 2rem;"></th>
         <th scope="col" style="width: 2rem;"></th>
@@ -176,6 +177,8 @@
             <span *ngIf="download.value.error"><br>Error: {{download.value.error}}</span>
           </ng-template>
         </td>
+        <td>
+          <span *ngIf="download.value.size">{{ download.value.size | fileSize }}</span>
         <td>
           <button *ngIf="download.value.status == 'error'" type="button" class="btn btn-link" (click)="retryDownload(download.key, download.value)"><fa-icon [icon]="faRedoAlt"></fa-icon></button>
         </td>

ui/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CookieService } from 'ngx-cookie-service';
 
 import { AppComponent } from './app.component';
-import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
+import { EtaPipe, SpeedPipe, EncodeURIComponent, FileSizePipe } from './downloads.pipe';
 import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
 import { MeTubeSocket } from './metube-socket';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -18,6 +18,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     AppComponent,
     EtaPipe,
     SpeedPipe,
+    FileSizePipe,
     EncodeURIComponent,
     MasterCheckboxComponent,
     SlaveCheckboxComponent

ui/src/app/downloads.pipe.ts

@@ -44,3 +44,18 @@ export class EncodeURIComponent implements PipeTransform {
     return encodeURIComponent(value);
   }
 }
+
+@Pipe({ 
+  name: 'fileSize' 
+})
+export class FileSizePipe implements PipeTransform {
+  transform(value: number): string {
+      if (value === 0) return '0 Bytes';
+
+      const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      const unitIndex = Math.floor(Math.log(value) / Math.log(1000)); // Use 1000 for common units
+
+      const unitValue = value / Math.pow(1000, unitIndex);
+      return `${unitValue.toFixed(2)} ${units[unitIndex]}`;
+  }
+}