lab supports

Author: itspvty

fission/src/ui/components/TransformGizmoControl.tsx

@@ -4,7 +4,8 @@ import * as THREE from "three"
 import InputSystem from "@/systems/input/InputSystem"
 import GizmoSceneObject, { type GizmoMode } from "@/systems/scene/GizmoSceneObject"
 import World from "@/systems/World"
-import { Button, ToggleButton, ToggleButtonGroup } from "./StyledComponents"
+import { Button, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Tabs, Tab } from "@mui/material"
 import type TransformGizmoControlProps from "./TransformGizmoControlProps"
 
 /**
@@ -56,25 +57,10 @@ const TransformGizmoControl: React.FC<TransformGizmoControlProps> = ({
 
     const disableOptions = 2 <= (translateDisabled ? 1 : 0) + (rotateDisabled ? 1 : 0) + (scaleDisabled ? 1 : 0)
 
-    const buttons = []
-    if (!translateDisabled)
-        buttons.push(
-            <ToggleButton key="translate-button" value={"translate"}>
-                Move
-            </ToggleButton>
-        )
-    if (!rotateDisabled)
-        buttons.push(
-            <ToggleButton key="rotate-button" value={"rotate"}>
-                Rotate
-            </ToggleButton>
-        )
-    if (!scaleDisabled)
-        buttons.push(
-            <ToggleButton key="scale-button" value={"scale"}>
-                Scale
-            </ToggleButton>
-        )
+    const tabs: { label: string; value: GizmoMode }[] = []
+    if (!translateDisabled) tabs.push({ label: "Move", value: "translate" })
+    if (!rotateDisabled) tabs.push({ label: "Rotate", value: "rotate" })
+    if (!scaleDisabled) tabs.push({ label: "Scale", value: "scale" })
 
     useEffect(() => {
         const func = () => {
@@ -98,22 +84,20 @@ const TransformGizmoControl: React.FC<TransformGizmoControlProps> = ({
     // If there are no modes enabled, consider the UI pointless.
     return disableOptions ? undefined : (
         <>
-            <ToggleButtonGroup
-                value={mode}
-                exclusive
-                onChange={(_, v) => {
-                    if (v === undefined) return
-
-                    setMode(v)
-                    gizmo?.setMode(v)
-                }}
-                sx={{
-                    ...(sx ?? {}),
-                    alignSelf: "center",
+            <Tabs
+                value={tabs.findIndex(t => t.value === mode)}
+                onChange={(_, idx) => {
+                    const next = tabs[idx]
+                    if (!next) return
+                    setMode(next.value)
+                    gizmo?.setMode(next.value)
                 }}
+                sx={{ ...(sx ?? {}), alignSelf: "center" }}
             >
-                {buttons}
-            </ToggleButtonGroup>
+                {tabs.map(t => (
+                    <Tab key={t.value} label={t.label} />
+                ))}
+            </Tabs>
             {!rotateDisabled && (
                 <Button
                     className="self-center"

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -12,7 +12,8 @@ import type SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisB
 import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import type { PanelImplProps } from "@/ui/components/Panel"
-import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
+import { Button, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Tabs, Tab } from "@mui/material"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
 import { CloseType, type UIScreen, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import ChooseInputSchemePanel from "../ChooseInputSchemePanel"
@@ -297,25 +298,20 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
 
     return (
         <>
-            <ToggleButtonGroup
-                value={configurationType}
-                exclusive
-                onChange={(_e, v) => {
-                    if (v !== null) {
-                        setConfigurationType(v)
-                    }
-
+            <Tabs
+                value={CONFIG_OPTS.indexOf(configurationType)}
+                onChange={(_e, idx) => {
+                    const next = CONFIG_OPTS[idx as number]
+                    if (next) setConfigurationType(next)
                     setSelectedAssembly(undefined)
                     new ConfigurationSavedEvent()
                     setConfigMode(undefined)
                 }}
             >
                 {CONFIG_OPTS.map(opt => (
-                    <ToggleButton key={opt} value={opt}>
-                        {opt}
-                    </ToggleButton>
+                    <Tab key={opt} label={opt} />
                 ))}
-            </ToggleButtonGroup>
+            </Tabs>
             {configurationType === "INPUTS" && <ConfigureInputsInterface panel={panel!} />}
             {configurationType !== "INPUTS" && (
                 <>