Merge pull request #349 from YeeJiaWei/bootstrap-icons

Bootstrap icons

components/AccentSubmitButton.tsx

@@ -1,9 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 type Props = {
   onClick?: Function;
-  icon?: IconProp;
   label: string;
   loading?: boolean;
   className?: string;
@@ -12,7 +8,6 @@ type Props = {
 
 export default function AccentSubmitButton({
   onClick,
-  icon,
   label,
   loading,
   className,
@@ -28,7 +23,6 @@ export default function AccentSubmitButton({
         if (loading !== undefined && !loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
       <p className="font-bold">{label}</p>
     </button>
   );

components/AnnouncementBar.tsx

@@ -1,5 +1,3 @@
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import React, { MouseEventHandler } from "react";
 
@@ -24,10 +22,12 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
         </div>
 
         <button
-          className="fixed top-3 right-3 hover:opacity-50 duration-100"
+          className="fixed right-3 hover:opacity-50 duration-100"
           onClick={toggleAnnouncementBar}
         >
-          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+          <i
+            className="bi-x text-neutral text-2xl"
+          ></i>
         </button>
       </div>
     </div>

components/Checkbox.tsx

@@ -1,5 +1,3 @@
-import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEventHandler } from "react";
 
 type Props = {

components/CollectionCard.tsx

@@ -1,10 +1,7 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -71,9 +68,10 @@ export default function CollectionCard({ collection, className }: Props) {
           role="button"
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
+          <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
@@ -168,21 +166,17 @@ 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 ? (
-                  <FontAwesomeIcon
+                  <i className="bi-globe-americas drop-shadow text-neutral"
-                    icon={faGlobe}
+                     title="This collection is being shared publicly."></i>
-                    title="This collection is being shared publicly."
-                    className="w-4 h-4 drop-shadow text-neutral"
-                  />
                 ) : undefined}
-                <FontAwesomeIcon
+                <i className="bi-link-45deg text-lg text-neutral"
-                  icon={faLink}
+                   title="This collection is being shared publicly."></i>
-                  className="w-5 h-5 text-neutral"
-                />
                 {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">
-                  <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
+                  <i className="bi-calendar3 text-neutral"
+                     title="This collection is being shared publicly."></i>
                   {formattedDate}
                 </p>
               </div>

components/FilterSearchDropdown.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   setSearchFilter: Function;
@@ -24,11 +22,9 @@ export default function FilterSearchDropdown({
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <FontAwesomeIcon
+        <i
-          icon={faFilter}
+          className="bi-funnel text-neutral text-2xl"
-          id="sort-dropdown"
+        ></i>
-          className="w-5 h-5 text-neutral"
-        />
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
         <li>

components/LinkPreview.tsx

@@ -1,110 +0,0 @@
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Image from "next/image";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import A from "next/link";
-import unescapeString from "@/lib/client/unescapeString";
-import { Link } from "@prisma/client";
-
-type Props = {
-  link?: Partial<Link>;
-  className?: string;
-  settings: {
-    blurredFavicons: boolean;
-    displayLinkIcons: boolean;
-  };
-};
-
-export default function LinkPreview({ link, className, settings }: Props) {
-  if (!link) {
-    link = {
-      name: "Linkwarden",
-      url: "https://linkwarden.app",
-      createdAt: Date.now() as unknown as Date,
-    };
-  }
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url as string).host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const url = isValidUrl(link.url as string)
-    ? new URL(link.url as string)
-    : undefined;
-
-  const formattedDate = new Date(link.createdAt as Date).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  return (
-    <>
-      <div
-        className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
-          className || ""
-        }`}
-      >
-        <div className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5">
-          {url && settings?.displayLinkIcons && (
-            <Image
-              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-              width={64}
-              height={64}
-              alt=""
-              className={`${
-                settings.blurredFavicons ? "blur-sm " : ""
-              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          )}
-
-          <div className="flex justify-between gap-5 w-full h-full z-0">
-            <div className="flex flex-col justify-between w-full">
-              <div className="flex items-baseline gap-1">
-                <p className="text-sm text-neutral">{1}</p>
-                <p className="text-lg truncate capitalize w-full pr-8">
-                  {unescapeString(link.name as string)}
-                </p>
-              </div>
-              <div className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="w-4 h-4 mt-1 drop-shadow text-primary"
-                />
-                <p className="truncate capitalize w-full">Landing Pages ⚡️</p>
-              </div>
-              <A
-                href={link.url as string}
-                target="_blank"
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
-              >
-                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-                <p className="truncate w-full">{shortendURL}</p>
-              </A>
-              <div className="flex items-center gap-1 text-neutral">
-                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-                <p>{formattedDate}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

components/LinkSidebar.tsx

@@ -1,129 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPen,
-  faBoxesStacked,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useModalStore from "@/store/modals";
-import useLinkStore from "@/store/links";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-
-type Props = {
-  className?: string;
-  onClick?: Function;
-};
-
-export default function LinkSidebar({ className, onClick }: Props) {
-  const session = useSession();
-  const userId = session.data?.user.id;
-
-  const { setModal } = useModalStore();
-
-  const { links, removeLink } = useLinkStore();
-  const { collections } = useCollectionStore();
-
-  const [linkCollection, setLinkCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    if (link)
-      setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
-  }, [link]);
-
-  return (
-    <div
-      className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
-        className || ""
-      }`}
-    >
-      <div className="flex flex-col gap-5">
-        {link?.collection.ownerId === userId ||
-        linkCollection?.members.some(
-          (e) => e.userId === userId && e.canUpdate
-        ) ? (
-          <div
-            title="Edit"
-            onClick={() => {
-              link
-                ? setModal({
-                    modal: "LINK",
-                    state: true,
-                    active: link,
-                    method: "UPDATE",
-                  })
-                : undefined;
-              onClick && onClick();
-            }}
-            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon icon={faPen} className="w-6 h-6 text-neutral" />
-
-            <p className="truncate w-full lg:hidden">Edit</p>
-          </div>
-        ) : undefined}
-
-        <div
-          onClick={() => {
-            link
-              ? setModal({
-                  modal: "LINK",
-                  state: true,
-                  active: link,
-                  method: "FORMATS",
-                })
-              : undefined;
-            onClick && onClick();
-          }}
-          title="Preserved Formats"
-          className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-        >
-          <FontAwesomeIcon
-            icon={faBoxesStacked}
-            className="w-6 h-6 text-neutral"
-          />
-
-          <p className="truncate w-full lg:hidden">Preserved Formats</p>
-        </div>
-
-        {link?.collection.ownerId === userId ||
-        linkCollection?.members.some(
-          (e) => e.userId === userId && e.canDelete
-        ) ? (
-          <div
-            onClick={() => {
-              if (link?.id) {
-                removeLink(link.id);
-                router.back();
-                onClick && onClick();
-              }
-            }}
-            title="Delete"
-            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon
-              icon={faTrashCan}
-              className="w-6 h-6 text-neutral"
-            />
-
-            <p className="truncate w-full lg:hidden">Delete</p>
-          </div>
-        ) : undefined}
-      </div>
-    </div>
-  );
-}

components/LinkViews/GridView.tsx

@@ -1,5 +1,5 @@
 import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {LinkIncludingShortenedCollectionAndTags} from "@/types/global";
 
 export default function CompactGridView({
   links,
@@ -10,8 +10,8 @@ export default function CompactGridView({
     <div className="columns-1 xl:columns-2 2xl:columns-3 gap-5">
       {links.map((e, i) => {
         return (
-          <div className="break-inside-avoid mb-5">
+          <div key={i} className="break-inside-avoid mb-5">
-            <LinkCardGrid key={i} link={e} count={i} />
+            <LinkCardGrid link={e} count={i}/>
           </div>
         );
       })}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -4,8 +4,6 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import usePermissions from "@/hooks/usePermissions";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
 import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
@@ -13,15 +11,13 @@ import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
 
-export default function LinkActions({
+type Props = {
-  link,
-  collection,
-  position,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   position?: string;
-}) {
+}
+
+export default function LinkActions({ link, collection, position }: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -46,7 +42,7 @@ export default function LinkActions({
     toast.dismiss(load);
 
     response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+    toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
   const deleteLink = async () => {
@@ -74,14 +70,10 @@ export default function LinkActions({
             role="button"
             className="btn btn-ghost btn-sm btn-square text-neutral"
           >
-            <FontAwesomeIcon
+            <i id={"expand-dropdown" + collection.id} title="More" className="bi-three-dots text-xl"/>
-              icon={faEllipsis}
-              title="More"
-              className="w-5 h-5"
-              id={"expand-dropdown" + collection.id}
-            />
           </div>
-          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+          <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

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -2,9 +2,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -62,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
         <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link} />
+          <LinkIcon link={link}/>
         </div>
 
         <div className="flex items-baseline gap-1">
@@ -74,19 +72,19 @@ export default function LinkCard({ link, count, className }: Props) {
 
         {link.url ? (
           <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-            <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+            <i className="bi-link-45deg"/>
             <p className="truncate w-full">{shortendURL}</p>
           </div>
         ) : (
           <div className="badge badge-primary badge-sm my-1">{link.type}</div>
         )}
 
-        <LinkCollection link={link} collection={collection} />
+        <LinkCollection link={link} collection={collection}/>
 
-        <LinkDate link={link} />
+        <LinkDate link={link}/>
       </div>
 
-      <LinkActions link={link} collection={collection} />
+      <LinkActions link={link} collection={collection}/>
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -2,14 +2,10 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/router";
+import React from "react";
 
-export default function LinkCollection({
+export default function LinkCollection({ link, collection }: {
-  link,
-  collection,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
 }) {
@@ -23,11 +19,7 @@ export default function LinkCollection({
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
     >
-      <FontAwesomeIcon
+      <i className="bi-folder2 text-lg shadow" style={{ color: collection?.color }}></i>
-        icon={faFolder}
-        className="w-4 h-4 shadow"
-        style={{ color: collection?.color }}
-      />
       <p className="truncate capitalize">{collection?.name}</p>
     </div>
   );

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -1,10 +1,7 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 
-export default function LinkDate({
+export default function LinkDate({ link }: {
-  link,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
@@ -18,7 +15,7 @@ export default function LinkDate({
 
   return (
     <div className="flex items-center gap-1 text-neutral">
-      <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+      <i className="bi-calendar3 text-lg"></i>
       <p>{formattedDate}</p>
     </div>
   );

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -1,13 +1,9 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
 
-export default function LinkIcon({
+export default function LinkIcon({ link, width }: {
-  link,
-  width,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
   width?: string;
 }) {
@@ -35,9 +31,9 @@ export default function LinkIcon({
           }}
         />
       ) : link.type === "pdf" ? (
-        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
       ) : link.type === "image" ? (
-        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
       ) : undefined}
     </div>
   );

components/Modal.tsx

@@ -1,7 +1,5 @@
-import { MouseEventHandler, ReactNode, useEffect } from "react";
+import React, { MouseEventHandler, ReactNode } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleModal: Function;
@@ -21,9 +19,11 @@ export default function Modal({ toggleModal, className, children }: Props) {
         <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+            className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
           >
-            <FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
+            <i
+              className="bi-x text-neutral text-2xl"
+            ></i>
           </div>
           {children}
         </div>

components/Modal/Collection/CollectionInfo.tsx

@@ -1,14 +1,8 @@
 import { Dispatch, SetStateAction, useState } from "react";
-import {
-  faFolder,
-  faPenToSquare,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 
@@ -73,10 +67,7 @@ export default function CollectionInfo({
               <div className="flex flex-col justify-between items-center w-32">
                 <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
-                  <FontAwesomeIcon
+                  <i className={"bi-folder2"}></i>
-                    icon={faFolder}
-                    className="w-12 h-12 drop-shadow"
-                  />
                 </div>
                 <div
                   className="btn btn-ghost btn-xs"
@@ -115,7 +106,6 @@ export default function CollectionInfo({
         onClick={submit}
         loading={submitLoader}
         label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
         className="mx-auto mt-2"
       />
     </div>

components/Modal/Collection/DeleteCollection.tsx

@@ -1,9 +1,4 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
@@ -111,10 +106,7 @@ export default function DeleteCollection({
         }`}
         onClick={submit}
       >
-        <FontAwesomeIcon
+        <i className={`${ permissions === true ? 'bi-trash' : 'bi-arrow-right'}`}></i>
-          icon={permissions === true ? faTrashCan : faRightFromBracket}
-          className="h-5"
-        />
         {permissions === true ? "Delete" : "Leave"} Collection
       </div>
     </div>

components/Modal/Collection/TeamManagement.tsx

@@ -1,12 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faCrown,
-  faPenToSquare,
-  faPlus,
-  faUserPlus,
-} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
@@ -173,7 +165,7 @@ export default function TeamManagement({
               }
               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"
             >
-              <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
+              <i className="bi-person-add text-xl"></i>
             </div>
           </div>
         </>
@@ -194,9 +186,8 @@ export default function TeamManagement({
                     className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
-                      <FontAwesomeIcon
+                      <i
-                        icon={faClose}
+                        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="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -402,10 +393,6 @@ export default function TeamManagement({
           <div>
             <div className="flex items-center gap-1">
               <p className="text-sm font-bold">{collectionOwner.name}</p>
-              <FontAwesomeIcon
-                icon={faCrown}
-                className="w-3 h-3 text-yellow-500"
-              />
             </div>
             <p className="text-neutral">@{collectionOwner.username}</p>
           </div>
@@ -422,7 +409,6 @@ export default function TeamManagement({
           onClick={submit}
           loading={submitLoader}
           label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
           className="mx-auto mt-2"
         />
       )}

components/Modal/Collection/ViewTeam.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCrown } from "@fortawesome/free-solid-svg-icons";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -45,10 +43,6 @@ export default function ViewTeam({ collection }: Props) {
             <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">
-                <FontAwesomeIcon
-                  icon={faCrown}
-                  className="w-3 h-3 text-yellow-500"
-                />
                 Admin
               </div>
             </div>

components/Modal/Link/AddOrEditLink.tsx

@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
-import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
@@ -13,7 +11,6 @@ import { toast } from "react-hot-toast";
 import Link from "next/link";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props =
   | {
@@ -142,7 +139,7 @@ export default function AddOrEditLink({
           className="text-neutral break-all w-full flex gap-2"
           title={link.url || ""}
         >
-          <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
+          <i className={"bi-link-45deg"}></i>
           <Link href={link.url || ""} target="_blank" className="w-full">
             {link.url}
           </Link>
@@ -264,7 +261,6 @@ export default function AddOrEditLink({
         <SubmitButton
           onClick={submit}
           label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
           loading={submitLoader}
           className={`${method === "CREATE" ? "" : "mx-auto"}`}
         />

components/Modal/Link/PreservedFormats.tsx

@@ -4,12 +4,6 @@ import {
 } from "@/types/global";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faCloudArrowDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
@@ -97,7 +91,6 @@ export default function PreservedFormats() {
         <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">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
             <p>Screenshot</p>
@@ -108,10 +101,6 @@ export default function PreservedFormats() {
               onClick={() => handleDownload(ArchivedFormat.png)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-neutral"
-              />
             </div>
 
             <Link
@@ -123,10 +112,6 @@ export default function PreservedFormats() {
               target="_blank"
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-neutral"
-              />
             </Link>
           </div>
         </div>
@@ -136,7 +121,6 @@ export default function PreservedFormats() {
         <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">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
             <p>PDF</p>
@@ -147,10 +131,6 @@ export default function PreservedFormats() {
               onClick={() => handleDownload(ArchivedFormat.pdf)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-neutral"
-              />
             </div>
 
             <Link
@@ -158,10 +138,6 @@ export default function PreservedFormats() {
               target="_blank"
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-neutral"
-              />
             </Link>
           </div>
         </div>
@@ -191,10 +167,6 @@ export default function PreservedFormats() {
             screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
           }`}
         >
-          <FontAwesomeIcon
-            icon={faArrowUpRightFromSquare}
-            className="w-4 h-4"
-          />
           <p className="whitespace-nowrap">
             View Latest Snapshot on archive.org
           </p>

components/ModalContent/DeleteCollectionModal.tsx

@@ -2,11 +2,6 @@ import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
 import toast from "react-hot-toast";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
@@ -89,19 +84,7 @@ export default function DeleteCollectionModal({
             </div>
 
             <div role="alert" className="alert alert-warning">
-              <svg
+              <i className="bi-exclamation-triangle text-xl"></i>
-                xmlns="http://www.w3.org/2000/svg"
-                className="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
               <span>
                 <b>Warning:</b> Deleting this collection will permanently erase
                 all its contents, and it will become inaccessible to everyone,
@@ -124,10 +107,7 @@ export default function DeleteCollectionModal({
           }`}
           onClick={submit}
         >
-          <FontAwesomeIcon
+          <i className="bi-trash text-xl"></i>
-            icon={permissions === true ? faTrashCan : faRightFromBracket}
-            className="h-5"
-          />
           {permissions === true ? "Delete" : "Leave"} Collection
         </button>
       </div>

components/ModalContent/DeleteLinkModal.tsx

@@ -1,15 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
 import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 
@@ -57,19 +49,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
         <p>Are you sure you want to delete this Link?</p>
 
         <div role="alert" className="alert alert-warning">
-          <svg
+          <i className="bi-exclamation-triangle text-xl"/>
-            xmlns="http://www.w3.org/2000/svg"
-            className="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-            />
-          </svg>
           <span>
             <b>Warning:</b> This action is irreversible!
           </span>
@@ -84,7 +64,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
           className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
           onClick={deleteLink}
         >
-          <FontAwesomeIcon icon={faTrashCan} className="h-5" />
+          <i className="bi-trash text-xl"/>
           Delete
         </button>
       </div>

components/ModalContent/EditCollectionModal.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 
@@ -70,12 +68,7 @@ export default function EditCollectionModal({
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
+                    <i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
-                      <FontAwesomeIcon
-                        icon={faFolder}
-                        className="w-12 h-12 drop-shadow"
-                      />
-                    </div>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,13 +1,7 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import {
-  faClose,
-  faCrown,
-  faUserPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import useAccountStore from "@/store/account";
@@ -182,7 +176,7 @@ export default function EditCollectionSharingModal({
                 }
                 className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
               >
-                <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
+                  <i className="bi-person-add text-xl"></i>
               </div>
             </div>
           </>
@@ -219,10 +213,6 @@ export default function EditCollectionSharingModal({
                         {collectionOwner.name}
                       </p>
                       <div className="flex text-xs gap-1 items-center">
-                        <FontAwesomeIcon
-                          icon={faCrown}
-                          className="w-3 h-3 text-yellow-500"
-                        />
                         Admin
                       </div>
                     </div>
@@ -240,9 +230,8 @@ export default function EditCollectionSharingModal({
                       className="relative border p-2 rounded-xl border-neutral-content bg-base-200 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                     >
                       {permissions === true && (
-                        <FontAwesomeIcon
+                        <i
-                          icon={faClose}
+                          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="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                           title="Remove Member"
                           onClick={() => {
                             const updatedMembers = collection.members.filter(

components/ModalContent/EditLinkModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
@@ -8,8 +7,6 @@ import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
 
 type Props = {
@@ -89,10 +86,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           title={link.url}
           target="_blank"
         >
-          <FontAwesomeIcon
+          <i className="bi-link-45deg text-xl"/>
-            icon={faLink}
-            className="mt-1 w-5 h-5 min-w-[1.25rem]"
-          />
           <p>{shortendURL}</p>
         </Link>
       ) : undefined}
@@ -122,13 +116,13 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 defaultValue={
                   link.collection.id
                     ? {
-                        value: link.collection.id,
+                      value: link.collection.id,
-                        label: link.collection.name,
+                      label: link.collection.name,
-                      }
+                    }
                     : {
-                        value: null as unknown as number,
+                      value: null as unknown as number,
-                        label: "Unorganized",
+                      label: "Unorganized",
-                      }
+                    }
                 }
               />
             ) : null}

components/ModalContent/NewCollectionModal.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Modal from "../Modal";
 
 type Props = {
@@ -29,27 +27,22 @@ export default function NewCollectionModal({ onClose }: Props) {
   const { addCollection } = useCollectionStore();
 
   const submit = async () => {
-    if (!submitLoader) {
+    if (submitLoader) return;
-      setSubmitLoader(true);
+    if (!collection) return null;
-      if (!collection) return null;
 
-      setSubmitLoader(true);
+    setSubmitLoader(true);
 
-      const load = toast.loading("Creating...");
+    const load = toast.loading("Creating...");
 
-      let response;
+    let response = await addCollection(collection as any);
+    toast.dismiss(load);
 
-      response = await addCollection(collection as any);
+    if (response.ok) {
+      toast.success("Created!");
+      onClose();
+    } else toast.error(response.data as string);
 
-      toast.dismiss(load);
+    setSubmitLoader(false);
-
-      if (response.ok) {
-        toast.success("Created!");
-        onClose();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-    }
   };
 
   return (
@@ -75,12 +68,7 @@ export default function NewCollectionModal({ onClose }: Props) {
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
+                    <i className={"bi-folder2 text-5xl"} style={{ color: collection.color }}></i>
-                      <FontAwesomeIcon
-                        icon={faFolder}
-                        className="w-12 h-12 drop-shadow"
-                      />
-                    </div>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/NewLinkModal.tsx

@@ -145,53 +145,56 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
       </div>
 
-      {optionsExpanded ? (
+      <div className={"mt-2"}>
-        <div className="mt-5">
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
-          <div className="grid sm:grid-cols-2 gap-3">
-            <div>
-              <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>
-
-            <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="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-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
-          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+          className={`cursor-pointer duration-100 flex items-center text-sm`}
         >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          <span>{optionsExpanded ? "Hide" : "More"} Options</span>
+          <i className={`ml-0.5 ${optionsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
         </div>
 
+        {optionsExpanded ? (
+          <div className="mt-5">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <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>
+
+              <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="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>
+
+      <div className="flex items-center justify-end mt-5">
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,32 +1,13 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
-import {
+import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags, } from "@/types/global";
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faCloudArrowDown,
-  faLink,
-  faTrashCan,
-  faUpRightFromSquare,
-} from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
-import {
-  faFileImage,
-  faFileLines,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import {
+import { pdfAvailable, readabilityAvailable, screenshotAvailable, } from "@/lib/shared/getArchiveValidity";
-  pdfAvailable,
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
-  readabilityAvailable,
-  screenshotAvailable,
-} from "@/lib/shared/getArchiveValidity";
 
 type Props = {
   onClose: Function;
@@ -92,25 +73,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     } 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 (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Preserved Formats</p>
@@ -129,112 +91,18 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
       <div className={`flex flex-col gap-3`}>
         {readabilityAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'Readable'} icon={'bi-file-earmark-text'} format={ArchivedFormat.readability}
-            <div className="flex gap-2 items-center">
+                              activeLink={link}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFileLines} className="w-6 h-6" />
-              </div>
-
-              <p>Readable</p>
-            </div>
-
-            <div className="flex gap-1">
-              {/* <div
-                onClick={() => handleDownload(ArchivedFormat.pdf)}
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </div> */}
-
-              <Link
-                href={`/preserved/${link?.id}?format=${ArchivedFormat.readability}`}
-                target="_blank"
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         {screenshotAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'Screenshot'} icon={'bi-file-earmark-image'} format={ArchivedFormat.png}
-            <div className="flex gap-2 items-center">
+                              activeLink={link} downloadable={true}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-              </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"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </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"
-              >
-                <FontAwesomeIcon
-                  icon={faUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         {pdfAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'PDF'} icon={'bi-file-earmark-pdf'} format={ArchivedFormat.pdf}
-            <div className="flex gap-2 items-center">
+                              activeLink={link} downloadable={true}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-              </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"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </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"
-              >
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         <div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
@@ -272,10 +140,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             <p className="whitespace-nowrap">
               View latest snapshot on archive.org
             </p>
-            <FontAwesomeIcon
+            <i className="bi-box-arrow-up-right"/>
-              icon={faArrowUpRightFromSquare}
-              className="w-4 h-4"
-            />
           </Link>
         </div>
       </div>

components/ModalContent/UploadFileModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
@@ -14,9 +13,6 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 
 type Props = {
   onClose: Function;

components/NoLinksFound.tsx

@@ -1,5 +1,3 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
 
@@ -35,10 +33,9 @@ export default function NoLinksFound({ text }: Props) {
           }}
           className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
         >
-          <FontAwesomeIcon
+          <i
-            icon={faPlus}
+            className="bi-plus text-4xl left-2 group-hover:ml-[4rem] absolute duration-100"
-            className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
+          ></i>
-          />
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>

components/PageHeader.tsx

@@ -6,7 +6,7 @@ export default function PageHeader({
   icon,
 }: {
   title: string;
-  description: string;
+  description?: string;
   icon: string;
 }) {
   return (

components/PreserverdFormatRow.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  name: string,
+  icon: string,
+  format: ArchivedFormat,
+  activeLink: LinkIncludingShortenedCollectionAndTags,
+  downloadable?: boolean,
+};
+
+export default function PreservedFormatRow({ name, icon, format, activeLink, downloadable }: Props) {
+  const session = useSession();
+  const { getLink } = useLinkStore();
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    let isPublicRoute = router.pathname.startsWith("/public")
+      ? true
+      : undefined;
+
+    (async () => {
+      const data = await getLink(link.id as number, isPublicRoute);
+      setLink(
+        (data as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+    })();
+
+    let interval: any;
+    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+      interval = setInterval(async () => {
+        const data = await getLink(link.id as number, isPublicRoute);
+        setLink(
+          (data as any).response as LinkIncludingShortenedCollectionAndTags
+        );
+      }, 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 = () => {
+    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 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`}/>
+        </div>
+        <p>{name}</p>
+      </div>
+
+      <div className="flex gap-1">
+        {downloadable || false ? (
+          <div
+            onClick={() => handleDownload()}
+            className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+          >
+            <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
+                }`
+            }`
+          }
+          target="_blank"
+          className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+        >
+          <i className="bi-box-arrow-up-right text-xl text-neutral"/>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/PublicPage/PublicLinkCard.tsx

@@ -1,5 +1,3 @@
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -83,10 +81,7 @@ export default function LinkCard({ link, count }: Props) {
               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>
-              <FontAwesomeIcon
+              <i className={"bi-chevron-right"}></i>
-                icon={faChevronRight}
-                className="w-3 h-3 mt-[0.15rem]"
-              />
             </Link>
           </div>
         </div>

components/RadioButton.tsx

@@ -1,5 +1,3 @@
-import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEventHandler } from "react";
 
 type Props = {
@@ -18,14 +16,14 @@ export default function RadioButton({ label, state, onClick }: Props) {
         checked={state}
         onChange={onClick}
       />
-      <FontAwesomeIcon
+      {/*<FontAwesomeIcon*/}
-        icon={faCircleCheck}
+      {/*  icon={faCircleCheck}*/}
-        className="w-5 h-5 text-primary peer-checked:block hidden"
+      {/*  className="w-5 h-5 text-primary peer-checked:block hidden"*/}
-      />
+      {/*/>*/}
-      <FontAwesomeIcon
+      {/*<FontAwesomeIcon*/}
-        icon={faCircle}
+      {/*  icon={faCircle}*/}
-        className="w-5 h-5 text-primary peer-checked:hidden block"
+      {/*  className="w-5 h-5 text-primary peer-checked:hidden block"*/}
-      />
+      {/*/>*/}
       <span className="rounded select-none">{label}</span>
     </label>
   );

components/ReadableView.tsx

@@ -6,8 +6,6 @@ import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ColorThief, { RGBColor } from "colorthief";
 import DOMPurify from "dompurify";
 import Image from "next/image";
@@ -174,7 +172,9 @@ export default function ReadableView({ link }: Props) {
                   target="_blank"
                   className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
                 >
-                  <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
+                  <i
+                    className="bi-link-45deg"
+                  ></i>
 
                   {isValidUrl(link?.url || "")
                     ? new URL(link?.url as string).host
@@ -189,11 +189,10 @@ export default function ReadableView({ link }: Props) {
               href={`/collections/${link?.collection.id}`}
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
-              <FontAwesomeIcon
+              <i
-                icon={faFolder}
+                className="bi-folder2 drop-shadow text-2xl"
-                className="w-5 h-5 drop-shadow"
                 style={{ color: link?.collection.color }}
-              />
+              ></i>
               <p
                 title={link?.collection.name}
                 className="text-lg truncate max-w-[12rem]"

components/SettingsSidebar.tsx

@@ -1,24 +1,7 @@
 import useCollectionStore from "@/store/collections";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faUser,
-  faPalette,
-  faBoxArchive,
-  faKey,
-  faLock,
-} from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
-import {
-  faCircleQuestion,
-  faCreditCard,
-} from "@fortawesome/free-regular-svg-icons";
-import {
-  faGithub,
-  faMastodon,
-  faXTwitter,
-} from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
   const LINKWARDEN_VERSION = "v2.4.0";
@@ -48,7 +31,9 @@ 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`}
           >
-            <FontAwesomeIcon icon={faUser} className="w-7 h-7 text-primary" />
+            <i
+              className="bi-person text-primary text-2xl"
+            ></i>
 
             <p className="truncate w-full pr-7">Account</p>
           </div>
@@ -62,10 +47,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faPalette}
+              className="bi-palette text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Appearance</p>
           </div>
@@ -79,11 +63,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faBoxArchive}
+              className="bi-archive text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
@@ -96,8 +78,9 @@ 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`}
           >
-            <FontAwesomeIcon icon={faKey} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-key text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
@@ -110,8 +93,9 @@ 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`}
           >
-            <FontAwesomeIcon icon={faLock} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-lock text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
@@ -125,11 +109,9 @@ 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`}
             >
-              <FontAwesomeIcon
+              <i
-                icon={faCreditCard}
+                className="bi-credit-card text-primary text-xl"
-                className="w-7 h-7 text-primary"
+              ></i>
-              />
-
               <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
@@ -148,10 +130,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faCircleQuestion as any}
+              className="bi-question-circle text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Help</p>
           </div>
@@ -161,11 +142,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faGithub as any}
+              className="bi-github text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
@@ -174,11 +153,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faXTwitter as any}
+              className="bi-twitter-x text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
@@ -187,11 +164,9 @@ 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`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faMastodon as any}
+              className="bi-mastodon text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>

components/SortDropdown.tsx

@@ -1,7 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { Sort } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSort } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   sortBy: Sort;
@@ -16,14 +14,9 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <svg
+        <i
-          className="w-5 h-5 text-neutral"
+          className="bi-filter text-neutral text-2xl"
-          viewBox="0 0 24 24"
+        ></i>
-          fill="none"
-          stroke="currentColor"
-        >
-          <path d="M3 6H12H21M6 12H18M9 18H15" stroke="currentColor"></path>
-        </svg>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>

components/SubmitButton.tsx

@@ -1,9 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 type Props = {
   onClick?: Function;
-  icon?: IconProp;
   label: string;
   loading: boolean;
   className?: string;
@@ -12,7 +8,6 @@ type Props = {
 
 export default function SubmitButton({
   onClick,
-  icon,
   label,
   loading,
   className,
@@ -28,7 +23,6 @@ export default function SubmitButton({
         if (!loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
       <p>{label}</p>
     </button>
   );

layouts/LinkLayout.tsx

@@ -1,216 +0,0 @@
-import LinkSidebar from "@/components/LinkSidebar";
-import { 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import {
-  faPen,
-  faBoxesStacked,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import useLinkStore from "@/store/links";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-import EditLinkModal from "@/components/ModalContent/EditLinkModal";
-import Link from "next/link";
-import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
-import toast from "react-hot-toast";
-import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
-
-interface Props {
-  children: ReactNode;
-}
-
-export default function LinkLayout({ 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();
-
-  useEffect(() => {
-    setSidebar(false);
-  }, [width]);
-
-  useEffect(() => {
-    setSidebar(false);
-  }, [router]);
-
-  const toggleSidebar = () => {
-    setSidebar(!sidebar);
-  };
-
-  const session = useSession();
-  const userId = session.data?.user.id;
-
-  const { setModal } = useModalStore();
-
-  const { links, removeLink } = useLinkStore();
-  const { collections } = useCollectionStore();
-
-  const [linkCollection, setLinkCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
-  useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    if (link)
-      setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
-  }, [link, collections]);
-
-  const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
-
-    const response = await removeLink(link?.id as number);
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-
-    router.push("/dashboard");
-  };
-
-  const [editLinkModal, setEditLinkModal] = useState(false);
-  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-
-  return (
-    <>
-      <div className="flex mx-auto">
-        {/* <div className="hidden lg:block fixed left-5 h-screen">
-          <LinkSidebar />
-        </div> */}
-
-        <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
-          <div className="flex gap-3 mb-3 duration-100 items-center justify-between">
-            {/* <div
-              onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
-            >
-              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
-            </div> */}
-
-            <Link
-              href={
-                router.pathname.startsWith("/public")
-                  ? `/public/collections/${
-                      linkCollection?.id || link?.collection?.id
-                    }`
-                  : `/dashboard`
-              }
-              className="inline-flex gap-1 btn btn-ghost btn-sm text-neutral px-2"
-            >
-              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
-              <span className="capitalize">
-                {router.pathname.startsWith("/public")
-                  ? linkCollection?.name || link?.collection?.name
-                  : "Dashboard"}
-              </span>
-            </Link>
-
-            <div className="flex gap-3">
-              {link?.collection?.ownerId === userId ||
-              linkCollection?.members.some(
-                (e) => e.userId === userId && e.canUpdate
-              ) ? (
-                <div
-                  title="Edit"
-                  onClick={() => setEditLinkModal(true)}
-                  className={`btn btn-ghost btn-square btn-sm`}
-                >
-                  <FontAwesomeIcon
-                    icon={faPen}
-                    className="w-4 h-4 text-neutral"
-                  />
-                </div>
-              ) : undefined}
-
-              <div
-                onClick={() => setPreservedFormatsModal(true)}
-                title="Preserved Formats"
-                className={`btn btn-ghost btn-square btn-sm`}
-              >
-                <FontAwesomeIcon
-                  icon={faBoxesStacked}
-                  className="w-4 h-4 text-neutral"
-                />
-              </div>
-
-              {link?.collection?.ownerId === userId ||
-              linkCollection?.members.some(
-                (e) => e.userId === userId && e.canDelete
-              ) ? (
-                <div
-                  onClick={(e) => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
-                  }}
-                  title="Delete"
-                  className={`btn btn-ghost btn-square btn-sm`}
-                >
-                  <FontAwesomeIcon
-                    icon={faTrashCan}
-                    className="w-4 h-4 text-neutral"
-                  />
-                </div>
-              ) : undefined}
-            </div>
-          </div>
-
-          {children}
-
-          {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-              <ClickAwayHandler
-                className="h-full"
-                onClickOutside={toggleSidebar}
-              >
-                <div className="slide-right h-full shadow-lg">
-                  <LinkSidebar onClick={() => setSidebar(false)} />
-                </div>
-              </ClickAwayHandler>
-            </div>
-          ) : null}
-        </div>
-        {link && editLinkModal ? (
-          <EditLinkModal
-            onClose={() => setEditLinkModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-        {link && deleteLinkModal ? (
-          <DeleteLinkModal
-            onClose={() => setDeleteLinkModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-        {link && preservedFormatsModal ? (
-          <PreservedFormatsModal
-            onClose={() => setPreservedFormatsModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-      </div>
-    </>
-  );
-}

layouts/SettingsLayout.tsx

@@ -1,11 +1,9 @@
 import SettingsSidebar from "@/components/SettingsSidebar";
-import { ReactNode, useEffect, useState } from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
@@ -55,14 +53,18 @@ export default function SettingsLayout({ children }: Props) {
               onClick={toggleSidebar}
               className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
             >
-              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+              <i
+                className="bi-list text-xl"
+              ></i>
             </div>
 
             <Link
               href="/dashboard"
               className="text-neutral btn btn-square btn-sm btn-ghost"
             >
-              <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+              <i
+                className="bi-chevron-left text-xl"
+              ></i>
             </Link>
           </div>
 

package.json

@@ -16,11 +16,6 @@
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.1",
     "@aws-sdk/client-s3": "^3.379.1",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
     "@mozilla/readability": "^0.4.4",
     "@prisma/client": "^4.16.2",

pages/api/v1/links/[id]/archive/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import urlHandler from "@/lib/api/archiveHandler";
+import archiveHandler from "@/lib/api/archiveHandler";
 import { prisma } from "@/lib/api/db";
 import verifyUser from "@/lib/api/verifyUser";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -14,7 +14,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     where: {
       id: Number(req.query.id),
     },
-    include: { collection: true },
+    include: { collection: { include: { owner: true } } },
   });
 
   if (!link)
@@ -43,7 +43,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       });
 
     if (link.url && isValidUrl(link.url)) {
-      urlHandler(link.id, link.url, user.id);
+      archiveHandler(link);
       return res.status(200).json({
         response: "Link is not a webpage to be archived.",
       });

pages/collections/[id].tsx

@@ -6,10 +6,8 @@ import {
   Sort,
   ViewMode,
 } from "@/types/global";
-import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
@@ -109,12 +107,12 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
-            <div className="flex gap-2">
+            <div className="flex items-center gap-2">
-              <FontAwesomeIcon
+              <i
-                icon={faFolder}
+                className="bi-folder2 text-3xl drop-shadow"
                 style={{ color: activeCollection?.color }}
-                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
+              ></i>
-              />
+
               <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                 {activeCollection?.name}
               </p>
@@ -126,11 +124,10 @@ export default function Index() {
                 role="button"
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
-                <FontAwesomeIcon
+                <i
-                  icon={faEllipsis}
+                  className="bi-three-dots text-xl"
                   title="More"
-                  className="w-5 h-5"
+                ></i>
-                />
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                 {permissions === true ? (

pages/dashboard.tsx

@@ -2,7 +2,6 @@ import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
-import LinkCard from "@/components/LinkCard";
 import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import { useEffect, useState } from "react";
 import useLinks from "@/hooks/useLinks";
@@ -95,9 +94,10 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"} />
+        <PageHeader icon={'bi-house '} title={'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 md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
@@ -140,13 +140,13 @@ export default function Dashboard() {
           style={{ flex: "0 1 auto" }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
-          {false && links[0] ? (
+          {links[0] ? (
             <div className="w-full">
               <div
                 className={`grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links.slice(0, showLinks).map((e, i) => (
-                  <LinkCard key={i} link={e} count={i} />
+                  <LinkCard key={i} link={e} count={i}/>
                 ))}
               </div>
             </div>
@@ -186,7 +186,8 @@ export default function Dashboard() {
                     <i className="bi-cloud-upload text-xl duration-100"></i>
                     <p>Import From</p>
                   </div>
-                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul
+                    className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                     <li>
                       <label
                         tabIndex={0}
@@ -259,7 +260,7 @@ export default function Dashboard() {
               >
                 {links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
+                  .map((e, i) => <LinkCard key={i} link={e} count={i}/>)
                   .slice(0, showLinks)}
               </div>
             </div>
@@ -281,7 +282,7 @@ export default function Dashboard() {
         </div>
       </div>
       {newLinkModal ? (
-        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+        <NewLinkModal onClose={() => setNewLinkModal(false)}/>
       ) : undefined}
     </MainLayout>
   );

pages/links/index.tsx

@@ -1,19 +1,13 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import NoLinksFound from "@/components/NoLinksFound";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { Sort } from "@/types/global";
 import React, { useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
-import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
 
 
@@ -44,17 +38,16 @@ export default function Links() {
           title={"All Links"}
           description={"Links from every Collections"}
         />
-        <div className="flex gap-3 justify-end">
+
-          <div className="relative mt-2">
+        <div className="mt-2 flex items-center justify-end gap-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
-          </div>
         </div>
 
         {links[0] ? (
-          <LinkComponent links={links} />
+          <LinkComponent links={links}/>
         ) : (
-          <NoLinksFound text="You Haven't Created Any Links Yet" />
+          <NoLinksFound text="You Haven't Created Any Links Yet"/>
         )}
       </div>
     </MainLayout>

pages/links/pinned.tsx

@@ -1,18 +1,12 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import { Sort } from "@/types/global";
 import React, { useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
-import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
 
 export default function PinnedLinks() {
@@ -42,14 +36,13 @@ export default function PinnedLinks() {
           title={"Pinned Links"}
           description={"Pinned Links from your Collections"}
         />
-        <div className="flex gap-3 justify-end">
+        <div className="mt-2 flex items-center justify-end gap-2">
-          <div className="relative mt-2">
+          <SortDropdown sortBy={sortBy} setSort={setSortBy}/>
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+          <ViewDropdown viewMode={viewMode} setViewMode={setViewMode}/>
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
         </div>
+
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links} />
+          <LinkComponent links={links}/>
         ) : (
           <div
             style={{ flex: "1 1 auto" }}

pages/search.tsx

@@ -1,18 +1,16 @@
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
-import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import React, { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
+import PageHeader from "@/components/PageHeader";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -56,19 +54,9 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
+        <PageHeader icon={'bi-search'} title={'Search Results'}/>
-          <div className="flex gap-3 items-center">
-            <div className="flex items-center gap-2">
-              <FontAwesomeIcon
-                icon={faSearch}
-                className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
-              />
-              <p className="sm:text-4xl text-3xl capitalize font-thin">
-                Search Results
-              </p>
-            </div>
-          </div>
 
+        <div className="flex gap-3 items-center justify-end">
           <div className="flex gap-2 items-center mt-2">
             <FilterSearchDropdown
               searchFilter={searchFilter}

pages/settings/account.tsx

@@ -1,10 +1,4 @@
 import { useState, useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faFileExport,
-  faFileImport,
-} from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
@@ -215,7 +209,9 @@ export default function Account() {
                   }
                   className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                 >
-                  <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+                  <i
+                    className="bi-x"
+                  ></i>
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -254,10 +250,9 @@ export default function Account() {
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  <FontAwesomeIcon
+                  <i
-                    icon={faFileImport}
+                    className="bi-cloud-upload text-xl duration-100"
-                    className="w-5 h-5 duration-100"
+                  ></i>
-                  />
                   <p>Import From</p>
                 </div>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -309,10 +304,9 @@ export default function Account() {
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
-                  <FontAwesomeIcon
+                  <i
-                    icon={faFileExport}
+                    className="bi-cloud-download text-xl duration-100"
-                    className="w-5 h-5 duration-100"
+                  ></i>
-                  />
                   <p>Export Data</p>
                 </div>
               </Link>

pages/settings/appearance.tsx

@@ -1,14 +1,9 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
-import SubmitButton from "@/components/SubmitButton";
 import React from "react";
-import Checkbox from "@/components/Checkbox";
-import LinkPreview from "@/components/LinkPreview";
 import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Appearance() {
@@ -72,28 +67,32 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                 localStorage.getItem("theme") === "dark"
                   ? "dark:outline-primary text-primary"
                   : "text-white"
               }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
-              <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+              <i
-              <p className="text-2xl">Dark Theme</p>
+                className="bi-moon text-6xl"
+              ></i>
+              <p className="ml-2 text-2xl">Dark</p>
 
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-28 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                 localStorage.getItem("theme") === "light"
                   ? "outline-primary text-primary"
                   : "text-black"
               }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
-              <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+              <i
-              <p className="text-2xl">Light Theme</p>
+                className="bi-sun text-6xl"
+              ></i>
+              <p className="ml-2 text-2xl">Light</p>
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
           </div>

pages/settings/delete.tsx

@@ -1,11 +1,9 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
@@ -59,10 +57,9 @@ export default function Delete() {
           href="/settings/account"
           className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <FontAwesomeIcon
+          <i
-            icon={faChevronLeft}
+            className="bi-chevron-left  text-neutral text-xl"
-            className="w-5 h-5 text-neutral"
+          ></i>
-          />
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">

pages/tags/[id].tsx

@@ -1,12 +1,4 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import useLinkStore from "@/store/links";
-import {
-  faCheck,
-  faEllipsis,
-  faHashtag,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -116,11 +108,9 @@ export default function Index() {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 items-center justify-between">
           <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-end font-thin">
+            <div className="flex gap-2 items-center font-thin">
-              <FontAwesomeIcon
+              <i className={'bi-hash text-primary text-3xl'}/>
-                icon={faHashtag}
+
-                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
-              />
               {renameTag ? (
                 <>
                   <form onSubmit={submit} className="flex items-center gap-2">
@@ -136,27 +126,19 @@ export default function Index() {
                       id="expand-dropdown"
                       className="btn btn-ghost btn-square btn-sm"
                     >
-                      <FontAwesomeIcon
+                      <i className={"bi-check text-neutral text-2xl"}></i>
-                        icon={faCheck}
-                        id="expand-dropdown"
-                        className="w-5 h-5 text-neutral"
-                      />
                     </div>
                     <div
-                      onClick={() => cancelUpdateTag()}
+                        onClick={() => cancelUpdateTag()}
-                      id="expand-dropdown"
-                      className="btn btn-ghost btn-square btn-sm"
-                    >
-                      <FontAwesomeIcon
-                        icon={faXmark}
                         id="expand-dropdown"
-                        className="w-5 h-5 text-neutral"
+                        className="btn btn-ghost btn-square btn-sm"
-                      />
+                    >
+                      <i className={"bi-x text-neutral text-2xl"}></i>
                     </div>
                   </form>
                 </>
               ) : (
-                <>
+                  <>
                   <p className="sm:text-4xl text-3xl capitalize">
                     {activeTag?.name}
                   </p>
@@ -169,15 +151,11 @@ export default function Index() {
                       }`}
                     >
                       <div
-                        tabIndex={0}
+                          tabIndex={0}
-                        role="button"
+                          role="button"
-                        className="btn btn-ghost btn-sm btn-square text-neutral"
+                          className="btn btn-ghost btn-sm btn-square text-neutral"
                       >
-                        <FontAwesomeIcon
+                        <i className={"bi-three-dots text-neutral text-2xl"}></i>
-                          icon={faEllipsis}
-                          title="More"
-                          className="w-5 h-5"
-                        />
                       </div>
                       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
                         <li>

yarn.lock

@@ -781,51 +781,6 @@
   dependencies:
     "@floating-ui/core" "^1.2.1"
 
-"@fortawesome/fontawesome-common-types@6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
-  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
-
-"@fortawesome/fontawesome-common-types@6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
-  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
-
-"@fortawesome/fontawesome-svg-core@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
-  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-brands-svg-icons@^6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
-  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.2"
-
-"@fortawesome/free-regular-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
-  integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-solid-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
-  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/react-fontawesome@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
-  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
-  dependencies:
-    prop-types "^15.8.1"
-
 "@headlessui/react@^1.7.15":
   version "1.7.15"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"