improved collection page

components/CollectionSelection.tsx

@@ -60,8 +60,32 @@ const CollectionItem = ({
 
   const router = useRouter();
 
+  // Check if the current collection or any of its subcollections is active
+  const isActiveOrParentOfActive = React.useMemo(() => {
+    const isActive = active === `/collections/${collection.id}`;
+    if (isActive) return true;
+
+    const checkIfParentOfActive = (parentId: number): boolean => {
+      return collections.some((e) => {
+        if (e.id === parseInt(active.split("/collections/")[1])) {
+          if (e.parentId === parentId) return true;
+          if (e.parentId) return checkIfParentOfActive(e.parentId);
+        }
+        return false;
+      });
+    };
+
+    return checkIfParentOfActive(collection.id as number);
+  }, [active, collection.id, collections]);
+
+  const [isOpen, setIsOpen] = useState(isActiveOrParentOfActive);
+
+  useEffect(() => {
+    setIsOpen(isActiveOrParentOfActive);
+  }, [isActiveOrParentOfActive]);
+
   return hasChildren ? (
-    <details>
+    <details open={isOpen}>
       <summary
         className={`${
           active === `/collections/${collection.id}`
@@ -92,10 +116,8 @@ const CollectionItem = ({
         </Link>
       </summary>
 
-      {/* Nested Collections, make it recursively */}
-
       {hasChildren && (
-        <div className="pl-4">
+        <div className="ml-3 pl-1 border-l border-neutral-content">
           {collections
             .filter((e) => e.parentId === collection.id)
             .map((subCollection) => (

components/ModalContent/NewLinkModal.tsx

@@ -179,7 +179,7 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder="Will be auto generated if nothing is provided."
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>

pages/collections/[id].tsx

@@ -24,6 +24,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import Link from "next/link";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -111,6 +112,7 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
+            <div>
               <div className="flex items-center gap-2">
                 <i
                   className="bi-folder-fill text-3xl drop-shadow"
@@ -122,6 +124,36 @@ export default function Index() {
                 </p>
               </div>
 
+              {activeCollection.subCollections &&
+              activeCollection.subCollections.length > 0 ? (
+                <details className="mt-2 mb-2">
+                  <summary className="text-sm cursor-pointer select-none">
+                    View Sub-Collections
+                  </summary>
+
+                  <div className="flex gap-3 mt-1 pl-3 ml-1 border-l border-neutral-content">
+                    {collections
+                      .filter((e) => e.parentId === activeCollection?.id)
+                      .map((e, i) => {
+                        return (
+                          <Link
+                            key={i}
+                            className="flex gap-1 items-center btn btn-ghost btn-sm"
+                            href={`/collections/${e.id}`}
+                          >
+                            <i
+                              className="bi-folder-fill text-2xl drop-shadow"
+                              style={{ color: e.color }}
+                            ></i>
+                            <p className="text-xs">{e.name}</p>
+                          </Link>
+                        );
+                      })}
+                  </div>
+                </details>
+              ) : undefined}
+            </div>
+
             <div className="dropdown dropdown-bottom dropdown-end mt-2">
               <div
                 tabIndex={0}
@@ -228,6 +260,32 @@ export default function Index() {
           <p>{activeCollection?.description}</p>
         ) : undefined}
 
+        {/* {activeCollection?.subCollections &&
+        activeCollection?.subCollections.length > 0 ? (
+          <fieldset className="border rounded-md p-2 border-neutral-content">
+            <legend className="text-sm ml-2">Sub-Collections</legend>
+            <div className="flex gap-3">
+              {collections
+                .filter((e) => e.parentId === activeCollection?.id)
+                .map((e, i) => {
+                  return (
+                    <Link
+                      key={i}
+                      className="flex gap-1 items-center btn btn-ghost btn-sm"
+                      href={`/collections/${e.id}`}
+                    >
+                      <i
+                        className="bi-folder-fill text-2xl drop-shadow"
+                        style={{ color: e.color }}
+                      ></i>
+                      <p className="text-xs">{e.name}</p>
+                    </Link>
+                  );
+                })}
+            </div>
+          </fieldset>
+        ) : undefined} */}
+
         <div className="divider my-0"></div>
 
         <div className="flex justify-between items-end gap-5">

pages/collections/index.tsx

@@ -39,7 +39,7 @@ export default function Collections() {
 
         <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections
-            .filter((e) => e.ownerId === data?.user.id)
+            .filter((e) => e.ownerId === data?.user.id && e.parentId === null)
             .map((e, i) => {
               return <CollectionCard key={i} collection={e} />;
             })}