Make account cards draggable and persist order in local storage

package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.3",
+        "@hello-pangea/dnd": "^18.0.1",
         "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.13.5",
         "@sentry/nextjs": "^8.2.1",
@@ -279,11 +280,12 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -534,6 +536,57 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz",
       "integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ=="
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/@types/react": {
+      "version": "19.1.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
+      "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -2604,6 +2657,12 @@
         "lil-gui": "~0.17.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/webxr": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz",
@@ -3711,6 +3770,15 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
       "license": "MIT"
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -7323,6 +7391,12 @@
         }
       ]
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -7472,6 +7546,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -7496,9 +7576,10 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
+      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
@@ -8668,6 +8749,12 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
       "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinycolor2": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
@@ -8935,6 +9022,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9483,11 +9579,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -9683,6 +9779,39 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.3.tgz",
       "integrity": "sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ=="
     },
+    "@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "requires": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "19.1.2",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
+          "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "csstype": "^3.0.2"
+          }
+        },
+        "react-redux": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+          "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+          "requires": {
+            "@types/use-sync-external-store": "^0.0.6",
+            "use-sync-external-store": "^1.4.0"
+          }
+        }
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -10970,6 +11099,11 @@
         "lil-gui": "~0.17.0"
       }
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
     "@types/webxr": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz",
@@ -11740,6 +11874,14 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -14130,6 +14272,11 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14244,6 +14391,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
     "reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -14261,9 +14413,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
+      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regexp.prototype.flags": {
       "version": "1.5.4",
@@ -15028,6 +15180,11 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
       "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
     },
+    "tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "tinycolor2": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
@@ -15201,6 +15358,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.3",
+    "@hello-pangea/dnd": "^18.0.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",
     "@sentry/nextjs": "^8.2.1",

src/app/components/Account/AccountCard.tsx

@@ -1,26 +1,59 @@
 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,
+        padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
-        borderBottom: theme.custom.compactMode ? "" : "solid 1px gray",
+        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',
+        },
+      }}
+    >
+      <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',
+          }}
+        >
+          <Typography 
+            sx={{ 
+              fontSize: "0.9rem",
+              fontWeight: 500,
+              color: theme.palette.text.primary,
             }}
           >
-      <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>
             {characters[0].account !== "-"
               ? `Account: ${characters[0].account}`
               : "No account name"}
           </Typography>
+        </Box>
         {characters.map((c) => (
           <Stack
             key={c.character.characterId}
@@ -36,5 +69,6 @@ export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
           </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}>
+        <DragDropContextComponent onDragEnd={handleDragEnd}>
-          {Object.values(groupByAccount).map((g, id) => (
+          <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}
-              key={`account-${id}-${g[0].account}`}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        sx={{
+                          '& > *': {
+                            width: '100%',
+                          },
+                        }}
                       >
-              <AccountCard characters={g} />
+                        <AccountCard characters={groupByAccount[account]} />
                       </Grid>
+                    )}
+                  </DraggableComponent>
                 ))}
+                {provided.placeholder}
               </Grid>
+            )}
+          </DroppableComponent>
+        </DragDropContextComponent>
       </Box>
     </ThemeProvider>
   );