Add multi selection to tile grouping

src/components/map/MapTileGroup.js

@@ -16,8 +16,12 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
       onSelect={() => onSelect(group.id)}
       onDoubleClick={onDoubleClick}
     >
-      <Grid columns={layout.groupGridTemplate} p={2} sx={{ gridGap: 2 }}>
-        {maps.slice(0, 16).map((map) => (
+      <Grid
+        columns={`repeat(${layout.groupGridColumns}, 1fr)`}
+        p={2}
+        sx={{ gridGap: 2 }}
+      >
+        {maps.slice(0, 9).map((map) => (
           <MapTileImage
             sx={{ borderRadius: "8px" }}
             map={map}

src/components/map/MapTiles.js

@@ -9,7 +9,7 @@ import { getGroupItems } from "../../helpers/group";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
+function MapTiles({ maps, onMapEdit, onMapSelect, subgroup, columns }) {
   const {
     groups,
     selectedGroupIds,
@@ -60,11 +60,13 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
   return (
     <SortableTiles
       groups={subgroup ? openGroupItems : groups}
+      selectedGroupIds={selectedGroupIds}
       onGroupChange={onGroupsChange}
       renderTile={renderTile}
       onTileSelect={onGroupSelect}
       disableGrouping={subgroup}
       openGroupId={openGroupId}
+      columns={columns}
     />
   );
 }