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>
+  );
+};

src/app/components/AppBar/AppBar.tsx

@@ -1,25 +1,26 @@
-import * as React from "react";
+import MenuIcon from "@mui/icons-material/Menu";
+import PublicIcon from "@mui/icons-material/Public";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
-import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import PublicIcon from "@mui/icons-material/Public";
+import Toolbar from "@mui/material/Toolbar";
-import { LoginButton } from "../Login/LoginButton";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
 import { DowloadButton } from "../Backup/DowloadButton";
 import { UploadButton } from "../Backup/UploadButton";
-import { DiscordButton } from "../Discord/DiscordButton";
-import { GitHubButton } from "../Github/GitHubButton";
 import { CCPButton } from "../CCP/CCPButton";
 import { CompactModeButton } from "../CompactModeButton/CompactModeButton";
+import { DiscordButton } from "../Discord/DiscordButton";
+import { GitHubButton } from "../Github/GitHubButton";
+import { LoginButton } from "../Login/LoginButton";
+import { PlanModeButton } from "../PlanModeButton/PlanModeButton";
 
 function ResponsiveAppBar() {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
-    null
+    null,
   );
 
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
@@ -103,6 +104,9 @@ function ResponsiveAppBar() {
               <MenuItem onClick={handleCloseNavMenu}>
                 <CompactModeButton />
               </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <PlanModeButton />
+              </MenuItem>
             </Menu>
           </Box>
           <PublicIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
@@ -129,6 +133,7 @@ function ResponsiveAppBar() {
               flexGrow: 1,
               display: { xs: "none", md: "flex" },
               alignItems: "center",
+              gap: "0.2rem"
             }}
           >
             <LoginButton />
@@ -138,6 +143,7 @@ function ResponsiveAppBar() {
             <GitHubButton />
             <CCPButton />
             <CompactModeButton />
+            <PlanModeButton />
           </Box>
         </Toolbar>
       </Container>

src/app/components/Characters/CharacterDialog.tsx

@@ -37,7 +37,11 @@ export const CharacterDialog = ({
   };
 
   return (
-    <Dialog open={character !== undefined} onClose={closeDialog}>
+    <Dialog
+      open={character !== undefined}
+      onClose={closeDialog}
+      fullWidth={true}
+    >
       <DialogTitle>{character && character.character.name}</DialogTitle>
       <TextField
         id="outlined-basic"
@@ -50,13 +54,13 @@ export const CharacterDialog = ({
       />
       <TextField
         id="outlined-basic"
-        label="Comment"
+        label="Comment / Plan"
         variant="outlined"
         value={comment ?? ""}
         sx={{ margin: 1 }}
         multiline={true}
+        minRows={6}
         onChange={(event) => setComment(event.target.value)}
-        onKeyDown={handleKeyDown}
       />
       <DialogActions>
         <Button

src/app/components/MainGrid.tsx

@@ -10,8 +10,6 @@ import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@emotion/react";
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -38,7 +36,7 @@ declare module "@mui/material/styles" {
   }
 }
 
-export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
+export const MainGrid = () => {
   const { characters } = useContext(CharacterContext);
   const groupByAccount = characters.reduce<Grouped>((group, character) => {
     const { account } = character;

src/app/components/PlanModeButton/PlanModeButton.tsx

@@ -0,0 +1,18 @@
+import { SessionContext } from "@/app/context/Context";
+import { ToggleButton, Tooltip } from "@mui/material";
+import { useContext } from "react";
+
+export const PlanModeButton = () => {
+  const { planMode, togglePlanMode } = useContext(SessionContext);
+  return (
+    <Tooltip title="Toggle plan mode that show layout for widescreen">
+      <ToggleButton
+        value="check"
+        selected={planMode}
+        onChange={togglePlanMode}
+      >
+        Plan mode
+      </ToggleButton>
+    </Tooltip>
+  );
+};

src/app/context/Context.tsx

@@ -22,6 +22,8 @@ export const SessionContext = createContext<{
   EVE_SSO_CLIENT_ID: string;
   compactMode: boolean;
   toggleCompactMode: () => void;
+  planMode: boolean;
+  togglePlanMode: () => void;
   piPrices: EvePraisalResult | undefined;
 }>({
   sessionReady: false,
@@ -31,5 +33,7 @@ export const SessionContext = createContext<{
   EVE_SSO_CLIENT_ID: "",
   compactMode: false,
   toggleCompactMode: () => {},
+  planMode: false,
+  togglePlanMode: () => {},
   piPrices: undefined,
 });

src/app/page.tsx

@@ -16,6 +16,7 @@ const Home = () => {
   const [sessionReady, setSessionReady] = useState(false);
   const [environment, setEnvironment] = useState<Env | undefined>(undefined);
   const [compactMode, setCompactMode] = useState(false);
+  const [planMode, setPlanMode] = useState(false);
   const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
     undefined
   );
@@ -87,6 +88,10 @@ const Home = () => {
     setCompactMode(!compactMode);
   };
 
+  const togglePlanMode = () => {
+    setPlanMode(!planMode)
+  }
+
   useEffect(() => {
     const storedCompactMode = localStorage.getItem("compactMode");
     if (!storedCompactMode) return;
@@ -139,6 +144,8 @@ const Home = () => {
         EVE_SSO_CLIENT_ID: environment?.EVE_SSO_CLIENT_ID ?? "",
         compactMode,
         toggleCompactMode,
+        planMode,
+        togglePlanMode,
         piPrices,
       }}
     >
@@ -150,7 +157,7 @@ const Home = () => {
           restoreCharacters,
         }}
       >
-        <MainGrid sessionReady={sessionReady} />
+        <MainGrid />
       </CharacterContext.Provider>
     </SessionContext.Provider>
   );