From 041fae1fb30a0262ce54d1c5d05dbd6734bc2c32 Mon Sep 17 00:00:00 2001
From: Alex Higgins <michael.higgins@e-hps.com>
Date: Wed, 21 Jun 2023 16:46:14 -0400
Subject: [PATCH 1/2] Adds ability to collapse layout sections

Reverts pnpm lock file changes

Make entire section above list clickable.

Implement in headlessui instead of pulling in new library.

Remove unecessary packages and clean up ESLint errors
---
 src/components/services/group.jsx | 26 +++++++++++++++++---------
 src/pages/index.jsx               |  8 +++++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 94557064..49a44de4 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,9 +1,14 @@
 import classNames from "classnames";
+import { Transition } from '@headlessui/react'
+import { useState } from 'react'
 
 import List from "components/services/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function ServicesGroup({ group, services, layout, fiveColumns }) {
+export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
+
+  const [isShowing, setIsShowing] = useState(true)
+
   return (
     <div
       key={services.name}
@@ -13,15 +18,18 @@ export default function ServicesGroup({ group, services, layout, fiveColumns })
         "flex-1 p-1"
       )}
     >
-      <div className="flex select-none items-center">
-        {layout?.icon &&
-          <div className="flex-shrink-0 mr-2 w-7 h-7">
-            <ResolvedIcon icon={layout.icon} />
-          </div>
-        }
-        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <div className="flex">
+        {/* eslint-disable-next-line no-shadow */}
+        <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
+          {layout?.icon &&
+            <div className="flex-shrink-0 mr-2 w-7 h-7">
+              <ResolvedIcon icon={layout.icon} />
+            </div>
+          }
+          <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+        </button>
       </div>
-      <List group={group} services={services.services} layout={layout} />
+      <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
     </div>
   );
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d91a8339..5106e07c 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -294,7 +294,13 @@ function Home({ initialSettings }) {
         {services?.length > 0 && (
           <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
             {services.map((group) => (
-              <ServicesGroup key={group.name} group={group.name} services={group} layout={initialSettings.layout?.[group.name]} fiveColumns={settings.fiveColumns} />
+              <ServicesGroup 
+                key={group.name}
+                group={group.name}
+                services={group}
+                layout={initialSettings.layout?.[group.name]}
+                fiveColumns={settings.fiveColumns} 
+                disableCollapse={settings.disableCollapse} />
             ))}
           </div>
         )}

From 714e0a4517685dd84c32dfb419e8c208c4e95c8f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 22 Jun 2023 10:04:12 -0700
Subject: [PATCH 2/2] Use Disclosure component for collapsible service groups,
 add transition

hide collapse arrow if disabled

dont break layout for icons in group title

no-shadow
---
 src/components/services/group.jsx | 37 ++++++++++++++++++++++---------
 tailwind.config.js                |  5 +++++
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 49a44de4..2f94fc77 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,14 +1,12 @@
 import classNames from "classnames";
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
+import { Disclosure, Transition } from '@headlessui/react';
+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}) {
 
-  const [isShowing, setIsShowing] = useState(true)
-
   return (
     <div
       key={services.name}
@@ -18,18 +16,37 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
         "flex-1 p-1"
       )}
     >
-      <div className="flex">
-        {/* eslint-disable-next-line no-shadow */}
-        <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
+      <Disclosure defaultOpen>
+      {({ open }) => (
+        <>
+        <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
           {layout?.icon &&
             <div className="flex-shrink-0 mr-2 w-7 h-7">
               <ResolvedIcon icon={layout.icon} />
             </div>
           }
           <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
-        </button>
-      </div>
-      <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
+          <MdKeyboardArrowDown className={classNames(
+            disableCollapse ? 'hidden' : '',
+            'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+            open ? 'rotate-180 transform' : ''
+            )} />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-200 ease-out"
+          enterFrom="transform scale-75 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-75 opacity-0"
+          >
+            <Disclosure.Panel>
+              <List group={group} services={services.services} layout={layout} />
+            </Disclosure.Panel>
+        </Transition>
+        </>
+      )}
+      </Disclosure>
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index b981051b..a075f6e9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,11 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx}",
     "./src/widgets/**/*.{js,ts,jsx,tsx}",
   ],
+  variants: {
+    extend: {
+        display: ["group-hover"],
+    },
+  },
   theme: {
     extend: {
       colors: {