From b65787358f2cbd8a9645154d317f1ee4e097b550 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 19 Dec 2023 11:50:43 -0500
Subject: [PATCH 1/2] improve link refresh logic + many changes and
 improvements

---
 components/CollectionCard.tsx                 |  25 +-
 components/DashboardItem.tsx                  |   2 +-
 components/Modal.tsx                          |  13 +-
 .../Modal/Collection/CollectionInfo.tsx       | 113 -----
 .../Modal/Collection/DeleteCollection.tsx     | 114 -----
 .../Modal/Collection/TeamManagement.tsx       | 417 ------------------
 components/Modal/Collection/ViewTeam.tsx      |  83 ----
 components/Modal/Collection/index.tsx         | 141 ------
 components/Modal/Link/AddOrEditLink.tsx       | 270 ------------
 components/Modal/Link/PreservedFormats.tsx    | 177 --------
 components/Modal/Link/index.tsx               |  63 ---
 .../EditCollectionSharingModal.tsx            |  34 +-
 .../ModalContent/PreservedFormatsModal.tsx    | 172 ++++++--
 components/ModalManagement.tsx                |  49 --
 components/PreserverdFormatRow.tsx            |  42 +-
 components/SettingsSidebar.tsx                |  40 +-
 components/Sidebar.tsx                        |   4 +-
 components/SidebarHighlightLink.tsx           |   4 +-
 layouts/MainLayout.tsx                        |  14 +-
 layouts/SettingsLayout.tsx                    |  12 -
 lib/api/archiveHandler.ts                     |  15 +-
 .../controllers/public/users/getPublicUser.ts |   2 +
 pages/api/v1/links/[id]/archive/index.ts      |  37 +-
 pages/collections/[id].tsx                    |   6 +-
 pages/collections/index.tsx                   |  18 +-
 pages/dashboard.tsx                           |  27 +-
 pages/preserved/[id].tsx                      |  22 +-
 pages/public/collections/[id].tsx             |   7 +-
 scripts/migration/migrateToV2.js              |   2 +-
 29 files changed, 297 insertions(+), 1628 deletions(-)
 delete mode 100644 components/Modal/Collection/CollectionInfo.tsx
 delete mode 100644 components/Modal/Collection/DeleteCollection.tsx
 delete mode 100644 components/Modal/Collection/TeamManagement.tsx
 delete mode 100644 components/Modal/Collection/ViewTeam.tsx
 delete mode 100644 components/Modal/Collection/index.tsx
 delete mode 100644 components/Modal/Link/AddOrEditLink.tsx
 delete mode 100644 components/Modal/Link/PreservedFormats.tsx
 delete mode 100644 components/Modal/Link/index.tsx
 delete mode 100644 components/ModalManagement.tsx

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index f3615e2..d4c2571 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -35,6 +35,8 @@ export default function CollectionCard({ collection, className }: Props) {
     name: "",
     username: "",
     image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
   });
 
   useEffect(() => {
@@ -48,6 +50,8 @@ export default function CollectionCard({ collection, className }: Props) {
           name: account.name,
           username: account.username as string,
           image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
         });
       }
     };
