Add conditional search/filter for relic sets/lightcones

libs/sr/consts/src/lightCone.ts

@@ -111,3 +111,9 @@ export const allSuperimposeKeys = [1, 2, 3, 4, 5] as const
 export type SuperimposeKey = (typeof allSuperimposeKeys)[number]
 
 export const lightConeMaxLevel = 80
+
+export function isLightConeKey(key: unknown): key is LightConeKey {
+  return (
+    typeof key === 'string' && allLightConeKeys.includes(key as LightConeKey)
+  )
+}

libs/sr/consts/src/relic.ts

@@ -170,3 +170,11 @@ export function isPlanarRelicSetKey(
 ): key is RelicPlanarSetKey {
   return allRelicPlanarSetKeys.includes(key as RelicPlanarSetKey)
 }
+
+export function isRelicSetKey(key: unknown): key is RelicSetKey {
+  return (
+    typeof key === 'string' &&
+    (isCavernRelicSetKey(key as RelicSetKey) ||
+      isPlanarRelicSetKey(key as RelicSetKey))
+  )
+}

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

@@ -1,15 +1,37 @@
-import { allLightConeKeys } from '@genshin-optimizer/sr/consts'
-import { Grid } from '@mui/material'
+import type { LightConeKey } from '@genshin-optimizer/sr/consts'
+import { isLightConeKey } from '@genshin-optimizer/sr/consts'
+import { LightConeAutocomplete } from '@genshin-optimizer/sr/ui'
+import { Box, Grid, Stack } from '@mui/material'
+import { useMemo, useState } from 'react'
 import { LightConeSheetDisplay } from './LightConeSheetDisplay'
+import { useTeamContext } from './context'
 
 export function LightConeSheetsDisplay() {
+  const { team } = useTeamContext()
+  const conditionals = team.conditionals
+  const [lcKey, setLcKey] = useState<LightConeKey | ''>('')
+  const lcList = useMemo(() => {
+    const sets = conditionals.map((c) => c.sheet).filter(isLightConeKey)
+    if (lcKey) sets.push(lcKey)
+    // Make sure the currently selected lc is at the front
+    return [...new Set(sets)].sort((set) => (set === lcKey ? -1 : 1))
+  }, [conditionals, lcKey])
   return (
-    <Grid container columns={3} spacing={1}>
-      {allLightConeKeys.map((lcKey) => (
-        <Grid item xs={1} key={lcKey}>
-          <LightConeSheetDisplay lcKey={lcKey} />
+    <Stack spacing={1} sx={{ pt: 1 }}>
+      <LightConeAutocomplete
+        lcKey={lcKey}
+        setLCKey={setLcKey}
+        label="Search Light Cone" // TODO: translation
+      />
+      <Box>
+        <Grid container columns={3} spacing={1}>
+          {lcList.map((setKey) => (
+            <Grid item xs={1} key={setKey}>
+              <LightConeSheetDisplay lcKey={setKey} />
+            </Grid>
+          ))}
         </Grid>
-      ))}
-    </Grid>
+      </Box>
+    </Stack>
   )
 }

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

@@ -1,15 +1,38 @@
-import { allRelicSetKeys } from '@genshin-optimizer/sr/consts'
-import { Grid } from '@mui/material'
+import { isRelicSetKey, type RelicSetKey } from '@genshin-optimizer/sr/consts'
+import { RelicSetAutocomplete } from '@genshin-optimizer/sr/ui'
+import { Box, Grid, Stack } from '@mui/material'
+import { useMemo, useState } from 'react'
+import { useTeamContext } from './context'
 import { RelicSheetDisplay } from './RelicSheetDisplay'
 
 export function RelicSheetsDisplay() {
+  const { team } = useTeamContext()
+  const conditionals = team.conditionals
+  const [relicSetKey, setRelicSetKey] = useState<RelicSetKey | ''>('')
+  const relicList = useMemo(() => {
+    const sets = conditionals
+      .map((c) => c.sheet)
+      .filter(isRelicSetKey) as RelicSetKey[]
+    if (relicSetKey) sets.push(relicSetKey)
+    // Make sure the currently selected set is at the front
+    return [...new Set(sets)].sort((set) => (set === relicSetKey ? -1 : 1))
+  }, [conditionals, relicSetKey])
   return (
-    <Grid container columns={3} spacing={1}>
-      {allRelicSetKeys.map((setKey) => (
-        <Grid item xs={1} key={setKey}>
-          <RelicSheetDisplay setKey={setKey} />
+    <Stack spacing={1} sx={{ pt: 1 }}>
+      <RelicSetAutocomplete
+        relicSetKey={relicSetKey}
+        setRelicSetKey={setRelicSetKey}
+        label="Search Relic Set" // TODO: translation
+      />
+      <Box>
+        <Grid container columns={3} spacing={1}>
+          {relicList.map((setKey) => (
+            <Grid item xs={1} key={setKey}>
+              <RelicSheetDisplay setKey={setKey} />
+            </Grid>
+          ))}
         </Grid>
-      ))}
-    </Grid>
+      </Box>
+    </Stack>
   )
 }

libs/sr/ui/src/LightCone/LightConeAutocomplete.tsx

@@ -12,7 +12,7 @@ type LightConeAutocompleteProps = {
   setLCKey: (key: LightConeKey | '') => void
   label?: string
 }
-export default function LightConeAutocomplete({
+export function LightConeAutocomplete({
   lcKey,
   setLCKey,
   label = '',

libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx

@@ -21,7 +21,7 @@ import type { MouseEvent, ReactNode } from 'react'
 import { Suspense } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LocationAutocomplete } from '../../Character'
-import LightConeAutocomplete from '../LightConeAutocomplete'
+import { LightConeAutocomplete } from '../LightConeAutocomplete'
 
 export function LightConeEditorCard({
   onClose,