CharacterSelectionModal refactoring and followup changes for single s…

…election (frzyc#2473)

* checkpoint: CharacterSelection and CharacterMultiSelection refactored; selected teammates pinned to the top for single select; indicator for which slot is being selected WIP

* checkpoint: animation added, char select breaks character page due to no teamid

* CharacterSelectionModal works from all locations but is really laggy from the character page locally

* Refactor Take 2: CharacterSelectionModal code split into a single select and multi select modal with shared code in a base component; Moved some of SelectionCard code out into to separate wrappers for single and multi select containing the tooltip, fav toggles, and outlines/team slot number chips

* fix typecheck errors

* added some comments on refactored components

libs/gi/page-characters/src/index.tsx

@@ -29,7 +29,7 @@ import {
   CharacterCard,
   CharacterEditor,
   CharacterRarityToggle,
-  CharacterSelectionModal,
+  CharacterSingleSelectionModal,
   ElementToggle,
   SillyContext,
   WeaponToggle,
@@ -222,7 +222,7 @@ export default function PageCharacter() {
         />
       )}
       <Suspense fallback={false}>
-        <CharacterSelectionModal
+        <CharacterSingleSelectionModal
           newFirst
           show={newCharacter}
           onHide={() => setnewCharacter(false)}

libs/gi/page-team/src/TeamSetting/index.tsx

@@ -8,7 +8,7 @@ import {
   CharIconSide,
   CharacterMultiSelectionModal,
   CharacterName,
-  CharacterSelectionModal,
+  CharacterSingleSelectionModal,
   EnemyExpandCard,
   TeamDelModal,
   TeamInfoAlert,
@@ -116,6 +116,7 @@ function TeamEditor({
   const database = useDatabase()
   const team = database.teams.get(teamId)!
   const { loadoutData } = team
+
   const onSelect = (cKey: CharacterKey, selectedIndex: number) => {
     // Make sure character exists
     database.chars.getWithInitWeapon(cKey)
@@ -170,9 +171,6 @@ function TeamEditor({
   const [charSelectIndex, setCharSelectIndex] = useState(
     undefined as number | undefined
   )
-  const charKeyAtIndex = database.teamChars.get(
-    loadoutData[charSelectIndex as number]?.teamCharId
-  )?.key
   const onSingleSelect = (cKey: CharacterKey) => {
     if (charSelectIndex === undefined) return
     onSelect(cKey, charSelectIndex)
@@ -215,11 +213,12 @@ function TeamEditor({
   return (
     <>
       <Suspense fallback={false}>
-        <CharacterSelectionModal
-          filter={(c) => c !== charKeyAtIndex}
+        <CharacterSingleSelectionModal
           show={!showMultiSelect && charSelectIndex !== undefined}
           onHide={() => setCharSelectIndex(undefined)}
           onSelect={onSingleSelect}
+          selectedIndex={charSelectIndex}
+          loadoutData={loadoutData}
         />
       </Suspense>
       <Suspense fallback={false}>
@@ -228,8 +227,8 @@ function TeamEditor({
           onHide={() => {
             setShowMultiSelect(false)
           }}
-          onMultiSelect={onMultiSelect}
-          teamId={teamId}
+          onSelect={onMultiSelect}
+          loadoutData={loadoutData}
         />
       </Suspense>
       <Grid container columns={{ xs: 1, md: 2 }} spacing={2}>