refactor page-game components + overwrite saves button

backend/game.go

@@ -2,6 +2,7 @@ package backend
 
 import (
 	"context"
+	"errors"
 	"fmt"
 	"os"
 	"path"
@@ -50,18 +51,23 @@ func (g *Game) AddGame(name, savePath string, isFile bool) uuid.UUID {
 	return id
 }
 
-func (g *Game) RemoveGame(id uuid.UUID) {
+func (g *Game) RemoveGame(id uuid.UUID) error {
 	newList := []GameSingle{}
 	for _, game := range g.JsonGame.Data {
 		if game.ID == id {
 			continue
 		}
 		newList = append(newList, game)
 	}
+	if len(newList) == len(g.JsonGame.Data) {
+		errorMsg := fmt.Sprintf("no element deleted: %v", id)
+		return errors.New(errorMsg)
+	}
 	g.JsonGame.Data = newList
 	g.updateJson()
 	g.removeGameDir(id)
 	g.logf("Deleted: %v", id)
+	return nil
 }
 
 func (g *Game) ReadGames() (*JsonGame, error) {

backend/save.go

@@ -66,6 +66,14 @@ func (s *Save) LoadSave(saveID, gameID uuid.UUID) error {
 	return nil
 }
 
+func (s *Save) OverwriteSave(saveID, gameID uuid.UUID) error {
+	err := s.copyGameContent(gameID, saveID)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
 func (s *Save) ReadSaves() (*JsonSave, error) {
 	saveJson, err := utils.ReadConfigFrom[JsonSave](s.filename)
 	return saveJson, err
@@ -134,9 +142,6 @@ func (s *Save) copySaveContent(saveID, gameID uuid.UUID) error {
 	if err != nil {
 		return err
 	}
-	if err = os.RemoveAll(gamePath); err != nil {
-		return err
-	}
 	if err = utils.CopyDir(savePath, gamePath); err != nil {
 		return err
 	}

backend/utils/copy-dir.go

@@ -1,9 +1,15 @@
 package utils
 
 import (
+	"os"
+
 	cp "github.com/otiai10/copy"
 )
 
 func CopyDir(src, dst string) error {
+	// hard copy (remove target dir and then copy)
+	if err := os.RemoveAll(dst); err != nil {
+		return err
+	}
 	return cp.Copy(src, dst)
 }

frontend/src/components/QuickSaveChip.tsx

@@ -0,0 +1,55 @@
+import { Button, Chip } from "@material-tailwind/react";
+import clsx from "clsx";
+import { FaFolderOpen } from "react-icons/fa6";
+import WithTooltip from "@/components/WithTooltip";
+
+type QuickSaveChipProps = {
+  enabled: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+};
+
+const QuickSaveChip = (props: QuickSaveChipProps) => {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        className={clsx({
+          "[&_button]:pointer-events-none [&_button]:opacity-50":
+            !props.enabled,
+        })}
+        variant="ghost"
+        color={props.enabled ? "green" : "red"}
+        size="sm"
+        value={
+          <div className="flex items-center gap-2">
+            <span>Quick Save</span>
+
+            <WithTooltip content="Open" placement="top">
+              <Button
+                onClick={() => props.onOpen()}
+                className="p-0.5"
+                variant="text"
+              >
+                <FaFolderOpen size={12} />
+              </Button>
+            </WithTooltip>
+          </div>
+        }
+        onClose={() => props.onClose()}
+        icon={
+          <span
+            className={clsx(
+              "mx-auto mt-1 block h-2 w-2 rounded-full content-['']",
+              {
+                "bg-red-900": !props.enabled,
+                "bg-green-900": props.enabled,
+              },
+            )}
+          />
+        }
+      />
+    </div>
+  );
+};
+
+export default QuickSaveChip;

frontend/src/components/Save.tsx

@@ -0,0 +1,77 @@
+import { Button, Typography } from "@material-tailwind/react";
+import { FaDownload, FaFolderOpen, FaTrash, FaUpload } from "react-icons/fa6";
+import { type SaveSingle } from "@/hooks/useSave";
+import WithTooltip from "@/components/WithTooltip";
+
+type SavePropsCallback = () => Promise<void> | void;
+
+type SaveProps = {
+  data: SaveSingle;
+  onLoad: SavePropsCallback;
+  onSave: SavePropsCallback;
+  onDelete: SavePropsCallback;
+  onOpenDirectory: SavePropsCallback;
+};
+
+const Save = (props: SaveProps) => {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const intlDate = new Intl.DateTimeFormat("en-US").format(date);
+    return intlDate;
+  };
+
+  return (
+    <div
+      className="grid grid-cols-12 items-center justify-between break-all even:bg-blue-gray-50/50"
+      key={props.data.Name}
+    >
+      <div className="col-span-7 flex items-center gap-2">
+        <div>
+          <WithTooltip content="Load" placement="top">
+            <Button
+              onClick={() => props.onLoad()}
+              className="p-3"
+              variant="text"
+            >
+              <FaUpload size={15} />
+            </Button>
+          </WithTooltip>
+
+          <WithTooltip content="Save" placement="top">
+            <Button
+              onClick={() => props.onSave()}
+              className="p-3"
+              variant="text"
+            >
+              <FaDownload size={15} />
+            </Button>
+          </WithTooltip>
+        </div>
+
+        <Typography>{props.data.Name}</Typography>
+      </div>
+
+      <Typography className="col-span-3 px-2">
+        {formatDate(props.data.CreatedAt)}
+      </Typography>
+
+      <WithTooltip content="Open" placement="top">
+        <Button
+          onClick={() => props.onOpenDirectory()}
+          className="p-3"
+          variant="text"
+        >
+          <FaFolderOpen size={15} />
+        </Button>
+      </WithTooltip>
+
+      <WithTooltip content="Delete" placement="top">
+        <Button onClick={() => props.onDelete()} className="p-3" variant="text">
+          <FaTrash size={15} />
+        </Button>
+      </WithTooltip>
+    </div>
+  );
+};
+
+export default Save;

frontend/src/components/WithTooltip.tsx

@@ -0,0 +1,26 @@
+import { Tooltip, Typography } from "@material-tailwind/react";
+import { type ReactElement } from "react";
+
+type WithTooltipProps = {
+  children: ReactElement;
+  content: string;
+  placement: string;
+};
+
+const WithTooltip = (props: WithTooltipProps) => {
+  return (
+    <Tooltip
+      content={
+        <Typography className="text-black" variant="small">
+          {props.content}
+        </Typography>
+      }
+      placement={props.placement}
+      className="border border-blue-gray-50 bg-white shadow-xl shadow-black/10"
+    >
+      {props.children}
+    </Tooltip>
+  );
+};
+
+export default WithTooltip;

frontend/src/hooks/useSave.tsx

@@ -6,6 +6,7 @@ import {
   GetSaves,
   LoadQuickSave,
   LoadSave,
+  OverwriteSave,
   RemoveQuickSave,
   RemoveSave,
 } from "@wailsjs/go/backend/Save";
@@ -70,6 +71,11 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
     mutationFn: (s: Pick<SaveSingle, "GameID">) => LoadQuickSave(s.GameID),
   });
 
+  const { mutateAsync: overwriteSave } = useMutation({
+    mutationFn: (s: Pick<SaveSingle, "ID" | "GameID">) =>
+      OverwriteSave(s.ID, s.GameID),
+  });
+
   return {
     querySaves,
     queryQuickSave,
@@ -79,6 +85,7 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
     removeQuickSave,
     loadSave,
     loadQuickSave,
+    overwriteSave,
   };
 };