From 5495b01bc57d624ad8c899df5630eb0fbff3ee7a Mon Sep 17 00:00:00 2001
From: Josiah Glosson <soujournme@gmail.com>
Date: Wed, 9 Jul 2025 20:38:35 -0500
Subject: [PATCH] Turn download progress into an error bar on failure

---
 apps/app-frontend/src/components/ui/ProgressBar.vue | 13 +++++++++++--
 apps/app-frontend/src/components/ui/UpdateModal.vue |  7 ++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ProgressBar.vue b/apps/app-frontend/src/components/ui/ProgressBar.vue
index 1d2547484..93ad5b5a4 100644
--- a/apps/app-frontend/src/components/ui/ProgressBar.vue
+++ b/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>
diff --git a/apps/app-frontend/src/components/ui/UpdateModal.vue b/apps/app-frontend/src/components/ui/UpdateModal.vue
index 3a710637c..dc9108768 100644
--- a/apps/app-frontend/src/components/ui/UpdateModal.vue
+++ b/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)