From 93e0fe6172e0d64584e7ee869bbe4fbdb34b1bde Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 29 Nov 2023 09:41:24 -0500
Subject: [PATCH] improved modals

---
 components/Modals/New.tsx                    | 112 ---------
 components/Modals/NewCollectionModal.tsx     | 162 ++++++++++++
 components/Modals/NewLink.tsx                | 246 +++++++++++++++++++
 components/Modals/Tabs.tsx/NewCollection.tsx | 119 ---------
 components/Modals/Tabs.tsx/NewLink.tsx       | 208 ----------------
 components/Navbar.tsx                        |  70 ++++--
 pages/collections/index.tsx                  |   9 +-
 7 files changed, 461 insertions(+), 465 deletions(-)
 delete mode 100644 components/Modals/New.tsx
 create mode 100644 components/Modals/NewCollectionModal.tsx
 create mode 100644 components/Modals/NewLink.tsx
 delete mode 100644 components/Modals/Tabs.tsx/NewCollection.tsx
 delete mode 100644 components/Modals/Tabs.tsx/NewLink.tsx

diff --git a/components/Modals/New.tsx b/components/Modals/New.tsx
deleted file mode 100644
index 36be204..0000000
--- a/components/Modals/New.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Tab } from "@headlessui/react";
-import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
-import NewLink from "./Tabs.tsx/NewLink";
-import NewCollection from "./Tabs.tsx/NewCollection";
-
-type Props = {
-  index?: number;
-  modalId: string;
-  isOpen: boolean;
-  onClose: Function;
-};
-
-export default function New({ index, modalId, isOpen, onClose }: Props) {
-  const newModal = document.getElementById(modalId);
-  const [tabIndex, setTabIndex] = useState(index);
-
-  useEffect(() => {
-    setTabIndex(index);
-
-    newModal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      newModal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
-
-  return (
-    <dialog
-      id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
-      open={isOpen}
-    >
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          className:
-            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
-        }}
-      />
-      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
-        <form method="dialog">
-          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-5 top-5">
-            ✕
-          </button>
-        </form>
-
-        <Tab.Group
-          onChange={(i: any) => setTabIndex(i)}
-          selectedIndex={tabIndex}
-        >
-          <Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
-            <Tab
-              className={({ selected }) =>
-                `${
-                  selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm w-24`
-              }
-            >
-              Link
-            </Tab>
-            {/* <Tab
-              className={({ selected }) =>
-                `${
-                  selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm w-24`
-              }
-            >
-              File
-            </Tab> */}
-            {/* <Tab
-              className={({ selected }) =>
-                `${
-                  selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm w-24`
-              }
-            >
-              Note
-            </Tab> */}
-            <Tab
-              className={({ selected }) =>
-                `${
-                  selected ? "btn-primary" : "btn-ghost"
-                } outline-none rounded-md btn btn-sm w-24`
-              }
-            >
-              Collection
-            </Tab>
-          </Tab.List>
-          <Tab.Panels className="mt-5">
-            <Tab.Panel>
-              <NewLink isOpen={isOpen} modalId={modalId} />
-            </Tab.Panel>
-            {/* <Tab.Panel>File</Tab.Panel> */}
-            {/* <Tab.Panel>Note</Tab.Panel> */}
-            <Tab.Panel>
-              <NewCollection isOpen={isOpen} modalId={modalId} />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </div>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
-  );
-}
diff --git a/components/Modals/NewCollectionModal.tsx b/components/Modals/NewCollectionModal.tsx
new file mode 100644
index 0000000..ad7a6f9
--- /dev/null
+++ b/components/Modals/NewCollectionModal.tsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "@/components/TextInput";
+import useCollectionStore from "@/store/collections";
+import toast, { Toaster } from "react-hot-toast";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { HexColorPicker } from "react-colorful";
+import { Collection } from "@prisma/client";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  modalId: string;
+  isOpen: boolean;
+  onClose: Function;
+};
+
+export default function NewCollectionModal({
+  modalId,
+  isOpen,
+  onClose,
+}: Props) {
+  const newModal = document.getElementById(modalId);
+
+  useEffect(() => {
+    newModal?.addEventListener("close", () => {
+      onClose();
+    });
+
+    return () => {
+      newModal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
+  }, [isOpen]);
+
+  const initial = {
+    name: "",
+    description: "",
+    color: "#0ea5e9",
+  };
+
+  const [collection, setCollection] = useState<Partial<Collection>>(initial);
+
+  useEffect(() => {
+    setCollection(initial);
+  }, [isOpen]);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { addCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+      if (!collection) return null;
+
+      setSubmitLoader(true);
+
+      const load = toast.loading("Creating...");
+
+      let response;
+
+      response = await addCollection(collection as any);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Collection "Created!"`);
+        (document.getElementById(modalId) as any).close();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <dialog
+      id={modalId}
+      className="modal backdrop-blur-sm overflow-y-auto"
+      open={isOpen}
+    >
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        toastOptions={{
+          className:
+            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+        }}
+      />
+      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
+        <form method="dialog">
+          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
+            ✕
+          </button>
+        </form>
+
+        <p className="text-xl mb-5 font-thin">Create a New Collection</p>
+
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col sm:flex-row gap-3">
+            <div className="w-full">
+              <p className="mb-2">Name</p>
+              <div className="flex flex-col gap-3">
+                <TextInput
+                  className="bg-base-200"
+                  value={collection.name}
+                  placeholder="e.g. Example Collection"
+                  onChange={(e) =>
+                    setCollection({ ...collection, name: e.target.value })
+                  }
+                />
+                <div className="color-picker flex justify-between">
+                  <div className="flex flex-col justify-between items-center w-32">
+                    <p className="w-full mb-2">Color</p>
+                    <div style={{ color: collection.color }}>
+                      <FontAwesomeIcon
+                        icon={faFolder}
+                        className="w-12 h-12 drop-shadow"
+                      />
+                    </div>
+                    <div
+                      className="btn btn-ghost btn-xs"
+                      onClick={() =>
+                        setCollection({ ...collection, color: "#0ea5e9" })
+                      }
+                    >
+                      Reset
+                    </div>
+                  </div>
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(e) => setCollection({ ...collection, color: e })}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="w-full">
+              <p className="mb-2">Description</p>
+              <textarea
+                className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+                placeholder="The purpose of this Collection..."
+                value={collection.description}
+                onChange={(e) =>
+                  setCollection({
+                    ...collection,
+                    description: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+
+          <button className="btn btn-accent w-fit ml-auto" onClick={submit}>
+            Create Collection
+          </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+}
diff --git a/components/Modals/NewLink.tsx b/components/Modals/NewLink.tsx
new file mode 100644
index 0000000..0cae3a4
--- /dev/null
+++ b/components/Modals/NewLink.tsx
@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+
+type Props = {
+  modalId: string;
+  isOpen: boolean;
+  onClose: Function;
+};
+
+export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
+  const newModal = document.getElementById(modalId);
+
+  const { data } = useSession();
+
+  const initial = {
+    name: "",
+    url: "",
+    description: "",
+    tags: [],
+    screenshotPath: "",
+    pdfPath: "",
+    readabilityPath: "",
+    textContent: "",
+    collection: {
+      name: "",
+      ownerId: data?.user.id as number,
+    },
+  };
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
+
+  const { addLink } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [optionsExpanded, setOptionsExpanded] = useState(false);
+
+  const router = useRouter();
+  const { collections } = useCollectionStore();
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
+    setLink({ ...link, tags: tagNames });
+  };
+
+  useEffect(() => {
+    setOptionsExpanded(false);
+    if (router.query.id) {
+      const currentCollection = collections.find(
+        (e) => e.id == Number(router.query.id)
+      );
+
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
+        setLink({
+          ...initial,
+          collection: {
+            id: currentCollection.id,
+            name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
+          },
+        });
+    } else
+      setLink({
+        ...initial,
+        collection: {
+          // id: ,
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
+      });
+
+    newModal?.addEventListener("close", () => {
+      onClose();
+    });
+
+    return () => {
+      newModal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
+  }, [isOpen]);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      let response;
+
+      const load = toast.loading("Creating...");
+
+      response = await addLink(link);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Created!`);
+        (document.getElementById(modalId) as any).close();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+
+      return response;
+    }
+  };
+
+  return (
+    <dialog
+      id={modalId}
+      className="modal backdrop-blur-sm overflow-y-auto"
+      open={isOpen}
+    >
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        toastOptions={{
+          className:
+            "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+        }}
+      />
+      <div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
+        <form method="dialog">
+          <button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
+            ✕
+          </button>
+        </form>
+
+        <p className="text-xl mb-5 font-thin">Create a New Link</p>
+        <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
+          <div className="sm:col-span-3 col-span-5">
+            <p className="mb-2">Link</p>
+            <TextInput
+              value={link.url}
+              onChange={(e) => setLink({ ...link, url: e.target.value })}
+              placeholder="e.g. http://example.com/"
+              className="bg-base-200"
+            />
+          </div>
+          <div className="sm:col-span-2 col-span-5">
+            <p className="mb-2">Collection</p>
+            {link.collection.name ? (
+              <CollectionSelection
+                onChange={setCollection}
+                // defaultValue={{
+                //   label: link.collection.name,
+                //   value: link.collection.id,
+                // }}
+                defaultValue={
+                  link.collection.id
+                    ? {
+                        value: link.collection.id,
+                        label: link.collection.name,
+                      }
+                    : {
+                        value: null as unknown as number,
+                        label: "Unorganized",
+                      }
+                }
+              />
+            ) : null}
+          </div>
+        </div>
+
+        {optionsExpanded ? (
+          <div className="mt-5">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <p className="mb-2">Name</p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder="e.g. Example Link"
+                  className="bg-base-200"
+                />
+              </div>
+
+              <div>
+                <p className="mb-2">Tags</p>
+                <TagSelection
+                  onChange={setTags}
+                  defaultValue={link.tags.map((e) => {
+                    return { label: e.name, value: e.id };
+                  })}
+                />
+              </div>
+
+              <div className="sm:col-span-2">
+                <p className="mb-2">Description</p>
+                <textarea
+                  value={unescapeString(link.description) as string}
+                  onChange={(e) =>
+                    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"
+                />
+              </div>
+            </div>
+          </div>
+        ) : undefined}
+
+        <div className="flex justify-between items-center mt-5">
+          <div
+            onClick={() => setOptionsExpanded(!optionsExpanded)}
+            className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+          >
+            <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          </div>
+
+          <button className="btn btn-accent" onClick={submit}>
+            Create Link
+          </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+}
diff --git a/components/Modals/Tabs.tsx/NewCollection.tsx b/components/Modals/Tabs.tsx/NewCollection.tsx
deleted file mode 100644
index 8cdccd0..0000000
--- a/components/Modals/Tabs.tsx/NewCollection.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useEffect, useState } from "react";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-import { useRouter } from "next/router";
-import { Collection } from "@prisma/client";
-
-type Props = {
-  isOpen: boolean;
-  modalId: string;
-};
-
-export default function NewCollection({ isOpen, modalId }: Props) {
-  const router = useRouter();
-
-  const initial = {
-    name: "",
-    description: "",
-    color: "#0ea5e9",
-  };
-
-  const [collection, setCollection] = useState<Partial<Collection>>(initial);
-
-  useEffect(() => {
-    setCollection(initial);
-  }, [isOpen]);
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { addCollection } = useCollectionStore();
-
-  const submit = async () => {
-    if (!submitLoader) {
-      setSubmitLoader(true);
-      if (!collection) return null;
-
-      setSubmitLoader(true);
-
-      const load = toast.loading("Creating...");
-
-      let response;
-
-      response = await addCollection(collection as any);
-
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success(`Collection "Created!"`);
-        (document.getElementById(modalId) as any).close();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-col sm:flex-row gap-3">
-        <div className="w-full">
-          <p className="mb-2">Name</p>
-          <div className="flex flex-col gap-3">
-            <TextInput
-              className="bg-base-200"
-              value={collection.name}
-              placeholder="e.g. Example Collection"
-              onChange={(e) =>
-                setCollection({ ...collection, name: e.target.value })
-              }
-            />
-            <div className="color-picker flex justify-between">
-              <div className="flex flex-col justify-between items-center w-32">
-                <p className="w-full mb-2">Color</p>
-                <div style={{ color: collection.color }}>
-                  <FontAwesomeIcon
-                    icon={faFolder}
-                    className="w-12 h-12 drop-shadow"
-                  />
-                </div>
-                <div
-                  className="btn btn-ghost btn-xs"
-                  onClick={() =>
-                    setCollection({ ...collection, color: "#0ea5e9" })
-                  }
-                >
-                  Reset
-                </div>
-              </div>
-              <HexColorPicker
-                color={collection.color}
-                onChange={(e) => setCollection({ ...collection, color: e })}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="w-full">
-          <p className="mb-2">Description</p>
-          <textarea
-            className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-            placeholder="The purpose of this Collection..."
-            value={collection.description}
-            onChange={(e) =>
-              setCollection({
-                ...collection,
-                description: e.target.value,
-              })
-            }
-          />
-        </div>
-      </div>
-
-      <button className="btn btn-accent w-fit ml-auto" onClick={submit}>
-        Create Collection
-      </button>
-    </div>
-  );
-}
diff --git a/components/Modals/Tabs.tsx/NewLink.tsx b/components/Modals/Tabs.tsx/NewLink.tsx
deleted file mode 100644
index a7a3f71..0000000
--- a/components/Modals/Tabs.tsx/NewLink.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-
-type Props = {
-  isOpen: boolean;
-  modalId: string;
-};
-
-export default function NewLink({ isOpen, modalId }: Props) {
-  const { data } = useSession();
-
-  const initial = {
-    name: "",
-    url: "",
-    description: "",
-    tags: [],
-    screenshotPath: "",
-    pdfPath: "",
-    readabilityPath: "",
-    textContent: "",
-    collection: {
-      name: "",
-      ownerId: data?.user.id as number,
-    },
-  };
-
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(initial);
-
-  const { addLink } = useLinkStore();
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [optionsExpanded, setOptionsExpanded] = useState(false);
-
-  const router = useRouter();
-  const { collections } = useCollectionStore();
-
-  const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = null;
-
-    setLink({
-      ...link,
-      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-    });
-  };
-
-  const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
-      return { name: e.label };
-    });
-
-    setLink({ ...link, tags: tagNames });
-  };
-
-  useEffect(() => {
-    setOptionsExpanded(false);
-    if (router.query.id) {
-      const currentCollection = collections.find(
-        (e) => e.id == Number(router.query.id)
-      );
-
-      if (
-        currentCollection &&
-        currentCollection.ownerId &&
-        router.asPath.startsWith("/collections/")
-      )
-        setLink({
-          ...initial,
-          collection: {
-            id: currentCollection.id,
-            name: currentCollection.name,
-            ownerId: currentCollection.ownerId,
-          },
-        });
-    } else
-      setLink({
-        ...initial,
-        collection: {
-          // id: ,
-          name: "Unorganized",
-          ownerId: data?.user.id as number,
-        },
-      });
-  }, [isOpen]);
-
-  const submit = async () => {
-    if (!submitLoader) {
-      setSubmitLoader(true);
-
-      let response;
-
-      const load = toast.loading("Creating...");
-
-      response = await addLink(link);
-
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success(`Created!`);
-        (document.getElementById(modalId) as any).close();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-
-      return response;
-    }
-  };
-
-  return (
-    <div>
-      <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
-        <div className="sm:col-span-3 col-span-5">
-          <p className="mb-2">Link</p>
-          <TextInput
-            value={link.url}
-            onChange={(e) => setLink({ ...link, url: e.target.value })}
-            placeholder="e.g. http://example.com/"
-            className="bg-base-200"
-          />
-        </div>
-        <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">Collection</p>
-          {link.collection.name ? (
-            <CollectionSelection
-              onChange={setCollection}
-              // defaultValue={{
-              //   label: link.collection.name,
-              //   value: link.collection.id,
-              // }}
-              defaultValue={
-                link.collection.id
-                  ? {
-                      value: link.collection.id,
-                      label: link.collection.name,
-                    }
-                  : {
-                      value: null as unknown as number,
-                      label: "Unorganized",
-                    }
-              }
-            />
-          ) : null}
-        </div>
-      </div>
-
-      {optionsExpanded ? (
-        <div className="mt-5">
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
-          <div className="grid sm:grid-cols-2 gap-3">
-            <div>
-              <p className="mb-2">Name</p>
-              <TextInput
-                value={link.name}
-                onChange={(e) => setLink({ ...link, name: e.target.value })}
-                placeholder="e.g. Example Link"
-                className="bg-base-200"
-              />
-            </div>
-
-            <div>
-              <p className="mb-2">Tags</p>
-              <TagSelection
-                onChange={setTags}
-                defaultValue={link.tags.map((e) => {
-                  return { label: e.name, value: e.id };
-                })}
-              />
-            </div>
-
-            <div className="sm:col-span-2">
-              <p className="mb-2">Description</p>
-              <textarea
-                value={unescapeString(link.description) as string}
-                onChange={(e) =>
-                  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"
-              />
-            </div>
-          </div>
-        </div>
-      ) : undefined}
-
-      <div className="flex justify-between items-center mt-5">
-        <div
-          onClick={() => setOptionsExpanded(!optionsExpanded)}
-          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
-        >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
-        </div>
-
-        <button className="btn btn-accent" onClick={submit}>
-          Create Link
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 938a0e7..f36a543 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
-import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import Dropdown from "@/components/Dropdown";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
@@ -12,7 +12,8 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
 import useLocalSettingsStore from "@/store/localSettings";
-import New from "./Modals/New";
+import NewLinkModal from "./Modals/NewLink";
+import NewCollectionModal from "./Modals/NewCollectionModal";
 
 export default function Navbar() {
   const { settings, updateSettings } = useLocalSettingsStore();
@@ -47,8 +48,11 @@ export default function Navbar() {
     setSidebar(!sidebar);
   };
 
-  const [newModalIsOpen, setNewModalIsOpen] = useState(false);
-  const closeNewModal = () => setNewModalIsOpen(false);
+  const [newLinkModalIsOpen, setNewLinkModalIsOpen] = useState(false);
+  const closeNewLinkModal = () => setNewLinkModalIsOpen(false);
+  const [newCollectionModalIsOpen, setNewCollectionModalIsOpen] =
+    useState(false);
+  const closeNewCollectionModal = () => setNewCollectionModalIsOpen(false);
 
   return (
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
@@ -62,18 +66,38 @@ export default function Navbar() {
       <div className="flex items-center gap-2">
         <ToggleDarkMode className="sm:inline-grid hidden" />
 
-        <button
-          className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
-          onClick={() => setNewModalIsOpen(true)}
-        >
-          <FontAwesomeIcon
-            icon={faPlus}
-            className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
-          />
-          <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
-            New
-          </span>
-        </button>
+        <div className="dropdown dropdown-end">
+          <div className="tooltip tooltip-bottom" data-tip="Create New...">
+            <div
+              tabIndex={0}
+              role="button"
+              className="flex items-center group btn btn-accent text-white btn-sm"
+            >
+              <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
+              <FontAwesomeIcon icon={faCaretDown} className="w-3 h-3" />
+            </div>
+          </div>
+          <ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
+            <li>
+              <div
+                onClick={() => setNewLinkModalIsOpen(true)}
+                tabIndex={0}
+                role="button"
+              >
+                New Link
+              </div>
+            </li>
+            <li>
+              <div
+                onClick={() => setNewCollectionModalIsOpen(true)}
+                tabIndex={0}
+                role="button"
+              >
+                New Collection
+              </div>
+            </li>
+          </ul>
+        </div>
 
         <div className="relative">
           <div
@@ -133,11 +157,15 @@ export default function Navbar() {
           ) : null}
         </div>
       </div>
-      <New
-        index={0}
-        isOpen={newModalIsOpen}
-        onClose={closeNewModal}
-        modalId="new-modal-0"
+      <NewLinkModal
+        isOpen={newLinkModalIsOpen}
+        onClose={closeNewLinkModal}
+        modalId="new-link-modal"
+      />
+      <NewCollectionModal
+        isOpen={newCollectionModalIsOpen}
+        onClose={closeNewCollectionModal}
+        modalId="new-collection-modal"
       />
     </div>
   );
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 8a05954..6943c5a 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -15,7 +15,7 @@ import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
-import New from "@/components/Modals/New";
+import NewCollectionModal from "@/components/Modals/NewCollectionModal";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
@@ -121,7 +121,7 @@ export default function Collections() {
             })}
 
           <div
-            className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
+            className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
             onClick={() => setNewModalIsOpen(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
@@ -158,11 +158,10 @@ export default function Collections() {
           </>
         ) : undefined}
       </div>
-      <New
-        index={1}
+      <NewCollectionModal
         isOpen={newModalIsOpen}
         onClose={closeNewModal}
-        modalId="new-modal-1"
+        modalId="new-collection-modal-1"
       />
     </MainLayout>
   );