fix update all percentage display (#525)

modules/desktop/src/routes/+page.svelte

@@ -14,6 +14,7 @@
   import WelcomeModal from "$components/welcome-modal/welcome-modal.svelte";
   import Button from "@tea/ui/button/button.svelte";
   import log from "$libs/logger";
+  import { formatPercent } from "@tea/ui/lib/percent";
 
   const { packageList } = packagesStore;
   const { session } = authStore;
@@ -29,7 +30,9 @@
 
   let packagesScrollY = 0;
   $: currentUpdatingPkg = $packageList.find((p) => p.state === PackageStates.UPDATING);
-  $: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${currentUpdatingPkg?.install_progress_percentage}%)`;
+  $: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${formatPercent(
+    currentUpdatingPkg?.install_progress_percentage
+  )}%)`;
 
   $: pkgsToUpdate = $packageList.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
   async function updateAll() {
@@ -89,7 +92,7 @@
         <!-- 22px right margin to account for the scrollbar on the package cards -->
         <div class="mr-[22px] flex items-center justify-end text-sm">
           {#if currentUpdatingPkg}
-            <p class="text-gray px-2">{updatingMessage}</p>
+            <p class="text-gray px-2 font-mono">{updatingMessage}</p>
           {/if}
           <div>
             <Button

modules/ui/src/lib/percent.ts

@@ -0,0 +1,9 @@
+// Format the percentage expressed as 0..100 to a number with 2 decimal places.
+// we never want to round 99.999% to 100% because makes the experience bad so we can't just use toFixed(2) immediately
+// Also make sure that whatever is displaying this is using a monospace font so that the numbers don't jump around
+export const formatPercent = (percent?: number) => {
+  if (!percent) {
+    return "0.00";
+  }
+  return (Math.floor(percent * 100) / 100).toFixed(2);
+};

modules/ui/src/progress-circle/progress-circle.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { formatPercent } from "../lib/percent";
+
   export let value = 0;
   export let max = 100;
   $: progressPath = () => {
@@ -18,12 +20,6 @@
       return path;
     }
   };
-
-  // Format the percentage expressed as 0..100 to a number with 2 decimal places.
-  // we never want to round 99.999% to 100% because makes the experience bad so we can't just use toFixed(2) immediately
-  const formatPercent = (percent: number) => {
-    return (Math.floor(percent * 100) / 100).toFixed(2);
-  };
 </script>
 
 <div>