Add plan mode to show character comments in the table

src/app/components/Account/AccountCard.tsx

@@ -2,9 +2,13 @@ import { AccessToken } from "@/types";
 import { Box, Stack, Typography, useTheme } from "@mui/material";
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
-
+import { SessionContext } from "@/app/context/Context";
+import { useContext } from "react";
+import { PlanRow } from "./PlanRow";
 export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
   const theme = useTheme();
+
+  const { planMode } = useContext(SessionContext);
   return (
     <Box
       sx={{
@@ -24,7 +28,11 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
           alignItems="flex-start"
         >
           <CharacterRow character={c} />
-          <PlanetaryInteractionRow character={c} />
+          {planMode ? (
+            <PlanRow character={c} />
+          ) : (
+            <PlanetaryInteractionRow character={c} />
+          )}
         </Stack>
       ))}
     </Box>

src/app/components/Account/PlanRow.tsx

@@ -0,0 +1,16 @@
+import { AccessToken } from "@/types";
+import { Stack, Typography, styled } from "@mui/material";
+const StackItem = styled(Stack)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
+  textAlign: "left",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+export const PlanRow = ({ character }: { character: AccessToken }) => {
+  return (
+    <StackItem>
+      <Typography style={{whiteSpace: 'pre-line'}}>{character.comment}</Typography>
+    </StackItem>
+  );
+};