Improve packaging (#328)

* Add gpgui-helper (#326)

* Add packaging

apps/gpgui-helper/src/components/App/App.tsx

@@ -0,0 +1,131 @@
+import { Box, Button, CssBaseline, LinearProgress, Typography } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+import logo from "../../assets/icon.svg";
+import { useEffect, useState } from "react";
+
+import "./styles.css";
+
+function useUpdateProgress() {
+  const [progress, setProgress] = useState<number | null>(null);
+
+  useEffect(() => {
+    const unlisten = appWindow.listen("app://update-progress", (event) => {
+      setProgress(event.payload as number);
+    });
+
+    return () => {
+      unlisten.then((unlisten) => unlisten());
+    };
+  }, []);
+
+  return progress;
+}
+
+export default function App() {
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const unlisten = appWindow.listen("app://update-error", () => {
+      setError(true);
+    });
+
+    return () => {
+      unlisten.then((unlisten) => unlisten());
+    };
+  }, []);
+
+  const handleRetry = () => {
+    setError(false);
+    appWindow.emit("app://update");
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <Box
+        sx={{ position: "absolute", inset: 0 }}
+        display="flex"
+        alignItems="center"
+        px={2}
+        data-tauri-drag-region
+      >
+        <Box display="flex" alignItems="center" flex="1" data-tauri-drag-region>
+          <Box
+            component="img"
+            src={logo}
+            alt="logo"
+            sx={{ width: "4rem", height: "4rem" }}
+            data-tauri-drag-region
+          />
+          <Box flex={1} ml={2}>
+            {error ? <DownloadFailed onRetry={handleRetry} /> : <DownloadIndicator />}
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+}
+
+function DownloadIndicator() {
+  const progress = useUpdateProgress();
+
+  return (
+    <>
+      <Typography variant="h1" fontSize="1rem" data-tauri-drag-region>
+        Updating the GUI components...
+      </Typography>
+      <Box mt={1}>
+        <LinearProgressWithLabel value={progress} />
+      </Box>
+    </>
+  );
+}
+
+function DownloadFailed({ onRetry }: { onRetry: () => void }) {
+  return (
+    <>
+      <Typography variant="h1" fontSize="1rem" data-tauri-drag-region>
+        Failed to update the GUI components.
+      </Typography>
+      <Box mt={1} data-tauri-drag-region>
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          onClick={onRetry}
+          sx={{
+            textTransform: "none",
+          }}
+        >
+          Retry
+        </Button>
+      </Box>
+    </>
+  );
+}
+
+function LinearProgressWithLabel(props: { value: number | null }) {
+  const { value } = props;
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Box flex="1">
+        <LinearProgress
+          variant={value === null ? "indeterminate" : "determinate"}
+          value={value ?? 0}
+          sx={{
+            py: 1.2,
+            ".MuiLinearProgress-bar": {
+              transition: "none",
+            },
+          }}
+        />
+      </Box>
+      {value !== null && (
+        <Box sx={{ minWidth: 35, textAlign: "right", ml: 1 }}>
+          <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
+        </Box>
+      )}
+    </Box>
+  );
+}

apps/gpgui-helper/src/components/App/styles.css

@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}