improved UI

.vscode/settings.json

@@ -0,0 +1 @@
+{}

components/CollectionCard.tsx

@@ -65,7 +65,7 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div className="relative">
-      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-10">
+      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-20">
         <div
           tabIndex={0}
           role="button"

components/LinkCard.tsx

@@ -13,7 +13,11 @@ import Image from "next/image";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useAccountStore from "@/store/account";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+import {
+  faCalendarDays,
+  faFileImage,
+  faFilePdf,
+} from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -210,62 +214,79 @@ export default function LinkCard({ link, count, className }: Props) {
 
       <div
         onClick={() => router.push("/links/" + link.id)}
-        className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4"
+        className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
-        {url && (
+        {link.url && url ? (
           <Image
             src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
             width={64}
             height={64}
             alt=""
-            className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-5 right-5 select-none z-10`}
+            className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-3 right-3 select-none z-10`}
             draggable="false"
             onError={(e) => {
               const target = e.target as HTMLElement;
               target.style.display = "none";
             }}
           />
+        ) : link.type === "pdf" ? (
+          <FontAwesomeIcon
+            icon={faFilePdf}
+            className="absolute h-12 w-12 bg-primary text-primary-content shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
+          />
+        ) : link.type === "image" ? (
+          <FontAwesomeIcon
+            icon={faFileImage}
+            className="absolute h-12 w-12 bg-primary text-primary-content shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
+          />
+        ) : undefined}
+
+        <div className="flex items-baseline gap-1">
+          <p className="text-sm text-neutral">{count + 1}</p>
+          <p className="text-lg truncate w-full pr-8">
+            {unescapeString(link.name || link.description) || shortendURL}
+          </p>
+        </div>
+
+        {link.type === "url" ? (
+          <Link
+            href={link.url || ""}
+            target="_blank"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
+          >
+            <FontAwesomeIcon
+              icon={faLink}
+              className="mt-1 w-4 h-4 text-primary"
+            />
+            <p className="truncate w-full">{shortendURL}</p>
+          </Link>
+        ) : (
+          <div className="badge badge-primary badge-sm my-1">{link.type}</div>
         )}
 
-        <div className="flex justify-between gap-5 w-full h-full z-0">
+        <Link
-          <div className="flex flex-col justify-between w-full">
+          href={`/collections/${link.collection.id}`}
-            <div className="flex items-baseline gap-1">
+          onClick={(e) => {
-              <p className="text-sm text-neutral">{count + 1}</p>
+            e.stopPropagation();
-              <p className="text-lg truncate capitalize w-full pr-8">
+          }}
-                {unescapeString(link.name || link.description)}
+          className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
-              </p>
+        >
-            </div>
+          <FontAwesomeIcon
-            <Link
+            icon={faFolder}
-              href={`/collections/${link.collection.id}`}
+            className="w-4 h-4 mt-1 drop-shadow"
-              onClick={(e) => {
+            style={{ color: collection?.color }}
-                e.stopPropagation();
+          />
-              }}
+          <p className="truncate capitalize w-full">{collection?.name}</p>
-              className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
+        </Link>
-            >
-              <FontAwesomeIcon
-                icon={faFolder}
-                className="w-4 h-4 mt-1 drop-shadow"
-                style={{ color: collection?.color }}
-              />
-              <p className="truncate capitalize w-full">{collection?.name}</p>
-            </Link>
 
-            <Link
+        <div className="flex items-center gap-1 text-neutral">
-              href={link.url || ""}
+          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              target="_blank"
+          <p>{formattedDate}</p>
-              onClick={(e) => {
+        </div>
-                e.stopPropagation();
+        {/* {link.tags[0] ? (
-              }}
-              className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </Link>
-            <div className="flex items-center gap-1 text-neutral">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
-            </div>
-            {link.tags[0] ? (
               <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
                 <div className="flex gap-1 items-center flex-nowrap">
                   {link.tags.map((e, i) => (
@@ -285,9 +306,7 @@ export default function LinkCard({ link, count, className }: Props) {
               </div>
             ) : (
               <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
-            )}
+            )} */}
-          </div>
-        </div>
       </div>
       {editLinkModal ? (
         <EditLinkModal

components/ModalContent/DeleteCollectionModal.tsx

@@ -68,7 +68,7 @@ export default function DeleteCollectionModal({
         {permissions === true ? "Delete" : "Leave"} Collection
       </p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         {permissions === true ? (

components/ModalContent/DeleteLinkModal.tsx

@@ -44,7 +44,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">Delete Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <p>Are you sure you want to delete this Link?</p>

components/ModalContent/EditCollectionModal.tsx

@@ -51,7 +51,7 @@ export default function EditCollectionModal({
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Edit Collection Info</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">

components/ModalContent/EditCollectionSharingModal.tsx

@@ -99,7 +99,7 @@ export default function EditCollectionSharingModal({
         {permissions === true ? "Share and Collaborate" : "Team"}
       </p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         {permissions === true && (
@@ -203,7 +203,7 @@ export default function EditCollectionSharingModal({
 
             <div className="flex flex-col gap-3 rounded-md">
               <div
-                className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+                className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[6rem] sm:min-h-[4.1rem] gap-2 justify-between"
                 title={`@${collectionOwner.username} is the owner of this collection.`}
               >
                 <div className="flex items-center gap-2 w-full">

components/ModalContent/EditLinkModal.tsx

@@ -80,7 +80,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Edit Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       {link.url ? (
         <Link

components/ModalContent/NewCollectionModal.tsx

@@ -56,7 +56,7 @@ export default function NewCollectionModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Create a New Collection</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">

components/ModalContent/NewLinkModal.tsx

@@ -120,7 +120,7 @@ export default function NewLinkModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Create a New Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">

components/ModalContent/UploadFileModal.tsx

@@ -104,20 +104,31 @@ export default function UploadFileModal({ onClose }: Props) {
   const submit = async () => {
     if (!submitLoader && file) {
       let fileType: ArchivedFormat | null = null;
+      let linkType: "url" | "image" | "pdf" | null = null;
 
-      if (file?.type === "image/jpg" || file.type === "image/jpeg")
+      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
         fileType = ArchivedFormat.jpeg;
-      else if (file.type === "image/png") fileType = ArchivedFormat.png;
+        linkType = "image";
-      else if (file.type === "application/pdf") fileType = ArchivedFormat.pdf;
+      } else if (file.type === "image/png") {
+        fileType = ArchivedFormat.png;
+        linkType = "image";
+      } else if (file.type === "application/pdf") {
+        fileType = ArchivedFormat.pdf;
+        linkType = "pdf";
+      }
 
-      if (fileType !== null) {
+      if (fileType !== null && linkType !== null) {
         setSubmitLoader(true);
 
         let response;
 
         const load = toast.loading("Creating...");
 
-        response = await addLink(link);
+        response = await addLink({
+          ...link,
+          type: linkType,
+          name: link.name ? link.name : file.name.replace(/\.[^/.]+$/, ""),
+        });
 
         toast.dismiss(load);
 
@@ -150,7 +161,7 @@ export default function UploadFileModal({ onClose }: Props) {
       <div className="flex gap-2 items-start">
         <p className="text-xl font-thin">Upload File</p>
       </div>
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></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">File</p>

pages/collections/index.tsx

@@ -57,7 +57,7 @@ export default function Collections() {
                     className="w-5 h-5"
                   />
                 </div>
-                <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
                   <li>
                     <div
                       role="button"