new component: ExpanderCard (used for scenes most used and recent)

src/pages/Scenes/ExpanderCard.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import {
+  Card,
+  Collapse,
+  IconButton,
+  IconButtonProps,
+  styled,
+  Typography,
+  useTheme
+} from '@mui/material'
+import useStore from '../../store/useStore'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props
+  return <IconButton {...other} />
+})(({ theme }) => ({
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  }),
+  variants: [
+    {
+      props: ({ expand }) => !expand,
+      style: {
+        transform: 'rotate(0deg)'
+      }
+    },
+    {
+      props: ({ expand }) => !!expand,
+      style: {
+        transform: 'rotate(180deg)'
+      }
+    }
+  ]
+}))
+
+const ExpanderCard = ({
+  title,
+  cardKey,
+  children
+}: {
+  title: string
+  cardKey: string
+  children: React.ReactNode
+}) => {
+  const theme = useTheme()
+  const setExpander = useStore((state) => state.setExpander)
+  const expander = useStore((state) => state.uiPersist.expander)
+
+  const handleExpandClick = () => {
+    setExpander(cardKey, !expander[cardKey])
+  }
+
+  return (
+    <Card sx={{ width: '100%', maxWidth: 'unset' }}>
+      <Typography
+        color="GrayText"
+        variant="h6"
+        sx={{
+          pl: 1,
+          pt: 0.5,
+          pb: 0.5,
+          border: '1px solid',
+          borderColor: theme.palette.divider,
+          borderBottom: 0,
+          justifyContent: 'space-between',
+          display: 'flex',
+          alignItems: 'center'
+        }}
+      >
+        {title}
+        <ExpandMore
+          expand={expander[cardKey]}
+          onClick={handleExpandClick}
+          aria-expanded={expander[cardKey]}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </ExpandMore>
+      </Typography>
+      <Collapse in={expander[cardKey]}>
+        <Box
+          sx={{ height: 208, width: '100%', maxWidth: '470px', m: '0 auto' }}
+        >
+          {children}
+        </Box>
+      </Collapse>
+    </Card>
+  )
+}
+
+export default ExpanderCard

src/pages/Scenes/ScenesMostUsed.tsx

@@ -1,14 +1,14 @@
 import { useEffect } from 'react'
-import Box from '@mui/material/Box'
 import {
   DataGrid,
   GridColDef,
   GridEventListener,
   GridRenderCellParams
 } from '@mui/x-data-grid'
-import { Card, Typography, useMediaQuery, useTheme } from '@mui/material'
+import { useMediaQuery, useTheme } from '@mui/material'
 import useStore from '../../store/useStore'
 import SceneImage from './ScenesImage'
+import ExpanderCard from './ExpanderCard'
 
 export default function ScenesMostUsed({
   scenes,
@@ -62,78 +62,47 @@ export default function ScenesMostUsed({
   ]
 
   return (
-    <Card
-      sx={{
-        background: db ? 'transparent' : '',
-        borderColor: db ? 'transparent' : '',
-        maxWidth: xsmallScreen ? '100%' : 'unset'
-      }}
-    >
-      <Box
+    <ExpanderCard title={title} cardKey="scenesMostUsed">
+      <DataGrid
+        onRowClick={handleEvent}
+        rowHeight={50}
+        columns={db ? columns.filter((c) => c.field !== 'used') : columns}
+        hideFooter
+        // headerHeight={1}
+        pageSizeOptions={[5]}
+        disableColumnSorting={xsmallScreen}
+        disableColumnMenu={xsmallScreen}
+        disableRowSelectionOnClick
+        rows={Object.values(mostUsedScenes)
+          .filter((scene: any) => sceneBlenderFilter(scene.name))
+          .map((v: any, i: number) => ({
+            id: i + 1,
+            ...v
+          }))}
+        initialState={{
+          // pagination: {
+          //   pageSize: 100,
+          // },
+          sorting: {
+            sortModel: [{ field: 'used', sort: 'desc' }]
+          },
+          columns: {
+            columnVisibilityModel: {
+              id: false,
+              scene_tags: false
+            }
+          }
+        }}
         sx={{
-          height: db ? 301 : 293,
-          width: '100%',
-          maxWidth: xsmallScreen ? 'unset' : '470px',
-          m: '0 auto'
+          borderColor: db ? 'transparent' : theme.palette.divider,
+          '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+            outline: 'none !important'
+          },
+          '& .MuiDataGrid-row:hover': {
+            cursor: 'pointer'
+          }
         }}
-      >
-        {!db && (
-          <Typography
-            color="GrayText"
-            variant="h6"
-            sx={{
-              pl: 1,
-              pt: 0.5,
-              pb: 0.5,
-              border: '1px solid',
-              borderColor: db ? 'transparent' : theme.palette.divider,
-              borderBottom: 0
-            }}
-          >
-            {title}
-          </Typography>
-        )}
-        <DataGrid
-          onRowClick={handleEvent}
-          rowHeight={50}
-          columns={db ? columns.filter((c) => c.field !== 'used') : columns}
-          hideFooter
-          // headerHeight={1}
-          pageSizeOptions={[5]}
-          disableColumnSorting={xsmallScreen}
-          disableColumnMenu={xsmallScreen}
-          disableRowSelectionOnClick
-          rows={Object.values(mostUsedScenes)
-            .filter((scene: any) => sceneBlenderFilter(scene.name))
-            .map((v: any, i: number) => ({
-              id: i + 1,
-              ...v
-            }))}
-          initialState={{
-            // pagination: {
-            //   pageSize: 100,
-            // },
-            sorting: {
-              sortModel: [{ field: 'used', sort: 'desc' }]
-            },
-            columns: {
-              columnVisibilityModel: {
-                id: false,
-                scene_tags: false
-              }
-            }
-          }}
-          sx={{
-            borderColor: db ? 'transparent' : theme.palette.divider,
-            '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
-              outline: 'none !important'
-            },
-            '& .MuiDataGrid-row:hover': {
-              cursor: 'pointer'
-            }
-          }}
-        />
-      </Box>
-    </Card>
+      />
+    </ExpanderCard>
   )
 }

