Updates option

Author: AttAditya

src/components/Actions/index.tsx

@@ -1,14 +1,22 @@
-import { Plus } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { GitPullRequestArrow, Plus } from "lucide-react";
 
 import type { ProjectData } from "../../defs/ProjectData";
 
-import { getData, openProject, storeData } from "../../utils/desktopTools";
 import { generateId } from "../../utils/generatorTools";
+import {
+  checkUpdates,
+  getData,
+  openProject,
+  storeData,
+  updateTools,
+} from "../../utils/desktopTools";
 
 import "./style.css";
 
 export function Actions() {
-  const openNewProject = () => {
+  const [updatesAvailable, setUpdatesAvailable] = useState(false);
+  const openNewProject = useCallback(() => {
     const projectId = generateId();
 
     const newProject: ProjectData = {
@@ -33,7 +41,24 @@ export function Actions() {
 
       location.reload();
     })();
-  };
+  }, []);
+
+  const startUpdate = useCallback(() => {
+    const message = [
+      "Are you sure you want to update the tools?",
+      "This will close the application.",
+      "You will need to start it again manually.",
+    ].join(" ");
+
+    if (!confirm(message)) return;
+    updateTools();
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      setUpdatesAvailable(await checkUpdates());
+    })();
+  }, []);
 
   return (<>
     <div className="actions">
@@ -43,6 +68,17 @@ export function Actions() {
           New Project
         </span>
       </button>
+
+      <button
+        className="action"
+        onClick={startUpdate}
+        disabled={!updatesAvailable}
+      >
+        <GitPullRequestArrow className="action-icon" />
+        <span className="action-name">
+          Update Tools
+        </span>
+      </button>
     </div>
   </>);
 }

src/components/Actions/style.css

@@ -49,3 +49,16 @@
   opacity: 1;
 }
 
+.action[disabled] {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.action[disabled] .action-icon {
+  opacity: 0.1;
+}
+
+.action[disabled]:active .action-icon {
+  scale: 1;
+}
+

src/components/AppBar/index.tsx

@@ -1,8 +1,18 @@
-import { closeWindow } from "../../utils/desktopTools";
+import { useEffect, useState } from "react";
+import { closeWindow, getVersion } from "../../utils/desktopTools";
 
 import "./style.css";
 
 export function AppBar() {
+  const [version, setVersion] = useState<string>("v0");
+
+  useEffect(() => {
+    (async () => {
+      const appVersion = await getVersion();
+      setVersion(appVersion);
+    })();
+  }, []);
+
   return (<>
     <div className="app-bar">
       <div className="window-actions">
@@ -12,6 +22,10 @@ export function AppBar() {
           onClick={() => closeWindow()}
         />
       </div>
+
+      <div className="version-info">
+        Launcher {version}
+      </div>
     </div>
   </>);
 }

src/components/AppBar/style.css

@@ -4,12 +4,15 @@
   width: 100%;
   z-index: 1000;
   pointer-events: none;
+  display: flex;
+  align-items: start;
 }
 
 .window-actions {
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
+  flex: 1;
 }
 
 .window-action-button {
@@ -56,3 +59,9 @@
   cursor: not-allowed;
 }
 
+.version-info {
+  padding: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 200;
+}
+

src/defs/PyWebview.ts

@@ -4,6 +4,9 @@ export interface PyWebview {
     open_project: (project_id: string) => Promise<void>;
     get_data: () => Promise<string>;
     store_data: (data: string) => Promise<boolean>;
+    get_version: () => Promise<string>;
+    check_updates: () => Promise<boolean>;
+    update: () => Promise<void>;
   }
 };
 

src/utils/desktopTools.ts

@@ -48,11 +48,29 @@ const setupDesktopTools = () => {
     return await getApi()?.store_data(data) || false;
   }
 
+  const getVersion = async (): Promise<string> => {
+    await waitForPWV();
+    return await getApi()?.get_version() || "v0";
+  }
+
+  const checkUpdates = async (): Promise<boolean> => {
+    await waitForPWV();
+    return await getApi()?.check_updates() || false;
+  }
+
+  const updateTools = async () => {
+    await waitForPWV();
+    return await getApi()?.update();
+  }
+
   return {
     closeWindow,
     openProject,
     getData,
     storeData,
+    getVersion,
+    checkUpdates,
+    updateTools,
   }
 };
 
@@ -61,5 +79,8 @@ export const {
   openProject,
   getData,
   storeData,
+  getVersion,
+  checkUpdates,
+  updateTools,
 } = setupDesktopTools();