From f8811a49c0cc7c6f684b1fc1de044e93ab691486 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 5 Dec 2023 15:17:36 -0500
Subject: [PATCH] improved UI

---
 .vscode/settings.json                         |   1 +
 components/CollectionCard.tsx                 |   2 +-
 components/LinkCard.tsx                       | 109 ++++++++++--------
 .../ModalContent/DeleteCollectionModal.tsx    |   2 +-
 components/ModalContent/DeleteLinkModal.tsx   |   2 +-
 .../ModalContent/EditCollectionModal.tsx      |   2 +-
 .../EditCollectionSharingModal.tsx            |   4 +-
 components/ModalContent/EditLinkModal.tsx     |   2 +-
 .../ModalContent/NewCollectionModal.tsx       |   2 +-
 components/ModalContent/NewLinkModal.tsx      |   2 +-
 components/ModalContent/UploadFileModal.tsx   |  23 +++-
 pages/collections/index.tsx                   |   2 +-
 12 files changed, 92 insertions(+), 61 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index d2f59b5..97e0b63 100644
--- a/components/CollectionCard.tsx
+++ b/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"
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 619effc..e7638b5 100644
--- a/components/LinkCard.tsx
+++ b/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">
-          <div className="flex flex-col justify-between w-full">
-            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-neutral">{count + 1}</p>
-              <p className="text-lg truncate capitalize w-full pr-8">
-                {unescapeString(link.name || link.description)}
-              </p>
-            </div>
-            <Link
-              href={`/collections/${link.collection.id}`}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
-            >
-              <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
+          href={`/collections/${link.collection.id}`}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+        >
+          <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
-              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" />
-              <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 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
diff --git a/components/ModalContent/DeleteCollectionModal.tsx b/components/ModalContent/DeleteCollectionModal.tsx
index 79747d1..0b31752 100644
--- a/components/ModalContent/DeleteCollectionModal.tsx
+++ b/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 ? (
diff --git a/components/ModalContent/DeleteLinkModal.tsx b/components/ModalContent/DeleteLinkModal.tsx
index 21ccc94..bb78396 100644
--- a/components/ModalContent/DeleteLinkModal.tsx
+++ b/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>
diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx
index 96ddf71..34d2502 100644
--- a/components/ModalContent/EditCollectionModal.tsx
+++ b/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">
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index a3fd163..2bd7a41 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/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">
diff --git a/components/ModalContent/EditLinkModal.tsx b/components/ModalContent/EditLinkModal.tsx
index 27157c8..d626e70 100644
--- a/components/ModalContent/EditLinkModal.tsx
+++ b/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
diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx
index 8d43fc7..0773cb1 100644
--- a/components/ModalContent/NewCollectionModal.tsx
+++ b/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">
diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 307339d..afca87d 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/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">
diff --git a/components/ModalContent/UploadFileModal.tsx b/components/ModalContent/UploadFileModal.tsx
index 42faf6d..887ce67 100644
--- a/components/ModalContent/UploadFileModal.tsx
+++ b/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;
-      else if (file.type === "application/pdf") fileType = ArchivedFormat.pdf;
+        linkType = "image";
+      } 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>
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index ca3fd4a..16795fc 100644
--- a/pages/collections/index.tsx
+++ b/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"