From de39f059a130a843f220dc549c7d3714093e9ee6 Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Sat, 20 Jul 2024 15:42:25 -0600
Subject: [PATCH 1/7] UI touchups and debug panel

---
 fission/src/Synthesis.tsx                     |   2 +
 fission/src/ui/components/MainHUD.tsx         | 104 +-----------
 fission/src/ui/panels/DebugPanel.tsx          | 153 ++++++++++++++++++
 .../ui/panels/mirabuf/ImportMirabufPanel.tsx  |   2 +-
 4 files changed, 161 insertions(+), 100 deletions(-)
 create mode 100644 fission/src/ui/panels/DebugPanel.tsx

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index c6c7048b12..9394c23aa7 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -66,6 +66,7 @@ import SceneOverlay from "./ui/components/SceneOverlay.tsx"
 import WPILibWSWorker from "@/systems/simulation/wpilib_brain/WPILibWSWorker.ts?worker"
 import WSViewPanel from "./ui/panels/WSViewPanel.tsx"
 import Lazy from "./util/Lazy.ts"
+import DebugPanel from "./ui/panels/DebugPanel.tsx"
 
 const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
@@ -267,6 +268,7 @@ const initialPanels: ReactElement[] = [
     <ImportMirabufPanel key="import-mirabuf" panelId="import-mirabuf" />,
     <PokerPanel key="poker" panelId="poker" />,
     <WSViewPanel key="ws-view" panelId="ws-view" />,
+    <DebugPanel key="debug" panelId="debug" />,
 ]
 
 export default Synthesis
diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 5b88f3efbb..0a15b1db5d 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -21,7 +21,7 @@ import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { Button } from "@mui/base/Button"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
 import Jolt from "@barclah/jolt-physics"
