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"

src/app/components/Characters/CharacterDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogTitle, Box } from "@mui/material";
 import { AccessToken, CharacterUpdate } from "../../../types";
 import { useEffect, useState, KeyboardEvent } from "react";
 import TextField from "@mui/material/TextField";
@@ -34,7 +34,9 @@ export const CharacterDialog = ({
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter") {
       closeDialog();
-      character && updateCharacter(character, { account, comment });
+      if (character) {
+        updateCharacter(character, { account, comment });
+      }
     }
   };
 
@@ -44,16 +46,27 @@ export const CharacterDialog = ({
       onClose={closeDialog}
       fullWidth={true}
     >
-      <DialogTitle>{character && character.character.name}</DialogTitle>
+      <DialogTitle>{character?.character?.name}</DialogTitle>
-      <TextField
+      <Box sx={{ display: 'flex', alignItems: 'center', margin: 1 }}>
-        id="outlined-basic"
+        <TextField
-        label="Account name"
+          id="outlined-basic"
-        variant="outlined"
+          label="Account name"
-        value={account ?? ""}
+          variant="outlined"
-        sx={{ margin: 1 }}
+          value={account ?? ""}
-        onChange={(event) => setAccount(event.target.value)}
+          sx={{ flex: 1 }}
-        onKeyDown={handleKeyDown}
+          onChange={(event) => setAccount(event.target.value)}
-      />
+          onKeyDown={handleKeyDown}
+        />
+        <Button
+          onClick={() => {
+            setAccount("-");
+          }}
+          variant="outlined"
+          sx={{ ml: 1 }}
+        >
+          Clear account
+        </Button>
+      </Box>
       <TextField
         id="outlined-basic"
         label="System"
@@ -77,6 +90,7 @@ export const CharacterDialog = ({
       <DialogActions>
         <Button
           onClick={() => {
+            console.log("Saving character", character, { account, comment, system });
             character &&
               updateCharacter(character, { account, comment, system });
             closeDialog();

src/app/components/MainGrid.tsx

@@ -164,7 +164,9 @@ export const MainGrid = () => {
                           },
                         }}
                       >
-                        <AccountCard characters={groupByAccount[account]} />
+                        {groupByAccount[account] && groupByAccount[account].length > 0 && (
+                          <AccountCard characters={groupByAccount[account]} />
+                        )}
                       </Grid>
                     )}
                   </DraggableComponent>