UI Post-Refactor Revisions [AARD-2002]

fission/src/Synthesis.tsx

@@ -1,5 +1,6 @@
 import { AnimatePresence } from "framer-motion"
 import { SnackbarProvider } from "notistack"
+import Slide from "@mui/material/Slide"
 import { useCallback, useEffect, useRef, useState } from "react"
 import MainHUD from "@/components/MainHUD"
 import Scene from "@/components/Scene.tsx"
@@ -68,7 +69,11 @@ function Synthesis() {
     return (
         <AnimatePresence key={"animate-presence"}>
             <ThemeProvider>
-                <SnackbarProvider maxSnack={5} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}>
+                <SnackbarProvider
+                    maxSnack={5}
+                    anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+                    TransitionComponent={Slide}
+                >
                     <StateProvider>
                         <UIProvider>
                             <GlobalUIComponent />

fission/src/ui/ThemeProvider.tsx

@@ -45,6 +45,33 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
                         variant: "contained",
                     },
                 },
+                MuiPopover: {
+                    defaultProps: {
+                        elevation: 8,
+                    },
+                    styleOverrides: {
+                        paper: {
+                            boxShadow: "0 4px 8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2)",
+                        },
+                    },
+                },
+                MuiPaper: {
+                    styleOverrides: {
+                        root: {
+                            boxShadow: "0 2px 6px rgba(0,0,0,0.24), 0 1px 3px rgba(0,0,0,0.18)",
+                        },
+                    },
+                },
+                MuiMenu: {
+                    defaultProps: {
+                        elevation: 8,
+                    },
+                    styleOverrides: {
+                        paper: {
+                            boxShadow: "0 4px 12px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18)",
+                        },
+                    },
+                },
             },
         })
 

fission/src/ui/UIProvider.tsx

