split up combo editor into the teammate view

libs/common/ui/src/hooks/index.ts

@@ -4,5 +4,6 @@ export * from './useIsMount'
 export * from './useOnScreen'
 export * from './useRefOverflow'
 export * from './useRefSize'
+export * from './useScrollRef'
 export * from './useTitle'
 export * from './useWindowScrollPos'

libs/common/ui/src/hooks/useScrollRef.tsx

@@ -0,0 +1,10 @@
+import { useCallback, useRef } from 'react'
+
+export function useScrollRef() {
+  const scrollRef = useRef<HTMLElement>()
+  const onScroll = useCallback(
+    () => scrollRef.current?.scrollIntoView({ behavior: 'smooth' }),
+    [scrollRef]
+  )
+  return [scrollRef, onScroll] as const
+}

libs/gi/page-team/src/CharacterDisplay/Tabs/TabOverview/index.tsx

@@ -1,4 +1,4 @@
-import { CardThemed } from '@genshin-optimizer/common/ui'
+import { CardThemed, useScrollRef } from '@genshin-optimizer/common/ui'
 import { allArtifactSlotKeys } from '@genshin-optimizer/gi/consts'
 import {
   ArtifactCardNano,
@@ -10,18 +10,14 @@ import {
 } from '@genshin-optimizer/gi/ui'
 import { uiInput as input } from '@genshin-optimizer/gi/wr'
 import { Box, Grid, Stack } from '@mui/material'
-import { useCallback, useContext, useMemo, useRef } from 'react'
+import { useContext, useMemo } from 'react'
 import CharacterProfileCard from '../../../CharProfileCard'
 import useCompareData from '../../../useCompareData'
 import CompareBtn from '../../CompareBtn'
 import EquipmentSection from './EquipmentSection'
 
 export default function TabOverview() {
-  const scrollRef = useRef<HTMLDivElement>()
-  const onScroll = useCallback(
-    () => scrollRef?.current?.scrollIntoView?.({ behavior: 'smooth' }),
-    [scrollRef]
-  )
+  const [scrollRef, onScroll] = useScrollRef()
 
   const data = useContext(DataContext)
   const compareData = useCompareData()

libs/sr/formula-ui/src/lightCone/util.tsx

@@ -1,13 +1,13 @@
-import { own } from '@genshin-optimizer/sr/formula'
-import { useSrCalcContext } from '@genshin-optimizer/sr/ui'
 import type { ReactNode } from 'react'
 
 export function SuperImposeWrapper({
   children,
 }: {
   children: (superimpose: number) => ReactNode
 }) {
-  const calc = useSrCalcContext()
-  const superimpose = calc?.compute(own.lightCone.superimpose).val ?? 1
+  // const calc = useSrCalcContext()
+
+  // TODO: FIXME: a character without a lightcone will cause an error
+  const superimpose = 1 // calc?.compute(own.lightCone.superimpose).val ?? 1
   return children(superimpose)
 }

libs/sr/page-team/src/BonusStats.tsx

@@ -1,8 +1,6 @@
-import { useBoolState } from '@genshin-optimizer/common/react-util'
 import {
   CardThemed,
   DropdownButton,
-  ModalWrapper,
   NumberInputLazy,
   SqBadge,
 } from '@genshin-optimizer/common/ui'
@@ -13,7 +11,6 @@ import type { Member, Tag } from '@genshin-optimizer/sr/formula'
 import { tagFieldMap } from '@genshin-optimizer/sr/formula-ui'
 import { DeleteForever } from '@mui/icons-material'
 import {
-  Button,
   CardContent,
   CardHeader,
   Divider,
@@ -25,23 +22,7 @@ import {
 import { useContext } from 'react'
 import { PresetContext, useTeamContext, useTeammateContext } from './context'
 
-export function BonusStats() {
-  const [open, onOpen, onClose] = useBoolState()
-  return (
-    <>
-      <Button onClick={onOpen}>Bonus Stats</Button>
-      <BonusStatsModal open={open} onClose={onClose} />
-    </>
-  )
-}
-
-function BonusStatsModal({
-  open,
-  onClose,
-}: {
-  open: boolean
-  onClose: () => void
-}) {
+export function BonusStatsSection() {
   const { database } = useDatabaseContext()
   const { presetIndex } = useContext(PresetContext)
   const {
@@ -53,34 +34,33 @@ function BonusStatsModal({
     const tag = newTag(q, characterKey)
     database.teams.setBonusStat(teamId, tag, 0, presetIndex)
   }
+  if (!presetIndex) return null
   return (
-    <ModalWrapper open={open} onClose={onClose}>
-      <CardThemed>
-        <CardHeader title="Bonus Stats" />
-        <Divider />
-        <CardContent>
-          <Stack spacing={1}>
-            {bonusStats.map(({ tag, values }, i) => (
-              <BonusStatDisplay
-                key={JSON.stringify(tag) + i}
-                tag={tag}
-                value={values[presetIndex]}
-                setValue={(value) =>
-                  database.teams.setBonusStat(teamId, tag, value, presetIndex)
-                }
-                onDelete={() =>
-                  database.teams.setBonusStat(teamId, tag, 0, presetIndex)
-                }
-                setTag={(tag) =>
-                  database.teams.setBonusStat(teamId, tag, 0, presetIndex)
-                }
-              />
-            ))}
-            <InitialStatDropdown onSelect={newTarget} />
-          </Stack>
-        </CardContent>
-      </CardThemed>
-    </ModalWrapper>
+    <CardThemed>
+      <CardHeader title="Bonus Stats" />
+      <Divider />
+      <CardContent>
+        <Stack spacing={1}>
+          {bonusStats.map(({ tag, values }, i) => (
+            <BonusStatDisplay
+              key={JSON.stringify(tag) + i}
+              tag={tag}
+              value={values[presetIndex]}
+              setValue={(value) =>
+                database.teams.setBonusStat(teamId, tag, value, presetIndex)
+              }
+              onDelete={() =>
+                database.teams.setBonusStat(teamId, tag, 0, presetIndex)
+              }
+              setTag={(tag) =>
+                database.teams.setBonusStat(teamId, tag, 0, presetIndex)
+              }
+            />
+          ))}
+          <InitialStatDropdown onSelect={newTarget} />
+        </Stack>
+      </CardContent>
+    </CardThemed>
   )
 }
 function newTag(q: Tag['q'], member: Member): Tag {

libs/sr/page-team/src/ComboEditor.tsx

@@ -1,67 +1,31 @@
-import { useBoolState } from '@genshin-optimizer/common/react-util'
-import {
-  CardThemed,
-  ModalWrapper,
-  NumberInputLazy,
-} from '@genshin-optimizer/common/ui'
+import { CardThemed } from '@genshin-optimizer/common/ui'
 import { getUnitStr, valueString } from '@genshin-optimizer/common/util'
 import { TagContext } from '@genshin-optimizer/pando/ui-sheet'
 import type { Frame } from '@genshin-optimizer/sr/db'
 import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui'
 import { Read } from '@genshin-optimizer/sr/formula'
 import { useSrCalcContext } from '@genshin-optimizer/sr/ui'
-import CloseIcon from '@mui/icons-material/Close'
-import Delete from '@mui/icons-material/Delete'
-import {
-  Box,
-  Button,
-  CardActionArea,
-  CardContent,
-  CardHeader,
-  Divider,
-  IconButton,
-  InputAdornment,
-  Stack,
-  Typography,
-} from '@mui/material'
+import { Box, CardActionArea, Divider, Typography } from '@mui/material'
 import { useCallback, useContext, useMemo } from 'react'
 import { PresetContext, useTeamContext } from './context'
-import { LightConeSheetsDisplay } from './LightConeSheetsDisplay'
 import { OptimizationTargetDisplay } from './Optimize/OptimizationTargetDisplay'
 import { OptimizationTargetSelector } from './Optimize/OptimizationTargetSelector'
-import { RelicSheetsDisplay } from './RelicSheetsDisplay'
 
 export function ComboEditor() {
   const { database } = useDatabaseContext()
   const { team, teamId } = useTeamContext()
   return (
-    <CardContent
+    <Box
       sx={{
         display: 'flex',
         gap: 1,
         overflowX: 'auto',
+        overflowY: 'visible',
+        p: 1,
       }}
     >
       {team.frames.map((frame, i) => (
-        <Combo
-          key={i}
-          frame={frame}
-          index={i}
-          setFrame={(frame) =>
-            database.teams.set(teamId, (team) => {
-              team.frames = [...team.frames]
-              team.frames[i] = {
-                ...team.frames[i],
-                ...frame,
-              }
-            })
-          }
-          removeFrame={() =>
-            database.teams.set(teamId, (team) => {
-              team.frames = team.frames.filter((_, index) => index !== i)
-            })
-          }
-        />
+        <Combo key={i} frame={frame} index={i} />
       ))}
       <Box sx={{ flexShrink: 0 }}>
         <OptimizationTargetSelector
@@ -78,20 +42,10 @@ export function ComboEditor() {
           }
         />
       </Box>
-    </CardContent>
+    </Box>
   )
 }
-function Combo({
-  frame,
-  index,
-  setFrame,
-  removeFrame,
-}: {
-  frame: Frame
-  index: number
-  setFrame(frame: Partial<Frame>): void
-  removeFrame(): void
-}) {
+function Combo({ frame, index }: { frame: Frame; index: number }) {
   const { presetIndex, setPresetIndex } = useContext(PresetContext)
   const calc = useSrCalcContext()
   const tagcontext = useContext(TagContext)
@@ -101,16 +55,10 @@ function Combo({
     [calc, frame.tag, tagcontext]
   )
   const unit = getUnitStr(frame.tag.q ?? '')
-  const [open, onOpen, onClose] = useBoolState()
 
   const handleClick = useCallback(() => {
-    if (presetIndex === index) {
-      onOpen()
-    } else {
-      onClose()
-      setPresetIndex(index)
-    }
-  }, [index, onClose, onOpen, presetIndex, setPresetIndex])
+    setPresetIndex(index)
+  }, [index, setPresetIndex])
   return (
     <CardThemed
       bgt="light"
@@ -122,14 +70,6 @@ function Combo({
             : undefined,
       })}
     >
-      <ComboEditorModal
-        frame={frame}
-        setFrame={setFrame}
-        index={index}
-        show={open}
-        onClose={onClose}
-        removeFrame={removeFrame}
-      />
       <CardActionArea onClick={handleClick}>
         <Box sx={{ display: 'flex', gap: 1, alignItems: 'stretch', p: 1 }}>
           <Typography>{index + 1}</Typography>
@@ -149,80 +89,3 @@ function Combo({
     </CardThemed>
   )
 }
-
-function ComboEditorModal({
-  index,
-  frame,
-  setFrame,
-  removeFrame,
-  show,
-  onClose,
-}: {
-  frame: Frame
-  index: number
-  setFrame(frame: Partial<Frame>): void
-  removeFrame(): void
-  show: boolean
-  onClose: () => void
-}) {
-  return (
-    <ModalWrapper
-      open={show}
-      onClose={onClose}
-      containerProps={{ maxWidth: 'xl' }}
-    >
-      <CardThemed bgt="dark">
-        {/* TODO: translation */}
-        <CardHeader
-          title={`Edit Combo ${index + 1}`}
-          action={
-            <IconButton onClick={onClose}>
-              <CloseIcon />
-            </IconButton>
-          }
-        />
-        <Divider />
-        <CardContent>
-          <Stack spacing={1}>
-            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-              <NumberInputLazy
-                value={frame.multiplier}
-                onChange={(v) => setFrame({ multiplier: v })}
-                size="small"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">Multi x </InputAdornment>
-                  ),
-                }}
-              />
-              <OptimizationTargetSelector
-                optTarget={frame.tag}
-                setOptTarget={(tag) =>
-                  setFrame({
-                    tag,
-                  })
-                }
-              />
-              <Button
-                size="small"
-                color="error"
-                onClick={removeFrame}
-                startIcon={<Delete />}
-              >
-                Remove
-              </Button>
-            </Box>
-            <Box>
-              <Typography variant="h6">Relic Conditionals</Typography>
-              <RelicSheetsDisplay />
-            </Box>
-            <Box>
-              <Typography variant="h6">Lightcone Conditionals</Typography>
-              <LightConeSheetsDisplay />
-            </Box>
-          </Stack>
-        </CardContent>
-      </CardThemed>
-    </ModalWrapper>
-  )
-}

libs/sr/page-team/src/LightConeSheetDisplay.tsx

@@ -1,6 +1,5 @@
 import { CardThemed, NextImage } from '@genshin-optimizer/common/ui'
-import type { UISheetElement } from '@genshin-optimizer/pando/ui-sheet'
-import { DocumentDisplay } from '@genshin-optimizer/pando/ui-sheet'
+import { DocumentDisplay, type UISheetElement } from '@genshin-optimizer/pando/ui-sheet'
 import { lightConeAsset } from '@genshin-optimizer/sr/assets'
 import type { LightConeKey } from '@genshin-optimizer/sr/consts'
 import { lightConeUiSheets } from '@genshin-optimizer/sr/formula-ui'