Add progress popup

- Add progress popup
- Add TS export for progress updates

apps/desktop-client/src/bindings/ModelStatusPayload.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ModelStatusPayload = { msg: string, percent: string, };

apps/desktop-client/src/bindings/ModelStatusPayloadWrapper.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ModelStatusPayload } from "./ModelStatusPayload";
+
+export type ModelStatusPayloadWrapper = { payload: ModelStatusPayload, };

apps/desktop-client/src/main.tsx

@@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorPage from "./error-page.tsx";
 import { WizardPage } from "./pages/wizard/WizardPage.tsx";
 import { SettingsPage } from "./pages/settings/SettingsPage.tsx";
+import { ProgressPopup } from "./pages/ProgressPopup.tsx";
 
 const router = createBrowserRouter([
   {
@@ -15,7 +16,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/progress",
-    element: <div>Progress Popup</div>,
+    element: <ProgressPopup />,
   },
   {
     path: "/settings/:tab",

apps/desktop-client/src/pages/ProgressPopup.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { ModelStatusPayloadWrapper } from "../bindings/ModelStatusPayloadWrapper";
+
+export function ProgressPopup() {
+  const [update, setUpdate] = useState<ModelStatusPayloadWrapper | null>(null);
+
+  useEffect(() => {
+    const unlisten = listen(
+      "progress_update",
+      (event: ModelStatusPayloadWrapper) => {
+        setUpdate(event);
+        console.error("event ", event);
+      },
+    );
+
+    return () => unlisten.then((fn) => fn());
+  }, []);
+
+  return (
+    <div className="bg-neutral-800 text-white w-full h-screen">
+      <div className="flex flex-col p-4">
+        {update ? (
+          <>
+            <div className="text-sm pb-1">
+              {update.payload.msg} - {update.payload.percent}%
+            </div>
+            <div className="w-full bg-stone-800 h-1 rounded-3xl text-xs">
+              <div
+                className="bg-cyan-400 h-1 rounded-lg pl-2 flex items-center animate-pulse"
+                style={{ width: `${update.payload.percent}%` }}
+              ></div>
+            </div>
+          </>
+        ) : (
+          <div className="text-sm">Starting download...</div>
+        )}
+      </div>
+    </div>
+  );
+}

crates/shared/src/event.rs

@@ -145,13 +145,15 @@ pub struct NavigateParams {
     pub page: String,
 }
 
-#[derive(Clone, Debug, Deserialize, Serialize)]
+#[derive(Clone, Debug, Deserialize, Serialize, TS)]
+#[ts(export)]
 pub struct ModelStatusPayload {
     pub msg: String,
     pub percent: String,
 }
 
-#[derive(Clone, Debug, Deserialize, Serialize)]
+#[derive(Clone, Debug, Deserialize, Serialize, TS)]
+#[ts(export)]
 pub struct ModelStatusPayloadWrapper {
     pub payload: ModelStatusPayload,
 }