added more tabs to assets modal and save fix

frontend/editor2d/src/components/reusable/LoadingDots.tsx

@@ -1,42 +1,40 @@
-import { Transition } from '@headlessui/react';
-import { twMerge } from 'tailwind-merge';
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
 
-import { H4 } from '.';
+import { H4 } from ".";
 
 interface LoadingDotsProps {
   className?: string;
   isShowing?: boolean;
-};
+}
 
 interface LoadingDotsInnerProps {
   className?: string;
   isShowing?: boolean;
-  type?: 'typing'|'bricks';
+  type?: "typing" | "bricks";
   message?: string;
-};
+}
 
-export const LoadingDotsTyping = (props: LoadingDotsProps)=>{
-  return (
-    <LoadingDots {...props} />
-  )
-}
-export const LoadingDotsBricks = (props: LoadingDotsProps)=>{
-  return (
-    <LoadingDots {...props} type="bricks"/>
-  )
-}
+export const LoadingDotsTyping = (props: LoadingDotsProps) => {
+  return <LoadingDots {...props} />;
+};
+export const LoadingDotsBricks = (props: LoadingDotsProps) => {
+  return <LoadingDots {...props} type="bricks" />;
+};
 
 export function LoadingDots({
   className,
-  isShowing=true,
-  type = 'typing',
+  isShowing = true,
+  type = "typing",
   message,
-}: LoadingDotsInnerProps){
-  const classNames = twMerge("w-full h-full flex flex-col justify-center items-center bg-ui-background gap-6", className);
+}: LoadingDotsInnerProps) {
+  const classNames = twMerge(
+    "relative w-full h-full flex flex-col justify-center items-center bg-ui-background gap-6 z-50",
+    className,
+  );
 
-  return(
+  return (
     <Transition
-      className={classNames}
       show={isShowing}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -45,17 +43,11 @@ export function LoadingDots({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      { type==='typing' &&
-        <div className="dot-typing"></div>
-      }
-      { type==='bricks' &&
-        <div className="dot-bricks"></div>
-      }
-      {
-        message &&
-        <H4>{message}</H4>
-      }
+      <div className={classNames}>
+        {type === "typing" && <div className="dot-typing"></div>}
+        {type === "bricks" && <div className="dot-bricks"></div>}
+        {message && <H4>{message}</H4>}
+      </div>
     </Transition>
   );
-};
-
+}

frontend/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -134,7 +134,7 @@ export const PageEditor = () => {
             <PromptBox />
 
             <LoadingDots
-              className="absolute left-0 top-0"
+              className="absolute left-0 top-0 z-50"
               isShowing={editorLoader.value.isShowing}
               type="bricks"
               message={editorLoader.value.message}

frontend/editor3d/app/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx

@@ -6,9 +6,10 @@ import {
   faLayerGroup,
   faUser,
   faSun,
-  faTree,
   faCube,
   faChevronRight,
+  faMountainCity,
+  faDog,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, CloseButton, Input, Tooltip } from "~/components";
@@ -106,11 +107,6 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
     defaultErrorMessage: "Error fetching user objects",
   });
 
-  const { userObjects: userNature } = useUserObjects({
-    filterEngineCategories: [FilterEngineCategories.SET_DRESSING],
-    defaultErrorMessage: "Error fetching user nature assets",
-  });
-
   const { featuredObjects: featuredCharacters } = useFeaturedObjects({
     filterEngineCategories: [FilterEngineCategories.CHARACTER],
     defaultErrorMessage: "Error fetching featured characters",
@@ -121,9 +117,24 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
     defaultErrorMessage: "Error fetching featured objects",
   });
 
-  const { featuredObjects: featuredNature } = useFeaturedObjects({
-    filterEngineCategories: [FilterEngineCategories.SET_DRESSING],
-    defaultErrorMessage: "Error fetching featured nature assets",
+  const { userObjects: userSets } = useUserObjects({
+    filterEngineCategories: [FilterEngineCategories.LOCATION],
+    defaultErrorMessage: "Error fetching user sets",
+  });
+
+  const { featuredObjects: featuredSets } = useFeaturedObjects({
+    filterEngineCategories: [FilterEngineCategories.LOCATION],
+    defaultErrorMessage: "Error fetching featured sets",
+  });
+
+  const { userObjects: userCreatures } = useUserObjects({
+    filterEngineCategories: [FilterEngineCategories.CREATURE],
+    defaultErrorMessage: "Error fetching user creatures",
+  });
+
+  const { featuredObjects: featuredCreatures } = useFeaturedObjects({
+    filterEngineCategories: [FilterEngineCategories.CREATURE],
+    defaultErrorMessage: "Error fetching featured creatures",
   });
 
   const libraryTabs = [
@@ -154,22 +165,32 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
           ? [...demoShapeItems.value, ...(featuredObjects ?? [])]
           : (userObjects ?? []),
     },
+    {
+      id: "sets",
+      label: "Sets",
+      icon: faMountainCity,
+      engineCategory: FilterEngineCategories.LOCATION,
+      items:
+        activeLibraryTab === "library"
+          ? (featuredSets ?? [])
+          : (userSets ?? []),
+    },
+    {
+      id: "creatures",
+      label: "Creatures",
+      icon: faDog,
+      engineCategory: FilterEngineCategories.CREATURE,
+      items:
+        activeLibraryTab === "library"
+          ? (featuredCreatures ?? [])
+          : (userCreatures ?? []),
+    },
     {
       id: "skybox",
       label: "Skybox",
       icon: faSun,
       items: demoSkyboxItems.value,
     },
-    {
-      id: "nature",
-      label: "Nature",
-      icon: faTree,
-      engineCategory: FilterEngineCategories.SET_DRESSING,
-      items:
-        activeLibraryTab === "library"
-          ? (featuredNature ?? [])
-          : (userNature ?? []),
-    },
   ];
 
   // Combine all items for the "All" tab

frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -223,7 +223,7 @@ export const ControlsTopButtons = () => {
             {
               disabled:
                 !scene.value.isModified ||
-                scene.value.ownerToken !==
+                scene.value.ownerToken ===
                   authentication.userInfo.value?.user_token,
               // save scene should be disabled if there are no changes
               label: "Save scene",

frontend/editor3d/app/pages/PageEnigma/comps/OnboardingHelper.tsx

@@ -38,7 +38,7 @@ export const OnboardingHelper = () => {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="glass pointer-events-none absolute left-1/2 top-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 transform items-center justify-center gap-2 rounded-2xl border-2 border-brand-primary !bg-brand-primary/10 px-5 py-4">
+      <div className="glass pointer-events-none absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 transform items-center justify-center gap-2 rounded-2xl border-2 border-brand-primary !bg-brand-primary/10 px-5 py-4">
         <div className="flex items-center">
           <p className="pr-3 text-lg font-semibold">Hold</p>
           <Mouse button="left" />