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

src/app/context/Context.tsx

@@ -19,10 +19,14 @@ export const SessionContext = createContext<{
   setSessionReady: Dispatch<SetStateAction<boolean>>;
   EVE_SSO_CALLBACK_URL: string;
   EVE_SSO_CLIENT_ID: string;
+  compactMode: boolean;
+  toggleCompactMode: () => void;
 }>({
   sessionReady: false,
   refreshSession: () => {},
   setSessionReady: () => {},
   EVE_SSO_CALLBACK_URL: "",
   EVE_SSO_CLIENT_ID: "",
+  compactMode: false,
+  toggleCompactMode: () => {},
 });

src/app/page.tsx

@@ -14,6 +14,7 @@ const Home = () => {
   const [characters, setCharacters] = useState<AccessToken[]>([]);
   const [sessionReady, setSessionReady] = useState(false);
   const [environment, setEnvironment] = useState<Env | undefined>(undefined);
+  const [compactMode, setCompactMode] = useState(false);
 
   const searchParams = useSearchParams();
   const code = searchParams && searchParams.get("code");
@@ -77,6 +78,20 @@ const Home = () => {
     refreshSession(characters).then(saveCharacters).then(setCharacters);
   };
 
+  const toggleCompactMode = () => {
+    setCompactMode(!compactMode);
+  };
+
+  useEffect(() => {
+    const storedCompactMode = localStorage.getItem("compactMode");
+    if (!storedCompactMode) return;
+    storedCompactMode === "true" ? setCompactMode(true) : false;
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("compactMode", compactMode ? "true" : "false");
+  }, [compactMode]);
+
   // Initialize EVE PI
   useEffect(() => {
     fetch("api/env")
@@ -103,6 +118,8 @@ const Home = () => {
         refreshSession,
         EVE_SSO_CALLBACK_URL: environment?.EVE_SSO_CALLBACK_URL ?? "",
         EVE_SSO_CLIENT_ID: environment?.EVE_SSO_CLIENT_ID ?? "",
+        compactMode,
+        toggleCompactMode,
       }}
     >
       <CharacterContext.Provider