Merge remote-tracking branch 'origin/ui' into main-demo

app/src/components/footer/shortcutHelper.tsx

@@ -55,6 +55,7 @@ interface ShortcutHelperProps {
 const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
   setShowShortcuts,
 }) => {
+
   const shortcuts: ShortcutGroup[] = [
     // Essential
     {
@@ -310,6 +311,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
       >
         <CloseIcon />
       </button>
+      
       <div className="header">
         <div className="header-wrapper">
           {shortcuts.map((group) => (
@@ -326,8 +328,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
       </div>
 
       <div
-        className={`shortcut-wrapper ${
+        className={`shortcut-wrapper ${activeShortcuts.length === 1 ? "single-item" : ""
-          activeShortcuts.length === 1 ? "single-item" : ""
           }`}
       >
         {activeShortcuts.map((item) => (

app/src/components/layout/scenes/MainScene.tsx

@@ -212,7 +212,11 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
-      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
+
+      {
+        (commentPositionState !== null || selectedComment !== null) &&
+        <ThreadChat />
+      }
 
     </>
   );

app/src/components/ui/collaboration/Messages.tsx

@@ -231,7 +231,10 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
               <div className="time">{isEditableThread ? getRelativeTime(val.createdAt) : val.createdAt}</div>
             </div>
             {(val as Reply).creatorId === userId && (
-              <div className="more-options">
+              <div
+                className="more-options"
+                onMouseLeave={() => setOpenOptions(false)}
+              >
                 <button
                   className="more-options-button"
                   onClick={() => {
@@ -240,35 +243,41 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
                 >
                   <KebabIcon />
                 </button>
+
                 {openOptions && (
                   <div className="options-list">
                     <button
                       className="option"
                       onClick={(e) => {
                         e.preventDefault();
-                        setMode && setMode("edit")
+                        setMode && setMode("edit");
                         setOpenOptions(false);
                         setEditedThread && setEditedThread(true);
-                        setIsEditComment(true)
+                        setIsEditComment(true);
                       }}
                     >
                       Edit
                     </button>
-                    {!(isEditableThread) && <button
+
+                    {!isEditableThread && (
+                      <button
                         className="option"
                         onClick={() => {
                           handleDeleteAction((val as Reply).replyId);
                         }}
                       >
                         Delete
-                    </button>}
+                      </button>
+                    )}
                   </div>
                 )}
               </div>
             )}
+
             <div className="message">
               {"comment" in val ? val.comment : val.threadTitle}
             </div>
+            
           </div>
         </div >
       )}

app/src/components/ui/collaboration/ThreadChat.tsx

@@ -131,9 +131,10 @@ const ThreadChat: React.FC = () => {
     if (dragging) updatePosition(e, true);
   };
 
-  useEffect(() => {
+  // Commented this useEffect to prevent offset after user saved the comment
-    updatePosition({ clientX: position.x, clientY: position.y }, true);
+  // useEffect(() => {
-  }, [selectedComment]);
+  //   updatePosition({ clientX: position.x, clientY: position.y }, true);
+  // }, [selectedComment]);
 
 
   const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -144,6 +145,10 @@ const ThreadChat: React.FC = () => {
   };
 
   const handleCreateComments = async (e: any) => {
+    // Continue send or create message only there is only value avalibale 
+    // To prevent empty value
+
+    if (!value) return;
     e.preventDefault();
     try {
       // const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId,  selectedVersion?.versionId || "")/ 
@@ -163,6 +168,7 @@ const ThreadChat: React.FC = () => {
 
       // }
 
+
       if (threadSocket && mode === "create") {
         const addComment = {
           versionId: selectedVersion?.versionId || "",
@@ -190,7 +196,7 @@ const ThreadChat: React.FC = () => {
       //     removeComment(selectedComment?.threadId)
       //     setSelectedComment([])
       // }
-      console.log('threadSocket:threadChat ', threadSocket);
+
       if (threadSocket) {
         // projectId, userId, organization, threadId
         const deleteThread = {
@@ -258,7 +264,7 @@ const ThreadChat: React.FC = () => {
       };
 
       if (threadSocket) {
-        console.log('createThread: ', createThread);
+
 
         setInputActive(false);
         threadSocket.emit("v1:thread:create", createThread);

app/src/hooks/useCameraShortcuts.ts

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import type { CameraControls } from "@react-three/drei";
+
+export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>) => {
+    const { camera } = useThree();
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (!controlsRef.current) return;
+
+            // get current distance from camera to target
+            const target = new THREE.Vector3();
+            controlsRef.current.getTarget(target);
+
+            const distance = camera.position.distanceTo(target);
+            let pos: THREE.Vector3 | null = null;
+
+            switch (e.key) {
+                case "1": // Front
+                    pos = new THREE.Vector3(0, 0, distance).add(target);
+                    break;
+                case "3": // Right
+                    pos = new THREE.Vector3(distance, 0, 0).add(target);
+                    break;
+                case "7": // Top
+                    pos = new THREE.Vector3(0, distance, 0).add(target);
+                    break;
+                case "9": // Back
+                    pos = new THREE.Vector3(0, 0, -distance).add(target);
+                    break;
+            }
+
+            if (pos) {
+                controlsRef.current.setLookAt(
+                    pos.x, pos.y, pos.z, // camera position
+                    target.x, target.y, target.z, // keep same target
+                    true // smooth transition
+                );
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [controlsRef, camera]);
+};

app/src/modules/builder/builder.tsx

@@ -57,6 +57,7 @@ export default function Builder() {
     const { setHoveredPoint, setHoveredLine } = useBuilderStore();
     const { userId, organization } = getUserData();
 
+
     useEffect(() => {
         if (!toggleView) {
             setHoveredLine(null);

app/src/modules/scene/controls/controls.tsx

@@ -18,6 +18,7 @@ import ContextControls from "./contextControls/contextControls";
 import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
 import UndoRedo2DControls from "./undoRedoControls/undoRedo2D/undoRedo2DControls";
 import UndoRedo3DControls from "./undoRedoControls/undoRedo3D/undoRedo3DControls";
+import { useCameraShortcuts } from "../../../hooks/useCameraShortcuts";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
@@ -116,6 +117,7 @@ export default function Controls() {
             stopInterval();
         };
     }, [toggleView, state, socket]);
+    useCameraShortcuts(controlsRef);
 
     return (
         <>

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -241,10 +241,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         {Object.keys(zonesData).length !== 0 ? (
           <>
             {Object.values(zonesData).map((zone, index) => (
-              <>
-                { }
               <div
-                  key={index}
+                key={`${index}_${zone.zoneName}`}
                 className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
                   }`}
                 onClick={() => {
@@ -255,7 +253,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
               >
                 {zone.zoneName}
               </div>
-              </>
             ))}
           </>
         ) : (

app/src/styles/layout/sidebar.scss

@@ -516,6 +516,7 @@
               width: 50px;
               border-radius: 100px;
               cursor: pointer;
+
               &:hover {
                 outline: 1px solid var(--accent-color);
               }
@@ -586,6 +587,7 @@
               align-items: center;
               justify-content: center;
               border-radius: 8px;
+
               &:hover {
                 background: var(--background-color);
                 outline: 1px solid #aaaaaa29;
@@ -600,6 +602,7 @@
 
             .kebab-icon {
               display: flex;
+
               svg {
                 transform: rotate(90deg) scale(0.8);
               }
@@ -1434,6 +1437,11 @@
       padding: 12px;
       border-radius: #{$border-radius-large};
 
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      background: var(--background-color);
+
       .compare-simulations-header {
         font-weight: var(--font-weight-medium);
       }
@@ -1604,6 +1612,7 @@
       }
       .animations-list-wrapper {
         padding: 0 4px;
+
         .animations-list {
           margin: 2px 0;
           padding: 4px 12px;
@@ -1793,6 +1802,7 @@
       padding: 14px;
       padding-bottom: 0;
       margin-bottom: 8px;
+
       .input-toggle-container {
         padding: 4px 0;
         margin-bottom: 8px;

app/src/styles/scene/comments.scss

@@ -171,8 +171,8 @@
     .messages-wrapper {
       padding: 12px;
       padding-top: 0;
-      max-height: 50vh;
+      max-height: 36vh;
-      overflow-y: auto;
+      overflow: auto;
       .edit-container {
         .input-container {
           textarea {

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -221,8 +221,12 @@ const KeyPressListener: React.FC = () => {
 
     // Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
     handleSidebarShortcuts(keyCombination);
+
+
     // Active module selection (builder, simulation, etc.)
+    if (event.location === 0) { // Location 0 = standard keyboard (not numpad)
       handleModuleSwitch(keyCombination);
+    }
     // Common editing tools: cursor | delete | free-hand
     handlePrimaryTools(keyCombination);
     // Shortcuts specific to the builder module (e.g., drawing and measurement tools)