Improve characters handling and add a collapse to account cards for easier sorting

src/app/components/Account/AccountCard.tsx

@@ -1,15 +1,18 @@
 import { AccessToken } from "@/types";
-import { Box, Stack, Typography, useTheme, Paper } from "@mui/material";
+import { Box, Stack, Typography, useTheme, Paper, IconButton } from "@mui/material";
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
 import { SessionContext } from "@/app/context/Context";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { PlanRow } from "./PlanRow";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
   const theme = useTheme();
-
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const { planMode } = useContext(SessionContext);
+
   return (
     <Paper
       elevation={2}
@@ -40,6 +43,7 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
             marginBottom: theme.spacing(2),
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'space-between',
           }}
         >
           <Typography 
@@ -49,12 +53,22 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
               color: theme.palette.text.primary,
             }}
           >
-            {characters[0].account !== "-"
+            {characters.length > 0 && characters[0].account !== "-"
               ? `Account: ${characters[0].account}`
               : "No account name"}
           </Typography>
+          <IconButton 
+            size="small" 
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            sx={{ 
+              transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s ease-in-out'
+            }}
+          >
+            {isCollapsed ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
         </Box>
-        {characters.map((c) => (
+        {!isCollapsed && characters.map((c) => (
           <Stack
             key={c.character.characterId}
             direction="row"