From 3a5ae28f869d4096717f82fc17580f83fcfc4742 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sat, 25 Mar 2023 17:47:34 +0330
Subject: [PATCH] ui improvements

---
 components/AddLinkModal.tsx             |  8 +++----
 components/CollectionCard.tsx           |  2 +-
 components/Dropdown.tsx                 |  6 ++---
 components/InputSelect/styles.ts        |  2 +-
 components/LinkList.tsx                 | 31 ++++++++++++++++++------
 components/Navbar.tsx                   | 32 ++++++++++++++++++-------
 components/Sidebar/SidebarItem.tsx      |  3 +--
 components/Sidebar/index.tsx            | 19 ++++++++-------
 lib/api/archive.ts                      | 14 +++++++++--
 lib/api/controllers/links/deleteLink.ts | 15 ++++++++----
 lib/api/controllers/links/postLink.ts   |  4 ++--
 lib/api/controllers/tags/getTags.ts     |  9 +++++++
 pages/collections/[id].tsx              |  4 ++--
 pages/collections/index.tsx             |  2 +-
 pages/login.tsx                         |  6 ++---
 pages/register.tsx                      |  8 +++----
 store/links.ts                          |  7 +++++-
 17 files changed, 117 insertions(+), 55 deletions(-)

diff --git a/components/AddLinkModal.tsx b/components/AddLinkModal.tsx
index 8ba37db..d4f8519 100644
--- a/components/AddLinkModal.tsx
+++ b/components/AddLinkModal.tsx
@@ -40,7 +40,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
   };
 
   return (
-    <div className="slide-up border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
+    <div className="slide-up border-sky-100 rounded-md border-solid border rounded-md-md shadow-lg p-5 bg-white flex flex-col gap-3">
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
       <div className="flex gap-5 items-center justify-between">
@@ -50,7 +50,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
           onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -61,7 +61,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
           onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
           type="text"
           placeholder="e.g. http://example.com/"
-          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -76,7 +76,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
       </div>
 
       <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
         onClick={submitLink}
       >
         <FontAwesomeIcon icon={faPlus} className="h-5" />
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 6a682cd..b9efac6 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -12,7 +12,7 @@ export default function ({ collection }: { collection: Collection }) {
 
   return (
     <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <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" />
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index e6d165a..3d64adf 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -19,12 +19,12 @@ export default function ({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 rounded flex flex-col `}
+      className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col w-36`}
     >
       {items.map((e, i) => {
         const inner = (
-          <div className="cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
-            <div className="flex items-center gap-2 p-2 rounded hover:opacity-60 duration-100">
+          <div className="cursor-pointer rounded-md hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
+            <div className="flex items-center gap-2 p-2 rounded-md hover:opacity-60 duration-100">
               {React.cloneElement(e.icon, {
                 className: "text-sky-500 w-5 h-5",
               })}
diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts
index 28940b5..81fd567 100644
--- a/components/InputSelect/styles.ts
+++ b/components/InputSelect/styles.ts
@@ -23,7 +23,7 @@ export const styles: StylesConfig = {
     ...styles,
     width: "15rem",
     border: "1px solid #e0f2fe",
-    borderRadius: "0.25rem",
+    borderRadius: "0.375rem",
     fontSize: "0.875rem",
     lineHeight: "1.25rem",
   }),
diff --git a/components/LinkList.tsx b/components/LinkList.tsx
index 48d7209..b513a26 100644
--- a/components/LinkList.tsx
+++ b/components/LinkList.tsx
@@ -35,16 +35,32 @@ export default function ({
   });
 
   return (
-    <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded flex items-center gap-5 group/item">
+    <div className="mx-auto border border-sky-100 mb-5 bg-gray-100 p-2 rounded-md flex items-start relative gap-5 group/item">
       <Image
         src={`http://icons.duckduckgo.com/ip3/${shortendURL}.ico`}
-        width={100}
-        height={100}
+        width={32}
+        height={32}
         alt=""
-        className="blur-sm opacity-80 group-hover/item:opacity-100 duration-100"
+        className="opacity-100 duration-100 select-none mt-3"
         draggable="false"
+        onError={(e) => {
+          const target = e.target as HTMLElement;
+          target.style.opacity = "0";
+        }}
       />
-      <div className="flex justify-between gap-5 w-full">
+      <Image
+        src={`http://icons.duckduckgo.com/ip3/${shortendURL}.ico`}
+        width={80}
+        height={80}
+        alt=""
+        className="blur-sm absolute left-0 opacity-50 select-none"
+        draggable="false"
+        onError={(e) => {
+          const target = e.target as HTMLElement;
+          target.style.opacity = "0";
+        }}
+      />
+      <div className="flex justify-between gap-5 w-full z-0">
         <div>
           <div className="flex items-baseline gap-1">
             <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
@@ -87,7 +103,8 @@ export default function ({
         <div className="flex flex-col justify-between items-end relative">
           <FontAwesomeIcon
             icon={faEllipsis}
-            className="w-6 h-6 text-gray-500 rounded cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-2"
+            title="More"
+            className="w-6 h-6 text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
             onClick={() => setEditDropdown(!editDropdown)}
             id="edit-dropdown"
           />
@@ -153,7 +170,7 @@ export default function ({
                 const target = e.target as HTMLInputElement;
                 if (target.id !== "edit-dropdown") setEditDropdown(false);
               }}
-              className="absolute top-10 right-0"
+              className="absolute top-8 right-0"
             />
           ) : null}
         </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 075463b..c5aa529 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -65,22 +65,38 @@ export default function () {
   };
 
   return (
-    <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
-      <div className="text-sky-900 rounded my-1 flex items-center gap-2 font-bold">
+    <div className="flex justify-between items-center p-2 border-solid border-b-sky-100 border-b">
+      <div className="text-sky-900 rounded-md my-1 flex items-center gap-2 font-bold">
         {pageIcon ? (
           <FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
         ) : null}
         <p>{pageName}</p>
       </div>
-      <div className="flex items-center gap-3">
+
+      <div className="flex items-center gap-2 justify-between">
+        <div className="flex items-center relative">
+          <label
+            htmlFor="search-box"
+            className="inline-flex w-fit absolute right-0  cursor-pointer"
+            title="Search"
+          >
+            <FontAwesomeIcon
+              icon={faMagnifyingGlass}
+              className="select-none w-5 h-5 rounded-md p-1 text-sky-500 "
+            />
+          </label>
+          <input
+            id="search-box"
+            type="text"
+            placeholder="Search for Links"
+            className="border border-sky-100 rounded-md pr-6 w-6 focus:border-sky-500 focus:w-60 hover:border-sky-500 duration-100 outline-none p-1 text-sm"
+          />
+        </div>
         <FontAwesomeIcon
           icon={faPlus}
           onClick={toggleLinkModal}
-          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
-        />
-        <FontAwesomeIcon
-          icon={faMagnifyingGlass}
-          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+          title="New Link"
+          className="select-none cursor-pointer w-5 h-5 text-sky-500 p-1 rounded-md hover:outline-sky-500 outline duration-100 hover:bg-white outline-sky-100 outline-1"
         />
 
         {linkModal ? (
diff --git a/components/Sidebar/SidebarItem.tsx b/components/Sidebar/SidebarItem.tsx
index b1e7f4f..45d9c0f 100644
--- a/components/Sidebar/SidebarItem.tsx
+++ b/components/Sidebar/SidebarItem.tsx
@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import React, { ReactElement } from "react";
 
@@ -11,7 +10,7 @@ interface SidebarItemProps {
 export default function ({ text, icon, path }: SidebarItemProps) {
   return (
     <Link href={path}>
-      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
         {React.cloneElement(icon, {
           className: "w-4 text-sky-300",
         })}
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 8004545..de03dd1 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -48,10 +48,10 @@ export default function () {
   };
 
   return (
-    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
+    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
       <div className="relative w-fit">
         <div
-          className="flex gap-2 items-center mb-5 p-3 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded duration-100"
+          className="flex gap-2 items-center mb-5 p-2 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded-md duration-100"
           onClick={() => setProfileDropdown(!profileDropdown)}
           id="profile-dropdown"
         >
@@ -84,27 +84,27 @@ export default function () {
               const target = e.target as HTMLInputElement;
               if (target.id !== "profile-dropdown") setProfileDropdown(false);
             }}
-            className="absolute top-12 left-0"
+            className="absolute top-10 left-0"
           />
         ) : null}
       </div>
 
       <Link href="links">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
           <p>All Links</p>
         </div>
       </Link>
 
       <Link href="/collections">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
           <p>All Collections</p>
         </div>
       </Link>
 
       <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p className="text-sm p-3">Collections</p>
+        <p className="text-sm p-2">Collections</p>
         {collectionInput ? (
           <ClickAwayHandler
             onClickOutside={toggleCollectionInput}
@@ -113,7 +113,7 @@ export default function () {
             <input
               type="text"
               placeholder="Enter Collection Name"
-              className="w-44 rounded p-2 border-sky-100 border-solid border text-sm outline-none"
+              className="w-44 rounded-md p-1 border-sky-500 border-solid border text-sm outline-none"
               onKeyDown={submitCollection}
               autoFocus
             />
@@ -122,7 +122,8 @@ export default function () {
           <FontAwesomeIcon
             icon={faPlus}
             onClick={toggleCollectionInput}
-            className="select-none cursor-pointer p-2 w-3"
+            title="Add Collection"
+            className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1 w-3"
           />
         )}
       </div>
@@ -139,7 +140,7 @@ export default function () {
         })}
       </div>
       <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p className="text-sm p-3">Tags</p>
+        <p className="text-sm p-2">Tags</p>
       </div>
       <div>
         {tags.map((e, i) => {
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index 9dd401c..b4f12f5 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -1,4 +1,5 @@
 import { chromium, devices } from "playwright";
+import { prisma } from "@/lib/api/db";
 
 export default async (url: string, collectionId: number, linkId: number) => {
   const archivePath = `data/archives/${collectionId}/${linkId}`;
@@ -12,9 +13,18 @@ export default async (url: string, collectionId: number, linkId: number) => {
 
   await page.goto(url);
 
-  await page.pdf({ path: archivePath + ".pdf" });
+  const linkExists = await prisma.link.findFirst({
+    where: {
+      id: linkId,
+    },
+  });
 
-  await page.screenshot({ fullPage: true, path: archivePath + ".png" });
+  if (linkExists) {
+    await Promise.all([
+      page.pdf({ path: archivePath + ".pdf" }),
+      page.screenshot({ fullPage: true, path: archivePath + ".png" }),
+    ]);
+  }
 
   await context.close();
   await browser.close();
diff --git a/lib/api/controllers/links/deleteLink.ts b/lib/api/controllers/links/deleteLink.ts
index 05ae85d..15f119e 100644
--- a/lib/api/controllers/links/deleteLink.ts
+++ b/lib/api/controllers/links/deleteLink.ts
@@ -1,12 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import { Session } from "next-auth";
-import { ExtendedLink, NewLink } from "@/types/global";
-import { existsSync, mkdirSync } from "fs";
-import getTitle from "../../getTitle";
-import archive from "../../archive";
+import { ExtendedLink } from "@/types/global";
+import fs from "fs";
 import { Link, UsersAndCollections } from "@prisma/client";
-import AES from "crypto-js/aes";
 import hasAccessToCollection from "@/lib/api/hasAccessToCollection";
 
 export default async function (
@@ -42,6 +39,14 @@ export default async function (
     },
   });
 
+  fs.unlink(`data/archives/${link.collectionId}/${link.id}.pdf`, (err) => {
+    if (err) console.log(err);
+  });
+
+  fs.unlink(`data/archives/${link.collectionId}/${link.id}.png`, (err) => {
+    if (err) console.log(err);
+  });
+
   return res.status(200).json({
     response: deleteLink,
   });
diff --git a/lib/api/controllers/links/postLink.ts b/lib/api/controllers/links/postLink.ts
index d333e68..2994843 100644
--- a/lib/api/controllers/links/postLink.ts
+++ b/lib/api/controllers/links/postLink.ts
@@ -118,7 +118,7 @@ export default async function (
 
   const AES_SECRET = process.env.AES_SECRET as string;
 
-  const screenShotHashedPath = AES.encrypt(
+  const screenshotHashedPath = AES.encrypt(
     `data/archives/${newLink.collectionId}/${newLink.id}.png`,
     AES_SECRET
   ).toString();
@@ -130,7 +130,7 @@ export default async function (
 
   const updatedLink: ExtendedLink = await prisma.link.update({
     where: { id: newLink.id },
-    data: { screenshotPath: screenShotHashedPath, pdfPath: pdfHashedPath },
+    data: { screenshotPath: screenshotHashedPath, pdfPath: pdfHashedPath },
     include: { tags: true, collection: true },
   });
 
diff --git a/lib/api/controllers/tags/getTags.ts b/lib/api/controllers/tags/getTags.ts
index c0816d3..0fd7bf9 100644
--- a/lib/api/controllers/tags/getTags.ts
+++ b/lib/api/controllers/tags/getTags.ts
@@ -7,6 +7,15 @@ export default async function (
   res: NextApiResponse,
   session: Session
 ) {
+  // tag cleanup
+  await prisma.tag.deleteMany({
+    where: {
+      links: {
+        none: {},
+      },
+    },
+  });
+
   const tags = await prisma.tag.findMany({
     where: {
       collections: {
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 032e439..cf06f26 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -12,8 +12,8 @@ export default function () {
 
   return (
     // ml-80
-    <div className="p-5">
-      <p className="text-center mb-5 text-gray-500 font-bold text-sm">
+    <div className="p-2">
+      <p className="text-right mb-2 text-gray-500 font-bold text-sm">
         {linksByCollection.length || 0} Links Found
       </p>
       {linksByCollection.map((e, i) => {
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 1b8e76b..8a9dfe6 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -11,7 +11,7 @@ export default function () {
 
   return (
     // ml-80
-    <div className="flex flex-wrap p-5">
+    <div className="flex flex-wrap p-2 gap-2">
       {collections.map((e, i) => {
         return <CollectionCard key={i} collection={e} />;
       })}
diff --git a/pages/login.tsx b/pages/login.tsx
index d2e8d5b..5f32162 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -42,17 +42,17 @@ export default function () {
         placeholder="Email"
         value={form.email}
         onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Password"
         value={form.password}
         onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
         onClick={loginUser}
       >
         Login
diff --git a/pages/register.tsx b/pages/register.tsx
index 5ea073d..abae07f 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -57,24 +57,24 @@ export default function () {
         placeholder="Name"
         value={form.name}
         onChange={(e) => setForm({ ...form, name: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Email"
         value={form.email}
         onChange={(e) => setForm({ ...form, email: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <input
         type="text"
         placeholder="Password"
         value={form.password}
         onChange={(e) => setForm({ ...form, password: e.target.value })}
-        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+        className="border border-gray-700 rounded-md block m-2 mx-auto p-2"
       />
       <div
-        className="mx-auto bg-black w-min p-3 m-5 text-white rounded cursor-pointer"
+        className="mx-auto bg-black w-min p-3 m-5 text-white rounded-md cursor-pointer"
         onClick={registerUser}
       >
         Register
diff --git a/store/links.ts b/store/links.ts
index a9ba598..9fe9db7 100644
--- a/store/links.ts
+++ b/store/links.ts
@@ -1,5 +1,7 @@
 import { create } from "zustand";
 import { ExtendedLink, NewLink } from "@/types/global";
+import useTagStore from "./tags";
+import useCollectionStore from "./collections";
 
 type LinkStore = {
   links: ExtendedLink[];
@@ -34,6 +36,9 @@ const useLinkStore = create<LinkStore>()((set) => ({
         links: [...state.links, data.response],
       }));
 
+    useTagStore.getState().setTags();
+    useCollectionStore.getState().setCollections();
+
     return response.ok;
   },
   updateLink: (link) =>
@@ -56,7 +61,7 @@ const useLinkStore = create<LinkStore>()((set) => ({
         links: state.links.filter((e) => e.id !== link.id),
       }));
 
-    console.log(data);
+    useTagStore.getState().setTags();
 
     return response.ok;
   },