Make account cards draggable and persist order in local storage

src/app/components/Account/AccountCard.tsx

@@ -1,40 +1,74 @@
 import { AccessToken } from "@/types";
-import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { Box, Stack, Typography, useTheme, Paper } 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
+    <Paper
+      elevation={2}
       sx={{
-        padding: 1,
-        borderBottom: theme.custom.compactMode ? "" : "solid 1px gray",
+        padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
+        margin: theme.spacing(1),
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 1,
+        backgroundColor: theme.palette.background.paper,
+        transition: 'all 0.2s ease-in-out',
+        cursor: 'grab',
+        '&:hover': {
+          boxShadow: theme.shadows[4],
+        },
+        '&:active': {
+          boxShadow: theme.shadows[8],
+          cursor: 'grabbing',
+        },
       }}
     >
-      <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>
-        {characters[0].account !== "-"
-          ? `Account: ${characters[0].account}`
-          : "No account name"}
-      </Typography>
-      {characters.map((c) => (
-        <Stack
-          key={c.character.characterId}
-          direction="row"
-          alignItems="flex-start"
+      <Box sx={{ flex: 1 }}>
+        <Box
+          sx={{
+            backgroundColor: theme.palette.background.default,
+            borderRadius: 1,
+            padding: theme.spacing(1),
+            marginBottom: theme.spacing(2),
+            display: 'flex',
+            alignItems: 'center',
+          }}
         >
-          <CharacterRow character={c} />
-          {planMode ? (
-            <PlanRow character={c} />
-          ) : (
-            <PlanetaryInteractionRow character={c} />
-          )}
-        </Stack>
-      ))}
-    </Box>
+          <Typography 
+            sx={{ 
+              fontSize: "0.9rem",
+              fontWeight: 500,
+              color: theme.palette.text.primary,
+            }}
+          >
+            {characters[0].account !== "-"
+              ? `Account: ${characters[0].account}`
+              : "No account name"}
+          </Typography>
+        </Box>
+        {characters.map((c) => (
+          <Stack
+            key={c.character.characterId}
+            direction="row"
+            alignItems="flex-start"
+          >
+            <CharacterRow character={c} />
+            {planMode ? (
+              <PlanRow character={c} />
+            ) : (
+              <PlanetaryInteractionRow character={c} />
+            )}
+          </Stack>
+        ))}
+      </Box>
+    </Paper>
   );
 };

src/app/components/MainGrid.tsx

@@ -11,6 +11,7 @@ import { AccessToken } from "@/types";
 import { CharacterContext, SessionContext } from "../context/Context";
 import ResponsiveAppBar from "./AppBar/AppBar";
 import { Summary } from "./Summary/Summary";
+import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd";
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -38,7 +39,41 @@ declare module "@mui/material/styles" {
 }
 
 export const MainGrid = () => {
-  const { characters } = useContext(CharacterContext);
+  const { characters, updateCharacter } = useContext(CharacterContext);
+  const [accountOrder, setAccountOrder] = useState<string[]>([]);
+
+  // Initialize account order when characters change
+  useEffect(() => {
+    const currentAccounts = Object.keys(
+      characters.reduce<Grouped>((group, character) => {
+        const { account } = character;
+        group[account ?? ""] = group[account ?? ""] ?? [];
+        group[account ?? ""].push(character);
+        return group;
+      }, {})
+    );
+
+    const savedOrder = localStorage.getItem('accountOrder');
+    if (savedOrder) {
+      try {
+        const parsedOrder = JSON.parse(savedOrder);
+        const validOrder = parsedOrder.filter((account: string) => currentAccounts.includes(account));
+        const newAccounts = currentAccounts.filter(account => !validOrder.includes(account));
+        setAccountOrder([...validOrder, ...newAccounts]);
+      } catch (e) {
+        setAccountOrder(currentAccounts);
+      }
+    } else {
+      setAccountOrder(currentAccounts);
+    }
+  }, [characters]);
+
+  useEffect(() => {
+    if (accountOrder.length > 0) {
+      localStorage.setItem('accountOrder', JSON.stringify(accountOrder));
+    }
+  }, [accountOrder]);
+
   const groupByAccount = characters.reduce<Grouped>((group, character) => {
     const { account } = character;
     group[account ?? ""] = group[account ?? ""] ?? [];
@@ -79,24 +114,66 @@ export const MainGrid = () => {
     );
   }, [compactMode]);
 
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const items = Array.from(accountOrder);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    setAccountOrder(items);
+  };
+
+  const DragDropContextComponent = DragDropContext as any;
+  const DroppableComponent = Droppable as any;
+  const DraggableComponent = Draggable as any;
+
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Box sx={{ flexGrow: 1 }}>
         <ResponsiveAppBar />
         {compactMode ? <></> : <Summary characters={characters} />}
-        <Grid container spacing={1}>
-          {Object.values(groupByAccount).map((g, id) => (
-            <Grid
-              item
-              xs={12}
-              sm={compactMode ? 6 : 12}
-              key={`account-${id}-${g[0].account}`}
-            >
-              <AccountCard characters={g} />
-            </Grid>
-          ))}
-        </Grid>
+        <DragDropContextComponent onDragEnd={handleDragEnd}>
+          <DroppableComponent droppableId="accounts">
+            {(provided: any) => (
+              <Grid
+                container
+                spacing={1}
+                sx={{ padding: 1 }}
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                {accountOrder.map((account, index) => (
+                  <DraggableComponent
+                    key={account}
+                    draggableId={account}
+                    index={index}
+                  >
+                    {(provided: any) => (
+                      <Grid
+                        item
+                        xs={12}
+                        sm={compactMode ? 6 : 12}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        sx={{
+                          '& > *': {
+                            width: '100%',
+                          },
+                        }}
+                      >
+                        <AccountCard characters={groupByAccount[account]} />
+                      </Grid>
+                    )}
+                  </DraggableComponent>
+                ))}
+                {provided.placeholder}
+              </Grid>
+            )}
+          </DroppableComponent>
+        </DragDropContextComponent>
       </Box>
     </ThemeProvider>
   );