Update Tabs Indicator on Content Size Change (#1428)

Author: AlexD717

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

@@ -1,5 +1,5 @@
 import type React from "react"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import World from "@/systems/World"
@@ -29,7 +29,7 @@ import ConfigureCameraPointsInterface from "./interfaces/ConfigureCameraPointsIn
 import ConfigureProtectedZonesInterface from "./interfaces/scoring/ConfigureProtectedZonesInterface"
 import ConfigureScoringZonesInterface from "./interfaces/scoring/ConfigureScoringZonesInterface"
 import EventSystem from "@/systems/EventSystem.ts"
-import { Tab, Tabs } from "@mui/material"
+import { Tab, Tabs, type TabsActions } from "@mui/material"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import CommandRegistry, { type CommandDefinition, type CommandProvider } from "@/ui/components/CommandRegistry"
 import { globalAddToast, globalOpenPanel } from "@/ui/components/GlobalUIControls"
@@ -188,6 +188,19 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
         }
     }, [])
 
+    // Resize tab indicator when content changes size
+    const tabsActionsRef = useRef<TabsActions>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        const content = contentRef.current
+        if (!content) return
+
+        const observer = new ResizeObserver(() => tabsActionsRef.current?.updateIndicator())
+        observer.observe(content)
+        return () => observer.disconnect()
+    }, [])
+
     useEffect(() => {
         if (selectedAssembly != null) {
             setAccessedAssemblies(v => [...v, selectedAssembly])
@@ -280,6 +293,7 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
     return (
         <>
             <Tabs
+                action={tabsActionsRef}
                 value={configurationType}
                 onChange={(_, newValue) => setConfigurationType(newValue)}
                 textColor="inherit"
@@ -291,70 +305,72 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
                 <Tab key="fields" value="FIELDS" label="FIELDS" />
                 <Tab key="inputs" value="INPUTS" label="INPUTS" />
             </Tabs>
-            {configurationType === "INPUTS" && (
-                <ConfigureInputsInterface panel={panel!} registerCleanupFunction={registerCleanupFunctions} />
-            )}
-            {configurationType !== "INPUTS" && (
-                <>
-                    <AssemblySelection
-                        panel={panel!}
-                        configurationType={configurationType}
-                        onAssemblySelected={a => {
-                            if (configMode !== undefined) EventSystem.dispatch("ConfigurationSavedEvent")
-                            setConfigMode(undefined)
-                            setSelectedAssembly(a as MirabufSceneObject)
-                        }}
-                        selectedAssembly={selectedAssembly}
-                        onStageDelete={opt => {
-                            const id = (opt as AssemblySelectionOption).assemblyObject.id
-                            setPendingDeletes(prev => [...prev, id])
-                        }}
-                        pendingDeletes={pendingDeletes}
-                    />
-                    {selectedAssembly !== undefined && (
-                        <ConfigModeSelection
-                            modes={modes}
-                            configMode={configMode}
-                            onModeSelected={mode => {
+            <div ref={contentRef}>
+                {configurationType === "INPUTS" && (
+                    <ConfigureInputsInterface panel={panel!} registerCleanupFunction={registerCleanupFunctions} />
+                )}
+                {configurationType !== "INPUTS" && (
+                    <>
+                        <AssemblySelection
+                            panel={panel!}
+                            configurationType={configurationType}
+                            onAssemblySelected={a => {
                                 if (configMode !== undefined) EventSystem.dispatch("ConfigurationSavedEvent")
-                                setConfigMode(mode)
+                                setConfigMode(undefined)
+                                setSelectedAssembly(a as MirabufSceneObject)
                             }}
+                            selectedAssembly={selectedAssembly}
+                            onStageDelete={opt => {
+                                const id = (opt as AssemblySelectionOption).assemblyObject.id
+                                setPendingDeletes(prev => [...prev, id])
+                            }}
+                            pendingDeletes={pendingDeletes}
                         />
-                    )}
-                    {ConfigSubPanel != null && (
-                        <ConfigSubPanel
-                            panel={panel!}
-                            selectedAssembly={selectedAssembly!}
-                            hasMadeChanges={hasMadeChanges}
-                            setDisableAccept={setDisableAccept}
-                            registerCleanupFunction={registerCleanupFunctions}
-                        />
-                    )}
-                    {configMode === undefined && selectedAssembly !== undefined && (
-                        <>
-                            <Spacer height={16} />
-                            <AssemblyExportButton selectedAssembly={selectedAssembly} />
-                            <Spacer height={16} />
-                            <Button
-                                className={"w-full"}
-                                color={"warning"}
-                                onClick={() => {
-                                    closePanel(panel!.id, CloseType.ACCEPT)
-                                    selectedAssembly.resetPreferences()
-                                    globalAddToast(
-                                        "info",
-                                        "Preferences for " + selectedAssembly.descriptiveName + " reset"
-                                    )
+                        {selectedAssembly !== undefined && (
+                            <ConfigModeSelection
+                                modes={modes}
+                                configMode={configMode}
+                                onModeSelected={mode => {
+                                    if (configMode !== undefined) EventSystem.dispatch("ConfigurationSavedEvent")
+                                    setConfigMode(mode)
                                 }}
-                            >
-                                Reset
-                                <Spacer width={5} />
-                                <FaArrowsRotate />
-                            </Button>
-                        </>
-                    )}
-                </>
-            )}
+                            />
+                        )}
+                        {ConfigSubPanel != null && (
+                            <ConfigSubPanel
+                                panel={panel!}
+                                selectedAssembly={selectedAssembly!}
+                                hasMadeChanges={hasMadeChanges}
+                                setDisableAccept={setDisableAccept}
+                                registerCleanupFunction={registerCleanupFunctions}
+                            />
+                        )}
+                        {configMode === undefined && selectedAssembly !== undefined && (
+                            <>
+                                <Spacer height={16} />
+                                <AssemblyExportButton selectedAssembly={selectedAssembly} />
+                                <Spacer height={16} />
+                                <Button
+                                    className={"w-full"}
+                                    color={"warning"}
+                                    onClick={() => {
+                                        closePanel(panel!.id, CloseType.ACCEPT)
+                                        selectedAssembly.resetPreferences()
+                                        globalAddToast(
+                                            "info",
+                                            "Preferences for " + selectedAssembly.descriptiveName + " reset"
+                                        )
+                                    }}
+                                >
+                                    Reset
+                                    <Spacer width={5} />
+                                    <FaArrowsRotate />
+                                </Button>
+                            </>
+                        )}
+                    </>
+                )}
+            </div>
         </>
     )
 }