Merge pull request #649 from ajnart/feature-category-collapse

Add category collapse

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -1,6 +1,8 @@
-import { Group, Title } from '@mantine/core';
+import { Accordion, Title } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { useConfigContext } from '../../../../config/provider';
 import { CategoryType } from '../../../../types/category';
-import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
+import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
@@ -13,13 +15,38 @@ interface DashboardCategoryProps {
 export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
   const { refs, apps, widgets } = useGridstack('category', category.id);
   const isEditMode = useEditModeStore((x) => x.enabled);
+  const { config } = useConfigContext();
+  const { classes: cardClasses } = useCardStyles(true);
+
+  const categoryList = config?.categories.map((x) => x.name) ?? [];
+  const [toggledCategories, setToggledCategories] = useLocalStorage({
+    key: `${config?.configProperties.name}-app-shelf-toggled`,
+    // This is a bit of a hack to toggle the categories on the first load, return a string[] of the categories
+    defaultValue: categoryList,
+  });
 
   return (
-    <HomarrCardWrapper pt={10} mx={10} isCategory>
+    <Accordion
-      <Group position="apart" align="center">
+      classNames={{
+        item: cardClasses.card,
+      }}
+      mx={0}
+      chevronPosition="left"
+      multiple
+      value={isEditMode ? categoryList : toggledCategories}
+      variant="separated"
+      radius="lg"
+      onChange={(state) => {
+        // Cancel if edit mode is on
+        if (isEditMode) return;
+        setToggledCategories([...state]);
+      }}
+    >
+      <Accordion.Item value={category.name}>
+        <Accordion.Control icon={isEditMode && <CategoryEditMenu category={category} />}>
           <Title order={3}>{category.name}</Title>
-        {isEditMode ? <CategoryEditMenu category={category} /> : null}
+        </Accordion.Control>
-      </Group>
+        <Accordion.Panel>
           <div
             className="grid-stack grid-stack-category"
             data-category={category.id}
@@ -27,6 +54,8 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
           >
             <WrapperContent apps={apps} refs={refs} widgets={widgets} />
           </div>
-    </HomarrCardWrapper>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 };

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -22,7 +22,7 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
     useCategoryActions(configName, category);
 
   return (
-    <Menu withinPortal position="left-start" withArrow>
+    <Menu withinPortal withArrow>
       <Menu.Target>
         <ActionIcon>
           <IconDots />