UI Touchups

fission/src/Synthesis.tsx

@@ -61,6 +61,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"
 import NewInputSchemeModal from "./ui/modals/configuring/theme-editor/NewInputSchemeModal.tsx"
 import AssignNewSchemeModal from "./ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx"
 
@@ -223,6 +224,7 @@ const initialPanels: ReactElement[] = [
     <PokerPanel key="poker" panelId="poker" />,
     <ChooseInputSchemePanel key="choose-scheme" panelId="choose-scheme" />,
     <WSViewPanel key="ws-view" panelId="ws-view" />,
+    <DebugPanel key="debug" panelId="debug" />,
 ]
 
 export default Synthesis

fission/src/ui/components/MainHUD.tsx

@@ -1,28 +1,25 @@
 import React, { useEffect, useState } from "react"
-import { BsCodeSquare } from "react-icons/bs"
-import { FaCar, FaGear, FaMagnifyingGlass, FaPlus } from "react-icons/fa6"
+import {
+    FaGear,
+    FaMagnifyingGlass,
+    FaPlus,
+    FaGamepad,
+    FaBasketball,
+    FaFileImport,
+    FaWrench,
+    FaScrewdriverWrench,
+} 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 { 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"
 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 } from "react-icons/ai"
-import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 
 type ButtonProps = {
     value: string
@@ -90,7 +87,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
@@ -102,111 +99,34 @@ 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={"MultiBot"} icon={<IoPeople />} onClick={() => openPanel("multibot")} />
+                    <MainHUDButton value={"Controls"} icon={<FaGamepad />} onClick={() => openModal("change-inputs")} />
                     <MainHUDButton
                         value={"Import Local Mira"}
-                        icon={<IoPeople />}
+                        icon={<FaFileImport />}
                         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 />}
+                        icon={<FaBasketball />}
                         onClick={() => {
                             openPanel("scoring-zones")
                         }}
                     />
-                    {/* <MainHUDButton value={"Drivetrain"} icon={<FaCar />} onClick={() => openModal("drivetrain")} /> */}
-                    <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={"Configure"} icon={<FaGear />} onClick={() => openModal("config-robot")} />
                     <MainHUDButton
-                        value={"Toasts"}
-                        icon={<FaCar />}
+                        value={"Debug Tools"}
+                        icon={<FaScrewdriverWrench />}
                         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 +148,4 @@ 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

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>

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}

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>

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"

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?

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 InputSystem from "@/systems/input/InputSystem"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
@@ -14,8 +14,8 @@ const ResetAllInputsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
 
     return (
         <Modal
-            name="Reset all Inputs?"
-            icon={<GrFormClose />}
+            name="Reset all Inputs??"
+            icon={<FaXmark />}
             modalId={modalId}
             onAccept={() => {
                 // Wipe global input scheme prefs

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()

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)

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 () => {