add compact mode

src/app/components/AppBar/AppBar.tsx

@@ -15,6 +15,7 @@ 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";
 
 function ResponsiveAppBar() {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
@@ -120,13 +121,17 @@ function ResponsiveAppBar() {
           >
             EVE PI
           </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+          <Box
+            sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}
+            style={{ display: "flex", alignItems: "center" }}
+          >
             <LoginButton />
             <DowloadButton />
             <UploadButton />
             <DiscordButton />
             <GitHubButton />
             <CCPButton />
+            <CompactModeButton />
           </Box>
         </Toolbar>
       </Container>

src/app/components/Backup/DowloadButton.tsx

@@ -1,4 +1,4 @@
-import { CharacterContext, SessionContext } from "@/app/context/Context";
+import { CharacterContext } from "@/app/context/Context";
 import { Button, Tooltip } from "@mui/material";
 import { useContext } from "react";
 

src/app/components/CompactModeButton/CompactModeButton.tsx

@@ -0,0 +1,19 @@
+import { SessionContext } from "@/app/context/Context";
+import { ToggleButton, Tooltip } from "@mui/material";
+import { useContext } from "react";
+
+export const CompactModeButton = () => {
+  const { compactMode, toggleCompactMode } = useContext(SessionContext);
+  return (
+    <Tooltip title="Export your EVE PI list to transfer to another device or backup">
+      <ToggleButton
+        value="check"
+        selected={compactMode}
+        onChange={toggleCompactMode}
+        style={{ margin: "1rem 0" }}
+      >
+        Compact mode
+      </ToggleButton>
+    </Tooltip>
+  );
+};

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}`}