-import { AiOutlineDoubleRight } from "react-icons/ai"
+import { AiOutlineDoubleRight, AiOutlineTool } from "react-icons/ai"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 
 type ButtonProps = {
@@ -118,62 +118,8 @@ const MainHUD: React.FC = () => {
                         icon={<IoPeople />}
                         onClick={() => openModal("import-local-mirabuf")}
                     />
-                    <MainHUDButton
-                        value={"The Poker"}
-                        icon={<AiOutlineDoubleRight />}
-                        onClick={() => openPanel("poker")}
-                    />
-                    <MainHUDButton value={"Test God Mode"} icon={<IoGameControllerOutline />} onClick={TestGodMode} />
-                    <MainHUDButton
-                        value={"Clear Prefs"}
-                        icon={<IoBug />}
-                        onClick={() => PreferencesSystem.clearPreferences()}
-                    />
-                    <MainHUDButton
-                        value={"Refresh APS Token"}
-                        icon={<IoRefresh />}
-                        onClick={async () =>
-                            APS.isSignedIn() && APS.refreshAuthToken((await APS.getAuth())!.refresh_token, true)
-                        }
-                    />
-                    <MainHUDButton
-                        value={"Expire APS Token"}
-                        icon={<IoTimer />}
-                        onClick={() => {
-                            if (APS.isSignedIn()) {
-                                APS.setExpiresAt(Date.now())
-                                APS.getAuthOrLogin()
-                            }
-                        }}
-                    />
-                    <MainHUDButton value={"WS Viewer"} icon={<GrConnect />} onClick={() => openPanel("ws-view")} />
                 </div>
                 <div className="flex flex-col gap-0 bg-background w-full rounded-3xl">
-                    <MainHUDButton
-                        value={"Download Asset"}
-                        icon={<HiDownload />}
-                        onClick={() => openModal("download-assets")}
-                    />
-                    <MainHUDButton value={"RoboRIO"} icon={<BsCodeSquare />} onClick={() => openModal("roborio")} />
-                    <MainHUDButton
-                        value={"Driver Station"}
-                        icon={<GiSteeringWheel />}
-                        onClick={() => openPanel("driver-station")}
-                    />
-                    {/* MiraMap and OPFS Temp Buttons */}
-                    <MainHUDButton
-                        value={"Print Mira Maps"}
-                        icon={<BsCodeSquare />}
-                        onClick={() => {
-                            console.log(MirabufCachingService.GetCacheMap(MiraType.ROBOT))
-                            console.log(MirabufCachingService.GetCacheMap(MiraType.FIELD))
-                        }}
-                    />
-                    <MainHUDButton
-                        value={"Clear Mira"}
-                        icon={<GiSteeringWheel />}
-                        onClick={() => MirabufCachingService.RemoveAll()}
-                    />
                     <MainHUDButton
                         value={"Edit Scoring Zones"}
                         icon={<IoBasketball />}
@@ -182,31 +128,14 @@ const MainHUD: React.FC = () => {
                         }}
                     />
                     <MainHUDButton value={"Drivetrain"} icon={<FaCar />} onClick={() => openModal("drivetrain")} />
+                    <MainHUDButton value={"Configure"} icon={<FaGear />} onClick={() => openModal("config-robot")} />
                     <MainHUDButton
-                        value={"WS Test"}
-                        icon={<FaCar />}
-                        onClick={() => {
-                            // worker?.postMessage({ command: 'connect' });
-                            const miraObjs = [...World.SceneRenderer.sceneObjects.entries()].filter(
-                                x => x[1] instanceof MirabufSceneObject
-                            )
-                            console.log(`Number of mirabuf scene objects: ${miraObjs.length}`)
-                            if (miraObjs.length > 0) {
-                                const mechanism = (miraObjs[0][1] as MirabufSceneObject).mechanism
-                                const simLayer = World.SimulationSystem.GetSimulationLayer(mechanism)
-                                simLayer?.SetBrain(new WPILibBrain(mechanism))
-                            }
-                        }}
-                    />
-                    <MainHUDButton
-                        value={"Toasts"}
-                        icon={<FaCar />}
+                        value={"Debug Tools"}
+                        icon={<AiOutlineTool />}
                         onClick={() => {
-                            const type: ToastType = ["info", "warning", "error"][Math.floor(Random() * 3)] as ToastType
-                            addToast(type, type, "This is a test toast to test the toast system")
+                            openPanel("debug")
                         }}
                     />
-                    <MainHUDButton value={"Configure"} icon={<FaGear />} onClick={() => openModal("config-robot")} />
                 </div>
                 {userInfo ? (
                     <MainHUDButton
@@ -228,29 +157,6 @@ const MainHUD: React.FC = () => {
     )
 }
 
-async function TestGodMode() {
-    const robot: MirabufSceneObject = [...World.SceneRenderer.sceneObjects.entries()]
-        .filter(x => {
-            const y = x[1] instanceof MirabufSceneObject
-            return y
-        })
-        .map(x => x[1])[0] as MirabufSceneObject
-    const rootNodeId = robot.GetRootNodeId()
-    if (rootNodeId == undefined) {
-        console.error("Robot root node not found for god mode")
-        return
-    }
-    const robotPosition = World.PhysicsSystem.GetBody(rootNodeId).GetPosition()
-    const [ghostBody, _ghostConstraint] = World.PhysicsSystem.CreateGodModeBody(rootNodeId, robotPosition as Jolt.Vec3)
 
-    // Move ghostBody to demonstrate godMode movement
-    await new Promise(f => setTimeout(f, 1000))
-    World.PhysicsSystem.SetBodyPosition(
-        ghostBody.GetID(),
-        new JOLT.Vec3(robotPosition.GetX(), robotPosition.GetY() + 2, robotPosition.GetZ())
-    )
-    await new Promise(f => setTimeout(f, 1000))
-    World.PhysicsSystem.SetBodyPosition(ghostBody.GetID(), new JOLT.Vec3(2, 2, 2))
-}
 
 export default MainHUD
diff --git a/fission/src/ui/panels/DebugPanel.tsx b/fission/src/ui/panels/DebugPanel.tsx
new file mode 100644
index 0000000000..e4a4d2927c
--- /dev/null
+++ b/fission/src/ui/panels/DebugPanel.tsx
@@ -0,0 +1,153 @@
+import { AiOutlineTool } from "react-icons/ai"
+import Panel, { PanelPropsImpl } from "../components/Panel"
+import Button from "../components/Button"
+import World from "@/systems/World"
+import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
+import WPILibBrain from "@/systems/simulation/wpilib_brain/WPILibBrain"
+import { MainHUD_AddToast } from "../components/MainHUD"
+import { ToastType } from "../ToastContext"
+import { Random } from "@/util/Random"
+import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
+import { Box, styled } from "@mui/material"
+import { usePanelControlContext } from "../PanelContext"
+import APS from "@/aps/APS"
+import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+import JOLT from "@/util/loading/JoltSyncLoader"
+import Jolt from "@barclah/jolt-physics"
+import Label from "../components/Label"
+import { colorNameToVar } from "../ThemeContext"
+
+const LabelStyled = styled(Label)({
+    fontWeight: 700,
+    margin: "0pt",
+    marginTop: "0.5rem"
+})
+
+async function TestGodMode() {
+    const robot: MirabufSceneObject = [...World.SceneRenderer.sceneObjects.entries()]
+        .filter(x => {
+            const y = x[1] instanceof MirabufSceneObject
+            return y
+        })
+        .map(x => x[1])[0] as MirabufSceneObject
+    const rootNodeId = robot.GetRootNodeId()
+    if (rootNodeId == undefined) {
+        console.error("Robot root node not found for god mode")
+        return
+    }
+    const robotPosition = World.PhysicsSystem.GetBody(rootNodeId).GetPosition()
+    const [ghostBody, _ghostConstraint] = World.PhysicsSystem.CreateGodModeBody(rootNodeId, robotPosition as Jolt.Vec3)
+
+    // Move ghostBody to demonstrate godMode movement
+    await new Promise(f => setTimeout(f, 1000))
+    World.PhysicsSystem.SetBodyPosition(
+        ghostBody.GetID(),
+        new JOLT.Vec3(robotPosition.GetX(), robotPosition.GetY() + 2, robotPosition.GetZ())
+    )
+    await new Promise(f => setTimeout(f, 1000))
+    World.PhysicsSystem.SetBodyPosition(ghostBody.GetID(), new JOLT.Vec3(2, 2, 2))
+}
+
+const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
+    const { openPanel } = usePanelControlContext()
+
+    return (
+        <Panel
+            openLocation="center"
+            name={"The Poker"}
+            icon={<AiOutlineTool />}
+            panelId={panelId}
+            acceptEnabled={false}
+            cancelName="Close"
+        >
+            <Box
+                component="div"
+                display="flex"
+                flexDirection="column"
+                gap="0.25rem"
+                alignItems="center"
+                sx={{
+                    padding: "0.25rem",
+                    overflowY: "auto",
+                    borderRadius: "0.5rem",
+                    backgroundColor: colorNameToVar("BackgroundSecondary")
+                }}
+            >
+                <LabelStyled>Generic</LabelStyled>
+                <Button
+                    value={"Toasts"}
+                    onClick={() => {
+                        const type: ToastType = ["info", "warning", "error"][Math.floor(Random() * 3)] as ToastType
+                        MainHUD_AddToast(type, type, "This is a test toast to test the toast system")
+                    }}
+                />
+                <Button
+                    value={"The Poker"}
+                    onClick={() => {
+                        openPanel("poker")
+                    }}
+                />
+                <Button
+                    value={"Test God Mode"}
+                    onClick={TestGodMode}
+                />
+                <Button
+                    value={"Clear Prefs"}
+                    onClick={() => PreferencesSystem.clearPreferences()}
+                />
+                <LabelStyled>Autodesk Platform Services</LabelStyled>
+                <Button
+                    value={"Refresh APS Token"}
+                    onClick={async () =>
+                        APS.isSignedIn() && APS.refreshAuthToken((await APS.getAuth())!.refresh_token, true)
+                    }
+                />
+                <Button
+                    value={"Expire APS Token"}
+                    onClick={() => {
+                        if (APS.isSignedIn()) {
+                            APS.setExpiresAt(Date.now())
+                            APS.getAuthOrLogin()
+                        }
+                    }}
+                />
+                <LabelStyled>Caching Service</LabelStyled>
+                <Button
+                    value={"Print Mira Maps"}
+                    onClick={() => {
+                        console.log(MirabufCachingService.GetCacheMap(MiraType.ROBOT))
+                        console.log(MirabufCachingService.GetCacheMap(MiraType.FIELD))
+                    }}
+                />
+                <Button
+                    value={"Clear Mira Cache"}
+                    onClick={() => MirabufCachingService.RemoveAll()}
+                />
+                <LabelStyled>Code Simulation</LabelStyled>
+                <Button
+                    value={"WS Test"}
+                    onClick={() => {
+                        // worker?.postMessage({ command: 'connect' });
+                        const miraObjs = [...World.SceneRenderer.sceneObjects.entries()].filter(
+                            x => x[1] instanceof MirabufSceneObject
+                        )
+                        console.log(`Number of mirabuf scene objects: ${miraObjs.length}`)
+                        if (miraObjs.length > 0) {
+                            const mechanism = (miraObjs[0][1] as MirabufSceneObject).mechanism
+                            const simLayer = World.SimulationSystem.GetSimulationLayer(mechanism)
+                            simLayer?.SetBrain(new WPILibBrain(mechanism))
+                        }
+                    }}
+                />
+                <Button
+                    value={"WS Viewer"}
+                    onClick={() => {
+                        openPanel("ws-view")
+                    }}
+                />
+            </Box>
+        </Panel>
+    )
+}
+
+export default DebugPanel
diff --git a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
index faac3f954f..f0ddede265 100644
--- a/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
+++ b/fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx
@@ -392,7 +392,7 @@ const ImportMirabufPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
             cancelName="Back"
             openLocation="right"
         >
-            <div className="flex flex-col gap-2 bg-background-secondary rounded-md p-2">
+            <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2">
                 <ToggleButtonGroup
                     value={viewType}
                     exclusive

From f400d77f0d2553d3a7177604916ceb833a16a023 Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Sat, 20 Jul 2024 15:49:44 -0600
Subject: [PATCH 2/7] Formatted

---
 fission/src/ui/components/MainHUD.tsx | 19 +++----------------
 fission/src/ui/panels/DebugPanel.tsx  | 19 +++++--------------
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 0a15b1db5d..5fbde4f086 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -1,28 +1,17 @@
 import React, { useEffect, useState } from "react"
-import { BsCodeSquare } from "react-icons/bs"
 import { FaCar, FaGear, FaMagnifyingGlass, FaPlus } from "react-icons/fa6"
 import { BiMenuAltLeft } from "react-icons/bi"
-import { GrConnect, GrFormClose } from "react-icons/gr"
-import { GiSteeringWheel } from "react-icons/gi"
-import { HiDownload } from "react-icons/hi"
-import { IoBasketball, IoBug, IoGameControllerOutline, IoPeople, IoRefresh, IoTimer } from "react-icons/io5"
+import { GrFormClose } from "react-icons/gr"
+import { IoBasketball, IoGameControllerOutline, IoPeople } from "react-icons/io5"
 import { useModalControlContext } from "@/ui/ModalContext"
 import { usePanelControlContext } from "@/ui/PanelContext"
 import { motion } from "framer-motion"
 import logo from "@/assets/autodesk_logo.png"
 import { ToastType, useToastContext } from "@/ui/ToastContext"
-import { Random } from "@/util/Random"
-import WPILibBrain from "@/systems/simulation/wpilib_brain/WPILibBrain"
 import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS"
 import { UserIcon } from "./UserIcon"
-import World from "@/systems/World"
-import JOLT from "@/util/loading/JoltSyncLoader"
-import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { Button } from "@mui/base/Button"
-import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
-import Jolt from "@barclah/jolt-physics"
-import { AiOutlineDoubleRight, AiOutlineTool } from "react-icons/ai"
-import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+import { AiOutlineTool } from "react-icons/ai"
 
 type ButtonProps = {
     value: string
@@ -157,6 +146,4 @@ const MainHUD: React.FC = () => {
     )
 }
 
-
-
 export default MainHUD
diff --git a/fission/src/ui/panels/DebugPanel.tsx b/fission/src/ui/panels/DebugPanel.tsx
index e4a4d2927c..a29fee2d02 100644
--- a/fission/src/ui/panels/DebugPanel.tsx
+++ b/fission/src/ui/panels/DebugPanel.tsx
@@ -20,7 +20,7 @@ import { colorNameToVar } from "../ThemeContext"
 const LabelStyled = styled(Label)({
     fontWeight: 700,
     margin: "0pt",
-    marginTop: "0.5rem"
+    marginTop: "0.5rem",
 })
 
 async function TestGodMode() {
@@ -70,7 +70,7 @@ const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
                     padding: "0.25rem",
                     overflowY: "auto",
                     borderRadius: "0.5rem",
-                    backgroundColor: colorNameToVar("BackgroundSecondary")
+                    backgroundColor: colorNameToVar("BackgroundSecondary"),
                 }}
             >
                 <LabelStyled>Generic</LabelStyled>