@@ -102,6 +102,13 @@ export const UIProvider: React.FC<UIProviderProps> = ({ children }) => {
             props: Omit<PanelProps<P>, "type" | "configured" | "custom"> &
                 Omit<UIScreenCallbacks<T>, "onBeforeAccept"> = DEFAULT_PANEL_PROPS
         ) => {
+            // Dupe check
+            const isDuplicate = panels.some(p => p.content === content)
+            if (isDuplicate) {
+                const existing = panels.find(p => p.content === content)!
+                setPanels(p => [...p.filter(x => x !== existing), existing])
+                return existing.id
+            }
             const id = uuidv4()
             const panel = {
                 id,
@@ -128,7 +135,21 @@ export const UIProvider: React.FC<UIProviderProps> = ({ children }) => {
             panel.onCancel = new UICallback()
             if (props.onCancel) panel.onCancel.setUserDefinedFunc(props.onCancel)
 
-            setPanels([...panels, panel as Panel<any, any>])
+            const contentName = (content as unknown as { name?: string })?.name ?? ""
+            const mutuallyExclusive = ["ImportMirabufPanel", "ConfigurePanel"]
+            const nextPanels = panels
+            if (mutuallyExclusive.includes(contentName)) {
+                const existing = panels.find(p =>
+                    mutuallyExclusive.includes((p.content as unknown as { name?: string })?.name ?? "")
+                )
+                if (existing) {
+                    // Bring it to front
+                    setPanels(p => [...p.filter(x => x !== existing), existing])
+                    return existing.id
+                }
+            }
+
+            setPanels([...nextPanels, panel as Panel<any, any>])
             return id
         },
         [panels]

fission/src/ui/components/ContextMenu.tsx

@@ -55,13 +55,14 @@ const ContextMenu: React.FC = () => {
                     top: state.location[1],
                     padding: "1rem",
                     borderRadius: "0.5rem",
-                    bgcolor: "background.default",
+                    bgcolor: "background.paper",
+                    boxShadow: 6,
                 }}
                 // Why, why, why do I need to do this. This is absurd
                 onPointerDown={e => e.stopPropagation()}
             >
                 <Stack key="CONTEXT-HEADER" component="div" direction="column">
-                    <Label key="context-title" size="md">
+                    <Label key="context-title" size="md" color="text.primary">
                         {state.data.title}
                     </Label>
                     <Divider />

fission/src/ui/components/DragModeIndicator.tsx

@@ -30,11 +30,14 @@ const DragModeIndicator: React.FC = () => {
             direction="row"
             onClick={handleClick}
             sx={{
-                bgcolor: "background.default",
+                bgcolor: "background.paper",
+                boxShadow: 6,
             }}
         >
             <FaHandPaper className="self-center" />
-            <Label size="sm">Drag Mode</Label>
+            <Label size="sm" color="text.primary">
+                Drag Mode
+            </Label>
         </Stack>
     ) : (
         <></>

fission/src/ui/components/MainHUD.tsx

@@ -184,6 +184,8 @@ const MainHUD: React.FC = () => {
                             WebkitUserSelect: "none",
                             filter: mode === "dark" ? "invert(1)" : "none",
                         }}
+                        draggable={false}
+                        onDragStart={e => e.preventDefault()}
                     />
                     <IconButton
                         sx={{
@@ -206,7 +208,11 @@ const MainHUD: React.FC = () => {
                     value={"Spawn Asset"}
                     icon={SynthesisIcons.ADD}
                     larger={true}
-                    onClick={() => openPanel(ImportMirabufPanel, { configurationType: "ROBOTS" as ConfigurationType })}
+                    onClick={() =>
+                        openPanel(ImportMirabufPanel, {
+                            configurationType: "ROBOTS" as ConfigurationType,
+                        })
+                    }
                 />
                 <Stack direction="column" sx={{ borderRadius: "7px", padding: "4px" }} bgcolor="primary.main" gap={0.5}>
                     <MainHUDButton
@@ -217,7 +223,11 @@ const MainHUD: React.FC = () => {
                     <MainHUDButton
                         value={"General Settings"}
                         icon={SynthesisIcons.GEAR}
-                        onClick={() => openModal(SettingsModal, undefined, undefined, { allowClickAway: false })}
+                        onClick={() =>
+                            openModal(SettingsModal, undefined, undefined, {
+                                allowClickAway: false,
+                            })
+                        }
                     />
                     <MainHUDButton
                         value={"Developer Tool"}

fission/src/ui/components/Panel.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, CardActions, CardContent, CardHeader } from "@mui/material"
-import React, { type ReactElement } from "react"
+import React, { type ReactElement, useRef } from "react"
 import Draggable from "react-draggable"
 import {
     CloseType,
@@ -56,21 +56,37 @@ export const Panel = <T, P>({ children, panel, parent }: PanelElementProps<T, P>
     const { closePanel } = useUIContext()
 
     const props = panel.props
+    const nodeRef = useRef<HTMLDivElement | null>(null)
 
     // FIXME: sliders show up as <span> so want to cancel drag on those
     // however still can drag on dropdown but menu elements are left behind
     return (
-        <Draggable cancel="span, input" positionOffset={getPositionOffset(props.position)}>
+        <Draggable
+            handle=".panel-drag-handle"
+            cancel={"input, textarea, select, .MuiSlider-root, .MuiMenuItem-root, .no-drag"}
+            positionOffset={getPositionOffset(props.position)}
+            nodeRef={nodeRef}
+        >
             <Card
+                elevation={8}
                 sx={{
                     display: panel.props.configured ? "" : "none",
                     position: "absolute",
                     pointerEvents: "auto",
-                    p: 4,
+                    p: 2,
+                    boxShadow: 6,
                 }}
+                ref={nodeRef}
             >
-                {props.title && <CardHeader title={props.title} className="select-none" />}
-                <CardContent>
+                {props.title && (
+                    <CardHeader
+                        title={props.title}
+                        className="panel-drag-handle select-none"
+                        sx={{ cursor: "move", py: 1, px: 2 }}
+                        titleTypographyProps={{ variant: "subtitle1" }}
+                    />
+                )}
+                <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                     <div className="panel-contents">
                         {React.Children.map(children, child => {
                             if (React.isValidElement(child)) return React.cloneElement(child, { panel, parent })

fission/src/ui/components/Scoreboard.tsx

@@ -2,6 +2,7 @@ import { Stack } from "@mui/material"
 import type React from "react"
 import { useCallback, useEffect, useState } from "react"
 import Draggable from "react-draggable"
+import { useRef } from "react"
 import { OnScoreChangedEvent } from "@/mirabuf/ScoringZoneSceneObject"
 import MatchMode, { UpdateTimeLeft } from "@/systems/match_mode/MatchMode"
 import { MatchModeType } from "@/systems/match_mode/MatchModeTypes"
@@ -39,16 +40,21 @@ const Scoreboard: React.FC = () => {
         }
     }, [])
 
+    const nodeRef = useRef<HTMLDivElement | null>(null)
+
     return (
-        <Draggable positionOffset={{ x: HALF_W, y: 0 }}>
+        <Draggable positionOffset={{ x: HALF_W, y: 0 }} nodeRef={nodeRef}>
             <Stack
                 direction="column"
-                sx={{ bgcolor: "background.default", position: "absolute" }}
+                sx={{ bgcolor: "background.paper", position: "absolute", boxShadow: 6 }}
                 className="w-min p-2 justify-center align-middle rounded-3xl select-none"
+                ref={nodeRef}
             >
                 {showTime() && (
                     <Stack direction="row" className="w-full justify-center">
-                        <Label size="lg">{time}</Label>
+                        <Label size="lg" color="text.primary">
+                            {time}
+                        </Label>
                     </Stack>
                 )}
                 <Stack direction="row" className={`px-4 ${showTime() ? "pt-1 pb-4" : "py-4"}`} gap={1}>

fission/src/ui/components/SelectMenu.tsx

@@ -144,7 +144,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
     return (
         <>
             {/** Box containing the menu header */}
-            <Stack direction="row" textAlign={"center"} minHeight={"30px"} key="selected-item">
+            <Stack direction="row" textAlign={"center"} minHeight={"30px"} key="selected-item" gap={1}>
                 {/** Back arrow button when an option is selected */}
                 {selectedOption !== undefined && (
                     <IconButton
@@ -153,6 +153,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
                             onOptionSelected(undefined)
                         }}
                         id="select-menu-back-button"
+                        sx={{ mr: 1 }}
                     >
                         {SynthesisIcons.LEFT_ARROW_LARGE}
                     </IconButton>
@@ -166,7 +167,7 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
                 </Stack>
             </Stack>
             <Divider />
-            {Spacer(10)}
+            {Spacer(12)}
 
             {selectedOption === undefined && (
                 <>

fission/src/ui/components/StatefulSlider.tsx

@@ -1,4 +1,4 @@
-import { FormControlLabel, Slider, Tooltip } from "@mui/material"
+import { Slider, Stack, Tooltip, Typography } from "@mui/material"
 import { useState } from "react"
 
 const StatefulSlider: React.FC<
@@ -12,20 +12,38 @@ const StatefulSlider: React.FC<
     const [value, setValue] = useState(props.defaultValue)
     return (
         <Tooltip title={props.tooltip ?? ""}>
-            <FormControlLabel
-                label={props.label}
-                labelPlacement="top"
-                control={
-                    <Slider
-                        {...props}
-                        value={value}
-                        onChange={(_, value) => {
-                            setValue(value as number)
-                            props.onChange?.(value as number)
-                        }}
-                    ></Slider>
-                }
-            />
+            <Stack
+                direction="column"
+                gap={0.5}
+                className="no-drag"
+                sx={{
+                    px: 2,
+                    py: 0.5,
+                    overflow: "hidden",
+                    boxSizing: "border-box",
+                    width: "100%",
+                }}
+            >
+                <Stack direction="row" justifyContent="space-between" alignItems="baseline">
+                    <Typography variant="body2">{props.label}</Typography>
+                    <Typography variant="caption">{value.toFixed(2)}</Typography>
+                </Stack>
+                <Slider
+                    {...props}
+                    value={value}
+                    onChange={(_, value) => {
+                        setValue(value as number)
+                        props.onChange?.(value as number)
+                    }}
+                    sx={{
+                        mx: 0,
+                        width: "100%",
+                        "& .MuiSlider-thumb": {
+                            boxShadow: 2,
+                        },
+                    }}
+                />
+            </Stack>
         </Tooltip>
     )
 }

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -70,11 +70,11 @@ interface ThemeTabConfig extends TabConfigBase {
 
 type TabConfig = GeneralTabConfig | GraphicsTabConfig | ThemeTabConfig
 
-const ColorEditor: React.FC<{ label: string; color: string; setColor: (_c: string) => void }> = ({
-    label,
-    color,
-    setColor,
-}) => {
+const ColorEditor: React.FC<{
+    label: string
+    color: string
+    setColor: (_c: string) => void
+}> = ({ label, color, setColor }) => {
     return (
         <Stack direction="row" gap={2}>
             <TextField

fission/src/ui/panels/DeveloperToolPanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material"
+import { Alert, Button, Stack } from "@mui/material"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
@@ -221,7 +221,9 @@ const DeveloperToolPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =>
         }
         try {
             const encoded = mirabuf.Assembly.encode(assembly).finish()
-            const blob = new Blob([encoded.buffer as ArrayBuffer], { type: "application/octet-stream" })
+            const blob = new Blob([encoded.buffer as ArrayBuffer], {
+                type: "application/octet-stream",
+            })
             const url = URL.createObjectURL(blob)
 
             // Check if assembly has devtool data to determine filename
@@ -254,8 +256,12 @@ const DeveloperToolPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =>
     }, [])
 
     return (
-        <Stack gap={4} className="rounded-md p-4 max-h-[60vh] min-h-[350px] overflow-y-auto">
-            {!fieldLoaded && <div className="text-red-600 m-4">No mira field loaded.</div>}
+        <Stack gap={4} className="rounded-md p-4 max-h-[60vh] overflow-y-auto">
+            {!fieldLoaded && (
+                <Alert severity="warning" className="m-2">
+                    No mira field loaded.
+                </Alert>
+            )}
             {editor && (
                 <Stack gap={6} className="md:flex-row items-start">
                     {/* Key List */}
@@ -325,7 +331,11 @@ const DeveloperToolPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =>
                                     onChange={e => setJsonValue(e.target.value)}
                                     placeholder="Enter JSON data for this key"
                                 />
-                                {error && <div className="text-red-400 mt-1">{error}</div>}
+                                {error && (
+                                    <Alert severity="error" className="mt-2">
+                                        {error}
+                                    </Alert>
+                                )}
                                 <div className="mt-3 flex gap-2">
                                     <Button onClick={handleSave}>Save</Button>
                                     <Button onClick={handleRemove}>Remove</Button>