much improved collections listing page

components/CollectionCard.tsx

@@ -4,11 +4,21 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight, faUser } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUser,
+  faPenToSquare,
+  faTrashCan,
+  faEllipsis,
+} from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { ExtendedCollection } from "@/types/global";
 import useLinkStore from "@/store/links";
 import ImageWithFallback from "./ImageWithFallback";
+import Dropdown from "./Dropdown";
+import { useState } from "react";
+import Modal from "@/components/Modal";
+import EditCollection from "@/components/Modal/EditCollection";
+import DeleteCollection from "@/components/Modal/DeleteCollection";
 
 export default function ({ collection }: { collection: ExtendedCollection }) {
   const { links } = useLinkStore();
@@ -18,25 +28,42 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
     day: "numeric",
   });
 
+  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
+  const toggleEditCollectionModal = () => {
+    setEditCollectionModal(!editCollectionModal);
+  };
+
+  const toggleDeleteCollectionModal = () => {
+    setDeleteCollectionModal(!deleteCollectionModal);
+  };
+
   return (
-    <div className="p-5 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
+    <div className="p-5 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% self-stretch min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group relative">
-      <Link href={`/collections/${collection.id}`}>
+      <div
-        <div className="flex flex-col gap-2 justify-between h-full">
+        onClick={() => setExpandDropdown(!expandDropdown)}
-          <div>
+        id="edit-dropdown"
-            <div className="flex justify-between text-sky-600 items-center mb-2">
+        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
-              <p className="text-2xl w-max font-bold capitalize">
+      >
-                {collection.name}
-              </p>
         <FontAwesomeIcon
-                icon={faChevronRight}
+          icon={faEllipsis}
-                className="w-3 h-3 group-hover:w-5 group-hover:h-5 duration-100 text-gray-500"
+          id="edit-dropdown"
+          className="w-5 h-5 text-gray-500"
         />
       </div>
-            <p className="text-gray-500">{collection.description}</p>
+      <Link href={`/collections/${collection.id}`}>
+        <div className="flex flex-col gap-2 justify-between h-full select-none">
+          <div>
+            <p className="text-2xl w-max font-bold capitalize text-sky-600">
+              {collection.name}
+            </p>
           </div>
           <div className="flex justify-between items-center">
             <div className="text-sky-400 flex items-center w-full">
               {collection.members
+                .sort((a, b) => a.userId - b.userId)
                 .map((e, i) => {
                   return (
                     <ImageWithFallback
@@ -50,15 +77,14 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
                     </ImageWithFallback>
                   );
                 })
-                .reverse()
+                .slice(0, 4)}
-                .slice(0, 3)}
+              {collection.members.length - 4 > 0 ? (
-              {collection.members.length - 3 > 0 ? (
                 <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
                   +{collection.members.length - 3}
                 </div>
               ) : null}
             </div>
-            <div className="text-right w-full">
+            <div className="text-right w-40">
               <p className="text-sky-500 font-bold text-sm">
                 {links.filter((e) => e.collectionId === collection.id).length}{" "}
                 Links
@@ -68,6 +94,52 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
           </div>
         </div>
       </Link>
+
+      {expandDropdown ? (
+        <Dropdown
+          items={[
+            {
+              name: "Edit Collection",
+              icon: <FontAwesomeIcon icon={faPenToSquare} />,
+              onClick: () => {
+                toggleEditCollectionModal();
+                setExpandDropdown(false);
+              },
+            },
+            {
+              name: "Delete Collection",
+              icon: <FontAwesomeIcon icon={faTrashCan} />,
+              onClick: () => {
+                toggleDeleteCollectionModal();
+                setExpandDropdown(false);
+              },
+            },
+          ]}
+          onClickOutside={(e: Event) => {
+            const target = e.target as HTMLInputElement;
+            if (target.id !== "edit-dropdown") setExpandDropdown(false);
+          }}
+          className="absolute top-[3.2rem] right-5 z-10 w-44"
+        />
+      ) : null}
+
+      {editCollectionModal ? (
+        <Modal toggleModal={toggleEditCollectionModal}>
+          <EditCollection
+            toggleCollectionModal={toggleEditCollectionModal}
+            collection={collection}
+          />
+        </Modal>
+      ) : null}
+
+      {deleteCollectionModal ? (
+        <Modal toggleModal={toggleDeleteCollectionModal}>
+          <DeleteCollection
+            collection={collection}
+            toggleDeleteCollectionModal={toggleDeleteCollectionModal}
+          />
+        </Modal>
+      ) : null}
     </div>
   );
 }

