Remember the state

Signed-off-by: David Gageot <[email protected]>

Author: dgageot

src/extension/ui/src/components/tabs/ToolCatalog.tsx

@@ -2,7 +2,7 @@ import { v1 } from '@docker/extension-api-client-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Collapse, Grid2, Typography } from '@mui/material';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { CATALOG_LAYOUT_SX } from '../../Constants';
 import { useCatalogAll } from '../../queries/useCatalog';
 import Tile from '../tile/Index';
@@ -19,8 +19,8 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
   sort,
 }) => {
   const { catalogItems, registryLoading } = useCatalogAll(client);
-  const [expandedEnabled, setExpandedEnabled] = useState(true);
-  const [expandedNotEnabled, setExpandedNotEnabled] = useState(true);
+  const [expandedEnabled, setExpandedEnabled] = useState(localStorage.getItem('expandedEnabled') !== 'false');
+  const [expandedNotEnabled, setExpandedNotEnabled] = useState(localStorage.getItem('expandedNotEnabled') !== 'false');
 
   // Memoize the filtered catalog items to prevent unnecessary recalculations
   const result = useMemo(() => {
@@ -44,10 +44,14 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
       <Typography
         variant='subtitle2'
         sx={{ color: "text.secondary", display: "flex", alignItems: "center", cursor: "pointer" }}
-        onClick={() => setExpandedEnabled(!expandedEnabled)}>
+        onClick={() => {
+          const newExpanded = !expandedEnabled
+          setExpandedEnabled(newExpanded);
+          localStorage.setItem('expandedEnabled', JSON.stringify(newExpanded));
+        }}>
         Enabled tools
         {expandedEnabled ? <KeyboardArrowDownIcon fontSize="small" /> : <KeyboardArrowRightIcon fontSize="small" />}
-      </Typography>
+      </Typography >
 
       <Collapse in={expandedEnabled}>
         <Grid2 container spacing={1} sx={CATALOG_LAYOUT_SX}>
@@ -68,7 +72,11 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
       <Typography
         variant='subtitle2'
         sx={{ color: "text.secondary", display: "flex", alignItems: "center", cursor: "pointer" }}
-        onClick={() => setExpandedNotEnabled(!expandedNotEnabled)}>
+        onClick={() => {
+          const newExpanded = !expandedNotEnabled
+          setExpandedNotEnabled(newExpanded);
+          localStorage.setItem('expandedNotEnabled', JSON.stringify(newExpanded));
+        }}>
         All the tools
         {expandedNotEnabled ? <KeyboardArrowDownIcon fontSize="small" /> : <KeyboardArrowRightIcon fontSize="small" />}
       </Typography>