added shortcut "b" key to open/browse 3d assets modal

frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts

@@ -4,6 +4,7 @@ import {
   hotkeysStatus,
   outlinerState,
   showObjectPanel,
+  assetModalVisible,
 } from "../signals";
 import {
   OrbitControls,
@@ -292,6 +293,11 @@ export class MouseControls {
       return;
     } else if (event.key === "k") {
       this.toggleFKMode();
+    } else if (event.key === "b") {
+      // Open asset modal
+      event.preventDefault();
+      assetModalVisible.value = true;
+      return;
     }
 
     if ((event.ctrlKey || event.metaKey) && !this.isProcessing) {

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

@@ -22,6 +22,7 @@ import {
   demoCharacterItems,
   assetModalVisibleDuringDrag,
   reopenAfterDragSignal,
+  assetModalVisible,
 } from "../../signals";
 import { MediaItem } from "../../models";
 import { useUserObjects, useFeaturedObjects } from "../SidePanelTabs/hooks";
@@ -73,7 +74,7 @@ const AllTabSection = ({
   </div>
 );
 
-export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
+export const AssetModal = () => {
   useSignals();
   const [activeLibraryTab, setActiveLibraryTab] = useState("library");
   const [activeAssetTab, setActiveAssetTab] = useState("all");
@@ -81,20 +82,24 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
   const [reopenAfterAdd, setReopenAfterAdd] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
+  const handleClose = () => {
+    assetModalVisible.value = false;
+  };
+
   // Update the signal when the preference changes
   useEffect(() => {
     reopenAfterDragSignal.value = reopenAfterAdd;
   }, [reopenAfterAdd]);
 
   useEffect(() => {
-    if (isOpen) {
+    if (assetModalVisible.value) {
       // Small delay to ensure the modal is fully mounted
       const timer = setTimeout(() => {
         searchInputRef.current?.focus();
       }, 100);
       return () => clearTimeout(timer);
     }
-  }, [isOpen]);
+  }, [assetModalVisible.value]);
 
   // Fetch objects for different categories
   const { userObjects: userCharacters } = useUserObjects({
@@ -262,10 +267,10 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
     if (reopenAfterAdd) {
       // Small delay to allow the modal to close and reopen
       setTimeout(() => {
-        onClose();
+        handleClose();
       }, 100);
     } else {
-      onClose();
+      handleClose();
     }
   };
 
@@ -273,8 +278,8 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
 
   return (
     <TransitionDialogue
-      isOpen={isOpen && assetModalVisibleDuringDrag.value}
-      onClose={onClose}
+      isOpen={assetModalVisible.value && assetModalVisibleDuringDrag.value}
+      onClose={handleClose}
       className="h-[640px] max-w-4xl"
       childPadding={false}
     >
@@ -350,7 +355,7 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => {
                     />
                   )}
                 </div>
-                <CloseButton onClick={onClose} />
+                <CloseButton onClick={handleClose} />
               </div>
               <div
                 className={twMerge(

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

@@ -7,8 +7,8 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { Button, ButtonIconSelect, Tooltip } from "~/components";
 import { EngineContext } from "../../contexts/EngineContext";
-import { useContext, useState } from "react";
-import { assetModalVisibleDuringDrag } from "../../signals";
+import { useContext } from "react";
+import { assetModalVisibleDuringDrag, assetModalVisible } from "../../signals";
 import { AssetModal } from "../AssetMenu/AssetModal";
 import { selectedMode } from "../../signals/selectedMode";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -17,6 +17,23 @@ export const Controls3D = () => {
   useSignals();
   const editorEngine = useContext(EngineContext);
 
+  const handleModeChange = (value: string) => {
+    selectedMode.value = value;
+    switch (value) {
+      case "move":
+        handleMoveArrows();
+        break;
+      case "rotate":
+        handleRotateArrows();
+        break;
+      case "scale":
+        handleZoomArrows();
+        break;
+      default:
+        console.log("Unknown option");
+    }
+  };
+
   const handleMoveArrows = () => {
     if (!editorEngine) {
       return;
@@ -36,23 +53,6 @@ export const Controls3D = () => {
     editorEngine.change_mode("scale");
   };
 
-  const handleModeChange = (value: string) => {
-    selectedMode.value = value;
-    switch (value) {
-      case "move":
-        handleMoveArrows();
-        break;
-      case "rotate":
-        handleRotateArrows();
-        break;
-      case "scale":
-        handleZoomArrows();
-        break;
-      default:
-        console.log("Unknown option");
-    }
-  };
-
   const modes = [
     {
       value: "move",
@@ -74,11 +74,9 @@ export const Controls3D = () => {
     },
   ];
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
   const handleOpenModal = () => {
     assetModalVisibleDuringDrag.value = true;
-    setIsModalOpen(true);
+    assetModalVisible.value = true;
   };
 
   return (
@@ -88,7 +86,7 @@ export const Controls3D = () => {
           <div className="flex items-center justify-center gap-2.5">
             <div className="flex items-center gap-1">
               <Tooltip
-                content="Add 3D asset to scene"
+                content="Add 3D asset to scene (B)"
                 position="bottom"
                 delay={100}
                 closeOnClick
@@ -125,7 +123,7 @@ export const Controls3D = () => {
         </div>
       </div>
 
-      <AssetModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+      <AssetModal />
     </div>
   );
 };

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

@@ -139,6 +139,9 @@ export const Help = () => {
             <Plus></Plus>
             <Key button="V" />
           </Shortcut>
+          <Shortcut label="Open 3D Asset Modal">
+            <Key button="B" />
+          </Shortcut>
         </ShortcutsGroup>
       </div>
     </div>

frontend/editor3d/app/pages/PageEnigma/signals/assetModal.ts

@@ -2,3 +2,4 @@ import { signal } from "@preact/signals-react";
 
 export const assetModalVisibleDuringDrag = signal(true);
 export const reopenAfterDragSignal = signal(false);
+export const assetModalVisible = signal(false);