@@ -87,14 +87,8 @@ const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
                         openPanel("poker")
                     }}
                 />
-                <Button
-                    value={"Test God Mode"}
-                    onClick={TestGodMode}
-                />
-                <Button
-                    value={"Clear Prefs"}
-                    onClick={() => PreferencesSystem.clearPreferences()}
-                />
+                <Button value={"Test God Mode"} onClick={TestGodMode} />
+                <Button value={"Clear Prefs"} onClick={() => PreferencesSystem.clearPreferences()} />
                 <LabelStyled>Autodesk Platform Services</LabelStyled>
                 <Button
                     value={"Refresh APS Token"}
@@ -119,10 +113,7 @@ const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
                         console.log(MirabufCachingService.GetCacheMap(MiraType.FIELD))
                     }}
                 />
-                <Button
-                    value={"Clear Mira Cache"}
-                    onClick={() => MirabufCachingService.RemoveAll()}
-                />
+                <Button value={"Clear Mira Cache"} onClick={() => MirabufCachingService.RemoveAll()} />
                 <LabelStyled>Code Simulation</LabelStyled>
                 <Button
                     value={"WS Test"}

From bfa750dfe187887fa2c3db165be85a8a35803ac1 Mon Sep 17 00:00:00 2001
From: LucaHaverty <lucahaverty@gmail.com>
Date: Mon, 22 Jul 2024 12:40:31 -0700
Subject: [PATCH 3/7] Icon changes

