Add animation to group open

src/components/map/MapTileGroup.js

@@ -16,9 +16,13 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
       onSelect={() => onSelect(group.id)}
       onDoubleClick={onDoubleClick}
     >
-      <Grid columns={layout.gridTemplate} p={2} sx={{ gridGap: 2 }}>
+      <Grid columns={layout.groupGridTemplate} p={2} sx={{ gridGap: 2 }}>
         {maps.slice(0, 16).map((map) => (
-          <MapTileImage sx={{ borderRadius: "8px" }} map={map} key={map.id} />
+          <MapTileImage
+            sx={{ borderRadius: "8px" }}
+            map={map}
+            key={`${map.id}-group-tile`}
+          />
         ))}
       </Grid>
     </Tile>

src/components/map/MapTiles.js

@@ -13,6 +13,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
   const {
     groups,
     selectedGroupIds,
+    openGroupId,
     openGroupItems,
     selectMode,
     onGroupOpen,
@@ -63,6 +64,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
       renderTile={renderTile}
       onTileSelect={onGroupSelect}
       disableGrouping={subgroup}
+      openGroupId={openGroupId}
     />
   );
 }