Refactor styles for improved theme management, enhance input components, and add scene styles

app/src/components/layout/sidebarRight/Header.tsx

@@ -13,7 +13,7 @@ const Header: React.FC = () => {
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
   );
-  
+
   const [userManagement, setUserManagement] = useState(false);
 
   return (
@@ -31,9 +31,9 @@ const Header: React.FC = () => {
           >
             Share
           </div>
-          <div className="app-docker-button">
+          {/* <div className="app-docker-button">
             <AppDockIcon />
-          </div>
+          </div> */}
         </div>
         <div className="split"></div>
         <div className="users-container">
@@ -52,12 +52,7 @@ const Header: React.FC = () => {
             ))}
           </div>
           <div className="user-profile-container">
-            <div
-              className="user-profile"
-              style={{ background: "var(--accent-color)" }}
-            >
-              {userName[0]}
-            </div>
+            <div className="user-profile">{userName[0]}</div>
             <div className="user-organization">
               <img src={orgImg} alt="" />
             </div>

app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx

@@ -9,9 +9,13 @@ import RenameInput from "../../../ui/inputs/RenameInput";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import { handleResize } from "../../../../functions/handleResizePannel";
-import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
-import * as THREE from 'three';
-import * as Types from '../../../../types/world/worldTypes';
+import {
+  useSelectedActionSphere,
+  useSelectedPath,
+  useSimulationPaths,
+} from "../../../../store/store";
+import * as THREE from "three";
+import * as Types from "../../../../types/world/worldTypes";
 import InputToggle from "../../../ui/inputs/InputToggle";
 
 const ConveyorMechanics: React.FC = () => {
@@ -25,7 +29,9 @@ const ConveyorMechanics: React.FC = () => {
   const selectedPoint = useMemo(() => {
     if (!selectedActionSphere) return null;
     return simulationPaths
-      .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+      .filter(
+        (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+      )
       .flatMap((path) => path.points)
       .find((point) => point.uuid === selectedActionSphere.point.uuid);
   }, [selectedActionSphere, simulationPaths]);
@@ -43,11 +49,11 @@ const ConveyorMechanics: React.FC = () => {
               const newAction = {
                 uuid: THREE.MathUtils.generateUUID(),
                 name: `Action ${actionIndex + 1}`,
-                type: 'Inherit',
-                material: 'Inherit',
-                delay: 'Inherit',
-                spawnInterval: 'Inherit',
-                isUsed: false
+                type: "Inherit",
+                material: "Inherit",
+                delay: "Inherit",
+                spawnInterval: "Inherit",
+                isUsed: false,
               };
 
               return { ...point, actions: [...point.actions, newAction] };
@@ -68,13 +74,18 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.filter(
+                      (action) => action.uuid !== uuid
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -87,26 +98,33 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                actions: point.actions.map((action) =>
-                  action.uuid === uuid
-                    ? {
-                      ...action,
-                      type: actionType,
-                      material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
-                      delay: actionType === 'Delay' ? 'Inherit' : action.delay,
-                      spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
-                    }
-                    : action
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.map((action) =>
+                      action.uuid === uuid
+                        ? {
+                            ...action,
+                            type: actionType,
+                            material:
+                              actionType === "Spawn" || actionType === "Swap"
+                                ? "Inherit"
+                                : action.material,
+                            delay:
+                              actionType === "Delay" ? "Inherit" : action.delay,
+                            spawnInterval:
+                              actionType === "Spawn"
+                                ? "Inherit"
+                                : action.spawnInterval,
+                          }
+                        : action
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -115,15 +133,17 @@ const ConveyorMechanics: React.FC = () => {
     // Update the selected item to reflect changes
     if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
       const updatedAction = updatedPaths
-        .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
-        .flatMap(path => path.points)
-        .find(p => p.uuid === selectedActionSphere.point.uuid)
-        ?.actions.find(a => a.uuid === uuid);
+        .filter(
+          (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+        )
+        .flatMap((path) => path.points)
+        .find((p) => p.uuid === selectedActionSphere.point.uuid)
+        ?.actions.find((a) => a.uuid === uuid);
 
       if (updatedAction) {
         setSelectedItem({
           type: "action",
-          item: updatedAction
+          item: updatedAction,
         });
       }
     }
@@ -136,21 +156,21 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                actions: point.actions.map((action) =>
-                  action.uuid === uuid &&
-                    (action.type === 'Spawn' || action.type === 'Swap')
-                    ? { ...action, material }
-                    : action
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.map((action) =>
+                      action.uuid === uuid &&
+                      (action.type === "Spawn" || action.type === "Swap")
+                        ? { ...action, material }
+                        : action
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -162,8 +182,8 @@ const ConveyorMechanics: React.FC = () => {
         ...selectedItem,
         item: {
           ...selectedItem.item,
-          material
-        }
+          material,
+        },
       });
     }
   };
@@ -174,42 +194,47 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                actions: point.actions.map((action) =>
-                  action.uuid === uuid ? { ...action, delay } : action
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.map((action) =>
+                      action.uuid === uuid ? { ...action, delay } : action
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
     setSimulationPaths(updatedPaths);
   };
 
-  const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
+  const handleSpawnIntervalChange = (
+    uuid: string,
+    spawnInterval: number | string
+  ) => {
     if (!selectedActionSphere) return;
 
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                actions: point.actions.map((action) =>
-                  action.uuid === uuid ? { ...action, spawnInterval } : action
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.map((action) =>
+                      action.uuid === uuid
+                        ? { ...action, spawnInterval }
+                        : action
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -233,23 +258,23 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) => {
-            if (point.uuid === selectedActionSphere.point.uuid) {
-              const triggerIndex = point.triggers.length;
-              const newTrigger = {
-                uuid: THREE.MathUtils.generateUUID(),
-                name: `Trigger ${triggerIndex + 1}`,
-                type: '',
-                bufferTime: 0,
-                isUsed: false
-              };
+            ...path,
+            points: path.points.map((point) => {
+              if (point.uuid === selectedActionSphere.point.uuid) {
+                const triggerIndex = point.triggers.length;
+                const newTrigger = {
+                  uuid: THREE.MathUtils.generateUUID(),
+                  name: `Trigger ${triggerIndex + 1}`,
+                  type: "",
+                  bufferTime: 0,
+                  isUsed: false,
+                };
 
-              return { ...point, triggers: [...point.triggers, newTrigger] };
-            }
-            return point;
-          }),
-        }
+                return { ...point, triggers: [...point.triggers, newTrigger] };
+              }
+              return point;
+            }),
+          }
         : path
     );
 
@@ -262,13 +287,18 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    triggers: point.triggers.filter(
+                      (trigger) => trigger.uuid !== uuid
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -281,18 +311,20 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                triggers: point.triggers.map((trigger) =>
-                  trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    triggers: point.triggers.map((trigger) =>
+                      trigger.uuid === uuid
+                        ? { ...trigger, type: triggerType }
+                        : trigger
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -309,26 +341,25 @@ const ConveyorMechanics: React.FC = () => {
     }
   };
 
-
   // Update the toggle handlers to immediately update the selected item
   const handleActionToggle = (uuid: string) => {
     if (!selectedActionSphere) return;
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                actions: point.actions.map((action) => ({
-                  ...action,
-                  isUsed: action.uuid === uuid ? !action.isUsed : false,
-                })),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    actions: point.actions.map((action) => ({
+                      ...action,
+                      isUsed: action.uuid === uuid ? !action.isUsed : false,
+                    })),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -340,8 +371,8 @@ const ConveyorMechanics: React.FC = () => {
         ...selectedItem,
         item: {
           ...selectedItem.item,
-          isUsed: !selectedItem.item.isUsed
-        }
+          isUsed: !selectedItem.item.isUsed,
+        },
       });
     }
   };
@@ -353,19 +384,19 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                triggers: point.triggers.map((trigger) => ({
-                  ...trigger,
-                  isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
-                })),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    triggers: point.triggers.map((trigger) => ({
+                      ...trigger,
+                      isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+                    })),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -377,8 +408,8 @@ const ConveyorMechanics: React.FC = () => {
         ...selectedItem,
         item: {
           ...selectedItem.item,
-          isUsed: !selectedItem.item.isUsed
-        }
+          isUsed: !selectedItem.item.isUsed,
+        },
       });
     }
   };
