diff --git a/src/app/components/Account/AccountCard.tsx b/src/app/components/Account/AccountCard.tsx index e63f49d..3741cd4 100644 --- a/src/app/components/Account/AccountCard.tsx +++ b/src/app/components/Account/AccountCard.tsx @@ -3,7 +3,7 @@ import { Box, Stack, Typography, useTheme, Paper, IconButton } from "@mui/materi import { CharacterRow } from "../Characters/CharacterRow"; import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow"; import { SessionContext } from "@/app/context/Context"; -import { useContext, useState } from "react"; +import { useContext, useState, useEffect } from "react"; import { PlanRow } from "./PlanRow"; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; @@ -60,12 +60,17 @@ const calculateAccountTotals = (characters: AccessToken[], piPrices: EvePraisalR }; }; -export const AccountCard = ({ characters }: { characters: AccessToken[] }) => { +export const AccountCard = ({ characters, isCollapsed: propIsCollapsed }: { characters: AccessToken[], isCollapsed?: boolean }) => { const theme = useTheme(); - const [isCollapsed, setIsCollapsed] = useState(false); + const [localIsCollapsed, setLocalIsCollapsed] = useState(false); const { planMode, piPrices } = useContext(SessionContext); const { monthlyEstimate, storageValue } = calculateAccountTotals(characters, piPrices); + // Update local collapse state when prop changes + useEffect(() => { + setLocalIsCollapsed(propIsCollapsed ?? false); + }, [propIsCollapsed]); + return ( { setIsCollapsed(!isCollapsed)} + onClick={() => setLocalIsCollapsed(!localIsCollapsed)} sx={{ - transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', + transform: localIsCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease-in-out' }} > - {isCollapsed ? : } + {localIsCollapsed ? : } - {!isCollapsed && characters.map((c) => ( + {!localIsCollapsed && characters.map((c) => ( { const { characters, updateCharacter } = useContext(CharacterContext); const [accountOrder, setAccountOrder] = useState([]); + const [allCollapsed, setAllCollapsed] = useState(false); // Initialize account order when characters change useEffect(() => { @@ -134,6 +138,15 @@ export const MainGrid = () => { {compactMode ? <> : } + + + {(provided: any) => ( @@ -165,7 +178,10 @@ export const MainGrid = () => { }} > {groupByAccount[account] && groupByAccount[account].length > 0 && ( - + )} )}