add New Gallery gallery button

app/src/components/NewGalleryButton/index.tsx

@@ -0,0 +1,23 @@
+import { primaryIconProps } from "@/constants";
+import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
+import { useMetagalleryStore } from "@/providers/MetagalleryProvider";
+import { Button, Text } from "@mantine/core";
+import { IconPrismPlus } from "@tabler/icons-react";
+
+export const NewGalleryButton = () => {
+  return (
+    <Button
+      variant="primary"
+      onClick={() => {
+        useMetagalleryStore.getState().openModal(
+          <NewGalleryForm />
+        );
+      }}
+      leftSection={(
+        <IconPrismPlus {...primaryIconProps} />
+      )}
+    >
+      Nueva galería
+    </Button>
+  );
+};

app/src/pages/Dashboard/GalleryDashboard.module.css

@@ -52,6 +52,8 @@
   gap: 0.75rem;
   padding: 0.75rem;
   border-radius: 0.5rem;
+  color: black;
+  text-decoration: none;
   border: none;
   background: none;
   cursor: pointer;

app/src/pages/Dashboard/components/NewGalleryForm.tsx

@@ -0,0 +1,104 @@
+import { Button, FileButton, Group, ScrollArea, Text, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { IconSearch, IconUpload } from "@tabler/icons-react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+type NewGalleryPayload = {
+  template: number;
+  slug: string;
+  title: string;
+  description: string;
+};
+
+export const NewGalleryForm = () => {
+  const [filterInput, setFilterInput] = useState('');
+  const queryClient = useQueryClient();
+  const form = useForm({
+    initialValues: {
+      title: 'Mi nueva galería',
+      slug: '',
+      description: '',
+      templateId: 0,
+    }
+  });
+
+  const uploadFileMutation = useMutation({
+    mutationFn: (data: NewGalleryPayload) => {
+      // const res = fetch('https://pandadiestro.xyz/services/stiller/gallery/new', {
+      //   method: 'POST',
+      //   headers: {
+      //     'token': localStorage.getItem('metagallery-token'),
+      //   } as any,
+      //   body: JSON.stringify(data),
+      // });
+      // return res;
+      console.log(data)
+      return Promise.resolve();
+    },
+    onSuccess: () => {
+      console.log('Gallery created 🎊');
+      queryClient.invalidateQueries({ queryKey: [`gallery/${form.values.slug}`] });
+    },
+    onError: (error) => {
+      console.error('Error uploading file', error);
+    }
+  });
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    await uploadFileMutation.mutateAsync({
+      title: values.title,
+      slug: values.slug,
+      description: values.description,
+      template: values.templateId,
+    });
+  });
+
+  return (
+    <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"
+            required
+            placeholder="Descripción de la obra"
+            {...form.getInputProps('description')}
+            key={form.key('description')}
+          />
+          <TextInput
+            label="URL"
+            placeholder="mi-galeria"
+            required
+            styles={{
+              section: {
+                width: 60,
+                color: 'gray',
+              },
+              input: {
+                paddingInlineStart: 187,
+              }
+            }}
+            {...form.getInputProps('slug')}
+            leftSection={<Text w={40}>metagallery.pages.dev/</Text>}
+            key={form.key('slug')}
+          />
+        </div>
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={!form.isDirty()}
+          bg={form.isDirty() ? 'black' : 'gray.7'}
+        >
+          Actualizar
+        </Button>
+      </div>
+    </form>
+  );
+}

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

@@ -22,9 +22,9 @@ import ContentSidebarElement from './ContentSidebarElement';
 import Empty from '@/components/Empty';
 
 interface UploadImagePayload {
-  "name":   string;
-  "type":   number;
-  "file":   File;
+  "name": string;
+  "type": number;
+  "file": File;
   "hashed": number;
 };
 
@@ -86,7 +86,7 @@ const ContentMasonry = ({ filterInput }: { filterInput: string }) => {
       });
       const data: UserContentFileElement[] = await res.json();
       return data;
-    }, 
+    },
   });
 
   if (!userMediaQuery.data) return <QueryBoiler query={userMediaQuery} />
@@ -100,15 +100,15 @@ const ContentMasonry = ({ filterInput }: { filterInput: string }) => {
   if (!filteredData.length) return <Empty />
 
   return (
-    <Masonry columnsCount={2} gutter="12px">  
+    <Masonry columnsCount={2} gutter="12px">
       {
         filteredData.map((file) => (
           <ContentSidebarElement key={file.id} element={file} />
         ))
       }
     </Masonry>
   )
-} 
+}
 
 // Sidebar content extracted for reusability
 const SidebarContent = () => {
@@ -180,18 +180,18 @@ const SidebarContent = () => {
         onChange={handleFileUpload}
         multiple
       >
-      {
-        (props) => (
-          <Button
-            size="sm"
-            leftSection={<IconUpload {...primaryIconProps} />}
-            {...props}
-          >
-            Añadir contenido
-          </Button>
-        )
-      }
+        {
+          (props) => (
+            <Button
+              size="sm"
+              leftSection={<IconUpload {...primaryIconProps} />}
+              {...props}
+            >
+              Añadir contenido
+            </Button>
+          )
+        }
       </FileButton>
     </>
   );
-} 
+}

app/src/pages/Home/components/Header.tsx

@@ -127,6 +127,7 @@ export const Header = () => {
                     id="username"
                     type="text"
                     placeholder="Nombre de usuario"
+                    autoComplete='off'
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                     required
@@ -190,6 +191,7 @@ export const Header = () => {
                     id="username"
                     type="text"
                     placeholder="Nombre de usuario"
+                    autoComplete='off'
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                     required