Add icons, style, header, and columns properties to subgroups, and allow nesting infinite layers of subgroups

src/components/services/group.jsx

@@ -22,7 +22,6 @@ export default function ServicesGroup({
   useEffect(() => {
     if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
   }, [layout, groupsInitiallyCollapsed]);
-
   return (
     <div
       key={services.name}
@@ -30,8 +29,12 @@ export default function ServicesGroup({
         "services-group",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
         layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
-        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
-        isSubgroup === false ? "" : "bg-theme-500/20 dark:bg-white/5 rounded-md px-2 py-2",
+        isSubgroup === false && layout?.header === false ? "flex-1 px-1 -my-1" : "",
+        isSubgroup === false && layout?.header !== false ? "flex-1 p-1" : "",
+        isSubgroup === true && layout?.header !== false
+          ? "bg-theme-500/20 dark:bg-white/5 rounded-md px-2 py-2 mb-2"
+          : "",
+        isSubgroup === true && layout?.header === false ? "-px-2" : "",
       )}
     >
       <Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>

src/components/services/list.jsx

@@ -11,7 +11,8 @@ export default function List({ group, subgroups = [], services, layout, useEqual
       <ul
         className={classNames(
           layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
-          "mt-3 services-list",
+          layout?.header !== false ? "mt-3" : "",
+          "services-list",
         )}
       >
         {services.map((service) => (
@@ -29,7 +30,8 @@ export default function List({ group, subgroups = [], services, layout, useEqual
           <Group
             group={subgroup}
             services={subgroup}
-            layout={layout}
+            subgroups={subgroup.subgroups}
+            layout={subgroup}
             useEqualHeights={useEqualHeights}
             isSubgroup={true}
           />

src/pages/index.jsx

@@ -264,7 +264,6 @@ function Home({ initialSettings }) {
 
     const serviceGroups = services?.filter(tabGroupFilter).filter(undefinedGroupFilter);
     const bookmarkGroups = bookmarks.filter(tabGroupFilter).filter(undefinedGroupFilter);
-
     return (
       <>
         {tabs.length > 0 && (

src/utils/config/service-helpers.js

@@ -37,11 +37,16 @@ export async function servicesFromConfig() {
       })),
     subgroups: servicesArr
       .filter((entry) => entry[Object.keys(entry)[0]].type == "group")
-      .map((entries) => mappingFunc(entries, entries[Object.keys(entries)[0]].services)),
+      .map((entries) => ({
+        style: entries[Object.keys(entries)[0]].style,
+        icon: entries[Object.keys(entries)[0]].icon,
+        columns: entries[Object.keys(entries)[0]].columns,
+        header: entries[Object.keys(entries)[0]].header,
+        ...mappingFunc(entries, entries[Object.keys(entries)[0]].services),
+      })),
   });
   // map easy to write YAML objects into easy to consume JS arrays
   const servicesArray = services.map((servicesGroup) => mappingFunc(servicesGroup));
-
   return servicesArray;
 }
 
@@ -664,6 +669,10 @@ export function cleanServiceGroups(groups) {
       return cleanedService;
     }),
     subgroups: serviceGroup.subgroups.map((serviceGroup) => cleanerFunc(serviceGroup)),
+    style: serviceGroup.style ? serviceGroup.style : null,
+    icon: serviceGroup.icon ? serviceGroup.icon : null,
+    columns: serviceGroup.columns ? serviceGroup.columns : null,
+    header: typeof serviceGroup.header != "undefined" ? serviceGroup.header : null,
   });
   return groups.map((serviceGroup) => cleanerFunc(serviceGroup));
 }