Enhancement: initially collapsed option for layout groups

docs/configs/settings.md

@@ -229,6 +229,26 @@ disableCollapse: true
 
 By default the feature is enabled.
 
+### Initially collapsed sections
+
+You can initially collapse sections by adding the `initiallyCollapsed` option to the layout group.
+
+```yaml
+layout:
+  Section A:
+    initiallyCollapsed: true
+```
+
+This can also be set globaly using the `groupsInitiallyCollapsed` option.
+
+```yaml
+groupsInitiallyCollapsed: true
+```
+
+The value set on a group will overwrite the global setting.
+
+By default the feature is disabled.
+
 ### Use Equal Height Cards
 
 You can enable equal height cards for groups of services, this will make all cards in a row the same height.

src/components/bookmarks/group.jsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import classNames from "classnames";
 import { Disclosure, Transition } from "@headlessui/react";
 import { MdKeyboardArrowDown } from "react-icons/md";
@@ -7,8 +7,13 @@ import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
+export default function BookmarksGroup({ bookmarks, layout, disableCollapse, groupsInitiallyCollapsed }) {
   const panel = useRef();
+
+  useEffect(() => {
+    if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
+  }, [layout, groupsInitiallyCollapsed]);
+
   return (
     <div
       key={bookmarks.name}
@@ -18,7 +23,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
         layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
       )}
     >
-      <Disclosure defaultOpen>
+      <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
         {({ open }) => (
           <>
             {layout?.header !== false && (

src/components/services/group.jsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import classNames from "classnames";
 import { Disclosure, Transition } from "@headlessui/react";
 import { MdKeyboardArrowDown } from "react-icons/md";
@@ -6,9 +6,21 @@ import { MdKeyboardArrowDown } from "react-icons/md";
 import List from "components/services/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse, useEqualHeights }) {
+export default function ServicesGroup({
+  group,
+  services,
+  layout,
+  fiveColumns,
+  disableCollapse,
+  useEqualHeights,
+  groupsInitiallyCollapsed,
+}) {
   const panel = useRef();
 
+  useEffect(() => {
+    if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
+  }, [layout, groupsInitiallyCollapsed]);
+
   return (
     <div
       key={services.name}
@@ -19,7 +31,7 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
         layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
       )}
     >
-      <Disclosure defaultOpen>
+      <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
         {({ open }) => (
           <>
             {layout?.header !== false && (

src/pages/index.jsx

@@ -311,6 +311,7 @@ function Home({ initialSettings }) {
                   fiveColumns={settings.fiveColumns}
                   disableCollapse={settings.disableCollapse}
                   useEqualHeights={settings.useEqualHeights}
+                  groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
                 />
               ) : (
                 <BookmarksGroup
@@ -318,6 +319,7 @@ function Home({ initialSettings }) {
                   bookmarks={group}
                   layout={settings.layout?.[group.name]}
                   disableCollapse={settings.disableCollapse}
+                  groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
                 />
               ),
             )}
@@ -333,6 +335,7 @@ function Home({ initialSettings }) {
                 layout={settings.layout?.[group.name]}
                 fiveColumns={settings.fiveColumns}
                 disableCollapse={settings.disableCollapse}
+                groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
               />
             ))}
           </div>
@@ -345,6 +348,7 @@ function Home({ initialSettings }) {
                 bookmarks={group}
                 layout={settings.layout?.[group.name]}
                 disableCollapse={settings.disableCollapse}
+                groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
               />
             ))}
           </div>
@@ -361,6 +365,7 @@ function Home({ initialSettings }) {
     settings.disableCollapse,
     settings.useEqualHeights,
     settings.cardBlur,
+    settings.groupsInitiallyCollapsed,
     initialSettings.layout,
   ]);