enable to update saves name on click

backend/save.go

@@ -84,6 +84,22 @@ func (s *Save) GetSaves(gameID uuid.UUID) []SaveSingle {
 	return gameSaves
 }
 
+func (s *Save) UpdateSave(saveID, gameID uuid.UUID, name string) error {
+	if name == "" {
+		return errors.New("name is empty")
+	}
+	var newList []SaveSingle
+	for _, save := range s.JsonData.Data[gameID] {
+		if save.ID == saveID {
+			save.Name = name
+		}
+		newList = append(newList, save)
+	}
+	s.JsonData.Data[gameID] = newList
+	s.UpdateJson()
+	return nil
+}
+
 func (s *Save) RemoveSave(saveID uuid.UUID, gameID uuid.UUID) error {
 	var newList []SaveSingle
 	for _, save := range s.JsonData.Data[gameID] {

frontend/src/components/Save/NameInput.tsx

@@ -0,0 +1,58 @@
+import { Input, Typography } from "@material-tailwind/react";
+import { useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { type GameSingle } from "@/hooks/useGame";
+
+type NameInputProps = {
+  name: string;
+  onSubmit: (data: FormInputs) => void;
+};
+
+type FormInputs = Pick<GameSingle, "Name">;
+
+const NameInput = (props: NameInputProps) => {
+  const [edit, setEdit] = useState<boolean>(false);
+  const { register, handleSubmit, setFocus } = useForm<FormInputs>();
+
+  const onSubmit: SubmitHandler<FormInputs> = (data) => {
+    setEdit(false);
+    props.onSubmit(data);
+  };
+
+  const handleEdit = () => {
+    setEdit(true);
+    setTimeout(() => {
+      setFocus("Name");
+    }, 300);
+  };
+
+  if (edit) {
+    return (
+      <form
+        className="col-span-5 !h-[40px] w-0 grow"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Input
+          className="!p-0"
+          variant="standard"
+          label={props.name}
+          {...register("Name", {
+            onBlur: () => {
+              setEdit(false);
+            },
+          })}
+        />
+      </form>
+    );
+  }
+
+  return (
+    <div className="col-span-5 flex h-[40px] w-0 grow items-center ">
+      <Typography onClick={() => handleEdit()} className="h-6 w-full">
+        {props.name}
+      </Typography>
+    </div>
+  );
+};
+
+export default NameInput;

frontend/src/components/Save.tsx → frontend/src/components/Save/index.tsx

@@ -1,7 +1,8 @@
 import { Button, Typography } from "@material-tailwind/react";
 import { FaDownload, FaFolderOpen, FaTrash, FaUpload } from "react-icons/fa6";
-import { type SaveSingle } from "@/hooks/useSave";
+import useSave, { type SaveSingle } from "@/hooks/useSave";
 import WithTooltip from "@/components/WithTooltip";
+import NameInput from "@/components/Save/NameInput";
 
 type SavePropsCallback = () => Promise<void> | void;
 
@@ -14,6 +15,8 @@ type SaveProps = {
 };
 
 const Save = (props: SaveProps) => {
+  const { updateSave } = useSave({ GameID: props.data.GameID });
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     const intlDate = new Intl.DateTimeFormat("en-US").format(date);
@@ -37,7 +40,16 @@ const Save = (props: SaveProps) => {
         </Button>
       </WithTooltip>
 
-      <Typography className="col-span-5 w-0 grow">{props.data.Name}</Typography>
+      <NameInput
+        onSubmit={(data) => {
+          updateSave({
+            ID: props.data.ID,
+            GameID: props.data.GameID,
+            Name: data.Name,
+          });
+        }}
+        name={props.data.Name}
+      />
 
       <Typography className="col-span-3 px-2 text-center">
         {formatDate(props.data.CreatedAt)}

frontend/src/hooks/useSave.tsx

@@ -9,6 +9,7 @@ import {
   OverwriteSave,
   RemoveQuickSave,
   RemoveSave,
+  UpdateSave,
 } from "@wailsjs/go/backend/Save";
 
 export type SaveSingle = {
@@ -76,6 +77,12 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
       OverwriteSave(s.ID, s.GameID),
   });
 
+  const { mutateAsync: updateSave } = useMutation({
+    mutationFn: (s: Pick<SaveSingle, "ID" | "GameID" | "Name">) =>
+      UpdateSave(s.ID, s.GameID, s.Name),
+    onSuccess: invalidateSavesQuery,
+  });
+
   return {
     querySaves,
     queryQuickSave,
@@ -86,6 +93,7 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
     loadSave,
     loadQuickSave,
     overwriteSave,
+    updateSave,
   };
 };