---
 fission/src/ui/components/MainHUD.tsx         | 33 +++++++++++--------
 fission/src/ui/components/Toast.tsx           |  4 +--
 fission/src/ui/components/Tooltip.tsx         |  4 +--
 fission/src/ui/modals/ExitSynthesisModal.tsx  |  4 +--
 fission/src/ui/modals/MatchResultsModal.tsx   |  4 +--
 .../src/ui/modals/UpdateAvailableModal.tsx    |  4 +--
 .../configuring/ResetAllInputsModal.tsx       |  4 +--
 .../theme-editor/DeleteAllThemesModal.tsx     |  4 +--
 .../theme-editor/DeleteThemeModal.tsx         |  4 +--
 .../mirabuf/ImportLocalMirabufModal.tsx       |  4 +--
 .../modals/spawning/ManageAssembliesModal.tsx |  4 +--
 fission/src/ui/panels/DebugPanel.tsx          |  4 +--
 .../configuring/scoring/ScoringZonesPanel.tsx |  2 ++
 .../configuring/scoring/ZoneConfigPanel.tsx   |  2 ++
 14 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 5fbde4f086..ee70bb27c8 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -1,8 +1,18 @@
 import React, { useEffect, useState } from "react"
-import { FaCar, FaGear, FaMagnifyingGlass, FaPlus } from "react-icons/fa6"
+import {
+    FaCar,
+    FaGear,
+    FaMagnifyingGlass,
+    FaPlus,
+    FaGamepad,
+    FaBasketball,
+    FaFileImport,
+    FaWrench,
+    FaScrewdriverWrench,
+} from "react-icons/fa6"
 import { BiMenuAltLeft } from "react-icons/bi"
