Turn download progress into an error bar on failure

apps/app-frontend/src/components/ui/ProgressBar.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="progress-bar">
-    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+    <div
+      class="progress-bar__fill"
+      :style="{
+        width: `${progress}%`,
+        'background-color': error ? 'var(--color-red)' : 'var(--color-brand)',
+      }"
+    ></div>
   </div>
 </template>
 
@@ -13,6 +19,10 @@ defineProps({
       return value >= 0 && value <= 100
     },
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>
 
@@ -27,7 +37,6 @@ defineProps({
 
 .progress-bar__fill {
   height: 100%;
-  background-color: var(--color-brand);
   transition: width 0.3s;
 }
 </style>

apps/app-frontend/src/components/ui/UpdateModal.vue

@@ -14,7 +14,7 @@
         formatMessage(messages.bodyChangelog)
       }}</a>
     </div>
-    <ProgressBar class="mt-4" :progress="downloadProgress" />
+    <ProgressBar class="mt-4" :progress="downloadProgress" :error="downloadError" />
     <div class="mt-4 flex flex-wrap gap-2">
       <ButtonStyled color="green">
         <button :disabled="updatingImmediately" @click="installUpdateNow">
@@ -107,6 +107,7 @@ const updateSize = ref<number>()
 const updatingImmediately = ref(false)
 const downloadInProgress = ref(false)
 const downloadProgress = ref(0)
+const downloadError = ref(false)
 
 const enqueuedUpdate = ref<string | null>(null)
 
@@ -165,6 +166,9 @@ function updateAtNextExit() {
 }
 
 async function downloadUpdate() {
+  downloadError.value = false
+  downloadProgress.value = 0
+
   const versionToDownload = update.value!.version
 
   downloadInProgress.value = true
@@ -172,6 +176,7 @@ async function downloadUpdate() {
     await enqueueUpdateForInstallation(update.value!.rid)
   } catch (e) {
     downloadInProgress.value = false
+    downloadError.value = true
 
     handleError(e)