@@ -389,18 +420,20 @@ const ConveyorMechanics: React.FC = () => {
     const updatedPaths = simulationPaths.map((path) =>
       path.type === "Conveyor"
         ? {
-          ...path,
-          points: path.points.map((point) =>
-            point.uuid === selectedActionSphere.point.uuid
-              ? {
-                ...point,
-                triggers: point.triggers.map((trigger) =>
-                  trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
-                ),
-              }
-              : point
-          ),
-        }
+            ...path,
+            points: path.points.map((point) =>
+              point.uuid === selectedActionSphere.point.uuid
+                ? {
+                    ...point,
+                    triggers: point.triggers.map((trigger) =>
+                      trigger.uuid === uuid
+                        ? { ...trigger, bufferTime }
+                        : trigger
+                    ),
+                  }
+                : point
+            ),
+          }
         : path
     );
 
@@ -412,13 +445,16 @@ const ConveyorMechanics: React.FC = () => {
         ...selectedItem,
         item: {
           ...selectedItem.item,
-          bufferTime
-        }
+          bufferTime,
+        },
       });
     }
   };
 
-  const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
+  const [selectedItem, setSelectedItem] = useState<{
+    type: "action" | "trigger";
+    item: any;
+  } | null>(null);
 
   useEffect(() => {
     setSelectedItem(null);
@@ -426,21 +462,20 @@ const ConveyorMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      {!selectedPath &&
+      {!selectedPath && (
         <div className="machine-mechanics-header">
           {selectedActionSphere?.path?.modelName || "point name not found"}
         </div>
-      }
-
-      {selectedPath &&
+      )}
 
+      {selectedPath && (
         <div className="machine-mechanics-header">
           {selectedPath.path.modelName || "path name not found"}
         </div>
-      }
+      )}
 
       <div className="machine-mechanics-content-container">
-        {!selectedPath &&
+        {!selectedPath && (
           <>
             <div className="actions">
               <div className="header">
@@ -458,16 +493,20 @@ const ConveyorMechanics: React.FC = () => {
                   {selectedPoint?.actions.map((action) => (
                     <div
                       key={action.uuid}
-                      className={`list-item ${selectedItem?.type === "action" &&
+                      className={`list-item ${
+                        selectedItem?.type === "action" &&
                         selectedItem.item?.uuid === action.uuid
-                        ? "active"
-                        : ""
-                        }`}
+                          ? "active"
+                          : ""
+                      }`}
                     >
                       <div
                         className="value"
-                        onClick={() => setSelectedItem({ type: "action", item: action })}
+                        onClick={() =>
+                          setSelectedItem({ type: "action", item: action })
+                        }
                       >
+                        <input type="radio" name="action" id="action" defaultChecked={action.isUsed}/>
                         <RenameInput value={action.name} />
                       </div>
                       <div
@@ -504,16 +543,20 @@ const ConveyorMechanics: React.FC = () => {
                   {selectedPoint?.triggers.map((trigger) => (
                     <div
                       key={trigger.uuid}
-                      className={`list-item ${selectedItem?.type === "trigger" &&
+                      className={`list-item ${
+                        selectedItem?.type === "trigger" &&
                         selectedItem.item?.uuid === trigger.uuid
-                        ? "active"
-                        : ""
-                        }`}
+                          ? "active"
+                          : ""
+                      }`}
                     >
                       <div
                         className="value"
-                        onClick={() => setSelectedItem({ type: "trigger", item: trigger })}
+                        onClick={() =>
+                          setSelectedItem({ type: "trigger", item: trigger })
+                        }
                       >
+                        <input type="radio" name="trigger" id="trigger" defaultChecked={trigger.isUsed} />
                         <RenameInput value={trigger.name} />
                       </div>
                       <div
@@ -535,7 +578,7 @@ const ConveyorMechanics: React.FC = () => {
               </div>
             </div>
           </>
-        }
+        )}
 
         <div className="selected-properties-container">
           {selectedItem && (
@@ -553,48 +596,69 @@ const ConveyorMechanics: React.FC = () => {
                   <LabledDropdown
                     defaultOption={selectedItem.item.type}
                     options={["Inherit", "Spawn", "Swap", "Despawn", "Delay"]}
-                    onSelect={(option) => handleActionSelect(selectedItem.item.uuid, option)}
+                    onSelect={(option) =>
+                      handleActionSelect(selectedItem.item.uuid, option)
+                    }
                   />
 
                   {/* Only show material dropdown for Spawn/Swap actions */}
-                  {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
+                  {(selectedItem.item.type === "Spawn" ||
+                    selectedItem.item.type === "Swap") && (
                     <LabledDropdown
-                      label={selectedItem.item.type === 'Spawn' ? 'Spawn Material' : 'Swap Material'}
+                      label={
+                        selectedItem.item.type === "Spawn"
+                          ? "Spawn Material"
+                          : "Swap Material"
+                      }
                       defaultOption={selectedItem.item.material}
                       options={["Inherit", "Crate", "Box"]}
-                      onSelect={(option) => handleMaterialSelect(selectedItem.item.uuid, option)}
+                      onSelect={(option) =>
+                        handleMaterialSelect(selectedItem.item.uuid, option)
+                      }
                     />
                   )}
 
                   {/* Only show delay input for Delay actions */}
-                  {selectedItem.item.type === 'Delay' && (
+                  {selectedItem.item.type === "Delay" && (
                     <InputWithDropDown
                       label="Delay Time"
-                      value={selectedItem.item.delay === 'Inherit'
-                        ? undefined
-                        : selectedItem.item.delay}
+                      value={
+                        selectedItem.item.delay === "Inherit"
+                          ? undefined
+                          : selectedItem.item.delay
+                      }
                       onChange={(value) => {
                         const numValue = parseInt(value);
                         handleDelayChange(
                           selectedItem.item.uuid,
-                          !value ? 'Inherit' : numValue
+                          !value ? "Inherit" : numValue
                         );
                       }}
                     />
                   )}
 
                   {/* Only show spawn interval for Spawn actions */}
-                  {selectedItem.item.type === 'Spawn' && (
+                  {selectedItem.item.type === "Spawn" && (
                     <InputWithDropDown
                       label="Spawn Interval"
                       min={0}
-                      defaultValue={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
-                      value={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
+                      defaultValue={
+                        selectedItem.item.spawnInterval === "Inherit"
+                          ? ""
+                          : selectedItem.item.spawnInterval.toString()
+                      }
+                      value={
+                        selectedItem.item.spawnInterval === "Inherit"
+                          ? ""
+                          : selectedItem.item.spawnInterval.toString()
+                      }
                       onChange={(value) => {
-                        handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
+                        handleSpawnIntervalChange(
+                          selectedItem.item.uuid,
+                          value === "" ? "Inherit" : parseInt(value)
+                        );
                       }}
                     />
-
                   )}
                 </>
               )}
@@ -609,9 +673,13 @@ const ConveyorMechanics: React.FC = () => {
                   />
 
                   <LabledDropdown
-                    defaultOption={selectedItem.item.type || "Select Trigger Type"}
+                    defaultOption={
+                      selectedItem.item.type || "Select Trigger Type"
+                    }
                     options={["On-Hit", "Buffer"]}
-                    onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
+                    onSelect={(option) =>
+                      handleTriggerSelect(selectedItem.item.uuid, option)
+                    }
                   />
 
                   {selectedItem.item.type === "Buffer" && (
@@ -619,23 +687,34 @@ const ConveyorMechanics: React.FC = () => {
                       label="Buffer Time"
                       value={selectedItem.item.bufferTime.toString()}
                       onChange={(value) => {
-                        handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
+                        handleTriggerBufferTimeChange(
+                          selectedItem.item.uuid,
+                          parseInt(value)
+                        );
                       }}
                     />
                   )}
                 </>
               )}
-
             </>
           )}
 
           {selectedPath && !selectedItem && (
-            <div key={selectedPath?.path.modeluuid || "none"} className="speed-control">
+            <div
+              key={selectedPath?.path.modeluuid || "none"}
+              className="speed-control"
+            >
               <InputWithDropDown
                 label="Conveyor Speed"
                 min={0}
-                value={selectedPath.path.speed === "Inherit" ? "" : selectedPath.path.speed.toString()}
-                onChange={(value) => handleSpeedChange((value === "") ? "Inherit" : parseInt(value))}
+                value={
+                  selectedPath.path.speed === "Inherit"
+                    ? ""
+                    : selectedPath.path.speed.toString()
+                }
+                onChange={(value) =>
+                  handleSpeedChange(value === "" ? "Inherit" : parseInt(value))
+                }
               />
             </div>
           )}
@@ -657,4 +736,4 @@ const ConveyorMechanics: React.FC = () => {
   );
 };
 
-export default ConveyorMechanics;
+export default ConveyorMechanics;