From b32d61053274dd1f639103f6eb8959e9e5775e34 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 22 Jun 2023 11:51:38 -0700
Subject: [PATCH] Adds collapsible feature to bookmarks

---
 src/components/bookmarks/group.jsx | 38 ++++++++++++++++++++++++++----
 src/pages/index.jsx                |  5 +++-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index 2910245c3..ef0a5ab8f 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -1,13 +1,41 @@
+import classNames from "classnames";
+import { Disclosure, Transition } from '@headlessui/react';
+import { MdKeyboardArrowDown } from "react-icons/md";
+
 import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
 
-export default function BookmarksGroup({ group }) {
+export default function BookmarksGroup({ group, disableCollapse }) {
   return (
     <div key={group.name} className="flex-1">
-      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
-      <ErrorBoundary>
-        <List bookmarks={group.bookmarks} />
-      </ErrorBoundary>
+    <Disclosure defaultOpen>
+    {({ open }) => (
+      <>
+        <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
+          <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
+          <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>
+              <ErrorBoundary>
+                <List bookmarks={group.bookmarks} />
+              </ErrorBoundary>
+            </Disclosure.Panel>
+        </Transition>
+      </>
+    )}
+    </Disclosure>
     </div>
   );
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 5106e07cc..a2993b1aa 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -308,7 +308,10 @@ function Home({ initialSettings }) {
         {bookmarks?.length > 0 && (
           <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
             {bookmarks.map((group) => (
-              <BookmarksGroup key={group.name} group={group} />
+              <BookmarksGroup
+                key={group.name}
+                group={group}
+                disableCollapse={settings.disableCollapse} />
             ))}
           </div>
         )}