From 3e57534b4514198ca75ea748111dddb67f7612b0 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 27 Jan 2023 00:22:17 +0900
Subject: [PATCH 1/2] Add category collapse

Fixes #636
---
 .../Dashboard/Wrappers/Category/Category.tsx  | 59 ++++++++++++++-----
 .../Wrappers/Category/CategoryEditMenu.tsx    |  2 +-
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/Category/Category.tsx b/src/components/Dashboard/Wrappers/Category/Category.tsx
index 9034a2e1a..3def31f10 100644
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/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,20 +15,47 @@ interface DashboardCategoryProps {
 export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
   const { refs, apps, widgets } = useGridstack('category', category.id);
   const isEditMode = useEditModeStore((x) => x.enabled);
+  const { classes: cardClasses } = useCardStyles(true);
+  const { config } = useConfigContext();
+
+  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>
-      <Group position="apart" align="center">
-        <Title order={3}>{category.name}</Title>
-        {isEditMode ? <CategoryEditMenu category={category} /> : null}
-      </Group>
-      <div
-        className="grid-stack grid-stack-category"
-        data-category={category.id}
-        ref={refs.wrapper}
-      >
-        <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-      </div>
-    </HomarrCardWrapper>
+    <Accordion
+      classNames={{
+        item: cardClasses.card,
+      }}
+      mx={0}
+      chevronPosition="left"
+      multiple
+      value={isEditMode ? categoryList : toggledCategories}
+      variant="filled"
+      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>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <div
+            className="grid-stack grid-stack-category"
+            data-category={category.id}
+            ref={refs.wrapper}
+          >
+            <WrapperContent apps={apps} refs={refs} widgets={widgets} />
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 };
diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
index 24c89bc8f..70b1ed85c 100644
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
+++ b/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 />

From e1179820b782d13bac36063bdc7949cf5ae29da9 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 27 Jan 2023 00:33:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Fix=20background=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dashboard/Wrappers/Category/Category.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/Wrappers/Category/Category.tsx b/src/components/Dashboard/Wrappers/Category/Category.tsx
index 3def31f10..ff8ed886b 100644
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/src/components/Dashboard/Wrappers/Category/Category.tsx
@@ -15,8 +15,8 @@ interface DashboardCategoryProps {
 export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
   const { refs, apps, widgets } = useGridstack('category', category.id);
   const isEditMode = useEditModeStore((x) => x.enabled);
-  const { classes: cardClasses } = useCardStyles(true);
   const { config } = useConfigContext();
+  const { classes: cardClasses } = useCardStyles(true);
 
   const categoryList = config?.categories.map((x) => x.name) ?? [];
   const [toggledCategories, setToggledCategories] = useLocalStorage({
@@ -34,7 +34,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
       chevronPosition="left"
       multiple
       value={isEditMode ? categoryList : toggledCategories}
-      variant="filled"
+      variant="separated"
       radius="lg"
       onChange={(state) => {
         // Cancel if edit mode is on