From fe277517c14a8341be0f4ce76d072d361e574589 Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Wed, 15 Oct 2025 04:51:13 +0000
Subject: [PATCH] Fix update status rendering

---
 .../devices.$id.settings.general.update.tsx   | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.general.update.tsx b/ui/src/routes/devices.$id.settings.general.update.tsx
index 5269d5eb..7e3f6633 100644
--- a/ui/src/routes/devices.$id.settings.general.update.tsx
+++ b/ui/src/routes/devices.$id.settings.general.update.tsx
@@ -189,8 +189,6 @@ function UpdatingDeviceState({
   otaState: UpdateState["otaState"];
   onMinimizeUpgradeDialog: () => void;
 }) {
-  const formatProgress = (progress: number) => `${Math.round(progress)}%`;
-
   const calculateOverallProgress = (type: "system" | "app") => {
     const downloadProgress = Math.round((otaState[`${type}DownloadProgress`] || 0) * 100);
     const updateProgress = Math.round((otaState[`${type}UpdateProgress`] || 0) * 100);
@@ -258,6 +256,11 @@ function UpdatingDeviceState({
     );
   };
 
+  const systemOverallProgress = calculateOverallProgress("system");
+  const systemUpdateStatus = getUpdateStatus("system");
+  const appOverallProgress = calculateOverallProgress("app");
+  const appUpdateStatus = getUpdateStatus("app");
+
   return (
     <div className="flex flex-col items-start justify-start space-y-4 text-left">
       <div className="w-full max-w-sm space-y-4">
@@ -293,7 +296,7 @@ function UpdatingDeviceState({
                     <p className="text-sm font-semibold text-black dark:text-white">
                       {m.general_update_system_update_title()}
                     </p>
-                    {calculateOverallProgress("system") < 100 ? (
+                    {systemOverallProgress < 100 ? (
                       <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
                     ) : (
                       <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@@ -302,16 +305,14 @@ function UpdatingDeviceState({
                   <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
                     <div
                       className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
-                      style={{
-                        width: formatProgress(calculateOverallProgress("system")),
-                      }}
+                      style={{ width: `${systemOverallProgress}%` }}
                     ></div>
                   </div>
                   <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
-                    <span>{getUpdateStatus("system")}</span>{" "}
-                    {calculateOverallProgress("system") < 100 ? (
-                      <span>{formatProgress(calculateOverallProgress("system"))}</span>
-                    ) : null}
+                    <span>{systemUpdateStatus}</span>{" "}
+                    {systemOverallProgress < 100
+                     ? (<span>{`${systemOverallProgress}%`}</span>)
+                     : null}
                   </div>
                 </div>
               )}
@@ -325,7 +326,7 @@ function UpdatingDeviceState({
                       <p className="text-sm font-semibold text-black dark:text-white">
                         {m.general_update_app_update_title()}
                       </p>
-                      {calculateOverallProgress("app") < 100 ? (
+                      {appOverallProgress < 100 ? (
                         <LoadingSpinner className="h-4 w-4 text-blue-700 dark:text-blue-500" />
                       ) : (
                         <CheckCircleIcon className="h-4 w-4 text-blue-700 dark:text-blue-500" />
@@ -334,16 +335,14 @@ function UpdatingDeviceState({
                     <div className="h-2.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-600">
                       <div
                         className="h-2.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
-                        style={{
-                          width: formatProgress(calculateOverallProgress("app")),
-                        }}
+                        style={{ width: `${appOverallProgress}%` }}
                       ></div>
                     </div>
                     <div className="flex justify-between text-sm text-slate-600 dark:text-slate-300">
-                      <span>{getUpdateStatus("app")}</span>{" "}
-                      {calculateOverallProgress("system") < 100 ? (
-                        <span>{formatProgress(calculateOverallProgress("app"))}</span>
-                      ) : null}
+                      <span>{appUpdateStatus}</span>{" "}
+                      {appOverallProgress < 100
+                        ? (<span>{`${appOverallProgress}%`}</span>)
+                        : null}
                     </div>
                   </div>
                 </>
@@ -411,13 +410,13 @@ function UpdateAvailableState({
         <p className="mb-4 text-sm text-slate-600 dark:text-slate-300">
           {versionInfo?.systemUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_system_type()}</span>:&nbsp;{versionInfo?.remote?.systemVersion}
+              <span className="font-semibold">{m.general_update_system_type()}</span>: {versionInfo?.remote?.systemVersion}
               <br />
             </>
           ) : null}
           {versionInfo?.appUpdateAvailable ? (
             <>
-              <span className="font-semibold">{m.general_update_application_type()}</span>:&nbsp;{versionInfo?.remote?.appVersion}
+              <span className="font-semibold">{m.general_update_application_type()}</span>: {versionInfo?.remote?.appVersion}
             </>
           ) : null}
         </p>