minor changes and improvements

components/CollectionCard.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
@@ -8,6 +8,7 @@ import { useState } from "react";
 import Modal from "@/components/Modal";
 import CollectionModal from "@/components/Modal/Collection";
 import ProfilePhoto from "./ProfilePhoto";
+import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 
 export default function CollectionCard({
   collection,
@@ -80,11 +81,17 @@ export default function CollectionCard({
               ) : null}
             </div>
             <div className="text-right w-40">
-              <p className="text-sky-500 font-bold text-sm">
-                {links.filter((e) => e.collectionId === collection.id).length}{" "}
-                Links
-              </p>
-              <p className="text-gray-500 font-bold text-xs">{formattedDate}</p>
+              <div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center">
+                <FontAwesomeIcon
+                  icon={faLink}
+                  className="w-5 h-5 text-sky-600"
+                />
+                {links.filter((e) => e.collectionId === collection.id).length}
+              </div>
+              <div className="flex items-center justify-end gap-1 text-gray-600">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p className="font-bold text-xs">{formattedDate}</p>
+              </div>
             </div>
           </div>
         </div>

components/Dashboard/CollectionItem.tsx

@@ -1,55 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import Link from "next/link";
-import { CollectionIncludingMembers } from "@/types/global";
-import useLinkStore from "@/store/links";
-
-export default function CollectionItem({
-  collection,
-}: {
-  collection: CollectionIncludingMembers;
-}) {
-  const { links } = useLinkStore();
-
-  return (
-    <Link
-      href={`/collections/${collection.id}`}
-      className="bg-white rounded-md"
-    >
-      <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
-        <div>
-          <div className="flex justify-between text-sky-600 items-center">
-            <div className="flex items-baseline gap-1">
-              <p className="text-lg w-max font-bold">{collection.name}</p>
-              <p className="text-sky-400">{collection.description}</p>
-            </div>
-
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className="w-3 h-3 text-gray-500"
-            />
-          </div>
-        </div>
-        <div className="text-sky-400 flex gap-1 flex-wrap">
-          <p>Members:</p>
-          {collection.members.map((e, i) => {
-            return (
-              <p
-                className="text-sky-500 font-semibold"
-                title={e.user.email}
-                key={i}
-              >
-                {e.user.name}
-              </p>
-            );
-          })}
-        </div>
-        <div className="flex gap-2 items-baseline">
-          <p className="text-sky-500 font-bold">
-            {links.filter((e) => e.collectionId === collection.id).length} Links
-          </p>
-        </div>
-      </div>
-    </Link>
-  );
-}

components/Dashboard/LinkItem.tsx

@@ -1,195 +0,0 @@
-import { LinkIncludingCollectionAndTags } from "@/types/global";
-import {
-  faFolder,
-  faArrowUpRightFromSquare,
-  faEllipsis,
-} from "@fortawesome/free-solid-svg-icons";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
-import Image from "next/image";
-import useLinkStore from "@/store/links";
-import LinkModal from "../Modal/LinkModal";
-import Link from "next/link";
-import Dropdown from "../Dropdown";
-import Modal from "../Modal";
-
-type Props = {
-  link: LinkIncludingCollectionAndTags;
-  count: number;
-};
-
-export default function LinkItem({ link, count }: Props) {
-  const [expandDropdown, setExpandDropdown] = useState(false);
-  const [editModal, setEditModal] = useState(false);
-
-  const { removeLink } = useLinkStore();
-
-  const url = new URL(link.url);
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  const toggleEditModal = () => {
-    setEditModal(!editModal);
-  };
-
-  return (
-    <div className="border border-sky-100 bg-white p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
-      {editModal ? (
-        <Modal toggleModal={toggleEditModal}>
-          <LinkModal
-            toggleLinkModal={toggleEditModal}
-            activeLink={link}
-            method="UPDATE"
-          />
-        </Modal>
-      ) : null}
-
-      <Image
-        src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-        width={42}
-        height={42}
-        alt=""
-        className="select-none mt-3 z-10 rounded-full border-[3px] border-sky-100"
-        draggable="false"
-        onError={(e) => {
-          const target = e.target as HTMLElement;
-          target.style.opacity = "0";
-        }}
-      />
-      <Image
-        src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-        width={80}
-        height={80}
-        alt=""
-        className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
-        draggable="false"
-        onError={(e) => {
-          const target = e.target as HTMLElement;
-          target.style.opacity = "0";
-        }}
-      />
-      <div className="flex justify-between gap-5 w-full h-full z-0">
-        <div className="flex flex-col justify-between">
-          <div className="flex items-baseline gap-1">
-            <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
-            <p className="text-lg text-sky-600">{link.name}</p>
-          </div>
-          <p className="text-sky-400 text-sm font-medium">{link.title}</p>
-          <div className="flex gap-3 items-center flex-wrap my-3">
-            <Link href={`/collections/${link.collection.id}`}>
-              <div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
-                <FontAwesomeIcon icon={faFolder} className="w-4 text-sky-500" />
-                <p className="text-sky-900">{link.collection.name}</p>
-              </div>
-            </Link>
-
-            <div className="flex gap-1 items-center flex-wrap">
-              {link.tags.map((e, i) => (
-                <Link key={i} href={`/tags/${e.id}`}>
-                  <p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
-                    # {e.name}
-                  </p>
-                </Link>
-              ))}
-            </div>
-          </div>
-          <div className="flex gap-2 items-center flex-wrap">
-            <p className="text-gray-500">{formattedDate}</p>
-            <a
-              href={link.url}
-              target="_blank"
-              rel="noreferrer"
-              className="group/url"
-            >
-              <div className="text-gray-500 font-bold flex items-center gap-1">
-                <p>{url.host}</p>
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"
-                />
-              </div>
-            </a>
-          </div>
-        </div>
-
-        <div className="flex flex-col justify-between items-end relative">
-          <div
-            onClick={() => setExpandDropdown(!expandDropdown)}
-            id="expand-dropdown"
-            className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              title="More"
-              className="w-6 h-6"
-              id="expand-dropdown"
-            />
-          </div>
-          <div className="relative">
-            <div className="flex flex-col items-end justify-center gap-1">
-              <a
-                href={`/api/archives/${link.collectionId}/${encodeURIComponent(
-                  link.screenshotPath
-                )}`}
-                target="_blank"
-                rel="noreferrer"
-                title="Screenshot"
-              >
-                <FontAwesomeIcon
-                  icon={faFileImage}
-                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
-                />
-              </a>
-              <a
-                href={`/api/archives/${link.collectionId}/${encodeURIComponent(
-                  link.pdfPath
-                )}`}
-                target="_blank"
-                rel="noreferrer"
-                title="PDF"
-              >
-                <FontAwesomeIcon
-                  icon={faFilePdf}
-                  className="w-5 h-5 text-sky-600 cursor-pointer hover:text-sky-500 duration-100"
-                />
-              </a>
-            </div>
-          </div>
-
-          {expandDropdown ? (
-            <Dropdown
-              items={[
-                {
-                  name: "Edit",
-                  onClick: () => {
-                    setEditModal(true);
-                    setExpandDropdown(false);
-                  },
-                },
-                {
-                  name: "Delete",
-                  onClick: () => {
-                    removeLink(link);
-                    setExpandDropdown(false);
-                  },
-                },
-              ]}
-              onClickOutside={(e: Event) => {
-                const target = e.target as HTMLInputElement;
-                if (target.id !== "expand-dropdown") setExpandDropdown(false);
-              }}
-              className="absolute top-8 right-0 w-36"
-            />
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}

components/Sidebar.tsx

@@ -4,9 +4,9 @@ import {
   faFolder,
   faBox,
   faHashtag,
-  faBookmark,
   faChartSimple,
   faChevronDown,
+  faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
@@ -97,7 +97,7 @@ export default function Sidebar({ className }: { className?: string }) {
             } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex items-center gap-2`}
           >
             <FontAwesomeIcon
-              icon={faBookmark}
+              icon={faLink}
               className={`w-6 h-6 drop-shadow text-sky-500`}
             />
             <p className="text-sky-600">All Links</p>

lib/api/archive.ts

@@ -32,7 +32,12 @@ export default async function archive(
 
     if (linkExists) {
       await Promise.all([
-        page.pdf({ path: archivePath + ".pdf", format: "a4" }),
+        page.pdf({
+          path: archivePath + ".pdf",
+          format: "a4",
+          printBackground: true,
+          margin: { top: "15px", bottom: "15px" },
+        }),
         page.screenshot({ fullPage: true, path: archivePath + ".png" }),
       ]);
     }

lib/api/controllers/tags/getTags.ts

@@ -1,7 +1,7 @@
 import { prisma } from "@/lib/api/db";
 
 export default async function getTags(userId: number) {
-  // remove empty tags
+  // Remove empty tags
   await prisma.tag.deleteMany({
     where: {
       ownerId: userId,
@@ -30,11 +30,11 @@ export default async function getTags(userId: number) {
         },
       ],
     },
-    orderBy: {
-      links: {
-        _count: "desc",
-      },
-    },
+    // orderBy: {
+    //   links: {
+    //     _count: "desc",
+    //   },
+    // },
   });
 
   return { response: tags, status: 200 };

pages/dashboard.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import useTagStore from "@/store/tags";
-import LinkItem from "@/components/Dashboard/LinkItem";
+import LinkCard from "@/components/LinkCard";
 import Link from "next/link";
-import CollectionItem from "@/components/Dashboard/CollectionItem";
+import CollectionCard from "@/components/CollectionCard";
 import { useEffect, useState } from "react";
 
 export default function Dashboard() {
@@ -68,7 +68,7 @@ export default function Dashboard() {
         </div>
 
         <div className="flex flex-col 2xl:flex-row items-start justify-evenly gap-5">
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Recently added Links</p>
               <Link href="/links">
@@ -89,11 +89,11 @@ export default function Dashboard() {
               )
               .slice(0, 5)
               .map((e, i) => (
-                <LinkItem key={i} link={e} count={i} />
+                <LinkCard key={i} link={e} count={i} />
               ))}
           </div>
 
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Top Collections</p>
               <Link href="/collections">
@@ -107,14 +107,11 @@ export default function Dashboard() {
               </Link>
             </div>
             {sortedCollections.map((e, i) => (
-              <CollectionItem key={i} collection={e} />
+              <CollectionCard key={i} collection={e} />
             ))}
           </div>
 
-          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
-            <div className="flex justify-between gap-2 items-baseline">
-              <p className="text-sky-600 text-xl mb-2">Top Tags</p>
-            </div>
+          <div className="flex flex-col gap-5 p-2 w-full">
             <div className="flex gap-2 flex-wrap">
               {tags.slice(0, 19).map((e, i) => (
                 <Link

pages/links.tsx

@@ -2,7 +2,7 @@ import LinkCard from "@/components/LinkCard";
 import SortLinkDropdown from "@/components/SortLinkDropdown";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { faBookmark, faSort } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faSort } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEvent, useEffect, useState } from "react";
 
@@ -52,7 +52,7 @@ export default function Links() {
         <div className="flex gap-3 justify-between items-center">
           <div className="flex gap-2">
             <FontAwesomeIcon
-              icon={faBookmark}
+              icon={faLink}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">