src/pages/Scenes/ScenesRecent.tsx

@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react'
-import Box from '@mui/material/Box'
 import {
   DataGrid,
   GridColDef,
   GridEventListener,
   GridRenderCellParams
 } from '@mui/x-data-grid'
-import { Card, Typography, useMediaQuery, useTheme } from '@mui/material'
+import { useMediaQuery } from '@mui/material'
 import useStore from '../../store/useStore'
 import SceneImage from './ScenesImage'
+import ExpanderCard from './ExpanderCard'
 
 export default function ScenesRecent({ scenes, activateScene, title }: any) {
-  const theme = useTheme()
   const recentScenes = useStore((state) => state.recentScenes)
   const [theScenes, setTheScenes] = useState({})
   const xsmallScreen = useMediaQuery('(max-width: 475px)')
@@ -57,57 +56,41 @@ export default function ScenesRecent({ scenes, activateScene, title }: any) {
   }, [scenes, recentScenes])
 
   return (
-    <Card sx={{ width: '100%', maxWidth: 'unset' }}>
-      <Box sx={{ height: 293, width: '100%', maxWidth: '470px', m: '0 auto' }}>
-        <Typography
-          color="GrayText"
-          variant="h6"
-          sx={{
-            pl: 1,
-            pt: 0.5,
-            pb: 0.5,
-            border: '1px solid',
-            borderColor: theme.palette.divider,
-            borderBottom: 0
-          }}
-        >
-          {title}
-        </Typography>
-        <DataGrid
-          disableColumnSorting={xsmallScreen}
-          disableColumnMenu={xsmallScreen}
-          onRowClick={handleEvent}
-          rowHeight={50}
-          columns={columns}
-          hideFooter
-          // headerHeight={1}
-          pageSizeOptions={[5]}
-          disableRowSelectionOnClick
-          rows={Object.values(theScenes).map((v: any, i: number) => ({
-            id: i + 1,
-            ...v
-          }))}
-          initialState={{
-            // pagination: {
-            //   pageSize: 100,
-            // },
-            sorting: {
-              sortModel: [{ field: 'used', sort: 'asc' }]
-            },
-            columns: {
-              columnVisibilityModel: {
-                id: false,
-                scene_tags: false
-              }
+    <ExpanderCard title={title} cardKey="scenesRecent">
+      <DataGrid
+        disableColumnSorting={xsmallScreen}
+        disableColumnMenu={xsmallScreen}
+        onRowClick={handleEvent}
+        rowHeight={50}
+        columns={columns}
+        hideFooter
+        // headerHeight={1}
+        pageSizeOptions={[5]}
+        disableRowSelectionOnClick
+        rows={Object.values(theScenes).map((v: any, i: number) => ({
+          id: i + 1,
+          ...v
+        }))}
+        initialState={{
+          // pagination: {
+          //   pageSize: 100,
+          // },
+          sorting: {
+            sortModel: [{ field: 'used', sort: 'asc' }]
+          },
+          columns: {
+            columnVisibilityModel: {
+              id: false,
+              scene_tags: false
             }
-          }}
-          sx={{
-            '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
-              outline: 'none !important'
-            }
-          }}
-        />
-      </Box>
-    </Card>
+          }
+        }}
+        sx={{
+          '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+            outline: 'none !important'
+          }
+        }}
+      />
+    </ExpanderCard>
   )
 }

src/store/ui-persist/storeUIpersist.tsx

@@ -18,6 +18,10 @@ const storeUIPersist = (set: any) => ({
     matrixGroups: true,
     pixelMode: true
   },
+  expander: {
+    scenesRecent: false,
+    scenesMostUsed: false
+  } as Record<string, boolean>,
   warnings: {
     lessPixels: true
   },

src/store/ui-persist/storeUIpersistActions.tsx

@@ -55,6 +55,14 @@ const storeUIPersistActions = (set: any) => ({
       }),
       false,
       'uiPersist/setPixelGraphSettings'
+    ),
+  setExpander: (key: string, val: boolean): void =>
+    set(
+      produce((state: IStore) => {
+        state.uiPersist.expander[key] = val
+      }),
+      false,
+      'uiPersist/setExpander'
     )
 })