@@ -70,8 +74,7 @@ export default function CollectionCard({ collection, className }: Props) {
         >
           <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul
-          className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
           {permissions === true ? (
             <li>
               <div
@@ -166,17 +169,23 @@ export default function CollectionCard({ collection, className }: Props) {
             <div className="text-right">
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
-                  <i className="bi-globe-americas drop-shadow text-neutral"
-                     title="This collection is being shared publicly."></i>
+                  <i
+                    className="bi-globe-americas drop-shadow text-neutral"
+                    title="This collection is being shared publicly."
+                  ></i>
                 ) : undefined}
-                <i className="bi-link-45deg text-lg text-neutral"
-                   title="This collection is being shared publicly."></i>
+                <i
+                  className="bi-link-45deg text-lg text-neutral"
+                  title="This collection is being shared publicly."
+                ></i>
                 {collection._count && collection._count.links}
               </div>
               <div className="flex items-center justify-end gap-1 text-neutral">
                 <p className="font-bold text-xs flex gap-1 items-center">
-                  <i className="bi-calendar3 text-neutral"
-                     title="This collection is being shared publicly."></i>
+                  <i
+                    className="bi-calendar3 text-neutral"
+                    title="This collection is being shared publicly."
+                  ></i>
                   {formattedDate}
                 </p>
               </div>
diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index 4ad8682..60a5fe4 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -9,7 +9,7 @@ export default function dashboardItem({
 }) {
   return (
     <div className="flex items-center">
-      <div className="w-20 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
+      <div className="w-[4.7rem] aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
         <i className={`${icon} text-primary text-4xl drop-shadow`}></i>
       </div>
       <div className="ml-4 flex flex-col justify-center">
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 035b633..baabcbe 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode } from "react";
+import React, { MouseEventHandler, ReactNode, useEffect } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 
 type Props = {
@@ -8,6 +8,13 @@ type Props = {
 };
 
 export default function Modal({ toggleModal, className, children }: Props) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  });
+
   return (
     <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
@@ -21,9 +28,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
           >
-            <i
-              className="bi-x text-neutral text-2xl"
-            ></i>
+            <i className="bi-x text-neutral text-2xl"></i>
           </div>
           {children}
         </div>
diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
deleted file mode 100644
index 8ee4e87..0000000
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Dispatch, SetStateAction, useState } from "react";
-import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import SubmitButton from "@/components/SubmitButton";
-import { HexColorPicker } from "react-colorful";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleCollectionModal: Function;
-  setCollection: Dispatch<
-    SetStateAction<CollectionIncludingMembersAndLinkCount>
-  >;
-  collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE" | "VIEW_TEAM";
-};
-
-export default function CollectionInfo({
-  toggleCollectionModal,
-  setCollection,
-  collection,
-  method,
-}: Props) {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { updateCollection, addCollection } = useCollectionStore();
-
-  const submit = async () => {
-    if (!collection) return null;
-
-    setSubmitLoader(true);
-
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    let response;
-
-    if (method === "CREATE") response = await addCollection(collection);
-    else response = await updateCollection(collection);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(
-        `Collection ${method === "UPDATE" ? "Saved!" : "Created!"}`
-      );
-      toggleCollectionModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <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
-              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 }}>
-                  <i className={"bi-folder-fill"}></i>
-                </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-[11.4rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
-            placeholder="The purpose of this Collection..."
-            value={collection.description}
-            onChange={(e) =>
-              setCollection({
-                ...collection,
-                description: e.target.value,
-              })
-            }
-          />
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label={method === "CREATE" ? "Add" : "Save"}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}
diff --git a/components/Modal/Collection/DeleteCollection.tsx b/components/Modal/Collection/DeleteCollection.tsx
deleted file mode 100644
index 472b6aa..0000000
--- a/components/Modal/Collection/DeleteCollection.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from "react";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleDeleteCollectionModal: Function;
-  collection: CollectionIncludingMembersAndLinkCount;
-};
-
-export default function DeleteCollection({
-  toggleDeleteCollectionModal,
-  collection,
-}: Props) {
-  const [inputField, setInputField] = useState("");
-
-  const { removeCollection } = useCollectionStore();
-
-  const router = useRouter();
-
-  const submit = async () => {
-    if (permissions === true) if (collection.name !== inputField) return null;
-
-    const load = toast.loading("Deleting...");
-
-    const response = await removeCollection(collection.id as number);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Collection Deleted.");
-      toggleDeleteCollectionModal();
-      router.push("/collections");
-    }
-  };
-
-  const permissions = usePermissions(collection.id as number);
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      {permissions === true ? (
-        <>
-          <p className="text-red-500 font-bold text-center">Warning!</p>
-
-          <div className="max-h-[20rem] overflow-y-auto">
-            <div>
-              <p>
-                Please note that deleting the collection will permanently remove
-                all its contents, including the following:
-              </p>
-              <div className="p-3">
-                <li className="list-inside">
-                  Links: All links within the collection will be permanently
-                  deleted.
-                </li>
-                <li className="list-inside">
-                  Tags: All tags associated with the collection will be removed.
-                </li>
-                <li className="list-inside">
-                  Screenshots/PDFs: Any screenshots or PDFs attached to links
-                  within this collection will be permanently deleted.
-                </li>
-                <li className="list-inside">
-                  Members: Any members who have been granted access to the
-                  collection will lose their permissions and no longer be able
-                  to view or interact with the content.
-                </li>
-              </div>
-              <p>
-                Please double-check that you have backed up any essential data
-                and have informed the relevant members about this action.
-              </p>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <p className="text-center">
-              To confirm, type &quot;
-              <span className="font-bold">{collection.name}</span>
-              &quot; in the box below:
-            </p>
-
-            <TextInput
-              autoFocus={true}
-              value={inputField}
-              onChange={(e) => setInputField(e.target.value)}
-              placeholder={`Type "${collection.name}" Here.`}
-              className="w-3/4 mx-auto"
-            />
-          </div>
-        </>
-      ) : (
-        <p>Click the button below to leave the current collection.</p>
-      )}
-
-      <div
-        className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
-          permissions === true
-            ? inputField === collection.name
-              ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-              : "cursor-not-allowed bg-red-300 dark:bg-red-900"
-            : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-        }`}
-        onClick={submit}
-      >
-        <i className={`${ permissions === true ? 'bi-trash' : 'bi-arrow-right'}`}></i>
-        {permissions === true ? "Delete" : "Leave"} Collection
-      </div>
-    </div>
-  );
-}
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
deleted file mode 100644
index e04b3c8..0000000
--- a/components/Modal/Collection/TeamManagement.tsx
+++ /dev/null
@@ -1,417 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
-import addMemberToCollection from "@/lib/client/addMemberToCollection";
-import Checkbox from "../../Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import ProfilePhoto from "@/components/ProfilePhoto";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import getPublicUserData from "@/lib/client/getPublicUserData";
-import TextInput from "@/components/TextInput";
-import useAccountStore from "@/store/account";
-
-type Props = {
-  toggleCollectionModal: Function;
-  setCollection: Dispatch<
-    SetStateAction<CollectionIncludingMembersAndLinkCount>
-  >;
-  collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
-};
-
-export default function TeamManagement({
-  toggleCollectionModal,
-  setCollection,
-  collection,
-  method,
-}: Props) {
-  const { account } = useAccountStore();
-  const permissions = usePermissions(collection.id as number);
-
-  const currentURL = new URL(document.URL);
-
-  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
-
-  const [memberUsername, setMemberUsername] = useState("");
-
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null,
-    name: "",
-    username: "",
-    image: "",
-  });
-
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
-  const { addCollection, updateCollection } = useCollectionStore();
-
-  const setMemberState = (newMember: Member) => {
-    if (!collection) return null;
-
-    setCollection({
-      ...collection,
-      members: [...collection.members, newMember],
-    });
-
-    setMemberUsername("");
-  };
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const submit = async () => {
-    if (!collection) return null;
-
-    setSubmitLoader(true);
-
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    let response;
-
-    if (method === "CREATE") response = await addCollection(collection);
-    else response = await updateCollection(collection);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Collection Saved!");
-      toggleCollectionModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      {permissions === true && (
-        <>
-          <p>Make Public</p>
-
-          <Checkbox
-            label="Make this a public collection."
-            state={collection.isPublic}
-            onClick={() =>
-              setCollection({ ...collection, isPublic: !collection.isPublic })
-            }
-          />
-
-          <p className="text-neutral text-sm">
-            This will let <b>Anyone</b> to view this collection.
-          </p>
-        </>
-      )}
-
-      {collection.isPublic ? (
-        <div>
-          <p className="mb-2">Public Link (Click to copy)</p>
-          <div
-            onClick={() => {
-              try {
-                navigator.clipboard
-                  .writeText(publicCollectionURL)
-                  .then(() => toast.success("Copied!"));
-              } catch (err) {
-                console.log(err);
-              }
-            }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-neutral-content border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
-          >
-            {publicCollectionURL}
-          </div>
-        </div>
-      ) : null}
-
-      {permissions !== true && collection.isPublic && (
-        <div className="divider mb-3 mt-0"></div>
-      )}
-
-      {permissions === true && (
-        <>
-          <p>Member Management</p>
-
-          <div className="flex items-center gap-2">
-            <TextInput
-              value={memberUsername || ""}
-              placeholder="Username (without the '@')"
-              onChange={(e) => setMemberUsername(e.target.value)}
-              onKeyDown={(e) =>
-                e.key === "Enter" &&
-                addMemberToCollection(
-                  account.username as string,
-                  memberUsername || "",
-                  collection,
-                  setMemberState
-                )
-              }
-            />
-
-            <div
-              onClick={() =>
-                addMemberToCollection(
-                  account.username as string,
-                  memberUsername || "",
-                  collection,
-                  setMemberState
-                )
-              }
-              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
-            >
-              <i className="bi-person-add text-xl"></i>
-            </div>
-          </div>
-        </>
-      )}
-
-      {collection?.members[0]?.user && (
-        <>
-          <p className="text-center text-neutral text-xs sm:text-sm">
-            (All Members have <b>Read</b> access to this collection.)
-          </p>
-          <div className="flex flex-col gap-3 rounded-md">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <div
-                    key={i}
-                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-                  >
-                    {permissions === true && (
-                      <i
-                        className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
-                        title="Remove Member"
-                        onClick={() => {
-                          const updatedMembers = collection.members.filter(
-                            (member) => {
-                              return member.user.username !== e.user.username;
-                            }
-                          );
-                          setCollection({
-                            ...collection,
-                            members: updatedMembers,
-                          });
-                        }}
-                      />
-                    )}
-                    <div className="flex items-center gap-2">
-                      <ProfilePhoto
-                        src={e.user.image ? e.user.image : undefined}
-                        className="border-[3px]"
-                      />
-                      <div>
-                        <p className="text-sm font-bold">{e.user.name}</p>
-                        <p className="text-neutral">@{e.user.username}</p>
-                      </div>
-                    </div>
-                    <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
-                      <div>
-                        <p
-                          className={`font-bold text-sm ${
-                            permissions === true ? "" : "mb-2"
-                          }`}
-                        >
-                          Permissions
-                        </p>
-                        {permissions === true && (
-                          <p className="text-xs text-neutral mb-2">
-                            (Click to toggle.)
-                          </p>
-                        )}
-                      </div>
-
-                      {permissions !== true &&
-                      !e.canCreate &&
-                      !e.canUpdate &&
-                      !e.canDelete ? (
-                        <p className="text-sm text-neutral">
-                          Has no permissions.
-                        </p>
-                      ) : (
-                        <div>
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canCreate"
-                              className="peer sr-only"
-                              checked={e.canCreate}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canCreate: !e.canCreate,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Create
-                            </span>
-                          </label>
-
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canUpdate"
-                              className="peer sr-only"
-                              checked={e.canUpdate}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canUpdate: !e.canUpdate,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Update
-                            </span>
-                          </label>
-
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canDelete"
-                              className="peer sr-only"
-                              checked={e.canDelete}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canDelete: !e.canDelete,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Delete
-                            </span>
-                          </label>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-          </div>
-        </>
-      )}
-
-      <div
-        className="relative border px-2 rounded-md border-neutral-content flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
-        title={`'@${collectionOwner.username}' is the owner of this collection.`}
-      >
-        <div className="flex items-center gap-2">
-          <ProfilePhoto
-            src={collectionOwner.image ? collectionOwner.image : undefined}
-            className="border-[3px]"
-          />
-          <div>
-            <div className="flex items-center gap-1">
-              <p className="text-sm font-bold">{collectionOwner.name}</p>
-            </div>
-            <p className="text-neutral">@{collectionOwner.username}</p>
-          </div>
-        </div>
-
-        <div className="flex flex-col justify-center min-w-[10rem]">
-          <p className={`font-bold text-sm`}>Permissions</p>
-          <p>Full Access (Owner)</p>
-        </div>
-      </div>
-
-      {permissions === true && (
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label={method === "CREATE" ? "Add" : "Save"}
-          className="mx-auto mt-2"
-        />
-      )}
-    </div>
-  );
-}
diff --git a/components/Modal/Collection/ViewTeam.tsx b/components/Modal/Collection/ViewTeam.tsx
deleted file mode 100644
index f54f542..0000000
--- a/components/Modal/Collection/ViewTeam.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect, useState } from "react";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import ProfilePhoto from "@/components/ProfilePhoto";
-import getPublicUserData from "@/lib/client/getPublicUserData";
-
-type Props = {
-  collection: CollectionIncludingMembersAndLinkCount;
-};
-
-export default function ViewTeam({ collection }: Props) {
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null,
-    name: "",
-    username: "",
-    image: "",
-  });
-
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="ml-10 text-xl font-thin">Team</p>
-
-      <p>Here are all the members who are collaborating on this collection.</p>
-
-      <div
-        className="relative border px-2 rounded-md border-neutral flex min-h-[4rem] gap-2 justify-between"
-        title={`@${collectionOwner.username} is the owner of this collection.`}
-      >
-        <div className="flex items-center gap-2 w-full">
-          <ProfilePhoto
-            src={collectionOwner.image ? collectionOwner.image : undefined}
-            className="border-[3px]"
-          />
-          <div className="w-full">
-            <div className="flex items-center gap-1 w-full justify-between">
-              <p className="text-sm font-bold">{collectionOwner.name}</p>
-              <div className="flex text-xs gap-1 items-center">
-                Admin
-              </div>
-            </div>
-            <p className="text-neutral">@{collectionOwner.username}</p>
-          </div>
-        </div>
-      </div>
-
-      {collection?.members[0]?.user && (
-        <>
-          <div className="flex flex-col gap-3 rounded-md">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <div
-                    key={i}
-                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-                  >
-                    <div className="flex items-center gap-2">
-                      <ProfilePhoto
-                        src={e.user.image ? e.user.image : undefined}
-                        className="border-[3px]"
-                      />
-                      <div>
-                        <p className="text-sm font-bold">{e.user.name}</p>
-                        <p className="text-neutral">@{e.user.username}</p>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx
deleted file mode 100644
index 44802f4..0000000
--- a/components/Modal/Collection/index.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Tab } from "@headlessui/react";
-import CollectionInfo from "./CollectionInfo";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import TeamManagement from "./TeamManagement";
-import { useEffect, useState } from "react";
-import DeleteCollection from "./DeleteCollection";
-import ViewTeam from "./ViewTeam";
-
-type Props =
-  | {
-      toggleCollectionModal: Function;
-      activeCollection: CollectionIncludingMembersAndLinkCount;
-      method: "UPDATE";
-      isOwner: boolean;
-      className?: string;
-      defaultIndex?: number;
-    }
-  | {
-      toggleCollectionModal: Function;
-      activeCollection?: CollectionIncludingMembersAndLinkCount;
-      method: "CREATE";
-      isOwner: boolean;
-      className?: string;
-      defaultIndex?: number;
-    }
-  | {
-      toggleCollectionModal: Function;
-      activeCollection: CollectionIncludingMembersAndLinkCount;
-      method: "VIEW_TEAM";
-      isOwner: boolean;
-      className?: string;
-      defaultIndex?: number;
-    };
-
-export default function CollectionModal({
-  className,
-  defaultIndex,
-  toggleCollectionModal,
-  isOwner,
-  activeCollection,
-  method,
-}: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      activeCollection || {
-        name: "",
-        description: "",
-        color: "#0ea5e9",
-        isPublic: false,
-        members: [],
-      }
-    );
-
-  return (
-    <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        {method === "CREATE" && (
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            New Collection
-          </p>
-        )}
-        {method !== "VIEW_TEAM" && (
-          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5">
-            {method === "UPDATE" && (
-              <>
-                {isOwner && (
-                  <Tab
-                    className={({ selected }) =>
-                      selected
-                        ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                        : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                    }
-                  >
-                    Collection Info
-                  </Tab>
-                )}
-                <Tab
-                  className={({ selected }) =>
-                    selected
-                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                  }
-                >
-                  {isOwner ? "Share & Collaborate" : "View Team"}
-                </Tab>
-                <Tab
-                  className={({ selected }) =>
-                    selected
-                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                  }
-                >
-                  {isOwner ? "Delete Collection" : "Leave Collection"}
-                </Tab>
-              </>
-            )}
-          </Tab.List>
-        )}
-        <Tab.Panels>
-          {(isOwner || method === "CREATE") && (
-            <Tab.Panel>
-              <CollectionInfo
-                toggleCollectionModal={toggleCollectionModal}
-                setCollection={setCollection}
-                collection={collection}
-                method={method}
-              />
-            </Tab.Panel>
-          )}
-
-          {method === "UPDATE" && (
-            <>
-              <Tab.Panel>
-                <TeamManagement
-                  toggleCollectionModal={toggleCollectionModal}
-                  setCollection={setCollection}
-                  collection={collection}
-                  method={method}
-                />
-              </Tab.Panel>
-              <Tab.Panel>
-                <DeleteCollection
-                  toggleDeleteCollectionModal={toggleCollectionModal}
-                  collection={collection}
-                />
-              </Tab.Panel>
-            </>
-          )}
-
-          {method === "VIEW_TEAM" && (
-            <>
-              <Tab.Panel>
-                <ViewTeam collection={collection} />
-              </Tab.Panel>
-            </>
-          )}
-        </Tab.Panels>
-      </Tab.Group>
-    </div>
-  );
-}
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
deleted file mode 100644
index 8b17f31..0000000
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-import React, { useEffect, useState } from "react";
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import useLinkStore from "@/store/links";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
-import SubmitButton from "../../SubmitButton";
-import { toast } from "react-hot-toast";
-import Link from "next/link";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
-
-type Props =
-  | {
-      toggleLinkModal: Function;
-      method: "CREATE";
-      activeLink?: LinkIncludingShortenedCollectionAndTags;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "UPDATE";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-    };
-
-export default function AddOrEditLink({
-  toggleLinkModal,
-  method,
-  activeLink,
-}: Props) {
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [optionsExpanded, setOptionsExpanded] = useState(
-    method === "UPDATE" ? true : false
-  );
-
-  const { data } = useSession();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
-    activeLink || {
-      name: "",
-      url: "",
-      type: "",
-      description: "",
-      tags: [],
-      screenshotPath: "",
-      pdfPath: "",
-      readabilityPath: "",
-      textContent: "",
-      collection: {
-        name: "",
-        ownerId: data?.user.id as number,
-      },
-    }
-  );
-
-  const { updateLink, addLink } = useLinkStore();
-
-  const router = useRouter();
-  const { collections } = useCollectionStore();
-
-  useEffect(() => {
-    if (method === "CREATE") {
-      if (router.query.id) {
-        const currentCollection = collections.find(
-          (e) => e.id == Number(router.query.id)
-        );
-
-        if (
-          currentCollection &&
-          currentCollection.ownerId &&
-          router.asPath.startsWith("/collections/")
-        )
-          setLink({
-            ...link,
-            collection: {
-              id: currentCollection.id,
-              name: currentCollection.name,
-              ownerId: currentCollection.ownerId,
-            },
-          });
-      } else
-        setLink({
-          ...link,
-          collection: {
-            // id: ,
-            name: "Unorganized",
-            ownerId: data?.user.id as number,
-          },
-        });
-    }
-  }, []);
-
-  const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
-      return { name: e.label };
-    });
-
-    setLink({ ...link, tags: tagNames });
-  };
-
-  const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = null;
-
-    setLink({
-      ...link,
-      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-    });
-  };
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    let response;
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    if (method === "UPDATE") response = await updateLink(link);
-    else response = await addLink(link);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(`Link ${method === "UPDATE" ? "Saved!" : "Created!"}`);
-      toggleLinkModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-
-    return response;
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      {method === "UPDATE" ? (
-        <div
-          className="text-neutral break-all w-full flex gap-2"
-          title={link.url || ""}
-        >
-          <i className={"bi-link-45deg"}></i>
-          <Link href={link.url || ""} target="_blank" className="w-full">
-            {link.url}
-          </Link>
-        </div>
-      ) : null}
-
-      {method === "CREATE" ? (
-        <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">Address (URL)</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>
-      ) : undefined}
-
-      {optionsExpanded ? (
-        <div>
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
-          <div className="grid sm:grid-cols-2 gap-3">
-            <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-              <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>
-
-            {method === "UPDATE" ? (
-              <div>
-                <p className="mb-2">Collection</p>
-                {link.collection.name ? (
-                  <CollectionSelection
-                    onChange={setCollection}
-                    defaultValue={
-                      link.collection.name && link.collection.id
-                        ? {
-                            value: link.collection.id,
-                            label: link.collection.name,
-                          }
-                        : {
-                            value: null as unknown as number,
-                            label: "Unorganized",
-                          }
-                    }
-                  />
-                ) : undefined}
-              </div>
-            ) : undefined}
-
-            <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={
-                  method === "CREATE"
-                    ? "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-stretch mt-2">
-        <div
-          onClick={() => setOptionsExpanded(!optionsExpanded)}
-          className={`${
-            method === "UPDATE" ? "hidden" : ""
-          } rounded-md cursor-pointer btn btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
-        >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
-        </div>
-
-        <SubmitButton
-          onClick={submit}
-          label={method === "CREATE" ? "Add" : "Save"}
-          loading={submitLoader}
-          className={`${method === "CREATE" ? "" : "mx-auto"}`}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
deleted file mode 100644
index a77941c..0000000
--- a/components/Modal/Link/PreservedFormats.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import {
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import useLinkStore from "@/store/links";
-import { toast } from "react-hot-toast";
-import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
-import {
-  pdfAvailable,
-  screenshotAvailable,
-} from "@/lib/shared/getArchiveValidity";
-
-export default function PreservedFormats() {
-  const session = useSession();
-  const { links, getLink } = useLinkStore();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    let interval: any;
-    if (screenshotAvailable(link) && pdfAvailable(link)) {
-      let isPublicRoute = router.pathname.startsWith("/public")
-        ? true
-        : undefined;
-
-      interval = setInterval(
-        () => getLink(link?.id as number, isPublicRoute),
-        5000
-      );
-    } else {
-      if (interval) {
-        clearInterval(interval);
-      }
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
-
-  const updateArchive = async () => {
-    const load = toast.loading("Sending request...");
-
-    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
-      method: "PUT",
-    });
-
-    const data = await response.json();
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(`Link is being archived...`);
-      getLink(link?.id as number);
-    } else toast.error(data.response);
-  };
-
-  const handleDownload = (format: ArchivedFormat) => {
-    const path = `/api/v1/archives/${link?.id}?format=${format}`;
-    fetch(path)
-      .then((response) => {
-        if (response.ok) {
-          // Create a temporary link and click it to trigger the download
-          const link = document.createElement("a");
-          link.href = path;
-          link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
-          link.click();
-        } else {
-          console.error("Failed to download file");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  };
-
-  return (
-    <div className={`flex flex-col gap-3 sm:w-[35rem] w-80 pt-3`}>
-      {screenshotAvailable(link) ? (
-        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="bg-primary text-primary-content p-2 rounded-l-md">
-            </div>
-
-            <p>Screenshot</p>
-          </div>
-
-          <div className="flex gap-1">
-            <div
-              onClick={() => handleDownload(ArchivedFormat.png)}
-              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-            >
-            </div>
-
-            <Link
-              href={`/api/v1/archives/${link?.id}?format=${
-                link?.screenshotPath?.endsWith("png")
-                  ? ArchivedFormat.png
-                  : ArchivedFormat.jpeg
-              }`}
-              target="_blank"
-              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-            >
-            </Link>
-          </div>
-        </div>
-      ) : undefined}
-
-      {pdfAvailable(link) ? (
-        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="bg-primary text-primary-content p-2 rounded-l-md">
-            </div>
-
-            <p>PDF</p>
-          </div>
-
-          <div className="flex gap-1">
-            <div
-              onClick={() => handleDownload(ArchivedFormat.pdf)}
-              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-            >
-            </div>
-
-            <Link
-              href={`/api/v1/archives/${link?.id}?format=${ArchivedFormat.pdf}`}
-              target="_blank"
-              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-            >
-            </Link>
-          </div>
-        </div>
-      ) : undefined}
-
-      <div className="flex flex-col-reverse sm:flex-row gap-5 items-center justify-center">
-        {link?.collection.ownerId === session.data?.user.id ? (
-          <div
-            className={`btn btn-accent dark:border-violet-400 text-white ${
-              screenshotAvailable(link) && pdfAvailable(link) ? "mt-3" : ""
-            }`}
-            onClick={() => updateArchive()}
-          >
-            <div>
-              <p>Update Preserved Formats</p>
-              <p className="text-xs">(Refresh Link)</p>
-            </div>
-          </div>
-        ) : undefined}
-        <Link
-          href={`https://web.archive.org/web/${link?.url?.replace(
-            /(^\w+:|^)\/\//,
-            ""
-          )}`}
-          target="_blank"
-          className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
-            screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
-          }`}
-        >
-          <p className="whitespace-nowrap">
-            View Latest Snapshot on archive.org
-          </p>
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
deleted file mode 100644
index 546a3ef..0000000
--- a/components/Modal/Link/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import AddOrEditLink from "./AddOrEditLink";
-import PreservedFormats from "./PreservedFormats";
-
-type Props =
-  | {
-      toggleLinkModal: Function;
-      method: "CREATE";
-      activeLink?: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "UPDATE";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "FORMATS";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    };
-
-export default function LinkModal({
-  className,
-  toggleLinkModal,
-  activeLink,
-  method,
-}: Props) {
-  return (
-    <div className={className}>
-      {method === "CREATE" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Create a New Link
-          </p>
-          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
-        </>
-      ) : undefined}
-
-      {activeLink && method === "UPDATE" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
-          <AddOrEditLink
-            toggleLinkModal={toggleLinkModal}
-            method="UPDATE"
-            activeLink={activeLink}
-          />
-        </>
-      ) : undefined}
-
-      {method === "FORMATS" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Preserved Formats
-          </p>
-          <PreservedFormats />
-        </>
-      ) : undefined}
-    </div>
-  );
-}
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index 8a836bc..d515f8b 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/components/ModalContent/EditCollectionSharingModal.tsx
@@ -19,17 +19,6 @@ export default function EditCollectionSharingModal({
   onClose,
   activeCollection,
 }: Props) {
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-
-    setCollection(activeCollection);
-  }, []);
-
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
@@ -70,12 +59,25 @@ export default function EditCollectionSharingModal({
   const [memberUsername, setMemberUsername] = useState("");
 
   const [collectionOwner, setCollectionOwner] = useState({
-    id: null,
+    id: null as unknown as number,
     name: "",
     username: "",
     image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
   });
 
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+
+    setCollection(activeCollection);
+  }, []);
+
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -174,9 +176,9 @@ export default function EditCollectionSharingModal({
                     setMemberState
                   )
                 }
-                className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
+                className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
               >
-                  <i className="bi-person-add text-xl"></i>
+                <i className="bi-person-add text-xl"></i>
               </div>
             </div>
           </>
@@ -231,7 +233,9 @@ export default function EditCollectionSharingModal({
                     >
                       {permissions === true && (
                         <i
-                          className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
+                          className={
+                            "bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
+                          }
                           title="Remove Member"
                           onClick={() => {
                             const updatedMembers = collection.members.filter(
diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx
index 73f6cc8..4898f3f 100644
--- a/components/ModalContent/PreservedFormatsModal.tsx
+++ b/components/ModalContent/PreservedFormatsModal.tsx
@@ -1,13 +1,22 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
-import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags, } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import { pdfAvailable, readabilityAvailable, screenshotAvailable, } from "@/lib/shared/getArchiveValidity";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  screenshotAvailable,
+} from "@/lib/shared/getArchiveValidity";
 import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import useAccountStore from "@/store/account";
+import getPublicUserData from "@/lib/client/getPublicUserData";
 
 type Props = {
   onClose: Function;
@@ -18,11 +27,56 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
   const session = useSession();
   const { getLink } = useLinkStore();
 
+  const { account } = useAccountStore();
+
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
   const router = useRouter();
 
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== account.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === account.id) {
+        setCollectionOwner({
+          id: account.id as number,
+          name: account.name,
+          username: account.username as string,
+          image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      collectionOwner.archiveAsScreenshot ===
+        (link && link.pdfPath && link.pdfPath !== "pending") &&
+      collectionOwner.archiveAsPDF ===
+        (link && link.pdfPath && link.pdfPath !== "pending") &&
+      link &&
+      link.readabilityPath &&
+      link.readabilityPath !== "pending"
+    );
+  };
+
   useEffect(() => {
     let isPublicRoute = router.pathname.startsWith("/public")
       ? true
@@ -36,7 +90,8 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     })();
 
     let interval: any;
-    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+
+    if (!isReady()) {
       interval = setInterval(async () => {
         const data = await getLink(link.id as number, isPublicRoute);
         setLink(
@@ -69,7 +124,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
     if (response.ok) {
       toast.success(`Link is being archived...`);
-      getLink(link?.id as number);
+      await getLink(link?.id as number);
     } else toast.error(data.response);
   };
 
@@ -79,69 +134,94 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
       <div className="divider mb-2 mt-1"></div>
 
-      {screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ? (
+      {isReady() &&
+      (screenshotAvailable(link) ||
+        pdfAvailable(link) ||
+        readabilityAvailable(link)) ? (
         <p className="mb-3">
           The following formats are available for this link:
         </p>
       ) : (
-        <p className="mb-3">No preserved formats available.</p>
+        ""
       )}
 
       <div className={`flex flex-col gap-3`}>
-        {readabilityAvailable(link) ? (
-          <PreservedFormatRow name={'Readable'} icon={'bi-file-earmark-text'} format={ArchivedFormat.readability}
-                              activeLink={link}/>
-        ) : undefined}
+        {isReady() ? (
+          <>
+            {readabilityAvailable(link) ? (
+              <PreservedFormatRow
+                name={"Readable"}
+                icon={"bi-file-earmark-text"}
+                format={ArchivedFormat.readability}
+                activeLink={link}
+              />
+            ) : undefined}
 
-        {screenshotAvailable(link) ? (
-          <PreservedFormatRow name={'Screenshot'} icon={'bi-file-earmark-image'} format={ArchivedFormat.png}
-                              activeLink={link} downloadable={true}/>
-        ) : undefined}
+            {screenshotAvailable(link) ? (
+              <PreservedFormatRow
+                name={"Screenshot"}
+                icon={"bi-file-earmark-image"}
+                format={ArchivedFormat.png}
+                activeLink={link}
+                downloadable={true}
+              />
+            ) : undefined}
 
-        {pdfAvailable(link) ? (
-          <PreservedFormatRow name={'PDF'} icon={'bi-file-earmark-pdf'} format={ArchivedFormat.pdf}
-                              activeLink={link} downloadable={true}/>
-        ) : undefined}
+            {pdfAvailable(link) ? (
+              <PreservedFormatRow
+                name={"PDF"}
+                icon={"bi-file-earmark-pdf"}
+                format={ArchivedFormat.pdf}
+                activeLink={link}
+                downloadable={true}
+              />
+            ) : undefined}
+          </>
+        ) : (
+          <div
+            className={`w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200`}
+          >
+            <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
+            <p className="text-center text-2xl">
+              The Link preservation is in the queue
+            </p>
+            <p className="text-center text-lg">
+              Please check back later to see the result
+            </p>
+          </div>
+        )}
 
-        <div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
-          {link?.collection.ownerId === session.data?.user.id ? (
-            <div
-              className={`btn btn-accent w-1/2 dark:border-violet-400 text-white ${
-                screenshotAvailable(link) &&
-                pdfAvailable(link) &&
-                readabilityAvailable(link)
-                  ? "mt-3"
-                  : ""
-              }`}
-              onClick={() => updateArchive()}
-            >
-              <div>
-                <p>Update Preserved Formats</p>
-                <p className="text-xs">(Refresh Link)</p>
-              </div>
-            </div>
-          ) : undefined}
+        <div
+          className={`flex flex-col sm:flex-row gap-3 items-center justify-center ${
+            isReady() ? "sm:mt " : ""
+          }`}
+        >
           <Link
             href={`https://web.archive.org/web/${link?.url?.replace(
               /(^\w+:|^)\/\//,
               ""
             )}`}
             target="_blank"
-            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm ${
-              screenshotAvailable(link) &&
-              pdfAvailable(link) &&
-              readabilityAvailable(link)
-                ? "sm:mt-3"
-                : ""
-            }`}
+            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm`}
           >
             <p className="whitespace-nowrap">
               View latest snapshot on archive.org
             </p>
-            <i className="bi-box-arrow-up-right"/>
+            <i className="bi-box-arrow-up-right" />
           </Link>
+          {link?.collection.ownerId === session.data?.user.id ? (
+            <div
+              className={`btn w-1/2 btn-outline`}
+              onClick={() => updateArchive()}
+            >
+              <div>
+                <p>Refresh Preserved Formats</p>
+                <p className="text-xs">
+                  This deletes the current preservations
+                </p>
+              </div>
+            </div>
+          ) : undefined}
         </div>
       </div>
     </Modal>
diff --git a/components/ModalManagement.tsx b/components/ModalManagement.tsx
deleted file mode 100644
index 0a3d6a8..0000000
--- a/components/ModalManagement.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import useModalStore from "@/store/modals";
-import Modal from "./Modal";
-import LinkModal from "./Modal/Link";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import CollectionModal from "./Modal/Collection";
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-export default function ModalManagement() {
-  const { modal, setModal } = useModalStore();
-
-  const toggleModal = () => {
-    setModal(null);
-  };
-
-  const router = useRouter();
-  useEffect(() => {
-    toggleModal();
-  }, [router]);
-
-  if (modal && modal.modal === "LINK")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <LinkModal
-          toggleLinkModal={toggleModal}
-          method={modal.method}
-          activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
-        />
-      </Modal>
-    );
-  else if (modal && modal.modal === "COLLECTION")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <CollectionModal
-          toggleCollectionModal={toggleModal}
-          method={modal.method}
-          isOwner={modal.isOwner as boolean}
-          defaultIndex={modal.defaultIndex}
-          activeCollection={
-            modal.active as CollectionIncludingMembersAndLinkCount
-          }
-        />
-      </Modal>
-    );
-  else return <></>;
-}
diff --git a/components/PreserverdFormatRow.tsx b/components/PreserverdFormatRow.tsx
index 499e448..e470829 100644
--- a/components/PreserverdFormatRow.tsx
+++ b/components/PreserverdFormatRow.tsx
@@ -10,14 +10,20 @@ import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 
 type Props = {
-  name: string,
-  icon: string,
-  format: ArchivedFormat,
-  activeLink: LinkIncludingShortenedCollectionAndTags,
-  downloadable?: boolean,
+  name: string;
+  icon: string;
+  format: ArchivedFormat;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+  downloadable?: boolean;
 };
 
-export default function PreservedFormatRow({ name, icon, format, activeLink, downloadable }: Props) {
+export default function PreservedFormatRow({
+  name,
+  icon,
+  format,
+  activeLink,
+  downloadable,
+}: Props) {
   const session = useSession();
   const { getLink } = useLinkStore();
 
@@ -84,7 +90,7 @@ export default function PreservedFormatRow({ name, icon, format, activeLink, dow
           // Create a temporary link and click it to trigger the download
           const link = document.createElement("a");
           link.href = path;
-          link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
+          link.download = format === ArchivedFormat.pdf ? "PDF" : "Screenshot";
           link.click();
         } else {
           console.error("Failed to download file");
@@ -99,7 +105,7 @@ export default function PreservedFormatRow({ name, icon, format, activeLink, dow
     <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
       <div className="flex gap-2 items-center">
         <div className="bg-primary text-primary-content p-2 rounded-l-md">
-          <i className={`${icon} text-2xl`}/>
+          <i className={`${icon} text-2xl`} />
         </div>
         <p>{name}</p>
       </div>
@@ -108,28 +114,18 @@ export default function PreservedFormatRow({ name, icon, format, activeLink, dow
         {downloadable || false ? (
           <div
             onClick={() => handleDownload()}
-            className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            className="btn btn-sm btn-square"
           >
-            <i className="bi-cloud-arrow-down text-xl text-neutral"/>
+            <i className="bi-cloud-arrow-down text-xl text-neutral" />
           </div>
         ) : undefined}
 
         <Link
-          href={
-            `${
-              format === ArchivedFormat.readability
-                ? `/preserved/${link?.id}?format=${format}`
-                : `/api/v1/archives/${link?.id}?format=${
-                  link.screenshotPath?.endsWith("png")
-                    ? ArchivedFormat.png
-                    : ArchivedFormat.jpeg
-                }`
-            }`
-          }
+          href={`/preserved/${link?.id}?format=${format}`}
           target="_blank"
-          className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+          className="btn btn-sm btn-square"
         >
-          <i className="bi-box-arrow-up-right text-xl text-neutral"/>
+          <i className="bi-box-arrow-up-right text-xl text-neutral" />
         </Link>
       </div>
     </div>
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index 134667a..d1d1eb0 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -31,9 +31,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-person text-primary text-2xl"
-            ></i>
+            <i className="bi-person text-primary text-2xl"></i>
 
             <p className="truncate w-full pr-7">Account</p>
           </div>
@@ -47,9 +45,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-palette text-primary text-2xl"
-            ></i>
+            <i className="bi-palette text-primary text-2xl"></i>
 
             <p className="truncate w-full pr-7">Appearance</p>
           </div>
@@ -63,9 +59,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-archive text-primary text-2xl"
-            ></i>
+            <i className="bi-archive text-primary text-2xl"></i>
             <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
@@ -78,9 +72,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-key text-primary text-2xl"
-            ></i>
+            <i className="bi-key text-primary text-2xl"></i>
             <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
@@ -93,9 +85,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-lock text-primary text-2xl"
-            ></i>
+            <i className="bi-lock text-primary text-2xl"></i>
             <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
@@ -109,9 +99,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                   : "hover:bg-neutral/20"
               } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
-              <i
-                className="bi-credit-card text-primary text-xl"
-              ></i>
+              <i className="bi-credit-card text-primary text-xl"></i>
               <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
@@ -130,9 +118,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-question-circle text-primary text-xl"
-            ></i>
+            <i className="bi-question-circle text-primary text-xl"></i>
 
             <p className="truncate w-full pr-7">Help</p>
           </div>
@@ -142,9 +128,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-github text-primary text-xl"
-            ></i>
+            <i className="bi-github text-primary text-xl"></i>
             <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
@@ -153,9 +137,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-twitter-x text-primary text-xl"
-            ></i>
+            <i className="bi-twitter-x text-primary text-xl"></i>
             <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
@@ -164,9 +146,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i
-              className="bi-mastodon text-primary text-xl"
-            ></i>
+            <i className="bi-mastodon text-primary text-xl"></i>
             <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index de10c22..75c0686 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -44,7 +44,7 @@ export default function Sidebar({ className }: { className?: string }) {
   return (
     <div
       id="sidebar"
-      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
+      className={`bg-base-200 h-full w-72 lg:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
         className || ""
       }`}
     >
@@ -70,7 +70,7 @@ export default function Sidebar({ className }: { className?: string }) {
         <SidebarHighlightLink
           title={"All Collections"}
           href={`/collections`}
-          icon={"bi-folder2"}
+          icon={"bi-folder"}
           active={active === `/collections`}
         />
       </div>
diff --git a/components/SidebarHighlightLink.tsx b/components/SidebarHighlightLink.tsx
index d4796e8..d3f3647 100644
--- a/components/SidebarHighlightLink.tsx
+++ b/components/SidebarHighlightLink.tsx
@@ -28,9 +28,7 @@ export default function SidebarHighlightLink({
           <i className={`${icon} text-primary text-2xl drop-shadow`}></i>
         </div>
         <div className={"mt-1"}>
-          <p className="truncate w-full text-xs font-semibold xl:text-sm">
-            {title}
-          </p>
+          <p className="truncate w-full font-semibold text-sm">{title}</p>
         </div>
       </div>
     </Link>
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index b2461ca..d1cf902 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -2,8 +2,6 @@ import Navbar from "@/components/Navbar";
 import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
 import { ReactNode, useEffect, useState } from "react";
-import ModalManagement from "@/components/ModalManagement";
-import useModalStore from "@/store/modals";
 import getLatestVersion from "@/lib/client/getLatestVersion";
 
 interface Props {
@@ -11,14 +9,6 @@ interface Props {
 }
 
 export default function MainLayout({ children }: Props) {
-  const { modal } = useModalStore();
-
-  useEffect(() => {
-    modal
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "auto");
-  }, [modal]);
-
   const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
   const [showAnnouncement, setShowAnnouncement] = useState(
     showAnnouncementBar ? showAnnouncementBar === "true" : true
@@ -44,8 +34,6 @@ export default function MainLayout({ children }: Props) {
 
   return (
     <>
-      <ModalManagement />
-
       {showAnnouncement ? (
         <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
       ) : undefined}
@@ -60,7 +48,7 @@ export default function MainLayout({ children }: Props) {
         <div
           className={`w-full flex flex-col min-h-${
             showAnnouncement ? "full" : "screen"
-          } lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
+          } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >
           <Navbar />
           {children}