components/LinkList.tsx

@@ -45,7 +45,7 @@ export default function ({
   };
 
   return (
-    <div className="shadow hover:shadow-none duration-100 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20%   p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
+    <div className="border border-sky-100 bg-gray-100 p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
       {editModal ? (
         <Modal toggleModal={toggleEditModal}>
           <EditLink toggleLinkModal={toggleEditModal} link={link} />
@@ -124,7 +124,7 @@ export default function ({
             <FontAwesomeIcon
               icon={faEllipsis}
               title="More"
-              className="w-6 h-6"
+              className="w-5 h-5"
               id="edit-dropdown"
             />
           </div>

components/Navbar.tsx

@@ -66,7 +66,7 @@ export default function () {
       <div className="flex items-center gap-2">
         <div
           onClick={toggleLinkModal}
-          className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 text-sky-500 hover:text-sky-600 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
+          className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 rounded-md text-white bg-sky-500 hover:bg-sky-400 duration-100"
         >
           <FontAwesomeIcon icon={faPlus} className="w-6 h-6 sm:w-5 sm:h-5" />
           <span className="hidden sm:block">New Link</span>

components/Sidebar/index.tsx

@@ -112,7 +112,9 @@ export default function ({ className }: { className?: string }) {
         <p className="text-sm p-2">Collections</p>
       </div>
       <div>
-        {collections.map((e, i) => {
+        {collections
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((e, i) => {
             return (
               <SidebarItem
                 key={i}

pages/collections/[id].tsx

@@ -19,6 +19,7 @@ import {
   faPenToSquare,
   faSort,
   faTrashCan,
+  faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
@@ -26,6 +27,7 @@ import { ChangeEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import RadioButton from "@/components/RadioButton";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import ImageWithFallback from "@/components/ImageWithFallback";
 
 export default function () {
   const router = useRouter();
@@ -99,89 +101,54 @@ export default function () {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+          <div className="flex flex-col sm:flex-row gap-3 items-center justify-between">
             <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-center">
+              <div className="flex gap-2">
                 <FontAwesomeIcon
                   icon={faFolder}
-                className="w-5 h-5 text-sky-300"
+                  className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
                 />
-              <p className="text-lg text-sky-900">{activeCollection?.name}</p>
+                <p className="sm:text-4xl text-3xl text-sky-900 capitalize">
+                  {activeCollection?.name}
+                </p>
               </div>
-            <div className="relative">
+            </div>
-              <div
+
-                onClick={() => setExpandDropdown(!expandDropdown)}
+            <div>
-                id="edit-dropdown"
+              <div className="text-sky-400 flex justify-end items-center w-56 mr-3">
-                className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                <div className="mr-1 bg-sky-500 p-1 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
+                  View Team
+                </div>
+                {activeCollection?.members
+                  .sort((a, b) => a.userId - b.userId)
+                  .map((e, i) => {
+                    return (
+                      <ImageWithFallback
+                        key={i}
+                        src={`/api/avatar/${e.userId}`}
+                        className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
                       >
-                <FontAwesomeIcon
+                        <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3 flex items-center justify-center">
-                  icon={faEllipsis}
+                          <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
-                  id="edit-dropdown"
+                        </div>
-                  className="w-5 h-5 text-gray-500"
+                      </ImageWithFallback>
-                />
+                    );
+                  })
+                  .slice(0, 4)}
+                {activeCollection?.members.length &&
+                activeCollection.members.length - 4 > 0 ? (
+                  <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
+                    +{activeCollection?.members?.length - 3}
                   </div>
-              {expandDropdown ? (
-                <Dropdown
-                  items={[
-                    {
-                      name: "Add Link Here",
-                      icon: <FontAwesomeIcon icon={faAdd} />,
-                      onClick: () => {
-                        toggleLinkModal();
-                        setExpandDropdown(false);
-                      },
-                    },
-                    {
-                      name: "Edit Collection",
-                      icon: <FontAwesomeIcon icon={faPenToSquare} />,
-                      onClick: () => {
-                        toggleEditCollectionModal();
-                        setExpandDropdown(false);
-                      },
-                    },
-                    {
-                      name: "Delete Collection",
-                      icon: <FontAwesomeIcon icon={faTrashCan} />,
-                      onClick: () => {
-                        toggleDeleteCollectionModal();
-                        setExpandDropdown(false);
-                      },
-                    },
-                  ]}
-                  onClickOutside={(e: Event) => {
-                    const target = e.target as HTMLInputElement;
-                    if (target.id !== "edit-dropdown") setExpandDropdown(false);
-                  }}
-                  className="absolute top-8 left-0 z-10 w-44"
-                />
-              ) : null}
-
-              {linkModal ? (
-                <Modal toggleModal={toggleLinkModal}>
-                  <AddLink toggleLinkModal={toggleLinkModal} />
-                </Modal>
-              ) : null}
-
-              {editCollectionModal && activeCollection ? (
-                <Modal toggleModal={toggleEditCollectionModal}>
-                  <EditCollection
-                    toggleCollectionModal={toggleEditCollectionModal}
-                    collection={activeCollection}
-                  />
-                </Modal>
-              ) : null}
-
-              {deleteCollectionModal && activeCollection ? (
-                <Modal toggleModal={toggleDeleteCollectionModal}>
-                  <DeleteCollection
-                    collection={activeCollection}
-                    toggleDeleteCollectionModal={toggleDeleteCollectionModal}
-                  />
-                </Modal>
                 ) : null}
               </div>
             </div>
+          </div>
 
+          <div className="text-gray-500 flex justify-between items-end gap-5">
+            <p>{activeCollection?.description}</p>
+            <div className="flex items-center gap-2">
               <div className="relative">
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
@@ -246,6 +213,82 @@ export default function () {
                   </ClickAwayHandler>
                 ) : null}
               </div>
+              <div className="relative">
+                <div
+                  onClick={() => setExpandDropdown(!expandDropdown)}
+                  id="edit-dropdown"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+                >
+                  <FontAwesomeIcon
+                    icon={faEllipsis}
+                    id="edit-dropdown"
+                    title="More"
+                    className="w-5 h-5 text-gray-500"
+                  />
+                </div>
+                {expandDropdown ? (
+                  <Dropdown
+                    items={[
+                      {
+                        name: "Add Link Here",
+                        icon: <FontAwesomeIcon icon={faAdd} />,
+                        onClick: () => {
+                          toggleLinkModal();
+                          setExpandDropdown(false);
+                        },
+                      },
+                      {
+                        name: "Edit Collection",
+                        icon: <FontAwesomeIcon icon={faPenToSquare} />,
+                        onClick: () => {
+                          toggleEditCollectionModal();
+                          setExpandDropdown(false);
+                        },
+                      },
+                      {
+                        name: "Delete Collection",
+                        icon: <FontAwesomeIcon icon={faTrashCan} />,
+                        onClick: () => {
+                          toggleDeleteCollectionModal();
+                          setExpandDropdown(false);
+                        },
+                      },
+                    ]}
+                    onClickOutside={(e: Event) => {
+                      const target = e.target as HTMLInputElement;
+                      if (target.id !== "edit-dropdown")
+                        setExpandDropdown(false);
+                    }}
+                    className="absolute top-8 right-0 z-10 w-44"
+                  />
+                ) : null}
+
+                {linkModal ? (
+                  <Modal toggleModal={toggleLinkModal}>
+                    <AddLink toggleLinkModal={toggleLinkModal} />
+                  </Modal>
+                ) : null}
+
+                {editCollectionModal && activeCollection ? (
+                  <Modal toggleModal={toggleEditCollectionModal}>
+                    <EditCollection
+                      toggleCollectionModal={toggleEditCollectionModal}
+                      collection={activeCollection}
+                    />
+                  </Modal>
+                ) : null}
+
+                {deleteCollectionModal && activeCollection ? (
+                  <Modal toggleModal={toggleDeleteCollectionModal}>
+                    <DeleteCollection
+                      collection={activeCollection}
+                      toggleDeleteCollectionModal={toggleDeleteCollectionModal}
+                    />
+                  </Modal>
+                ) : null}
+              </div>
+            </div>
+          </div>
         </div>
         <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
           {sortedLinks.map((e, i) => {

store/collections.ts

@@ -23,6 +23,8 @@ const useCollectionStore = create<CollectionStore>()((set) => ({
 
     const data = await response.json();
 
+    console.log(data);
+
     if (response.ok) set({ collections: data.response });
   },
   addCollection: async (body) => {
@@ -36,8 +38,6 @@ const useCollectionStore = create<CollectionStore>()((set) => ({
 
     const data = await response.json();
 
-    console.log(data);
-
     if (response.ok)
       set((state) => ({
         collections: [...state.collections, data.response],