progress status and progress communication done

src/App.svelte

@@ -4,19 +4,20 @@
     Dropdown,
     DropdownItem,
     DropdownHeader,
-    DropdownDivider
+    DropdownDivider,
   } from "flowbite-svelte";
   import {
     ArrowRightFromBracketSolid,
     ArrowRightToBracketSolid,
-    UserSettingsSolid
+    UserSettingsSolid,
   } from "flowbite-svelte-icons";
   import ezppLogo from "../public/favicon.png";
   import {
     currentPage,
     currentUser,
     launching,
-    launchStatus
+    launchPercentage,
+    launchStatus,
   } from "./storage/localStore";
   import { Page } from "./consts/pages";
   import Login from "./pages/Login.svelte";
@@ -40,9 +41,16 @@
   };
 
   window.addEventListener("launchStatusUpdate", (e) => {
-    const status = (e as CustomEvent).detail;
+    console.log((e as CustomEvent).detail);
+    const status = (e as CustomEvent).detail.status;
     launchStatus.set(status);
   });
+
+  window.addEventListener("launchProgressUpdate", (e) => {
+    console.log((e as CustomEvent).detail);
+    const progress = (e as CustomEvent).detail.progress;
+    launchPercentage.set(progress);
+  });
 </script>
 
 <Toaster></Toaster>

src/app.pcss

@@ -54,6 +54,10 @@ html .cet-titlebar .cet-control-icon svg {
   }
 }
 
+.animatedProgress div {
+  transition: width 0.35s cubic-bezier(0.65, -0.02, 0.31, 1.01);
+}
+
 @keyframes progress-loading {
   50% {
     background-position-x: -115%;

src/pages/Login.svelte

@@ -142,7 +142,9 @@
         {/if}
       </Button>
     </Input>
-    <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
+    <Checkbox bind:checked={saveCredentials} disabled={loading}
+      >Save credentials</Checkbox
+    >
     <div class="flex flex-col justify-center items-center gap-5 mt-1">
       <Button
         class="dark:active:!bg-gray-900  active:scale-95 transition-transform duration-75"

src/util/mathUtil.ts

@@ -0,0 +1,3 @@
+export const clamp = (val: number, min: number, max: number) => {
+  return val <= min ? min : val >= max ? max : val;
+};