diff --git a/layouts/SettingsLayout.tsx b/layouts/SettingsLayout.tsx
index b061372..cae3534 100644
--- a/layouts/SettingsLayout.tsx
+++ b/layouts/SettingsLayout.tsx
@@ -1,7 +1,5 @@
 import SettingsSidebar from "@/components/SettingsSidebar";
 import React, { ReactNode, useEffect, useState } from "react";
-import ModalManagement from "@/components/ModalManagement";
-import useModalStore from "@/store/modals";
 import { useRouter } from "next/router";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Link from "next/link";
@@ -12,16 +10,8 @@ interface Props {
 }
 
 export default function SettingsLayout({ children }: Props) {
-  const { modal } = useModalStore();
-
   const router = useRouter();
 
-  useEffect(() => {
-    modal
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "auto");
-  }, [modal]);
-
   const [sidebar, setSidebar] = useState(false);
 
   const { width } = useWindowDimensions();
@@ -40,8 +30,6 @@ export default function SettingsLayout({ children }: Props) {
 
   return (
     <>
-      <ModalManagement />
-
       <div className="flex max-w-screen-md mx-auto">
         <div className="hidden lg:block fixed h-screen">
           <SettingsSidebar />
diff --git a/lib/api/archiveHandler.ts b/lib/api/archiveHandler.ts
index b34613f..b49fd82 100644
--- a/lib/api/archiveHandler.ts
+++ b/lib/api/archiveHandler.ts
@@ -45,9 +45,18 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
       where: { id: link.id },
       data: {
         type: linkType,
-        screenshotPath: user.archiveAsScreenshot ? "pending" : undefined,
-        pdfPath: user.archiveAsPDF ? "pending" : undefined,
-        readabilityPath: "pending",
+        screenshotPath:
+          user.archiveAsScreenshot &&
+          !link.screenshotPath?.startsWith("archive")
+            ? "pending"
+            : undefined,
+        pdfPath:
+          user.archiveAsPDF && !link.pdfPath?.startsWith("archive")
+            ? "pending"
+            : undefined,
+        readabilityPath: !link.readabilityPath?.startsWith("archive")
+          ? "pending"
+          : undefined,
         lastPreserved: new Date().toISOString(),
       },
     });
