Refactor upload progress view navigation and actions

Author: davelopez

client/src/components/Panels/Upload/UploadMethodView.vue

@@ -58,7 +58,7 @@ function handleCancel() {
 
 function handleStart() {
     uploadMethodRef.value?.startUpload();
-    // TODO Navigate to progress display
+    router.push("/upload/progress");
 }
 
 function handleReadyStateChange(ready: boolean) {

client/src/components/Panels/Upload/UploadPanel.vue

@@ -58,6 +58,10 @@ function selectUploadMethod(method: UploadMethodConfig) {
     router.push(`/upload/${method.id}`);
 }
 
+function showProgressDetails() {
+    router.push("/upload/progress");
+}
+
 function openAdvancedMode() {
     showAdvancedModal.value = true;
 }
@@ -91,7 +95,7 @@ function openGuidedMode() {
                 </BButton>
             </template>
             <template v-slot:header>
-                <UploadProgressIndicator v-if="hasUploads" @show-details="router.push('/upload/progress')" />
+                <UploadProgressIndicator v-if="hasUploads" @show-details="showProgressDetails" />
                 <DelayedInput :delay="100" class="my-2" placeholder="Search upload methods" @change="query = $event" />
             </template>
             <ScrollList

client/src/components/Panels/Upload/UploadProgress.vue

@@ -39,7 +39,14 @@ function getFileStatusClass(file: UploadItem) {
 
 <template>
     <div class="upload-progress-view d-flex flex-column h-100">
-        <BreadcrumbHeading :items="breadcrumbItems" />
+        <BreadcrumbHeading :items="breadcrumbItems">
+            <div v-if="activeItems.length > 0" class="d-flex flex-gapx-1">
+                <GButton v-if="hasCompleted" size="small" outline color="grey" @click="uploadService.clearCompleted()">
+                    Clear Completed
+                </GButton>
+                <GButton size="small" outline color="grey" @click="uploadService.clearAll()"> Clear All </GButton>
+            </div>
+        </BreadcrumbHeading>
 
         <div class="upload-progress-content flex-grow-1 overflow-auto p-3">
             <div v-if="activeItems.length > 0" class="h-100 d-flex flex-column">
@@ -56,13 +63,6 @@ function getFileStatusClass(file: UploadItem) {
                     </div>
                 </div>
 
-                <div class="clear-actions mb-3">
-                    <GButton v-if="hasCompleted" outline color="grey" @click="uploadService.clearCompleted()">
-                        Clear Completed
-                    </GButton>
-                    <GButton outline color="grey" @click="uploadService.clearAll()"> Clear All </GButton>
-                </div>
-
                 <div class="file-details-list flex-grow-1 overflow-auto">
                     <div
                         v-for="(file, index) in activeItems"
@@ -121,13 +121,6 @@ function getFileStatusClass(file: UploadItem) {
     flex-shrink: 0;
 }
 
-.clear-actions {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: flex-end;
-    flex-shrink: 0;
-}
-
 .file-details-list {
     flex: 1;
     overflow-y: auto;