small changes

components/CollectionCard.tsx

@@ -18,12 +18,17 @@ export default function ({ collection }: { collection: Collection }) {
   return (
     <Link href={`/collections/${collection.id}`}>
       <div className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
-        <div className="flex justify-between text-sky-900 items-center">
-          <p className="text-lg w-max">{collection.name}</p>
-          <FontAwesomeIcon
-            icon={faChevronRight}
-            className="w-3 h-3 text-gray-500"
-          />
+        <div>
+          <div className="flex justify-between text-sky-900 items-center">
+            <p className="text-lg w-max">{collection.name}</p>
+            <FontAwesomeIcon
+              icon={faChevronRight}
+              className="w-3 h-3 text-gray-500"
+            />
+          </div>
+          <p className="text-sm font-bold text-gray-500">
+            {collection.description}
+          </p>
         </div>
         <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
       </div>

components/Modal/AddCollection.tsx

@@ -42,7 +42,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           type="text"
           placeholder="e.g. Example Collection"
-          className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -55,7 +55,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           type="text"
           placeholder="Collection description (Optional)"
-          className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 

lib/api/controllers/collections/postCollection.ts

@@ -8,7 +8,7 @@ import { Collection } from "@prisma/client";
 import { existsSync, mkdirSync } from "fs";
 
 export default async function (collection: Collection, userId: number) {
-  if (!collection)
+  if (!collection || collection.name.trim() === "")
     return {
       response: "Please enter a valid collection.",
       status: 400,

pages/collections/[id].tsx

@@ -5,6 +5,8 @@
 
 import Dropdown from "@/components/Dropdown";
 import LinkList from "@/components/LinkList";
+import Modal from "@/components/Modal";
+import AddLink from "@/components/Modal/AddLink";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import { ExtendedLink } from "@/types/global";
@@ -27,10 +29,15 @@ export default function () {
   const { collections } = useCollectionStore();
 
   const [expandDropdown, setExpandDropdown] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
   const [activeCollection, setActiveCollection] = useState<Collection>();
   const [linksByCollection, setLinksByCollection] =
     useState<ExtendedLink[]>(links);
 
+  const toggleLinkModal = () => {
+    setLinkModal(!linkModal);
+  };
+
   useEffect(() => {
     setLinksByCollection(
       links.filter((e) => e.collection.id === Number(router.query.id))
@@ -67,6 +74,10 @@ export default function () {
                 {
                   name: "Add Link Here",
                   icon: <FontAwesomeIcon icon={faAdd} />,
+                  onClick: () => {
+                    toggleLinkModal();
+                    setExpandDropdown(false);
+                  },
                 },
                 {
                   name: "Edit Collection",
@@ -84,6 +95,12 @@ export default function () {
               className="absolute top-7 left-0 z-10 w-44"
             />
           ) : null}
+
+          {linkModal ? (
+            <Modal toggleModal={toggleLinkModal}>
+              <AddLink toggleLinkModal={toggleLinkModal} />
+            </Modal>
+          ) : null}
         </div>
       </div>
       {linksByCollection.map((e, i) => {

pages/collections/index.tsx

@@ -4,7 +4,12 @@
 // 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 useCollectionStore from "@/store/collections";
-import { faAdd, faBox, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAdd,
+  faBox,
+  faEllipsis,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CollectionCard from "@/components/CollectionCard";
 import Dropdown from "@/components/Dropdown";
@@ -18,7 +23,7 @@ export default function () {
 
   const [linkModal, setLinkModal] = useState(false);
 
-  const toggleLinkModal = () => {
+  const toggleCollectionModal = () => {
     setLinkModal(!linkModal);
   };
 
@@ -49,7 +54,7 @@ export default function () {
                   name: "New",
                   icon: <FontAwesomeIcon icon={faAdd} />,
                   onClick: () => {
-                    toggleLinkModal();
+                    toggleCollectionModal();
                     setExpandDropdown(false);
                   },
                 },
@@ -64,8 +69,8 @@ export default function () {
         </div>
 
         {linkModal ? (
-          <Modal toggleModal={toggleLinkModal}>
-            <AddCollection toggleCollectionModal={toggleLinkModal} />
+          <Modal toggleModal={toggleCollectionModal}>
+            <AddCollection toggleCollectionModal={toggleCollectionModal} />
           </Modal>
         ) : null}
       </div>
@@ -73,6 +78,14 @@ export default function () {
         {collections.map((e, i) => {
           return <CollectionCard key={i} collection={e} />;
         })}
+
+        <div
+          className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
+          onClick={toggleCollectionModal}
+        >
+          <p className="text-sky-900">New Collection</p>
+          <FontAwesomeIcon icon={faPlus} className="w-8 h-8 text-sky-500" />
+        </div>
       </div>
     </div>
   );

store/collections.ts

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