Show loadout + build name on teamcard hover (#1656)

* show loadout + build name on teamcard hover

* update teamcard

apps/frontend/src/app/Components/Character/CharacterCard/CharacterCardEquipmentRow.tsx

@@ -1,13 +1,13 @@
 import type { ArtifactSlotKey } from '@genshin-optimizer/gi/consts'
 import { allArtifactSlotKeys } from '@genshin-optimizer/gi/consts'
-import type { ICachedArtifact } from '@genshin-optimizer/gi/db'
+import type { ICachedArtifact, ICachedWeapon } from '@genshin-optimizer/gi/db'
 import { useDatabase } from '@genshin-optimizer/gi/db-ui'
-import { Box, Grid } from '@mui/material'
+import { Box, Card, Grid, Typography } from '@mui/material'
 import { useContext } from 'react'
 import { DataContext } from '../../../Context/DataContext'
 import { input } from '../../../Formula'
 import ArtifactCardPico from '../../Artifact/ArtifactCardPico'
-import WeaponCardPico from '../../Weapon/WeaponCardPico'
+import WeaponCardPico, { WeaponCardPicoObj } from '../../Weapon/WeaponCardPico'
 
 export function CharacterCardEquipmentRow({
   hideWeapon = false,
@@ -51,3 +51,34 @@ function Artifacts() {
     </>
   )
 }
+export function CharacterCardEquipmentRowTC({
+  weapon,
+}: {
+  weapon: ICachedWeapon
+}) {
+  return (
+    <Box>
+      <Grid container columns={weapon ? 6 : 5} spacing={0.5} sx={{}}>
+        {weapon && (
+          <Grid item xs={1} height="100%">
+            <WeaponCardPicoObj weapon={weapon} />
+          </Grid>
+        )}
+        <Grid item xs={5}>
+          <Card
+            sx={{
+              backgroundColor: 'info.main',
+              height: '44px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {/* TODO: Translation */}
+            <Typography>TC Build</Typography>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}

apps/frontend/src/app/Components/Character/CharacterCardPico.tsx

@@ -1,3 +1,8 @@
+import { useBoolState } from '@genshin-optimizer/common/react-util'
+import {
+  BootstrapTooltip,
+  ConditionalWrapper,
+} from '@genshin-optimizer/common/ui'
 import { imgAssets } from '@genshin-optimizer/gi/assets'
 import type { CharacterKey } from '@genshin-optimizer/gi/consts'
 import {
@@ -9,32 +14,26 @@ import { SillyContext } from '@genshin-optimizer/gi/ui'
 import { ascensionMaxLevel } from '@genshin-optimizer/gi/util'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
-import { Box, CardActionArea, Skeleton, Typography } from '@mui/material'
+import { Box, CardActionArea, Typography } from '@mui/material'
 import type { MouseEvent, ReactNode } from 'react'
-import { Suspense, useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useContext } from 'react'
 import { getCharSheet } from '../../Data/Characters'
-import { ElementIcon } from '../../KeyMap/StatIcon'
 import { iconAsset } from '../../Util/AssetUtil'
-import BootstrapTooltip from '../BootstrapTooltip'
 import CardDark from '../Card/CardDark'
-import ConditionalWrapper from '../ConditionalWrapper'
 import SqBadge from '../SqBadge'
-import CharacterCard from './CharacterCard'
 
 export default function CharacterCardPico({
   characterKey,
   onClick,
   onMouseDown,
   onMouseEnter,
-  simpleTooltip = false,
-  disableTooltip = false,
+  hoverChild,
 }: {
   characterKey: CharacterKey
   onClick?: (characterKey: CharacterKey) => void
   onMouseDown?: (e: MouseEvent) => void
   onMouseEnter?: (e: MouseEvent) => void
-  simpleTooltip?: boolean
-  disableTooltip?: boolean
+  hoverChild?: React.ReactNode
 }) {
   const character = useCharacter(characterKey)
   const { favorite } = useCharMeta(characterKey)
@@ -57,81 +56,17 @@ export default function CharacterCardPico({
     ),
     [onClickHandler, onMouseDown, onMouseEnter]
   )
-  const [open, setOpen] = useState(false)
-  const onTooltipOpen = useCallback(
-    () => !disableTooltip && setOpen(true),
-    [disableTooltip]
-  )
-  const onTooltipClose = useCallback(() => setOpen(false), [])
-  useEffect(() => {
-    disableTooltip && setOpen(false)
-  }, [disableTooltip])
-
-  const simpleTooltipWrapperFunc = useCallback(
-    (children: ReactNode) => (
-      <BootstrapTooltip
-        placement="top"
-        open={open && !disableTooltip}
-        onClose={onTooltipClose}
-        onOpen={onTooltipOpen}
-        title={
-          <Suspense fallback={<Skeleton width={300} height={400} />}>
-            <Typography>
-              {characterSheet.elementKey && (
-                <ElementIcon
-                  ele={characterSheet.elementKey}
-                  iconProps={{
-                    fontSize: 'inherit',
-                    sx: {
-                      verticalAlign: '-10%',
-                      color: `${characterSheet.elementKey}.main`,
-                    },
-                  }}
-                />
-              )}{' '}
-              {characterSheet.name}
-            </Typography>
-          </Suspense>
-        }
-      >
-        {children as JSX.Element}
-      </BootstrapTooltip>
-    ),
-    [
-      characterSheet.elementKey,
-      characterSheet.name,
-      disableTooltip,
-      onTooltipClose,
-      onTooltipOpen,
-      open,
-    ]
-  )
-  const charCardTooltipWrapperFunc = useCallback(
-    (children: ReactNode) => (
-      <BootstrapTooltip
-        enterNextDelay={500}
-        enterTouchDelay={500}
-        placement="top"
-        open={open && !disableTooltip}
-        onClose={onTooltipClose}
-        onOpen={onTooltipOpen}
-        title={
-          <Box sx={{ width: 300, m: -1 }}>
-            <CharacterCard hideStats characterKey={characterKey} />
-          </Box>
-        }
-      >
-        {children as JSX.Element}
-      </BootstrapTooltip>
-    ),
-    [characterKey, disableTooltip, onTooltipClose, onTooltipOpen, open]
-  )
+  const [open, onTooltipOpen, onTooltipClose] = useBoolState()
 
   return (
-    <ConditionalWrapper
-      condition={simpleTooltip}
-      wrapper={simpleTooltipWrapperFunc}
-      falseWrapper={charCardTooltipWrapperFunc}
+    <BootstrapTooltip
+      enterNextDelay={500}
+      enterTouchDelay={500}
+      placement="top"
+      open={!!hoverChild && open}
+      onClose={onTooltipClose}
+      onOpen={onTooltipOpen}
+      title={hoverChild}
     >
       <CardDark
         sx={{
@@ -198,7 +133,7 @@ export default function CharacterCardPico({
           )}
         </ConditionalWrapper>
       </CardDark>
-    </ConditionalWrapper>
+    </BootstrapTooltip>
   )
 }
 

apps/frontend/src/app/Components/Weapon/WeaponCardPico.tsx

@@ -1,4 +1,5 @@
 import { weaponAsset } from '@genshin-optimizer/gi/assets'
+import type { ICachedWeapon } from '@genshin-optimizer/gi/db'
 import { useWeapon } from '@genshin-optimizer/gi/db-ui'
 import { Box, Typography } from '@mui/material'
 import { useMemo } from 'react'
@@ -14,6 +15,11 @@ import WeaponNameTooltip from './WeaponNameTooltip'
 
 export default function WeaponCardPico({ weaponId }: { weaponId: string }) {
   const weapon = useWeapon(weaponId)
+  if (!weapon) return null
+  return <WeaponCardPicoObj weapon={weapon} />
+}
+
+export function WeaponCardPicoObj({ weapon }: { weapon: ICachedWeapon }) {
   const weaponSheet = weapon?.key && getWeaponSheet(weapon.key)
   const UIData = useMemo(
     () =>

apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildEditorBtn.tsx

@@ -13,7 +13,7 @@ import {
   Divider,
   Typography,
 } from '@mui/material'
-import { Suspense, useContext, useMemo } from 'react'
+import { Suspense, useContext } from 'react'
 import { TeamCharacterContext } from '../../../Context/TeamCharacterContext'
 import { Build } from './Build'
 import { BuildEquipped } from './BuildEquipped'
@@ -35,16 +35,8 @@ export default function BuildEditorBtn() {
     },
   } = useContext(TeamCharacterContext)
   const weaponTypeKey = getCharData(characterKey).weaponType
-  const name = useMemo(() => {
-    switch (buildType) {
-      case 'equipped':
-        return 'Equipped Build'
-      case 'real':
-        return database.builds.get(buildId)?.name ?? ''
-      case 'tc':
-        return database.buildTcs.get(buildTcId)?.name ?? ''
-    }
-  }, [database, buildType, buildId, buildTcId])
+  // TODO: Translate for the `equippedName` variable
+  const name = database.teamChars.getActiveBuildName(teamCharId)
   return (
     <>
       <Button

apps/frontend/src/app/PageTeam/CharacterDisplay/Tabs/TabOptimize/Components/AllowChar.tsx

@@ -563,7 +563,6 @@ function SelectItem({
     setCharListMode(mode)
     setCharList(new Set([...charList]).add(locKey))
   }, [selected, setCharListMode, setCharList, charList, locKey])
-  const disableTooltip = useMemo(() => charList.size !== 0, [charList.size])
   const allowed =
     // Character is already allowed, and not selected to be excluded
     (selected &&
@@ -607,7 +606,6 @@ function SelectItem({
         characterKey={database.chars.LocationToCharacterKey(locKey)}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
-        disableTooltip={disableTooltip}
       />
       {content}
     </CardLight>