improved collection page

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,15 +112,46 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
-            <div className="flex items-center gap-2">
-              <i
-                className="bi-folder-fill text-3xl drop-shadow"
-                style={{ color: activeCollection?.color }}
-              ></i>
+            <div>
+              <div className="flex items-center gap-2">
+                <i
+                  className="bi-folder-fill text-3xl drop-shadow"
+                  style={{ color: activeCollection?.color }}
+                ></i>
 
-              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
-                {activeCollection?.name}
-              </p>
+                <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+                  {activeCollection?.name}
+                </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">
@@ -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} />;
             })}