-import { GrFormClose } from "react-icons/gr"
-import { IoBasketball, IoGameControllerOutline, IoPeople } from "react-icons/io5"
+import { FaXmark } from "react-icons/fa6"
+import { IoPeople } from "react-icons/io5"
 import { useModalControlContext } from "@/ui/ModalContext"
 import { usePanelControlContext } from "@/ui/PanelContext"
 import { motion } from "framer-motion"
@@ -11,7 +21,6 @@ import { ToastType, useToastContext } from "@/ui/ToastContext"
 import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS"
 import { UserIcon } from "./UserIcon"
 import { Button } from "@mui/base/Button"
-import { AiOutlineTool } from "react-icons/ai"
 
 type ButtonProps = {
     value: string
@@ -79,7 +88,7 @@ const MainHUD: React.FC = () => {
                         onClick={() => setIsOpen(false)}
                         className={`bg-none border-none focus-visible:outline-0 focus:outline-0 select-none`}
                     >
-                        <GrFormClose color="bg-icon" size={20} className="text-main-hud-close-icon" />
+                        <FaXmark color="bg-icon" size={20} className="text-main-hud-close-icon" />
                     </Button>
                 </div>
                 <MainHUDButton
@@ -91,27 +100,23 @@ const MainHUD: React.FC = () => {
                 <div className="flex flex-col gap-0 bg-background w-full rounded-3xl">
                     <MainHUDButton
                         value={"Manage Assemblies"}
-                        icon={<FaGear />}
+                        icon={<FaWrench />}
                         onClick={() => openModal("manage-assemblies")}
                     />
                     <MainHUDButton value={"Settings"} icon={<FaGear />} onClick={() => openModal("settings")} />
                     <MainHUDButton value={"View"} icon={<FaMagnifyingGlass />} onClick={() => openModal("view")} />
-                    <MainHUDButton
-                        value={"Controls"}
-                        icon={<IoGameControllerOutline />}
-                        onClick={() => openModal("change-inputs")}
-                    />
+                    <MainHUDButton value={"Controls"} icon={<FaGamepad />} onClick={() => openModal("change-inputs")} />
                     <MainHUDButton value={"MultiBot"} icon={<IoPeople />} onClick={() => openPanel("multibot")} />
                     <MainHUDButton
                         value={"Import Local Mira"}
-                        icon={<IoPeople />}
+                        icon={<FaFileImport />}
                         onClick={() => openModal("import-local-mirabuf")}
                     />
                 </div>
                 <div className="flex flex-col gap-0 bg-background w-full rounded-3xl">
                     <MainHUDButton
                         value={"Edit Scoring Zones"}
-                        icon={<IoBasketball />}
+                        icon={<FaBasketball />}
                         onClick={() => {
                             openPanel("scoring-zones")
                         }}
@@ -120,7 +125,7 @@ const MainHUD: React.FC = () => {
                     <MainHUDButton value={"Configure"} icon={<FaGear />} onClick={() => openModal("config-robot")} />
                     <MainHUDButton
                         value={"Debug Tools"}
-                        icon={<AiOutlineTool />}
+                        icon={<FaScrewdriverWrench />}
                         onClick={() => {
                             openPanel("debug")
                         }}
diff --git a/fission/src/ui/components/Toast.tsx b/fission/src/ui/components/Toast.tsx
index 3918463197..04d81dda0b 100644
--- a/fission/src/ui/components/Toast.tsx
+++ b/fission/src/ui/components/Toast.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect } from "react"
 import { ToastData, useToastContext } from "@/ui/ToastContext"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import { BsFillWrenchAdjustableCircleFill } from "react-icons/bs"
 import { AiFillWarning } from "react-icons/ai"
 import { BiSolidErrorCircle } from "react-icons/bi"
@@ -51,7 +51,7 @@ const Toast: React.FC<ToastData> = ({ id, type, title, description }) => {
                             onClick={handleClose}
                             className="toast-close bg-[rgba(0,0,0,0)] h-min aspect-square p-0"
                         >
-                            <GrFormClose size={20} className="text-main-text" />
+                            <FaXmark size={20} className="text-main-text" />
                         </button>
                         <p className="font-medium uppercase h-min">{title}</p>
                     </div>
diff --git a/fission/src/ui/components/Tooltip.tsx b/fission/src/ui/components/Tooltip.tsx
index 4c8ecdbeb3..deec78f58f 100644
--- a/fission/src/ui/components/Tooltip.tsx
+++ b/fission/src/ui/components/Tooltip.tsx
@@ -1,5 +1,5 @@
 import { TooltipControl, TooltipType } from "@/ui/TooltipContext"
-import { FaInfoCircle } from "react-icons/fa"
+import { FaCircleInfo } from "react-icons/fa6"
 import Label, { LabelSize } from "./Label"
 import Stack, { StackDirection } from "./Stack"
 
@@ -12,7 +12,7 @@ const Tooltip: React.FC<TooltipProps> = ({ type, controls }) => {
     if (type === "controls") {
         return (
             <div className="absolute flex flex-col gap-1 px-8 pt-2 pb-4 rounded-lg left-1/2 -translate-x-1/2 top-2 bg-background">
-                <FaInfoCircle className="text-main-text mx-auto pt-1 pb-2 w-8 h-8" />
+                <FaCircleInfo className="text-main-text mx-auto pt-1 pb-2 w-8 h-8" />
                 {controls?.map(c => (
                     <Stack
                         direction={StackDirection.Horizontal}
diff --git a/fission/src/ui/modals/ExitSynthesisModal.tsx b/fission/src/ui/modals/ExitSynthesisModal.tsx
index 1014e7a442..4dd03c53e3 100644
--- a/fission/src/ui/modals/ExitSynthesisModal.tsx
+++ b/fission/src/ui/modals/ExitSynthesisModal.tsx
@@ -1,12 +1,12 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import Label from "@/components/Label"
 
 const ExitSynthesisModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const isOnMainMenu = false
     return (
-        <Modal name={"Exit Synthesis?"} icon={<GrFormClose />} modalId={modalId} acceptName="Exit">
+        <Modal name={"Exit Synthesis?"} icon={<FaXmark />} modalId={modalId} acceptName="Exit">
             <Label>
                 {isOnMainMenu ? "Are you sure you wish to Exit?" : "Are you sure you wish to leave to main menu?"}
             </Label>
diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx
index 3fc1c9cf1b..cf24625bac 100644
--- a/fission/src/ui/modals/MatchResultsModal.tsx
+++ b/fission/src/ui/modals/MatchResultsModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import Stack, { StackDirection } from "@/components/Stack"
 import Label from "@/components/Label"
 
@@ -18,7 +18,7 @@ const MatchResultsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name={"Match Results"}
-            icon={<GrFormClose />}
+            icon={<FaXmark />}
             modalId={modalId}
             cancelName="Exit"
             middleName="Configure"
diff --git a/fission/src/ui/modals/UpdateAvailableModal.tsx b/fission/src/ui/modals/UpdateAvailableModal.tsx
index 6cbeb3cd27..2c567308c5 100644
--- a/fission/src/ui/modals/UpdateAvailableModal.tsx
+++ b/fission/src/ui/modals/UpdateAvailableModal.tsx
@@ -1,11 +1,11 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import Label from "@/components/Label"
 
 const UpdateAvailableModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
-        <Modal name={"Exit Synthesis"} icon={<GrFormClose />} modalId={modalId} acceptName="Update">
+        <Modal name={"Exit Synthesis"} icon={<FaXmark />} modalId={modalId} acceptName="Update">
             <Label>
                 A new update is available. <br />
                 Would you like to update?
diff --git a/fission/src/ui/modals/configuring/ResetAllInputsModal.tsx b/fission/src/ui/modals/configuring/ResetAllInputsModal.tsx
index 689cb04cde..778d31a14d 100644
--- a/fission/src/ui/modals/configuring/ResetAllInputsModal.tsx
+++ b/fission/src/ui/modals/configuring/ResetAllInputsModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import { useModalControlContext } from "@/ui/ModalContext"
 import DefaultInputs from "@/systems/input/DefaultInputs"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
@@ -11,7 +11,7 @@ const ResetAllInputsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name="Reset all Inputs??"
-            icon={<GrFormClose />}
+            icon={<FaXmark />}
             modalId={modalId}
             onAccept={() => {
                 const roboPrefs = PreferencesSystem.getAllRobotPreferences()
diff --git a/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
index 0fe082b267..76494d2365 100644
--- a/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteAllThemesModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import { useModalControlContext } from "@/ui/ModalContext"
 import { useTheme } from "@/ui/ThemeContext"
 
@@ -11,7 +11,7 @@ const DeleteAllThemesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name="Delete All Themes?"
-            icon={<GrFormClose />}
+            icon={<FaXmark />}
             modalId={modalId}
             onAccept={() => {
                 deleteAllThemes()
diff --git a/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
index e42da19e63..d10745de77 100644
--- a/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
+++ b/fission/src/ui/modals/configuring/theme-editor/DeleteThemeModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { GrFormClose } from "react-icons/gr"
+import { FaXmark } from "react-icons/fa6"
 import { useModalControlContext } from "@/ui/ModalContext"
 import { useTheme } from "@/ui/ThemeContext"
 
@@ -12,7 +12,7 @@ const DeleteThemeModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name={`Delete ${currentTheme}?`}
-            icon={<GrFormClose />}
+            icon={<FaXmark />}
             modalId={modalId}
             onAccept={() => {
                 deleteTheme(currentTheme)
diff --git a/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx b/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
index 95536e2249..07744d601d 100644
--- a/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
+++ b/fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx
@@ -1,6 +1,6 @@
 import Button, { ButtonSize } from "@/components/Button"
 import Modal, { ModalPropsImpl } from "../../components/Modal"
-import { FaPlus } from "react-icons/fa6"
+import { FaFileImport } from "react-icons/fa6"
 import { ChangeEvent, useRef, useState } from "react"
 import Label, { LabelSize } from "@/components/Label"
 import { useTooltipControlContext } from "@/ui/TooltipContext"
@@ -45,7 +45,7 @@ const ImportLocalMirabufModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name={"Import Local Assemblies"}
-            icon={<FaPlus />}
+            icon={<FaFileImport />}
             modalId={modalId}
             acceptEnabled={selectedFile !== undefined && miraType !== undefined}
             onAccept={async () => {
diff --git a/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
index 3031aec4c9..eb206489ba 100644
--- a/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
+++ b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
@@ -1,6 +1,6 @@
 import React, { useReducer } from "react"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
-import { FaPlus } from "react-icons/fa6"
+import { FaWrench } from "react-icons/fa6"
 import Button from "@/components/Button"
 import Label, { LabelSize } from "@/components/Label"
 import World from "@/systems/World"
@@ -45,7 +45,7 @@ const ManageAssembliesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     return (
         <Modal
             name={"Manage Assemblies"}
-            icon={<FaPlus />}
+            icon={<FaWrench />}
             modalId={modalId}
             onAccept={() => {
                 // showTooltip("controls", [
diff --git a/fission/src/ui/panels/DebugPanel.tsx b/fission/src/ui/panels/DebugPanel.tsx
index a29fee2d02..0ca6b87bd9 100644
--- a/fission/src/ui/panels/DebugPanel.tsx
+++ b/fission/src/ui/panels/DebugPanel.tsx
@@ -1,4 +1,3 @@
-import { AiOutlineTool } from "react-icons/ai"
 import Panel, { PanelPropsImpl } from "../components/Panel"
 import Button from "../components/Button"
 import World from "@/systems/World"
@@ -16,6 +15,7 @@ import JOLT from "@/util/loading/JoltSyncLoader"
 import Jolt from "@barclah/jolt-physics"
 import Label from "../components/Label"
 import { colorNameToVar } from "../ThemeContext"
+import { FaScrewdriverWrench } from "react-icons/fa6"
 
 const LabelStyled = styled(Label)({
     fontWeight: 700,
@@ -55,7 +55,7 @@ const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
         <Panel
             openLocation="center"
             name={"The Poker"}
-            icon={<AiOutlineTool />}
+            icon={<FaScrewdriverWrench />}
             panelId={panelId}
             acceptEnabled={false}
             cancelName="Close"
diff --git a/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx b/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
index d020c61595..e79f242de2 100644
--- a/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
+++ b/fission/src/ui/panels/configuring/scoring/ScoringZonesPanel.tsx
@@ -13,6 +13,7 @@ import World from "@/systems/World"
 import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { MiraType } from "@/mirabuf/MirabufLoader"
 import { Box } from "@mui/material"
+import { FaBasketball } from "react-icons/fa6"
 
 const AddIcon = <AiOutlinePlus size={"1.25rem"} />
 const DeleteIcon = <IoTrashBin size={"1.25rem"} />
@@ -115,6 +116,7 @@ const ScoringZonesPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, si
     return (
         <Panel
             name="Scoring Zones"
+            icon={<FaBasketball />}
             panelId={panelId}
             openLocation={openLocation}
             sidePadding={sidePadding}
diff --git a/fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx b/fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx
index 57660af0b4..a3cb86e34d 100644
--- a/fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx
+++ b/fission/src/ui/panels/configuring/scoring/ZoneConfigPanel.tsx
@@ -19,6 +19,7 @@ import { ToggleButton, ToggleButtonGroup } from "@/ui/components/ToggleButtonGro
 import { Alliance } from "@/systems/preferences/PreferenceTypes"
 import { RgbaColor } from "react-colorful"
 import { RigidNodeId } from "@/mirabuf/MirabufParser"
+import { FaBasketball } from "react-icons/fa6"
 
 /**
  * Saves ejector configuration to selected field.
@@ -195,6 +196,7 @@ const ZoneConfigPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, side
         <Panel
             name="Scoring Zone Config"
             panelId={panelId}
+            icon={<FaBasketball />}
             openLocation={openLocation}
             sidePadding={sidePadding}
             onAccept={() => {

From 5b391db72aba62fbcee900f9ba013f8c86a4b8ca Mon Sep 17 00:00:00 2001
From: Hunter Barclay <hunter.barclay18@gmail.com>
Date: Wed, 24 Jul 2024 23:25:16 -0600
Subject: [PATCH 4/7] Update fission/src/ui/panels/DebugPanel.tsx

Co-authored-by: Dhruv Arora <a_dhruv@outlook.com>
---
 fission/src/ui/panels/DebugPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fission/src/ui/panels/DebugPanel.tsx b/fission/src/ui/panels/DebugPanel.tsx
index 0ca6b87bd9..c8494cb87e 100644
--- a/fission/src/ui/panels/DebugPanel.tsx
+++ b/fission/src/ui/panels/DebugPanel.tsx
@@ -54,7 +54,7 @@ const DebugPanel: React.FC<PanelPropsImpl> = ({ panelId }) => {
     return (
         <Panel
             openLocation="center"
-            name={"The Poker"}
+            name={"Debug Panel"}
             icon={<FaScrewdriverWrench />}
             panelId={panelId}
             acceptEnabled={false}

From e351aeed8936ab928981bbb2ddfc219681509f78 Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Wed, 24 Jul 2024 23:31:29 -0600
Subject: [PATCH 5/7] Removed multi bot, fixed manage assemblies enough for now

---
 fission/src/ui/components/MainHUD.tsx              |  1 -
 .../ui/modals/spawning/ManageAssembliesModal.tsx   | 14 +++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index ee70bb27c8..4154383958 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -106,7 +106,6 @@ const MainHUD: React.FC = () => {
                     <MainHUDButton value={"Settings"} icon={<FaGear />} onClick={() => openModal("settings")} />
                     <MainHUDButton value={"View"} icon={<FaMagnifyingGlass />} onClick={() => openModal("view")} />
                     <MainHUDButton value={"Controls"} icon={<FaGamepad />} onClick={() => openModal("change-inputs")} />
-                    <MainHUDButton value={"MultiBot"} icon={<IoPeople />} onClick={() => openPanel("multibot")} />
                     <MainHUDButton
                         value={"Import Local Mira"}
                         icon={<FaFileImport />}
diff --git a/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
index eb206489ba..4f4451da78 100644
--- a/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
+++ b/fission/src/ui/modals/spawning/ManageAssembliesModal.tsx
@@ -7,21 +7,21 @@ import World from "@/systems/World"
 import MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 
 interface AssemblyCardProps {
-    id: number
+    mira: MirabufSceneObject
     update: React.DispatchWithoutAction
 }
 
-const AssemblyCard: React.FC<AssemblyCardProps> = ({ id, update }) => {
+const AssemblyCard: React.FC<AssemblyCardProps> = ({ mira, update }) => {
     return (
         <div
-            key={id}
+            key={mira.id}
             className="flex flex-row align-middle justify-between items-center bg-background rounded-sm p-2 gap-2"
         >
-            <Label className="text-wrap break-all">{id}</Label>
+            <Label className="text-wrap break-all">{mira.assemblyName}</Label>
             <Button
                 value="Delete"
                 onClick={() => {
-                    World.SceneRenderer.RemoveSceneObject(id)
+                    World.SceneRenderer.RemoveSceneObject(mira.id)
                     update()
                 }}
             />
@@ -40,7 +40,7 @@ const ManageAssembliesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
             const y = x[1] instanceof MirabufSceneObject
             return y
         })
-        .map(x => x[0])
+        .map(x => x[1] as MirabufSceneObject)
 
     return (
         <Modal
@@ -59,7 +59,7 @@ const ManageAssembliesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                 <Label size={LabelSize.Medium} className="text-center border-b-[1pt] mt-[4pt] mb-[2pt] mx-[5%]">
                     {assemblies ? `${assemblies.length} Assemblies` : "No Assemblies"}
                 </Label>
-                {assemblies.map(x => AssemblyCard({ id: x, update: update }))}
+                {assemblies.map(x => AssemblyCard({ mira: x, update: update }))}
             </div>
         </Modal>
     )

From 68d8375b6191c71645d5283c96d5054b3b5efbc0 Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Thu, 25 Jul 2024 11:50:36 -0600
Subject: [PATCH 6/7] Re added configuration

---
 fission/src/ui/components/MainHUD.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index 244360868a..b76380ebd0 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -120,7 +120,7 @@ const MainHUD: React.FC = () => {
                             openPanel("scoring-zones")
                         }}
                     />
-                    <MainHUDButton value={"Drivetrain"} icon={<FaCar />} onClick={() => openModal("drivetrain")} />
+                    <MainHUDButton value={"Configure"} icon={<FaGear />} onClick={() => openModal("config-robot")} />
                     <MainHUDButton
                         value={"Debug Tools"}
                         icon={<FaScrewdriverWrench />}

From d6c91fae76eba20f71b3de75a279e66c82327f4d Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Thu, 25 Jul 2024 11:54:43 -0600
Subject: [PATCH 7/7] Fixed build error

---
 fission/src/ui/components/MainHUD.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fission/src/ui/components/MainHUD.tsx b/fission/src/ui/components/MainHUD.tsx
index b76380ebd0..af55290eab 100644
--- a/fission/src/ui/components/MainHUD.tsx
+++ b/fission/src/ui/components/MainHUD.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react"
 import {
-    FaCar,
     FaGear,
     FaMagnifyingGlass,
     FaPlus,