diff --git a/lib/api/controllers/public/users/getPublicUser.ts b/lib/api/controllers/public/users/getPublicUser.ts
index e5f1138..f67d126 100644
--- a/lib/api/controllers/public/users/getPublicUser.ts
+++ b/lib/api/controllers/public/users/getPublicUser.ts
@@ -74,6 +74,8 @@ export default async function getPublicUser(
     name: lessSensitiveInfo.name,
     username: lessSensitiveInfo.username,
     image: lessSensitiveInfo.image,
+    archiveAsScreenshot: lessSensitiveInfo.archiveAsScreenshot,
+    archiveAsPdf: lessSensitiveInfo.archiveAsPDF,
   };
 
   return { response: data, status: 200 };
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 065179f..d5e475e 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -1,8 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import archiveHandler from "@/lib/api/archiveHandler";
 import { prisma } from "@/lib/api/db";
 import verifyUser from "@/lib/api/verifyUser";
 import isValidUrl from "@/lib/shared/isValidUrl";
+import removeFile from "@/lib/api/storage/removeFile";
+import { Collection, Link } from "@prisma/client";
 
 const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
 
@@ -42,20 +43,17 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
         } minutes or create a new one.`,
       });
 
-    if (link.url && isValidUrl(link.url)) {
-      archiveHandler(link);
+    if (!link.url || !isValidUrl(link.url))
       return res.status(200).json({
-        response: "Link is not a webpage to be archived.",
+        response: "Invalid URL.",
       });
-    }
+
+    await deleteArchivedFiles(link);
 
     return res.status(200).json({
       response: "Link is being archived.",
     });
   }
-
-  // TODO - Later?
-  // else if (req.method === "DELETE") {}
 }
 
 const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
@@ -68,3 +66,26 @@ const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
 
   return diffInMinutes;
 };
+
+const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
+  await prisma.link.update({
+    where: {
+      id: link.id,
+    },
+    data: {
+      screenshotPath: null,
+      pdfPath: null,
+      readabilityPath: null,
+    },
+  });
+
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}.pdf`,
+  });
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}.png`,
+  });
+  await removeFile({
+    filePath: `archives/${link.collection.id}/${link.id}_readability.json`,
+  });
+};
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 3ed29fe..49f904f 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -55,6 +55,8 @@ export default function Index() {
     name: "",
     username: "",
     image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
   });
 
   useEffect(() => {
@@ -70,6 +72,8 @@ export default function Index() {
           name: account.name,
           username: account.username as string,
           image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
         });
       }
     };
@@ -118,7 +122,7 @@ export default function Index() {
               </p>
             </div>
 
-            <div className="dropdown dropdown-bottom dropdown-end">
+            <div className="dropdown dropdown-bottom dropdown-end mt-2">
               <div
                 tabIndex={0}
                 role="button"
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 15d2ef8..46566cb 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -56,19 +56,11 @@ export default function Collections() {
 
         {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
           <>
-            <div className="flex items-center gap-3 my-5">
-              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
-
-              <div>
-                <p className="text-3xl capitalize font-thin">
-                  Other Collections
-                </p>
-
-                <p className="sm:text-sm text-xs">
-                  Shared collections you&apos;re a member of
-                </p>
-              </div>
-            </div>
+            <PageHeader
+              icon={"bi-folder"}
+              title={"Other Collections"}
+              description={"Shared collections you're a member of"}
+            />
 
             <div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
               {sortedCollections
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index a0aec27..795353b 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -8,7 +8,6 @@ import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import React from "react";
-import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
@@ -20,8 +19,6 @@ export default function Dashboard() {
   const { links } = useLinkStore();
   const { tags } = useTagStore();
 
-  const { setModal } = useModalStore();
-
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
   const [showLinks, setShowLinks] = useState(3);
@@ -100,14 +97,14 @@ export default function Dashboard() {
           description={"A brief overview of your data"}
         />
         <div>
-          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
+          <div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
               icon={"bi-link-45deg"}
             />
 
-            <div className="divider md:divider-horizontal"></div>
+            <div className="divider xl:divider-horizontal"></div>
 
             <DashboardItem
               name={collections.length === 1 ? "Collection" : "Collections"}
@@ -115,7 +112,7 @@ export default function Dashboard() {
               icon={"bi-folder"}
             />
 
-            <div className="divider md:divider-horizontal"></div>
+            <div className="divider xl:divider-horizontal"></div>
 
             <DashboardItem
               name={tags.length === 1 ? "Tag" : "Tags"}
@@ -127,15 +124,18 @@ export default function Dashboard() {
 
         <div className="flex justify-between items-center">
           <div className="flex gap-2 items-center">
-            <i className="bi-clock-history text-primary text-2xl drop-shadow"></i>
-            <p className="text-2xl">Recent</p>
+            <PageHeader
+              icon={"bi-clock-history"}
+              title={"Recent"}
+              description={"Recently added Links"}
+            />
           </div>
           <Link
             href="/links"
             className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
           >
             View All
-            <i className="bi-chevron-right text-sm "></i>
+            <i className="bi-chevron-right text-sm"></i>
           </Link>
         </div>
 
@@ -171,7 +171,7 @@ export default function Dashboard() {
                   onClick={() => {
                     setNewLinkModal(true);
                   }}
-                  className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
+                  className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-violet-400 text-white"
                 >
                   <i className="bi-plus-lg text-xl duration-100"></i>
                   <span className="group-hover:opacity-0 text-right duration-100">
@@ -239,8 +239,11 @@ export default function Dashboard() {
 
         <div className="flex justify-between items-center">
           <div className="flex gap-2 items-center">
-            <i className="bi-pin-angle text-primary text-2xl drop-shadow"></i>
-            <p className="text-2xl">Pinned</p>
+            <PageHeader
+              icon={"bi-pin-angle"}
+              title={"Pinned"}
+              description={"Your pinned Links"}
+            />
           </div>
           <Link
             href="/links/pinned"
diff --git a/pages/preserved/[id].tsx b/pages/preserved/[id].tsx
index 4ce45db..0547f9b 100644
--- a/pages/preserved/[id].tsx
+++ b/pages/preserved/[id].tsx
@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 
 export default function Index() {
@@ -30,7 +33,22 @@ export default function Index() {
       {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
         Readable
       </div> */}
-      {link && <ReadableView link={link} />}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="object-contain w-full h-screen"
+        />
+      )}
     </div>
   );
 }
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 6e98df4..9f0d010 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -9,7 +9,6 @@ import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import ModalManagement from "@/components/ModalManagement";
 import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
@@ -42,10 +41,12 @@ export default function PublicCollections() {
   const router = useRouter();
 
   const [collectionOwner, setCollectionOwner] = useState({
-    id: null,
+    id: null as unknown as number,
     name: "",
     username: "",
     image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
   });
 
   const [searchFilter, setSearchFilter] = useState({
@@ -102,8 +103,6 @@ export default function PublicCollections() {
         } 18rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
-      <ModalManagement />
-
       {collection ? (
         <Head>
           <title>{collection.name} | Linkwarden</title>
diff --git a/scripts/migration/migrateToV2.js b/scripts/migration/migrateToV2.js
index 01e0ea9..3f4df26 100644
--- a/scripts/migration/migrateToV2.js
+++ b/scripts/migration/migrateToV2.js
@@ -26,7 +26,7 @@ const s3Client =
 async function checkFileExistence(path) {
   if (s3Client) {
     const bucketParams = {
-      Bucket: process.env.BUCKET_NAME,
+      Bucket: process.env.SPACES_BUCKET_NAME,
       Key: path,
     };
 

From 55c43d6f9ead08440007f154e42c562728b59d2c Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 19 Dec 2023 17:20:09 -0500
Subject: [PATCH 2/2] many bug fixes and improvements

---
 .env.sample                                   |   1 +
 .../LinkViews/LinkComponents/LinkActions.tsx  | 154 +++++++++---------
 .../ModalContent/PreservedFormatsModal.tsx    |  41 +++--
 components/PreserverdFormatRow.tsx            |  31 +---
 components/PublicPage/PublicLinkCard.tsx      |  45 ++++-
 lib/api/archiveHandler.ts                     |  10 +-
 lib/api/controllers/links/postLink.ts         |  16 ++
 .../migration/importFromHTMLFile.ts           |  20 ++-
 .../migration/importFromLinkwarden.ts         |  27 ++-
 .../controllers/public/users/getPublicUser.ts |   2 +-
 pages/preserved/[id].tsx                      |   9 +-
 pages/public/collections/[id].tsx             |  14 +-
 pages/public/preserved/[id].tsx               |  63 +++++++
 pages/settings/account.tsx                    |  20 +--
 types/enviornment.d.ts                        |   1 +
 15 files changed, 313 insertions(+), 141 deletions(-)
 create mode 100644 pages/public/preserved/[id].tsx

diff --git a/.env.sample b/.env.sample
index c3174e6..270538e 100644
--- a/.env.sample
+++ b/.env.sample
@@ -16,6 +16,7 @@ NEXT_PUBLIC_CREDENTIALS_ENABLED=
 DISABLE_NEW_SSO_USERS=
 RE_ARCHIVE_LIMIT=
 NEXT_PUBLIC_MAX_FILE_SIZE=
+MAX_LINKS_PER_USER=
 
 # AWS S3 Settings
 SPACES_KEY=
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index 5bd18c0..015e32d 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -15,7 +15,7 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   position?: string;
-}
+};
 
 export default function LinkActions({ link, collection, position }: Props) {
   const permissions = usePermissions(link.collection.id as number);
@@ -23,7 +23,6 @@ export default function LinkActions({ link, collection, position }: Props) {
   const [editLinkModal, setEditLinkModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
   const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-  const [expandedLink, setExpandedLink] = useState(false);
 
   const { account } = useAccountStore();
 
@@ -42,7 +41,7 @@ export default function LinkActions({ link, collection, position }: Props) {
     toast.dismiss(load);
 
     response.ok &&
-    toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
   const deleteLink = async () => {
@@ -57,85 +56,82 @@ export default function LinkActions({ link, collection, position }: Props) {
 
   return (
     <div>
-      {permissions === true ||
-      permissions?.canUpdate ||
-      permissions?.canDelete ? (
+      <div
+        className={`dropdown dropdown-left absolute ${
+          position || "top-3 right-3"
+        } z-20`}
+      >
         <div
-          className={`dropdown dropdown-left absolute ${
-            position || "top-3 right-3"
-          } z-20`}
+          tabIndex={0}
+          role="button"
+          className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <div
-            tabIndex={0}
-            role="button"
-            className="btn btn-ghost btn-sm btn-square text-neutral"
-          >
-            <i id={"expand-dropdown" + collection.id} title="More" className="bi-three-dots text-xl"/>
-          </div>
-          <ul
-            className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
-            {permissions === true ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    pinLink();
-                  }}
-                >
-                  {link?.pinnedBy && link.pinnedBy[0]
-                    ? "Unpin"
-                    : "Pin to Dashboard"}
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true || permissions?.canUpdate ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    setEditLinkModal(true);
-                  }}
-                >
-                  Edit
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    setPreservedFormatsModal(true);
-                    // updateArchive();
-                  }}
-                >
-                  Preserved Formats
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true || permissions?.canDelete ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={(e) => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
-                  }}
-                >
-                  Delete
-                </div>
-              </li>
-            ) : undefined}
-          </ul>
+          <i
+            id={"expand-dropdown" + collection.id}
+            title="More"
+            className="bi-three-dots text-xl"
+          />
         </div>
-      ) : undefined}
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+          {permissions === true ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  pinLink();
+                }}
+              >
+                {link?.pinnedBy && link.pinnedBy[0]
+                  ? "Unpin"
+                  : "Pin to Dashboard"}
+              </div>
+            </li>
+          ) : undefined}
+          {permissions === true || permissions?.canUpdate ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setEditLinkModal(true);
+                }}
+              >
+                Edit
+              </div>
+            </li>
+          ) : undefined}
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                setPreservedFormatsModal(true);
+                // updateArchive();
+              }}
+            >
+              Preserved Formats
+            </div>
+          </li>
+          {permissions === true || permissions?.canDelete ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                }}
+              >
+                Delete
+              </div>
+            </li>
+          ) : undefined}
+        </ul>
+      </div>
 
       {editLinkModal ? (
         <EditLinkModal
diff --git a/components/ModalContent/PreservedFormatsModal.tsx b/components/ModalContent/PreservedFormatsModal.tsx
index 4898f3f..3a4929b 100644
--- a/components/ModalContent/PreservedFormatsModal.tsx
+++ b/components/ModalContent/PreservedFormatsModal.tsx
@@ -34,6 +34,8 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
   const router = useRouter();
 
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
   const [collectionOwner, setCollectionOwner] = useState({
     id: null as unknown as number,
     name: "",
@@ -78,12 +80,8 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
   };
 
   useEffect(() => {
-    let isPublicRoute = router.pathname.startsWith("/public")
-      ? true
-      : undefined;
-
     (async () => {
-      const data = await getLink(link.id as number, isPublicRoute);
+      const data = await getLink(link.id as number, isPublic);
       setLink(
         (data as any).response as LinkIncludingShortenedCollectionAndTags
       );
@@ -93,7 +91,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
     if (!isReady()) {
       interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublicRoute);
+        const data = await getLink(link.id as number, isPublic);
         setLink(
           (data as any).response as LinkIncludingShortenedCollectionAndTags
         );
@@ -123,8 +121,11 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
+      const newLink = await getLink(link?.id as number);
+      setLink(
+        (newLink as any).response as LinkIncludingShortenedCollectionAndTags
+      );
       toast.success(`Link is being archived...`);
-      await getLink(link?.id as number);
     } else toast.error(data.response);
   };
 
@@ -148,20 +149,15 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
       <div className={`flex flex-col gap-3`}>
         {isReady() ? (
           <>
-            {readabilityAvailable(link) ? (
-              <PreservedFormatRow
-                name={"Readable"}
-                icon={"bi-file-earmark-text"}
-                format={ArchivedFormat.readability}
-                activeLink={link}
-              />
-            ) : undefined}
-
             {screenshotAvailable(link) ? (
               <PreservedFormatRow
                 name={"Screenshot"}
                 icon={"bi-file-earmark-image"}
-                format={ArchivedFormat.png}
+                format={
+                  link?.screenshotPath?.endsWith("png")
+                    ? ArchivedFormat.png
+                    : ArchivedFormat.jpeg
+                }
                 activeLink={link}
                 downloadable={true}
               />
@@ -176,6 +172,15 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
                 downloadable={true}
               />
             ) : undefined}
+
+            {readabilityAvailable(link) ? (
+              <PreservedFormatRow
+                name={"Readable"}
+                icon={"bi-file-earmark-text"}
+                format={ArchivedFormat.readability}
+                activeLink={link}
+              />
+            ) : undefined}
           </>
         ) : (
           <div
@@ -183,7 +188,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
           >
             <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
             <p className="text-center text-2xl">
-              The Link preservation is in the queue
+              Link preservation is in the queue
             </p>
             <p className="text-center text-lg">
               Please check back later to see the result
diff --git a/components/PreserverdFormatRow.tsx b/components/PreserverdFormatRow.tsx
index e470829..393bee8 100644
--- a/components/PreserverdFormatRow.tsx
+++ b/components/PreserverdFormatRow.tsx
@@ -32,13 +32,11 @@ export default function PreservedFormatRow({
 
   const router = useRouter();
 
-  useEffect(() => {
-    let isPublicRoute = router.pathname.startsWith("/public")
-      ? true
-      : undefined;
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
 
+  useEffect(() => {
     (async () => {
-      const data = await getLink(link.id as number, isPublicRoute);
+      const data = await getLink(link.id as number, isPublic);
       setLink(
         (data as any).response as LinkIncludingShortenedCollectionAndTags
       );
@@ -47,7 +45,7 @@ export default function PreservedFormatRow({
     let interval: any;
     if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
       interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublicRoute);
+        const data = await getLink(link.id as number, isPublic);
         setLink(
           (data as any).response as LinkIncludingShortenedCollectionAndTags
         );
@@ -65,23 +63,6 @@ export default function PreservedFormatRow({
     };
   }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
 
-  const updateArchive = async () => {
-    const load = toast.loading("Sending request...");
-
-    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
-      method: "PUT",
-    });
-
-    const data = await response.json();
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(`Link is being archived...`);
-      getLink(link?.id as number);
-    } else toast.error(data.response);
-  };
-
   const handleDownload = () => {
     const path = `/api/v1/archives/${link?.id}?format=${format}`;
     fetch(path)
@@ -121,7 +102,9 @@ export default function PreservedFormatRow({
         ) : undefined}
 
         <Link
-          href={`/preserved/${link?.id}?format=${format}`}
+          href={`${isPublic ? "/public" : ""}/preserved/${
+            link?.id
+          }?format=${format}`}
           target="_blank"
           className="btn btn-sm btn-square"
         >
diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx
index f683061..97c9586 100644
--- a/components/PublicPage/PublicLinkCard.tsx
+++ b/components/PublicPage/PublicLinkCard.tsx
@@ -4,6 +4,8 @@ import isValidUrl from "@/lib/shared/isValidUrl";
 import unescapeString from "@/lib/client/unescapeString";
 import { TagIncludingLinkCount } from "@/types/global";
 import Link from "next/link";
+import { useState } from "react";
+import PreservedFormatsModal from "../ModalContent/PreservedFormatsModal";
 
 interface LinksIncludingTags extends LinkType {
   tags: TagIncludingLinkCount[];
@@ -25,6 +27,8 @@ export default function LinkCard({ link, count }: Props) {
     day: "numeric",
   });
 
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
+
   return (
     <div className="border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
       <div className="flex justify-between items-end gap-5 w-full h-full z-0">
@@ -77,15 +81,52 @@ export default function LinkCard({ link, count }: Props) {
           <div className="w-full">
             {unescapeString(link.description)}{" "}
             <Link
-              href={`/public/links/${link.id}`}
+              href={link.url || ""}
+              target="_blank"
               className="flex gap-1 items-center flex-wrap text-sm text-neutral hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
             >
-              <p>Read</p>
+              <p>Visit</p>
               <i className={"bi-chevron-right"}></i>
             </Link>
           </div>
         </div>
       </div>
+      <div
+        className={`dropdown dropdown-left absolute ${"top-3 right-3"} z-20`}
+      >
+        <div
+          tabIndex={0}
+          role="button"
+          className="btn btn-ghost btn-sm btn-square text-neutral"
+        >
+          <i
+            id={"expand-dropdown" + link.id}
+            title="More"
+            className="bi-three-dots text-xl"
+          />
+        </div>
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                setPreservedFormatsModal(true);
+                // updateArchive();
+              }}
+            >
+              Preserved Formats
+            </div>
+          </li>
+        </ul>
+      </div>
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
+          activeLink={link as any}
+        />
+      ) : undefined}
     </div>
   );
 }
diff --git a/lib/api/archiveHandler.ts b/lib/api/archiveHandler.ts
index b49fd82..037b42d 100644
--- a/lib/api/archiveHandler.ts
+++ b/lib/api/archiveHandler.ts
@@ -7,6 +7,7 @@ import { JSDOM } from "jsdom";
 import DOMPurify from "dompurify";
 import { Collection, Link, User } from "@prisma/client";
 import validateUrlSize from "./validateUrlSize";
+import removeFile from "./storage/removeFile";
 
 type LinksAndCollectionAndOwner = Link & {
   collection: Collection & {
@@ -74,7 +75,7 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
 
       const content = await page.content();
 
-      // TODO Webarchive
+      // TODO single file
       // const session = await page.context().newCDPSession(page);
       // const doc = await session.send("Page.captureSnapshot", {
       //   format: "mhtml",
@@ -189,6 +190,13 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
             : undefined,
         },
       });
+    else {
+      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.png` });
+      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.pdf` });
+      removeFile({
+        filePath: `archives/${link.collectionId}/${link.id}_readability.json`,
+      });
+    }
 
     await browser.close();
   }
diff --git a/lib/api/controllers/links/postLink.ts b/lib/api/controllers/links/postLink.ts
index 912e972..9af69e1 100644
--- a/lib/api/controllers/links/postLink.ts
+++ b/lib/api/controllers/links/postLink.ts
@@ -6,6 +6,8 @@ import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
 import validateUrlSize from "../../validateUrlSize";
 
+const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
+
 export default async function postLink(
   link: LinkIncludingShortenedCollectionAndTags,
   userId: number
@@ -24,6 +26,20 @@ export default async function postLink(
     link.collection.name = "Unorganized";
   }
 
+  const numberOfLinksTheUserHas = await prisma.link.count({
+    where: {
+      collection: {
+        ownerId: userId,
+      },
+    },
+  });
+
+  if (numberOfLinksTheUserHas + 1 > MAX_LINKS_PER_USER)
+    return {
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      status: 400,
+    };
+
   link.collection.name = link.collection.name.trim();
 
   if (link.collection.id) {
diff --git a/lib/api/controllers/migration/importFromHTMLFile.ts b/lib/api/controllers/migration/importFromHTMLFile.ts
index 7791777..a2fae27 100644
--- a/lib/api/controllers/migration/importFromHTMLFile.ts
+++ b/lib/api/controllers/migration/importFromHTMLFile.ts
@@ -1,8 +1,9 @@
 import { prisma } from "@/lib/api/db";
-import { Backup } from "@/types/global";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
 
+const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
+
 export default async function importFromHTMLFile(
   userId: number,
   rawData: string
@@ -10,6 +11,23 @@ export default async function importFromHTMLFile(
   const dom = new JSDOM(rawData);
   const document = dom.window.document;
 
+  const bookmarks = document.querySelectorAll("A");
+  const totalImports = bookmarks.length;
+
+  const numberOfLinksTheUserHas = await prisma.link.count({
+    where: {
+      collection: {
+        ownerId: userId,
+      },
+    },
+  });
+
+  if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
+    return {
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      status: 400,
+    };
+
   const folders = document.querySelectorAll("H3");
 
   await prisma
diff --git a/lib/api/controllers/migration/importFromLinkwarden.ts b/lib/api/controllers/migration/importFromLinkwarden.ts
index 78af4e3..51f8ecf 100644
--- a/lib/api/controllers/migration/importFromLinkwarden.ts
+++ b/lib/api/controllers/migration/importFromLinkwarden.ts
@@ -2,9 +2,34 @@ import { prisma } from "@/lib/api/db";
 import { Backup } from "@/types/global";
 import createFolder from "@/lib/api/storage/createFolder";
 
-export default async function getData(userId: number, rawData: string) {
+const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
+
+export default async function importFromLinkwarden(
+  userId: number,
+  rawData: string
+) {
   const data: Backup = JSON.parse(rawData);
 
+  let totalImports = 0;
+
+  data.collections.forEach((collection) => {
+    totalImports += collection.links.length;
+  });
+
+  const numberOfLinksTheUserHas = await prisma.link.count({
+    where: {
+      collection: {
+        ownerId: userId,
+      },
+    },
+  });
+
+  if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
+    return {
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      status: 400,
+    };
+
   await prisma
     .$transaction(
       async () => {
diff --git a/lib/api/controllers/public/users/getPublicUser.ts b/lib/api/controllers/public/users/getPublicUser.ts
index f67d126..04c7994 100644
--- a/lib/api/controllers/public/users/getPublicUser.ts
+++ b/lib/api/controllers/public/users/getPublicUser.ts
@@ -75,7 +75,7 @@ export default async function getPublicUser(
     username: lessSensitiveInfo.username,
     image: lessSensitiveInfo.image,
     archiveAsScreenshot: lessSensitiveInfo.archiveAsScreenshot,
-    archiveAsPdf: lessSensitiveInfo.archiveAsPDF,
+    archiveAsPDF: lessSensitiveInfo.archiveAsPDF,
   };
 
   return { response: data, status: 200 };
diff --git a/pages/preserved/[id].tsx b/pages/preserved/[id].tsx
index 0547f9b..84e614a 100644
--- a/pages/preserved/[id].tsx
+++ b/pages/preserved/[id].tsx
@@ -46,7 +46,14 @@ export default function Index() {
         <img
           alt=""
           src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
-          className="object-contain w-full h-screen"
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
         />
       )}
     </div>
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 9f0d010..586ca4a 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -96,11 +96,11 @@ export default function PublicCollections() {
 
   return collection ? (
     <div
-      className="h-screen"
+      className="h-96"
       style={{
         backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
           settings.theme === "dark" ? "#262626" : "#f3f4f6"
-        } 18rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
       {collection ? (
@@ -208,6 +208,11 @@ export default function PublicCollections() {
             {links
               ?.filter((e) => e.collectionId === Number(router.query.id))
               .map((e, i) => {
+                const linkWithCollectionData = {
+                  ...e,
+                  collection: collection, // Append collection data
+                };
+
                 return (
                   <motion.div
                     key={i}
@@ -216,7 +221,10 @@ export default function PublicCollections() {
                     viewport={{ once: true, amount: 0.8 }}
                   >
                     <motion.div variants={cardVariants}>
-                      <PublicLinkCard link={e as any} count={i} />
+                      <PublicLinkCard
+                        link={linkWithCollectionData as any}
+                        count={i}
+                      />
                     </motion.div>
                   </motion.div>
                 );
diff --git a/pages/public/preserved/[id].tsx b/pages/public/preserved/[id].tsx
new file mode 100644
index 0000000..79710bf
--- /dev/null
+++ b/pages/public/preserved/[id].tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ReadableView from "@/components/ReadableView";
+
+export default function Index() {
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : false;
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id), isPublic);
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  return (
+    <div className="relative">
+      {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
+        Readable
+      </div> */}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
+        />
+      )}
+    </div>
+  );
+}
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index a4ff709..dcd0a87 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -10,7 +10,6 @@ import SubmitButton from "@/components/SubmitButton";
 import React from "react";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Checkbox from "@/components/Checkbox";
 
 export default function Account() {
@@ -85,9 +84,9 @@ export default function Account() {
     setSubmitLoader(false);
   };
 
-  const [importDropdown, setImportDropdown] = useState(false);
-
   const importBookmarks = async (e: any, format: MigrationFormat) => {
+    setSubmitLoader(true);
+
     const file: File = e.target.files[0];
 
     if (file) {
@@ -112,18 +111,19 @@ export default function Account() {
 
         toast.dismiss(load);
 
-        toast.success("Imported the Bookmarks! Reloading the page...");
-
-        setImportDropdown(false);
-
-        setTimeout(() => {
-          location.reload();
-        }, 2000);
+        if (response.ok) {
+          toast.success("Imported the Bookmarks! Reloading the page...");
+          setTimeout(() => {
+            location.reload();
+          }, 2000);
+        } else toast.error(data.response as string);
       };
       reader.onerror = function (e) {
         console.log("Error:", e);
       };
     }
+
+    setSubmitLoader(false);
   };
 
   const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index b34d57a..9ba4241 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -10,6 +10,7 @@ declare global {
       AUTOSCROLL_TIMEOUT?: string;
       RE_ARCHIVE_LIMIT?: string;
       NEXT_PUBLIC_MAX_FILE_SIZE?: string;
+      MAX_LINKS_PER_USER?: string;
 
       SPACES_KEY?: string;
       SPACES_SECRET?: string;