add support for subcollections to the navbar

components/CollectionSelection.tsx

@@ -0,0 +1,139 @@
+import useCollectionStore from "@/store/collections";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  links: boolean;
+};
+
+const CollectionSelection = ({ links }: Props) => {
+  const { collections } = useCollectionStore();
+  const [active, setActive] = useState("");
+  const router = useRouter();
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router, collections]);
+
+  return (
+    <div>
+      {collections[0] ? (
+        collections
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .filter((e) => e.parentId === null)
+          .map((e, i) => (
+            <CollectionItem
+              key={i}
+              collection={e}
+              active={active}
+              collections={collections}
+            />
+          ))
+      ) : (
+        <div
+          className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+        >
+          <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
+            You Have No Collections...
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CollectionSelection;
+
+const CollectionItem = ({
+  collection,
+  active,
+  collections,
+}: {
+  collection: CollectionIncludingMembersAndLinkCount;
+  active: string;
+  collections: CollectionIncludingMembersAndLinkCount[];
+}) => {
+  const hasChildren =
+    collection.subCollections && collection.subCollections.length > 0;
+
+  const router = useRouter();
+
+  return hasChildren ? (
+    <details>
+      <summary
+        className={`${
+          active === `/collections/${collection.id}`
+            ? "bg-primary/20"
+            : "hover:bg-neutral/20"
+        } duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2`}
+      >
+        <Link href={`/collections/${collection.id}`} className="w-full">
+          <div
+            className={`py-1 cursor-pointer flex items-center gap-2 w-full h-8 capitalize`}
+          >
+            <i
+              className="bi-folder-fill text-2xl drop-shadow"
+              style={{ color: collection.color }}
+            ></i>
+            <p className="truncate w-full">{collection.name}</p>
+
+            {collection.isPublic ? (
+              <i
+                className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
+                title="This collection is being shared publicly."
+              ></i>
+            ) : undefined}
+            <div className="drop-shadow text-neutral text-xs">
+              {collection._count?.links}
+            </div>
+          </div>
+        </Link>
+      </summary>
+
+      {/* Nested Collections, make it recursively */}
+
+      {hasChildren && (
+        <div className="pl-4">
+          {collections
+            .filter((e) => e.parentId === collection.id)
+            .map((subCollection) => (
+              <CollectionItem
+                key={subCollection.id}
+                collection={subCollection}
+                active={active}
+                collections={collections}
+              />
+            ))}
+        </div>
+      )}
+    </details>
+  ) : (
+    <Link href={`/collections/${collection.id}`} className="w-full">
+      <div
+        className={`${
+          active === `/collections/${collection.id}`
+            ? "bg-primary/20"
+            : "hover:bg-neutral/20"
+        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize mb-1`}
+      >
+        <i
+          className="bi-folder-fill text-2xl drop-shadow"
+          style={{ color: collection.color }}
+        ></i>
+        <p className="truncate w-full">{collection.name}</p>
+
+        {collection.isPublic ? (
+          <i
+            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
+            title="This collection is being shared publicly."
+          ></i>
+        ) : undefined}
+        <div className="drop-shadow text-neutral text-xs">
+          {collection._count?.links}
+        </div>
+      </div>
+    </Link>
+  );
+};

components/ModalContent/NewTokenModal.tsx

@@ -74,7 +74,7 @@ export default function NewTokenModal({ onClose }: Props) {
 
           <div className="divider mb-3 mt-1"></div>
 
-          <div className="flex gap-2 items-center">
+          <div className="flex sm:flex-row flex-col gap-2 items-center">
             <div className="w-full">
               <p className="mb-2">Name</p>
 
@@ -86,15 +86,15 @@ export default function NewTokenModal({ onClose }: Props) {
               />
             </div>
 
-            <div>
+            <div className="w-full sm:w-fit">
               <p className="mb-2">Expires in</p>
 
-              <div className="dropdown dropdown-bottom dropdown-end">
+              <div className="dropdown dropdown-bottom dropdown-end w-full">
                 <div
                   tabIndex={0}
                   role="button"
                   onMouseDown={dropdownTriggerer}
-                  className="btn btn-outline w-36 flex items-center btn-sm h-10"
+                  className="btn btn-outline w-full sm:w-36 flex items-center btn-sm h-10"
                 >
                   {token.expires === TokenExpiry.sevenDays && "7 Days"}
                   {token.expires === TokenExpiry.oneMonth && "30 Days"}
@@ -102,7 +102,7 @@ export default function NewTokenModal({ onClose }: Props) {
                   {token.expires === TokenExpiry.threeMonths && "90 Days"}
                   {token.expires === TokenExpiry.never && "No Expiration"}
                 </div>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
                   <li>
                     <label
                       className="label cursor-pointer flex justify-start"
@@ -212,7 +212,7 @@ export default function NewTokenModal({ onClose }: Props) {
             </div>
           </div>
 
-          <div className="flex justify-between items-center mt-5">
+          <div className="flex justify-end items-center mt-5">
             <button
               className="btn btn-accent dark:border-violet-400 text-white"
               onClick={submit}

components/Sidebar.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
+import CollectionSelection from "@/components/CollectionSelection";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -97,48 +98,8 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveFrom="transform opacity-100 translate-y-0"
           leaveTo="transform opacity-0 -translate-y-3"
         >
-          <Disclosure.Panel className="flex flex-col gap-1">
+          <Disclosure.Panel>
-            {collections[0] ? (
+            <CollectionSelection links={true} />
-              collections
-                .sort((a, b) => a.name.localeCompare(b.name))
-                .map((e, i) => {
-                  return (
-                    <Link key={i} href={`/collections/${e.id}`}>
-                      <div
-                        className={`${
-                          active === `/collections/${e.id}`
-                            ? "bg-primary/20"
-                            : "hover:bg-neutral/20"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-                      >
-                        <i
-                          className="bi-folder-fill text-2xl drop-shadow"
-                          style={{ color: e.color }}
-                        ></i>
-                        <p className="truncate w-full">{e.name}</p>
-
-                        {e.isPublic ? (
-                          <i
-                            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
-                            title="This collection is being shared publicly."
-                          ></i>
-                        ) : undefined}
-                        <div className="drop-shadow text-neutral text-xs">
-                          {e._count?.links}
-                        </div>
-                      </div>
-                    </Link>
-                  );
-                })
-            ) : (
-              <div
-                className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-              >
-                <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
-                  You Have No Collections...
-                </p>
-              </div>
-            )}
           </Disclosure.Panel>
         </Transition>
       </Disclosure>

lib/api/controllers/collections/collectionId/updateCollectionById.ts

@@ -75,6 +75,7 @@ export default async function updateCollection(
         _count: {
           select: { links: true },
         },
+        subCollections: true,
         members: {
           include: {
             user: {

lib/api/controllers/collections/getCollections.ts

@@ -12,6 +12,7 @@ export default async function getCollection(userId: number) {
       _count: {
         select: { links: true },
       },
+      subCollections: true,
       members: {
         include: {
           user: {

pages/settings/access-tokens.tsx

@@ -38,7 +38,7 @@ export default function AccessTokens() {
         </p>
 
         <button
-          className={`btn btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
+          className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
           onClick={() => {
             setNewTokenModal(true);
           }}
@@ -48,7 +48,7 @@ export default function AccessTokens() {
 
         {tokens.length > 0 ? (
           <>
-            <div className="divider"></div>
+            <div className="divider my-0"></div>
 
             <table className="table">
               {/* head */}

types/global.ts

@@ -35,6 +35,7 @@ export interface CollectionIncludingMembersAndLinkCount
   createdAt?: string;
   _count?: { links: number };
   members: Member[];
+  subCollections: CollectionIncludingMembersAndLinkCount[];
 }
 
 export interface TagIncludingLinkCount extends Tag {