From 6eace02a34af0931e8a8878ad5feb6796ac8add3 Mon Sep 17 00:00:00 2001
From: frzyc <frzyc@users.noreply.github.com>
Date: Wed, 22 Jan 2025 01:37:13 -0500
Subject: [PATCH] Add conditional search/filter for relic sets/lightcones

---
 libs/sr/consts/src/lightCone.ts               |  6 +++
 libs/sr/consts/src/relic.ts                   |  8 ++++
 .../page-team/src/LightConeSheetsDisplay.tsx  | 38 ++++++++++++++----
 libs/sr/page-team/src/RelicSheetsDisplay.tsx  | 39 +++++++++++++++----
 .../src/LightCone/LightConeAutocomplete.tsx   |  2 +-
 .../LightConeEditor/LightConeEditorCard.tsx   |  2 +-
 6 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/libs/sr/consts/src/lightCone.ts b/libs/sr/consts/src/lightCone.ts
index 596e183d59..b51d000502 100644
--- a/libs/sr/consts/src/lightCone.ts
+++ b/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)
+  )
+}
diff --git a/libs/sr/consts/src/relic.ts b/libs/sr/consts/src/relic.ts
index a8ba9512c7..475b560587 100644
--- a/libs/sr/consts/src/relic.ts
+++ b/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))
+  )
+}
diff --git a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx b/libs/sr/page-team/src/LightConeSheetsDisplay.tsx
index c7c4471f1a..a90a1bd636 100644
--- a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx
+++ b/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>
   )
 }
diff --git a/libs/sr/page-team/src/RelicSheetsDisplay.tsx b/libs/sr/page-team/src/RelicSheetsDisplay.tsx
index 8e5aa542a0..805864c72e 100644
--- a/libs/sr/page-team/src/RelicSheetsDisplay.tsx
+++ b/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>
   )
 }
diff --git a/libs/sr/ui/src/LightCone/LightConeAutocomplete.tsx b/libs/sr/ui/src/LightCone/LightConeAutocomplete.tsx
index 5554fd7b6b..a24317f6c3 100644
--- a/libs/sr/ui/src/LightCone/LightConeAutocomplete.tsx
+++ b/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 = '',
diff --git a/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx b/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx
index 9150fa88ff..bf7484e181 100644
--- a/libs/sr/ui/src/LightCone/LightConeEditor/LightConeEditorCard.tsx
+++ b/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,