feat(sidebar): add image edit modal

app/src/components/FileEditor/FileEditor.tsx

@@ -1,17 +1,63 @@
-import { TextInput } from "@mantine/core";
+import { UserContentFileElement } from "@/types";
+import { Button, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-const FileEditor = () => {
-  const form = useForm();
+const FileEditor = ({ element }: {
+  element: UserContentFileElement
+}) => {
+  const queryClient = useQueryClient();
+
+  const updateFileMutation = useMutation({
+    mutationFn: (values) => fetch(`https://pandadiestro.xyz/services/stiller/file`, {
+      method: 'PATCH',
+      body: JSON.stringify(values)
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['user/media'] })
+    }
+  });
+
+  const form = useForm({
+    initialValues: {
+      title: element.title,
+      description: element.description
+    }
+  });
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    await updateFileMutation.mutateAsync({ ...values, id: element.id } as any);
+  });
 
   return (
-    <form>
-      <div className="stack gap-sm">
-        <TextInput
-          label="Título"
-          placeholder="Título de la obra"
-        />
+    <form onSubmit={handleSubmit}>
+      <div className="stack gap-lg">
+        <div className="stack gap-sm">
+          <TextInput
+            label="Título"
+            placeholder="Título de la obra"
+            required
+            {...form.getInputProps('title')}
+            key={form.key('title')}
+          />
+          <TextInput
+            label="Descripción"
+            placeholder="Descripción de la obra"
+            {...form.getInputProps('description')}
+            key={form.key('description')}
+          />
+        </div>
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={!form.isDirty()}
+          bg={form.isDirty() ? 'black' : 'gray.7'}
+        >
+          Actualizar
+        </Button>
       </div>
     </form>  
   )
 };
+
+export default FileEditor;

app/src/components/FileEditor/index.tsx

@@ -0,0 +1,3 @@
+import FileEditor from "./FileEditor";
+
+export default FileEditor;

app/src/pages/Editor/components/ContentSidebarElement.tsx

@@ -1,4 +1,6 @@
+import FileEditor from "@/components/FileEditor";
 import { DRAG_PORTAL_ID, smallIconProps } from "@/constants";
+import { useMetagalleryStore } from "@/providers/MetagalleryProvider";
 import { useEditorStore } from "@/stores/editorAction";
 import { UserContentFileElement } from "@/types";
 import { Button, Card, Image, Menu, Portal, rem, Text } from "@mantine/core";
@@ -70,7 +72,12 @@ const ContentSidebarElement = ({ element }: { element: UserContentFileElement })
                   </Button>
                 </Menu.Target>
                 <Menu.Dropdown>
-                  <Menu.Item leftSection={<IconEdit style={{ width: rem(14) }} />}>
+                  <Menu.Item 
+                    leftSection={<IconEdit style={{ width: rem(14) }} />}
+                    onClick={() => useMetagalleryStore.getState().openModal(
+                      <FileEditor element={element} />
+                    )}
+                  >
                     Editar
                   </Menu.Item>
                   <Menu.Item leftSection={<IconDownload style={{ width: rem(14) }} />}>

app/src/types.ts

@@ -1,10 +1,10 @@
 // Represents a row in the 'file' table
 export interface UserContentFileElement {
-  id: number,
-  url: string,
-  title?: string,
+  id:           number,
+  url:          string,
+  title:        string,
   description?: string,
-  type: 'model3d' | 'image',
+
 }
 
 export type SlotVertex = readonly [number, number, number];