Show all tools versions now

Author: AttAditya

src/components/AppBar/index.tsx

@@ -1,10 +1,22 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Tags } from "lucide-react";
+
 import { closeWindow, getVersion } from "../../utils/desktopTools";
 
 import "./style.css";
 
 export function AppBar() {
- const [version, setVersion] = useState<string>("v0");
+ const [version, setVersion] = useState<{
+ [key: string]: string;
+ }>({});
+
+ const showVersions = useCallback(() => {
+ const versionMessage = Object.entries(version).map(
+ v => `${v[0]}: ${v[1]}`
+ ).join("\n");
+ 
+ alert(versionMessage);
+ }, [version]);
 
  useEffect(() => {
  (async () => {
@@ -24,7 +36,7 @@ export function AppBar() {
  </div>
 
  <div className="version-info">
- Launcher {version}
+ <Tags className="version-button" onClick={showVersions} />
  </div>
  </div>
  </>);

src/components/AppBar/style.css

@@ -60,8 +60,24 @@
 }
 
 .version-info {
- padding: 0.25rem;
+ padding: 1rem;
  font-size: 0.75rem;
  font-weight: 200;
+ pointer-events: all;
+}
+
+.version-button {
+ width: 1rem;
+ height: 1rem;
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+.version-button:hover {
+ opacity: 1;
+}
+
+.version-button:active {
+ transform: scale(0.5);
 }
 

src/defs/PyWebview.ts

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

src/utils/desktopTools.ts

@@ -48,9 +48,9 @@ const setupDesktopTools = () => {
  return await getApi()?.store_data(data) || false;
  }
 
- const getVersion = async (): Promise<string> => {
+ const getVersion = async (): Promise<{[key: string]: string;}> => {
  await waitForPWV();
- return await getApi()?.get_version() || "v0";
+ return await getApi()?.get_version() || {};
  }
 
  const checkUpdates = async (): Promise<boolean> => {