updated upload flow - auto open asset modal after upload

frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx

@@ -14,12 +14,11 @@ import {
   CHARACTER_MIXAMO_FILE_TYPE,
   IMAGEPLANE_FILE_TYPE,
 } from "~/enums";
-import { assetModalVisible } from "~/pages/PageEnigma/signals";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 interface Props {
   onClose: () => void;
-  onSuccess: () => void;
+  onSuccess: (category: FilterEngineCategories) => void;
   isOpen: boolean;
   title: string;
   titleIcon: IconDefinition;
@@ -42,16 +41,6 @@ const categoryFileTypes: Partial<Record<FilterEngineCategories, string[]>> = {
   [FilterEngineCategories.LOCATION]: Object.values(OBJECT_FILE_TYPE),
   [FilterEngineCategories.CREATURE]: Object.values(OBJECT_FILE_TYPE),
 };
-
-// Map engine categories to asset modal tabs
-const categoryToAssetTab: Partial<Record<FilterEngineCategories, string>> = {
-  [FilterEngineCategories.OBJECT]: "objects",
-  [FilterEngineCategories.CHARACTER]: "character",
-  [FilterEngineCategories.IMAGE_PLANE]: "image-planes",
-  [FilterEngineCategories.LOCATION]: "sets",
-  [FilterEngineCategories.CREATURE]: "creatures",
-};
-
 // Excluded category options for the upload modal
 const categoryOptions = Object.entries(FilterEngineCategories)
   .filter(
@@ -120,6 +109,14 @@ export function UploadModal3D({
     console.log("Initial selected category:", selectedCategory);
   }, [preselectedCategory, selectedCategory]);
 
+  useEffect(() => {
+    if (uploaderState.status === UploaderStates.success) {
+      onSuccess(selectedCategory);
+      onClose();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploaderState.status]);
+
   const UploaderModalContent = () => {
     switch (uploaderState.status) {
       case UploaderStates.ready:
@@ -166,25 +163,12 @@ export function UploadModal3D({
           </>
         );
       case UploaderStates.success: {
-        // Store the selected category and tab in sessionStorage
-        const assetTab = categoryToAssetTab[selectedCategory];
-        if (assetTab) {
-          sessionStorage.setItem("lastUploadedCategory", selectedCategory);
-          sessionStorage.setItem("lastUploadedTab", assetTab);
-          // Reopen the asset modal
-          assetModalVisible.value = true;
-        } else {
-          // Clear any existing stored values if we don't have a valid tab
-          sessionStorage.removeItem("lastUploadedCategory");
-          sessionStorage.removeItem("lastUploadedTab");
-        }
-        onSuccess();
-        onClose();
         return (
           <UploadSuccess
             title="3D model"
             onOk={() => {
               onClose();
+              onSuccess(selectedCategory);
             }}
           />
         );

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

@@ -81,6 +81,21 @@ const AllTabSection = ({
   </div>
 );
 
+const categoryToTabIdMap: Record<FilterEngineCategories, string> = {
+  [FilterEngineCategories.CHARACTER]: "characters",
+  [FilterEngineCategories.CREATURE]: "creatures",
+  [FilterEngineCategories.IMAGE_PLANE]: "image-planes",
+  [FilterEngineCategories.LOCATION]: "sets",
+  [FilterEngineCategories.OBJECT]: "objects",
+  [FilterEngineCategories.SKYBOX]: "skybox",
+  [FilterEngineCategories.ANIMATION]: "all",
+  [FilterEngineCategories.AUDIO]: "all",
+  [FilterEngineCategories.EXPRESSION]: "all",
+  [FilterEngineCategories.SCENE]: "all",
+  [FilterEngineCategories.SET_DRESSING]: "all",
+  [FilterEngineCategories.VIDEO_PLANE]: "all",
+};
+
 export const AssetModal = () => {
   useSignals();
   const [activeLibraryTab, setActiveLibraryTab] = useState("library");
@@ -104,6 +119,10 @@ export const AssetModal = () => {
     assetModalVisible.value = false;
   };
 
+  const handleOpen = () => {
+    assetModalVisible.value = true;
+  };
+
   useEffect(() => {
     if (assetModalVisible.value) {
       // Check for stored category and tab from upload
@@ -119,7 +138,10 @@ export const AssetModal = () => {
       const timer = setTimeout(() => {
         searchInputRef.current?.focus();
       }, 100);
-      return () => clearTimeout(timer);
+      return () => {
+        clearTimeout(timer);
+        // Ensure no side effects remain
+      };
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -406,21 +428,20 @@ export const AssetModal = () => {
   };
 
   const handleAddAsset = () => {
-    assetModalVisible.value = false;
+    handleClose();
     setIsUploadModalOpen(true);
     setSelectedCategory(null);
     setIsSelectVisible(true);
   };
 
   const handleAddSpecificAsset = (category: FilterEngineCategories) => {
-    console.log("Selected category:", category);
-    assetModalVisible.value = false;
+    handleClose();
     setIsUploadModalOpen(true);
     setSelectedCategory(category);
     setIsSelectVisible(false);
   };
 
-  const handleUploadSuccess = () => {
+  const handleUploadSuccess = (category: FilterEngineCategories) => {
     if (reopenAfterDragSignal.value) {
       // Small delay to allow the modal to close and reopen
       setTimeout(() => {
@@ -429,6 +450,23 @@ export const AssetModal = () => {
     } else {
       handleClose();
     }
+
+    // Use the provided category to find the AssetTab ID
+    const lastUploadedTabId = categoryToTabIdMap[category] || "all";
+
+    // Close the upload modal
+    setTimeout(() => {
+      sessionStorage.setItem("lastUploadedTab", lastUploadedTabId);
+      console.log("AssetModal: lastUploadedTabId set to:", lastUploadedTabId);
+      setIsUploadModalOpen(false);
+      handleOpen();
+    }, 300);
+
+    fetchUserCharacters();
+    fetchUserObjects();
+    fetchUserSets();
+    fetchUserCreatures();
+    fetchUserImagePlanes();
   };
 
   const clearSearch = () => setSearchTerm("");
@@ -581,21 +619,22 @@ export const AssetModal = () => {
                         </Button>
                         {currentTab.label}
                       </div>
-                      {activeAssetTab !== "skybox" && (
-                        <Button
-                          icon={faUpFromLine}
-                          onClick={() =>
-                            handleAddSpecificAsset(
-                              currentTab.engineCategory ||
-                                FilterEngineCategories.OBJECT,
-                            )
-                          }
-                          className="border-primary bg-primary/70 px-2 py-1 text-xs transition-colors hover:bg-primary"
-                        >
-                          Upload {getArticle(currentTab.labelSingle)}{" "}
-                          {currentTab.labelSingle}
-                        </Button>
-                      )}
+                      {activeAssetTab !== "skybox" &&
+                        activeAssetTab !== "all" && (
+                          <Button
+                            icon={faUpFromLine}
+                            onClick={() =>
+                              handleAddSpecificAsset(
+                                currentTab.engineCategory ||
+                                  FilterEngineCategories.OBJECT,
+                              )
+                            }
+                            className="border-primary bg-primary/70 px-2 py-1 text-xs transition-colors hover:bg-primary"
+                          >
+                            Upload {getArticle(currentTab.labelSingle)}{" "}
+                            {currentTab.labelSingle}
+                          </Button>
+                        )}
                     </div>
                   )}
                   {renderContent()}
@@ -609,7 +648,7 @@ export const AssetModal = () => {
         onClose={() => {
           setIsUploadModalOpen(false);
         }}
-        onSuccess={handleUploadSuccess}
+        onSuccess={(category) => handleUploadSuccess(category)}
         isOpen={isUploadModalOpen}
         title={`Upload ${selectedCategory ? (selectedCategory.toLowerCase().replace(/_/g, " ") === "location" ? "sets" : selectedCategory.toLowerCase().replace(/_/g, " ")) : "3D Asset"}`}
         titleIcon={!isSelectVisible ? currentTab.icon : faUpFromLine}