Substat optimization on TC page

apps/frontend/src/app/Components/Artifact/SetEffectDisplay.tsx

@@ -9,13 +9,15 @@ type Data = {
   setNumKey: SetNum
   hideHeader?: boolean
   conditionalsOnly?: boolean
+  disabled?: boolean
 }
 
 export default function SetEffectDisplay({
   setKey,
   setNumKey,
   hideHeader = false,
   conditionalsOnly = false,
+  disabled = false,
 }: Data) {
   const sheet = getArtSheet(setKey)
 
@@ -27,7 +29,11 @@ export default function SetEffectDisplay({
   return (
     <Box display="flex" flexDirection="column">
       {document ? (
-        <DocumentDisplay sections={document} hideHeader={hideHeader} />
+        <DocumentDisplay
+          sections={document}
+          hideHeader={hideHeader}
+          disabled={disabled}
+        />
       ) : null}
     </Box>
   )

apps/frontend/src/app/Components/Conditional/ConditionalDisplay.tsx

@@ -12,12 +12,14 @@ type ConditionalDisplayProps = {
   conditional: DocumentConditional
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
   hideDesc?: boolean
+  disabled?: boolean
 }
 
 export default function ConditionalDisplay({
   conditional,
   hideHeader = false,
   hideDesc = false,
+  disabled = false,
 }: ConditionalDisplayProps) {
   const { data } = useContext(DataContext)
   let fields
@@ -38,7 +40,7 @@ export default function ConditionalDisplay({
         <HeaderDisplay header={conditional.header} hideDesc={hideDesc} />
       )}
       <CardContent sx={{ p: 0, '&:last-child': { pb: 0 } }}>
-        <ConditionalSelector conditional={conditional} />
+        <ConditionalSelector conditional={conditional} disabled={disabled} />
       </CardContent>
       {fields && <FieldsDisplay fields={fields} />}
     </CardDark>

apps/frontend/src/app/Components/CustomNumberInput.tsx

@@ -1,5 +1,6 @@
 import type { ButtonProps, InputProps } from '@mui/material'
 import { Button, InputBase, styled } from '@mui/material'
+import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 export type CustomNumberInputProps = Omit<InputProps, 'onChange'> & {
   value?: number | undefined
@@ -68,41 +69,46 @@ export default function CustomNumberInput({
   ...props
 }: CustomNumberInputProps) {
   const { inputProps = {}, ...restProps } = props
+  const { min, max } = inputProps
+  const [display, setDisplay] = useState(value.toString())
+
+  const onInputChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      setDisplay(e.target.value),
+    []
+  )
 
-  const [number, setNumber] = useState(value)
-  const [focused, setFocus] = useState(false)
   const parseFunc = useCallback(
     (val: string) => (float ? parseFloat(val) : parseInt(val)),
     [float]
   )
-  const onBlur = useCallback(() => {
-    onChange(number)
-    setFocus(false)
-  }, [onChange, number, setFocus])
-  const onFocus = useCallback(() => {
-    setFocus(true)
-  }, [setFocus])
-  useEffect(() => setNumber(value), [value, setNumber]) // update value on value change
-  const onInputChange = useCallback(
-    (e) => {
-      const newNum = parseFunc(e.target.value) || 0
-      if (inputProps.min !== undefined && newNum < inputProps.min) return
-      if (inputProps.max !== undefined && newNum > inputProps.max) return
-      setNumber(newNum)
-    },
-    [setNumber, parseFunc, inputProps.min, inputProps.max]
+  const onValidate = useCallback(() => {
+    const change = (v: number) => {
+      setDisplay(v.toString())
+      onChange(v)
+    }
+    const newNum = parseFunc(display) || 0
+    if (min !== undefined && newNum < min) return change(min)
+    if (max !== undefined && newNum > max) return change(max)
+    return change(newNum)
+  }, [min, max, parseFunc, onChange, display])
+
+  useEffect(() => setDisplay(value.toString()), [value, setDisplay]) // update value on value change
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      e.key === 'Enter' && onValidate(),
+    [onValidate]
   )
-  const onKeyDown = useCallback((e) => e.key === 'Enter' && onBlur(), [onBlur])
 
   return (
     <StyledInputBase
-      value={focused && !number ? '' : number}
+      value={display}
       aria-label="custom-input"
       type="number"
       inputProps={{ step: float ? 0.1 : 1, ...inputProps }}
       onChange={onInputChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
+      onBlur={onValidate}
       disabled={disabled}
       onKeyDown={onKeyDown}
       {...restProps}

apps/frontend/src/app/Components/DocumentDisplay.tsx

@@ -19,13 +19,15 @@ type DocumentDisplayProps = {
   teamBuffOnly?: boolean
   hideDesc?: boolean
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
+  disabled?: boolean
 }
 
 export default function DocumentDisplay({
   sections,
   teamBuffOnly,
   hideDesc = false,
   hideHeader = false,
+  disabled = false,
 }: DocumentDisplayProps) {
   const { data } = useContext(DataContext)
   if (!sections.length) return null
@@ -41,6 +43,7 @@ export default function DocumentDisplay({
           key={i}
           hideDesc={hideDesc}
           hideHeader={hideHeader}
+          disabled={disabled}
         />
       )
     })
@@ -57,10 +60,12 @@ function SectionDisplay({
   section,
   hideDesc = false,
   hideHeader = false,
+  disabled = false,
 }: {
   section: DocumentSection
   hideDesc?: boolean
   hideHeader?: boolean | ((section: DocumentSection) => boolean)
+  disabled?: boolean
 }) {
   if ('fields' in section) {
     return (
@@ -76,6 +81,7 @@ function SectionDisplay({
         conditional={section}
         hideDesc={hideDesc}
         hideHeader={hideHeader}
+        disabled={disabled}
       />
     )
   } /* if ("text" in section) */ else {

apps/frontend/src/app/Components/LevelSelect.tsx

@@ -23,11 +23,13 @@ export default function LevelSelect({
   ascension,
   setBoth,
   useLow = false,
+  disabled = false,
 }: {
   level: number
   ascension: AscensionKey
   setBoth: (action: { level?: number; ascension?: AscensionKey }) => void
   useLow?: boolean
+  disabled?: boolean
 }) {
   const { t } = useTranslation('ui')
   const ascensionMaxLevels = useLow ? ascensionMaxLevelLow : ascensionMaxLevel
@@ -56,6 +58,7 @@ export default function LevelSelect({
           onChange={setLevel}
           value={level}
           startAdornment="Lv. "
+          disabled={disabled}
           inputProps={{
             min: 1,
             max: 90,
@@ -66,12 +69,18 @@ export default function LevelSelect({
       </CustomNumberInputButtonGroupWrapper>
       <Button
         sx={{ pl: 1, whiteSpace: 'nowrap' }}
-        disabled={!(useLow ? ambiguousLevelLow : ambiguousLevel)(level)}
+        disabled={
+          !(useLow ? ambiguousLevelLow : ambiguousLevel)(level) || disabled
+        }
         onClick={setAscension}
       >
         <strong>/ {ascensionMaxLevel[ascension]}</strong>
       </Button>
-      <DropdownButton title={t('selectlevel')} sx={{ flexGrow: 1 }}>
+      <DropdownButton
+        title={t('selectlevel')}
+        sx={{ flexGrow: 1 }}
+        disabled={disabled}
+      >
         {[...(useLow ? milestoneLevelsLow : milestoneLevels)].map(
           ([lv, as]) => {
             const selected = lv === level && as === ascension

apps/frontend/src/app/Components/RefinementDropdown.tsx

@@ -7,13 +7,18 @@ import DropdownButton from './DropdownMenu/DropdownButton'
 export default function RefinementDropdown({
   refinement,
   setRefinement,
+  disabled = false,
 }: {
   refinement: RefinementKey
   setRefinement: (r: RefinementKey) => void
+  disabled?: boolean
 }) {
   const { t } = useTranslation('ui')
   return (
-    <DropdownButton title={t('refinement', { value: refinement })}>
+    <DropdownButton
+      title={t('refinement', { value: refinement })}
+      disabled={disabled}
+    >
       {allRefinementKeys.map((r) => (
         <MenuItem
           key={r}