fix backend breaking changes

app/README.md

@@ -20,4 +20,4 @@
 - Virtual museum: <https://github.com/r23/Virtual-Reality-Museum>
   - <https://github.com/r23/Virtual-Reality-Museum/blob/a37c16ce8cf00addeab8600c728ad04b925961e7/index.html#L132>
   - <https://github.com/r23/Virtual-Reality-Museum/blob/master/models/good_samaritan.mtl>
-- SVG Editor: <https://svgedit.netlify.app/>
+- SVG Editor: <https://svgedit.netlify.app/editor/index.html>

app/src/components/Empty/Empty.tsx

@@ -1,6 +1,6 @@
 const Empty = () => {
   return (
-    <p className="fz-xs c-dimmed ta-center p-sm">
+    <p className="fz-sm c-dimmed ta-center p-sm">
       No se encontraron resultados
     </p>
   );

app/src/components/Overlays/LoadingScreen.tsx

@@ -1,9 +1,14 @@
 import { Center, Stack, Text } from "@mantine/core";
 import { AppIcon } from "../AppIcon";
 
-export const LoadingScreen = () => {
+type LoadingScreenProps = {
+  h?: number;
+  mt?: number;
+};
+
+export const LoadingScreen = ({ h, mt }: LoadingScreenProps) => {
   return (
-    <Center h={'100vh'}>
+    <Center h={h ? h : '100vh'} mt={mt}>
       <Stack align="center">
         <AppIcon animated size={100} />
         <Text size="xl" mt={18}>Cargando metagallery...</Text>

app/src/pages/Dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Menu, Search, Plus, Layout, Edit, Copy, Check } from "lucide-react";
 import { Link } from "wouter";
-import { Button, Modal, ScrollArea } from "@mantine/core";
+import { Box, Button, Loader, Modal, ScrollArea, Text, Title } from "@mantine/core";
 import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
 import { useUser } from "@/stores/useUser";
 import styles from "./GalleryDashboard.module.css";
@@ -86,8 +86,8 @@ export const GalleryDashboard = () => {
   const [showCommunityProjects, setShowCommunityProjects] = useState(false);
   const { user, loading } = useUser();
 
-  const { response: userGalleries } = useApi<StillerGallery[]>('/gallery');
-  const { response: communityGalleries } = useApi<StillerGallery[]>('/galleryall');
+  const { response: userGalleries, isLoading: galleryLoading } = useApi<StillerGallery[]>('/gallery');
+  const { response: communityGalleries, isLoading: galleryallLoading } = useApi<StillerGallery[]>('/galleryall');
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -182,7 +182,30 @@ export const GalleryDashboard = () => {
             </Button>
           </div>
         </div>
-
+        {
+          (galleryLoading || galleryallLoading) && (
+            <Box mt={72} display={'flex'} style={{ justifyContent: 'center' }}>
+              <Loader size={30} />
+            </Box>
+          )
+        }
+        {
+          (showCommunityProjects && communityGalleries && communityGalleries.data.length === 0) && (
+            <Box mt={72} display={'flex'} style={{ justifyContent: 'center' }}>
+              <p>No hay proyectos de la comunidad</p>
+            </Box>
+          )
+        }
+        {
+          (!showCommunityProjects && userGalleries && userGalleries.data.length === 0) && (
+            <Box mt={72} display={'flex'} style={{ alignItems: 'center', flexDirection: 'column', gap: 18 }}>
+              <Title order={5}>Aquí aparecerán tus proyectos 🖼️</Title>
+              <Text td="underline" c={'orange'} style={{ cursor: 'pointer' }} onClick={() => {
+                setIsModalOpen(true);
+              }}>Crea tu primera galería</Text>
+            </Box>
+          )
+        }
         <div className={styles.galleryGrid}>
           {showCommunityProjects
             ? communityGalleries && communityGalleries.data.map((gallery, index) => (

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

@@ -1,7 +1,6 @@
 .container {
   min-height: 100vh;
   position: relative;
-  margin-bottom: 32px;
 }
 
 .overlay {
@@ -232,6 +231,8 @@
   display: grid;
   justify-items: center;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  margin-right: 32px;
+  margin-left: 32px;
   gap: 1.5rem;
 }
 

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

@@ -1,6 +1,6 @@
 import { useApi } from "@/hooks/useApi";
 import { TemplateListItem } from "@/types";
-import { Group, Image, Radio, Text } from "@mantine/core";
+import { Box, Group, Image, Radio, Text } from "@mantine/core";
 import { useEffect, useState } from "react";
 import styles from './TemplateList.module.css';
 
@@ -22,18 +22,18 @@ export const TemplatesList = ({ onTemplateSelect }: TemplatesListProps) => {
   if (error) return <Text>Estamos experimentando problemas. Inténtalo de nuevo más tarde. 😔</Text>;
 
   if (isLoading || !response) {
-    return <Text>Cargando plantillas...</Text>;
+    return <Text w={600}>Cargando plantillas...</Text>;
   }
 
   const defaultVal = response.data[0].id.toString();
 
   return (
     <Radio.Group
-      mah={400}
       value={value ?? defaultVal}
       defaultValue={defaultVal}
       onChange={(val) => {
         setValue(val);
+        console.log({ val })
         onTemplateSelect(Number(val));
       }}
       style={{ overflow: 'auto', paddingRight: 12 }}
@@ -49,17 +49,18 @@ export const TemplatesList = ({ onTemplateSelect }: TemplatesListProps) => {
         >
           <Group wrap="nowrap" align="flex-start">
             <Radio.Indicator />
-            <Group wrap="nowrap" align="flex-start">
+            <Group align="flex-start">
               <Image
                 alt={template.title}
+                fit="contain"
                 width={200}
                 height={150}
                 src={`https://pandadiestro.xyz/services/stiller/template/info/${template.id}/thumbnail`}
               />
-              <div>
+              <Box flex={1}>
                 <Text className={styles.label}>{template.title}</Text>
                 <Text className={styles.description}>{template.description}</Text>
-              </div>
+              </Box>
             </Group>
           </Group>
         </Radio.Card>

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

@@ -152,7 +152,8 @@ const SidebarInnerContent = () => {
         <TextInput
           variant="transparent"
           placeholder="¿Qué estás buscando?"
-          size="xs"
+          size="sm"
+          w={'100%'}
           leftSection={<IconSearch {...secondaryIconProps} />}
           value={filterInput}
           onChange={(e) => setFilterInput(e.currentTarget.value)}
@@ -176,11 +177,9 @@ const SidebarInnerContent = () => {
           (props) => (
             <Button
               size="sm"
+              variant='default'
               leftSection={<IconUpload {...primaryIconProps} />}
               {...props}
-              style={{
-                color: 'var(--mantine-color-white-7)',
-              }}
             >
               Añadir contenido
             </Button>

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

@@ -39,8 +39,6 @@ export const GalleryCanvas2D = memo(({ gallery, triggerReRender }: GalleryCanvas
     if (bounds) setViewport({ x: bounds.width, y: bounds.height });
   };
 
-  console.log('CANVAS SHIT')
-
   useEffect(() => {
     handleViewportResize();
     window.addEventListener('resize', handleViewportResize);

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

@@ -54,7 +54,7 @@ export const MainButtons = ({ onPreviewButton, onClosePreviewButton: closePrevie
             Visualizar
           </Button>
         )}
-      </Group>
+      </Group >
 
       <DeployModal
         isOpen={isModalOpen}

app/src/pages/Editor/components/blocks/Model3DBlock.tsx

@@ -10,7 +10,6 @@ import { Text } from '@mantine/core';
 import { useUser } from '@/stores/useUser';
 import { mutate } from 'swr';
 import { useQueryClient } from '@tanstack/react-query';
-import { useForceUpdate } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 
 type Model3DBlockProps = {

app/src/pages/Editor/components/blocks/PictureSlot.tsx

@@ -1,16 +1,15 @@
 import useImage from 'use-image';
 import { memo, useState } from 'react';
 import { Text } from '@mantine/core';
-import { Image, Rect, Group, Text as Text3D } from 'react-konva';
-import { copyGalleryWithSlotResId, setCursor } from '@/utils';
+import { Image, Rect, Group } from 'react-konva';
+import { setCursor } from '@/utils';
 import { useEditorStore } from '@/stores/editorAction';
 import { useMetagalleryStore } from '@/providers/MetagalleryProvider';
 import { CORNER_RADIUS, FRAME_STROKE_WIDTH, noImageSrc } from '@/constants';
-import { JSONValue, SlotVertices, StillerGallery } from '@/types';
+import { JSONValue, SlotVertices } from '@/types';
 import { cosine, getFrameAngle, getFrameHeight, getFrameWidth, sine, v3tov2 } from '@/pages/Editor/utils';
 import { useUser } from '@/stores/useUser';
-import { ApiResponse, useApi } from '@/hooks/useApi';
-import { mutate, useSWRConfig } from 'swr';
+import { mutate } from 'swr';
 import { notifications } from '@mantine/notifications';
 
 type PictureSlotProps = {
@@ -67,7 +66,7 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
     <Group>
       { /* Base color and border */}
       <Rect
-        x={pos[0]}
+        x={-pos[0] - frameWidth}
         y={pos[1]}
         width={frameWidth}
         height={frameHeight}
@@ -133,7 +132,7 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
       { /* Rendered image */}
       {
         image && <Image
-          x={pos[0] - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
+          x={-pos[0] - frameWidth - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
           y={pos[1] + imgOffsetY * cosine(rotation) + imgOffsetX * sine(rotation)}
           width={imgWidth}
           height={imgHeight}

app/src/pages/Editor/index.tsx

@@ -31,7 +31,7 @@ export const Editor = ({ gallery }: { gallery: string }) => {
 
   return (
     <>
-      <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden' }}>
+      <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden', backgroundColor: 'var(--mantine-color-body)' }}>
         <div id={DRAG_PORTAL_ID} style={{ position: 'absolute' }}></div>
         <div style={{ display: 'flex', justifyContent: 'space-between', minHeight: '70px', maxHeight: '70px' }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', flexWrap: 'nowrap', paddingLeft: '16px' }}>

app/src/pages/Gallery3D/Experience.tsx

@@ -8,16 +8,26 @@ import { useEffect, useRef, useState } from 'react';
 import { DynamicPainting } from './components/gallery/DynamicPainting';
 import { DynamicSculpture } from './components/gallery/DynamicSculpture';
 import { StillerGallery } from '@/types';
+import { useLocation } from 'wouter';
 
 type ExperienceProps = {
   gallery: string;
   onLoad: () => void;
 };
 
 export const Experience = ({ gallery, onLoad }: ExperienceProps) => {
-  const { response } = useApi<StillerGallery>(`/gallery/${gallery}`);
+  const { response, error } = useApi<StillerGallery>(`/gallery/${gallery}`);
   const [gravityEnabled, setGravityEnabled] = useState(false);
 
+  const [, setLocation] = useLocation();
+
+  useEffect(() => {
+    if (error) {
+      window.alert('La galería no existe');
+      setLocation('/');
+    }
+  }, [error])
+
   return (
     <>
       <Perf position="top-right" minimal />

app/src/pages/Gallery3D/index.tsx

@@ -30,18 +30,18 @@ export const Gallery3D = ({ gallery, withTopOffset }: Gallery3DProps) => {
   });
 
   return (
-    <div ref={ref} style={{ maxHeight: '100svh', height: '100svh', width: '100svw' }}>
+    <div ref={ref} style={{ maxHeight: '100svh', height: '100svh', width: '100svw', backgroundColor: 'var(--mantine-color-body)' }}>
       {
         (!hasMouse && !loading) && (
           <>
-            <Button size='compact-sm' onClick={() => store.enterVR()} style={{ position: 'absolute', zIndex: 69, top: 8, left: '3.5rem' }}>
+            <Button size='compact-sm' onClick={() => store.enterVR()} style={{ height: 32, position: 'absolute', zIndex: 69, top: withTopOffset ? 78 : 8, left: '3.5rem' }}>
               <IconBadgeVr />
             </Button>
             <EcctrlJoystick />
           </>
         )
       }
-      <Button size='compact-sm' onClick={() => toggle()} style={{ position: 'absolute', zIndex: 69, top: 8, left: 8 }}>
+      <Button size='compact-sm' onClick={() => toggle()} style={{ height: 32, position: 'absolute', zIndex: 69, top: withTopOffset ? 78 : 8, left: 8 }}>
         {
           fullscreen ? <IconMaximizeOff /> : <IconMaximize />
         }

app/templates/gallery3/data.json

@@ -0,0 +1,16 @@
+{
+  "origin": [-7.8, -4.34],
+  "slots": [
+      {
+          "ref": "center",
+          "type": "3d",
+          "props": {
+              "scale": 1.5,
+              "rotate": true
+          },
+          "v": [
+              [0, 0.7822, -3.103]
+          ]
+      }
+  ]
+}