add compact mode

src/app/components/MainGrid.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   Box,
   CssBaseline,
@@ -8,7 +8,7 @@ import {
 } from "@mui/material";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
-import { CharacterContext } from "../context/Context";
+import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
 
 interface Grouped {
@@ -23,6 +23,7 @@ const darkTheme = createTheme({
 
 export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   const { characters } = useContext(CharacterContext);
+  const { compactMode } = useContext(SessionContext);
   const groupByAccount = characters.reduce<Grouped>((group, character) => {
     const { account } = character;
     group[account ?? ""] = group[account ?? ""] ?? [];
@@ -36,7 +37,11 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
       <Box sx={{ flexGrow: 1 }}>
         <ResponsiveAppBar />
         <Grid container spacing={1}>
-          <Grid item xs={12}>
+          <Grid
+            item
+            xs={12}
+            style={{ display: compactMode ? "flex" : "block" }}
+          >
             {Object.values(groupByAccount).map((g, id) => (
               <AccountCard
                 key={`account-${id}-${g[0].account}`}