Merge pull request #295 from linkwarden/dev

Dev

.env.sample

@@ -8,6 +8,7 @@ PAGINATION_TAKE_COUNT=
 STORAGE_FOLDER=
 AUTOSCROLL_TIMEOUT=
 NEXT_PUBLIC_DISABLE_REGISTRATION=
+RE_ARCHIVE_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -20,14 +21,5 @@ NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
 
-# Stripe settings (You don't need these, it's for the cloud instance payments)
-NEXT_PUBLIC_STRIPE_IS_ACTIVE=
-STRIPE_SECRET_KEY=
-MONTHLY_PRICE_ID=
-YEARLY_PRICE_ID=
-NEXT_PUBLIC_TRIAL_PERIOD_DAYS=
-NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
-BASE_URL=http://localhost:3000
-
 # Docker postgres settings
 POSTGRES_PASSWORD=

.github/ISSUE_TEMPLATE/ask-a-question.md

@@ -0,0 +1,20 @@
+---
+name: Ask a Question
+about: Ask about a particular topic
+title: ''
+labels: question
+assignees: ''
+
+---
+
+**Is your question related to a problem or code? Please describe.**
+A clear and concise description of what the problem or code is. Ex. I'm confused about how [...] works, or I'm facing an issue when [...]
+
+**Describe what you've tried to solve this question**
+Explain what steps or research you've already taken to try and understand or solve this.
+
+**Include any code or screenshots (if applicable)**
+Add any code snippets, error messages, or screenshots that might help others understand your question better.
+
+**Additional context**
+Include any additional context or details that might help get a clearer understanding of your question.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,8 +1,8 @@
 ---
-name: Bug report
+name: Bug Report
 about: Create a report to help us improve
 title: ''
-labels: ''
+labels: bug
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,8 +1,8 @@
 ---
-name: Feature request
+name: Feature Request
 about: Suggest an idea for this project
 title: ''
-labels: ''
+labels: enhancement
 assignees: ''
 
 ---

Dockerfile

@@ -1,5 +1,4 @@
-# playwright doesnt support debian image
-FROM node:20-bullseye-slim
+FROM node:18.18-bullseye-slim
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -9,8 +8,10 @@ WORKDIR /data
 
 COPY ./package.json ./yarn.lock ./playwright.config.ts ./
 
-RUN yarn && \
-    npx playwright install-deps && \
+# Increase timeout to pass github actions arm64 build
+RUN yarn install --network-timeout 10000000
+
+RUN npx playwright install-deps && \
     apt-get clean && \
     yarn cache clean
 

README.md

@@ -37,22 +37,23 @@ We highly recommend that you don't use the old version because it is no longer m
 
 ## Features
 
-- 📸 Auto capture a screenshot and a PDF of each link.
-- 🏛️ Send your webpage to Wayback Machine archive.org for a snapshot.
+- 📸 Auto capture a screenshot, PDF, and readable view of each webpage.
+- 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot. (Optional)
 - 📂 Organize links by collection, name, description and multiple tags.
 - 👥 Collaborate on gathering links in a collection.
 - 🔐 Customize the permissions of each member.
 - 🌐 Share your collected links with the world.
 - 📌 Pin your favorite links to dashboard.
-- 🔍 Search, filter and sort by link details.
-- 📱 Responsive design and supports most browsers.
+- 🔍 Full text search, filter and sort for easy retrieval.
+- 📱 Responsive design and supports most modern browsers.
 - 🌓 Dark/Light mode support.
-- 🧩 Browser extension, managed by the community [check it out!](https://github.com/linkwarden/browser-extension)
+- 🧩 Browser extension, managed by the community. [Star it here!](https://github.com/linkwarden/browser-extension)
 - ⬇️ Import your bookmarks from other browsers.
+- ⚡️ Powerful API.
 
 ## Suggestions
 
-We usually go after the [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc). Feel free to open a [new issue](https://github.com/linkwarden/linkwarden/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) to suggest one - others might be interested too! :)
+We _usually_ go after the [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc). Feel free to open a [new issue](https://github.com/linkwarden/linkwarden/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) to suggest one - others might be interested too! :)
 
 ## Roadmap
 
@@ -96,7 +97,6 @@ Here are the other ways to support/cheer this project:
 
 - Starring this repository.
 - Joining us on [Discord](https://discord.com/invite/CtuYV47nuJ).
-- Following @daniel31x13 on [Mastodon](https://mastodon.social/@daniel31x13), [Twitter](https://twitter.com/daniel31x13) and [GitHub](https://github.com/daniel31x13).
 - Referring Linkwarden to a friend.
 
 If you did any of the above, Thanksss! Otherwise thanks.

components/AnnouncementBar.tsx

@@ -0,0 +1,35 @@
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+
+type Props = {
+  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
+};
+
+export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+  return (
+    <div className="fixed w-full z-20 dark:bg-neutral-900 bg-white">
+      <div className="w-full h-10 rainbow flex items-center justify-center">
+        <div className="w-fit font-semibold">
+          🎉️{" "}
+          <Link
+            href="https://blog.linkwarden.app/releases/v2.0"
+            target="_blank"
+            className="underline hover:opacity-50 duration-100"
+          >
+            Linkwarden v2.0
+          </Link>{" "}
+          is now out! 🥳️
+        </div>
+
+        <button
+          className="fixed top-3 right-3 hover:opacity-50 duration-100"
+          onClick={toggleAnnouncementBar}
+        >
+          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

components/Checkbox.tsx

@@ -11,7 +11,9 @@ type Props = {
 
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label className={`cursor-pointer flex items-center gap-2 ${className}`}>
+    <label
+      className={`cursor-pointer flex items-center gap-2 ${className || ""}`}
+    >
       <input
         type="checkbox"
         checked={state}
@@ -26,9 +28,7 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
         icon={faSquare}
         className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
-      <span className="text-black dark:text-white rounded select-none">
-        {label}
-      </span>
+      <span className="rounded select-none">{label}</span>
     </label>
   );
 }

components/ClickAwayHandler.tsx

@@ -4,6 +4,8 @@ type Props = {
   children: ReactNode;
   onClickOutside: Function;
   className?: string;
+  style?: React.CSSProperties;
+  onMount?: (rect: DOMRect) => void;
 };
 
 function useOutsideAlerter(
@@ -30,12 +32,22 @@ export default function ClickAwayHandler({
   children,
   onClickOutside,
   className,
+  style,
+  onMount,
 }: Props) {
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
   useOutsideAlerter(wrapperRef, onClickOutside);
 
+  useEffect(() => {
+    if (wrapperRef.current && onMount) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      onMount(rect); // Pass the bounding rectangle to the parent
+    }
+  }, []);
+
   return (
-    <div ref={wrapperRef} className={className}>
+    <div ref={wrapperRef} className={className} style={style}>
       {children}
     </div>
   );

components/CollectionCard.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faLink } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Dropdown from "./Dropdown";
@@ -15,6 +15,13 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
 
@@ -29,74 +36,86 @@ export default function CollectionCard({ collection, className }: Props) {
     }
   );
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const permissions = usePermissions(collection.id as number);
 
   return (
-    <div
-      style={{
-        backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
-          theme === "dark" ? "#262626" : "#f3f4f6"
-        } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
-      }}
-      className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
-    >
+    <>
       <div
-        onClick={() => setExpandDropdown(!expandDropdown)}
-        id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        style={{
+          backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
+            theme === "dark" ? "#262626" : "#f3f4f6"
+          } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+        }}
+        className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+          className || ""
+        }`}
       >
-        <FontAwesomeIcon
-          icon={faEllipsis}
+        <div
+          onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })}
           id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500 dark:text-gray-300"
-        />
-      </div>
-      <Link
-        href={`/collections/${collection.id}`}
-        className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
-      >
-        <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
-          {collection.name}
-        </p>
-        <div className="flex justify-between items-center">
-          <div className="flex items-center w-full">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <ProfilePhoto
-                    key={i}
-                    src={`/api/avatar/${e.userId}?${Date.now()}`}
-                    className="-mr-3 border-[3px]"
-                  />
-                );
-              })
-              .slice(0, 4)}
-            {collection.members.length - 4 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
-                +{collection.members.length - 4}
-              </div>
-            ) : null}
-          </div>
-          <div className="text-right w-40">
-            <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon
-                icon={faLink}
-                className="w-5 h-5 text-gray-500 dark:text-gray-300"
-              />
-              {collection._count && collection._count.links}
-            </div>
-            <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p className="font-bold text-xs">{formattedDate}</p>
-            </div>
-          </div>
+          className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+        >
+          <FontAwesomeIcon
+            icon={faEllipsis}
+            id={"expand-dropdown" + collection.id}
+            className="w-5 h-5 text-gray-500 dark:text-gray-300"
+          />
         </div>
-      </Link>
+        <Link
+          href={`/collections/${collection.id}`}
+          className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
+        >
+          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
+            {collection.name}
+          </p>
+          <div className="flex justify-between items-center">
+            <div className="flex items-center w-full">
+              {collection.members
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
+                .map((e, i) => {
+                  return (
+                    <ProfilePhoto
+                      key={i}
+                      src={e.user.image ? e.user.image : undefined}
+                      className="-mr-3 border-[3px]"
+                    />
+                  );
+                })
+                .slice(0, 4)}
+              {collection.members.length - 4 > 0 ? (
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                  +{collection.members.length - 4}
+                </div>
+              ) : null}
+            </div>
+            <div className="text-right w-40">
+              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+                {collection.isPublic ? (
+                  <FontAwesomeIcon
+                    icon={faGlobe}
+                    title="This collection is being shared publicly."
+                    className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                  />
+                ) : undefined}
+                <FontAwesomeIcon
+                  icon={faLink}
+                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
+                />
+                {collection._count && collection._count.links}
+              </div>
+              <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p className="font-bold text-xs">{formattedDate}</p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
       {expandDropdown ? (
         <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -152,9 +171,9 @@ export default function CollectionCard({ collection, className }: Props) {
             if (target.id !== "expand-dropdown" + collection.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-[3.2rem] right-5 z-10"
+          className="w-fit"
         />
       ) : null}
-    </div>
+    </>
   );
 }

components/DashboardItem.tsx

@@ -0,0 +1,29 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  name: string;
+  value: number;
+  icon: IconProp;
+};
+
+export default function dashboardItem({ name, value, icon }: Props) {
+  return (
+    <div className="flex gap-4 items-end">
+      <div className="p-4 bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+        <FontAwesomeIcon
+          icon={icon}
+          className="w-8 h-8 text-sky-500 dark:text-sky-500"
+        />
+      </div>
+      <div className="flex flex-col justify-center">
+        <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
+          {name}
+        </p>
+        <p className="font-thin text-6xl text-sky-500 dark:text-sky-500">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}

components/Dropdown.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, useEffect, useState } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 
 type MenuItem =
@@ -19,13 +19,66 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  points?: { x: number; y: number };
+  style?: React.CSSProperties;
 };
 
-export default function Dropdown({ onClickOutside, className, items }: Props) {
-  return (
+export default function Dropdown({
+  points,
+  onClickOutside,
+  className,
+  items,
+}: Props) {
+  const [pos, setPos] = useState<{ x: number; y: number }>();
+  const [dropdownHeight, setDropdownHeight] = useState<number>();
+  const [dropdownWidth, setDropdownWidth] = useState<number>();
+
+  function convertRemToPixels(rem: number) {
+    return (
+      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+    );
+  }
+
+  useEffect(() => {
+    if (points) {
+      let finalX = points.x;
+      let finalY = points.y;
+
+      // Check for x-axis overflow (left side)
+      if (dropdownWidth && points.x + dropdownWidth > window.innerWidth) {
+        finalX = points.x - dropdownWidth;
+      }
+
+      // Check for y-axis overflow (bottom side)
+      if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
+        finalY =
+          window.innerHeight -
+          (dropdownHeight + (window.innerHeight - points.y));
+      }
+
+      setPos({ x: finalX, y: finalY });
+    }
+  }, [points, dropdownHeight]);
+
+  return !points || pos ? (
     <ClickAwayHandler
+      onMount={(e) => {
+        setDropdownHeight(e.height);
+        setDropdownWidth(e.width);
+      }}
+      style={
+        points
+          ? {
+              position: "fixed",
+              top: `${pos?.y}px`,
+              left: `${pos?.x}px`,
+            }
+          : undefined
+      }
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+      className={`${
+        className || ""
+      } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
@@ -49,5 +102,5 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
         );
       })}
     </ClickAwayHandler>
-  );
+  ) : null;
 }

components/FilterSearchDropdown.tsx

@@ -1,12 +1,17 @@
 import React, { SetStateAction } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import Checkbox from "./Checkbox";
-import { LinkSearchFilter } from "@/types/global";
 
 type Props = {
   setFilterDropdown: (value: SetStateAction<boolean>) => void;
   setSearchFilter: Function;
-  searchFilter: LinkSearchFilter;
+  searchFilter: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    textContent: boolean;
+    tags: boolean;
+  };
 };
 
 export default function FilterSearchDropdown({
@@ -50,6 +55,16 @@ export default function FilterSearchDropdown({
             })
           }
         />
+        <Checkbox
+          label="Text Content"
+          state={searchFilter.textContent}
+          onClick={() =>
+            setSearchFilter({
+              ...searchFilter,
+              textContent: !searchFilter.textContent,
+            })
+          }
+        />
         <Checkbox
           label="Tags"
           state={searchFilter.tags}

components/InputSelect/styles.ts

@@ -36,10 +36,6 @@ export const styles: StylesConfig = {
     ...styles,
     cursor: "pointer",
   }),
-  clearIndicator: (styles) => ({
-    ...styles,
-    visibility: "hidden",
-  }),
   placeholder: (styles) => ({
     ...styles,
     borderColor: "black",

components/LinkCard.tsx

@@ -21,6 +21,7 @@ import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
 import Link from "next/link";
 import unescapeString from "@/lib/client/unescapeString";
+import { useRouter } from "next/router";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -28,12 +29,21 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function LinkCard({ link, count, className }: Props) {
   const { setModal } = useModalStore();
 
+  const router = useRouter();
+
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const { collections } = useCollectionStore();
 
@@ -64,7 +74,7 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections, links]);
 
-  const { removeLink, updateLink } = useLinkStore();
+  const { removeLink, updateLink, getLink } = useLinkStore();
 
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
@@ -84,10 +94,29 @@ export default function LinkCard({ link, count, className }: Props) {
       toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    setExpandDropdown(false);
+
+    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 deleteLink = async () => {
     const load = toast.loading("Deleting...");
 
-    const response = await removeLink(link);
+    const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
@@ -107,100 +136,100 @@ export default function LinkCard({ link, count, className }: Props) {
   );
 
   return (
-    <div
-      className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
-    >
-      {(permissions === true ||
-        permissions?.canUpdate ||
-        permissions?.canDelete) && (
-        <div
-          onClick={() => setExpandDropdown(!expandDropdown)}
-          id={"expand-dropdown" + link.id}
-          className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
-        >
-          <FontAwesomeIcon
-            icon={faEllipsis}
-            title="More"
-            className="w-5 h-5"
-            id={"expand-dropdown" + link.id}
-          />
-        </div>
-      )}
-
+    <>
       <div
-        onClick={() => {
-          setModal({
-            modal: "LINK",
-            state: true,
-            method: "UPDATE",
-            isOwnerOrMod:
-              permissions === true || (permissions?.canUpdate as boolean),
-            active: link,
-          });
-        }}
-        className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+          className || ""
+        }`}
       >
-        {url && (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="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";
+        {(permissions === true ||
+          permissions?.canUpdate ||
+          permissions?.canDelete) && (
+          <div
+            onClick={(e) => {
+              setExpandDropdown({ x: e.clientX, y: e.clientY });
             }}
-          />
+            id={"expand-dropdown" + link.id}
+            className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + link.id}
+            />
+          </div>
         )}
 
-        <div className="flex justify-between gap-5 w-full h-full z-0">
-          <div className="flex flex-col justify-between w-full">
-            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-gray-500 dark:text-gray-300">
-                {count + 1}
-              </p>
-              <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {unescapeString(link.name || link.description)}
-              </p>
-            </div>
-            <Link
-              href={`/collections/${link.collection.id}`}
-              onClick={(e) => {
-                e.stopPropagation();
+        <div
+          onClick={() => router.push("/links/" + link.id)}
+          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+        >
+          {url && account.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={`${
+                account.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";
               }}
-              className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon
-                icon={faFolder}
-                className="w-4 h-4 mt-1 drop-shadow"
-                style={{ color: collection?.color }}
-              />
-              <p className="text-black dark:text-white truncate capitalize w-full">
-                {collection?.name}
-              </p>
-            </Link>
-            <Link
-              href={link.url}
-              target="_blank"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </Link>
-            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
+            />
+          )}
+
+          <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-gray-500 dark:text-gray-300">
+                  {count + 1}
+                </p>
+                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                  {unescapeString(link.name || link.description)}
+                </p>
+              </div>
+              <Link
+                href={`/collections/${link.collection.id}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon
+                  icon={faFolder}
+                  className="w-4 h-4 mt-1 drop-shadow"
+                  style={{ color: collection?.color }}
+                />
+                <p className="text-black dark:text-white truncate capitalize w-full">
+                  {collection?.name}
+                </p>
+              </Link>
+              <Link
+                href={link.url}
+                target="_blank"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+                <p className="truncate w-full">{shortendURL}</p>
+              </Link>
+              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p>{formattedDate}</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       {expandDropdown ? (
         <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -219,15 +248,18 @@ export default function LinkCard({ link, count, className }: Props) {
                       modal: "LINK",
                       state: true,
                       method: "UPDATE",
-                      isOwnerOrMod:
-                        permissions === true || permissions?.canUpdate,
                       active: link,
-                      defaultIndex: 1,
                     });
                     setExpandDropdown(false);
                   },
                 }
               : undefined,
+            permissions === true
+              ? {
+                  name: "Refresh Formats",
+                  onClick: updateArchive,
+                }
+              : undefined,
             permissions === true || permissions?.canDelete
               ? {
                   name: "Delete",
@@ -240,9 +272,9 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-12 right-5 w-36"
+          className="w-40"
         />
       ) : null}
-    </div>
+    </>
   );
 }

components/LinkPreview.tsx

@@ -0,0 +1,112 @@
+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/client/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-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% 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-gray-500 dark:text-gray-300">{1}</p>
+                <p className="text-lg text-black dark:text-white 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-sky-400"
+                />
+                <p className="text-black dark:text-white 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-gray-500 dark:text-gray-300 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-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p>{formattedDate}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/LinkSidebar.tsx

@@ -0,0 +1,138 @@
+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 SettingsSidebar({ 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={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-sky-100 dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
+        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-gray-500 dark:text-gray-300"
+            />
+
+            <p className="text-black dark:text-white 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-gray-500 dark:text-gray-300"
+          />
+
+          <p className="text-black dark:text-white 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-gray-500 dark:text-gray-300"
+            />
+
+            <p className="text-black dark:text-white truncate w-full lg:hidden">
+              Delete
+            </p>
+          </div>
+        ) : undefined}
+      </div>
+    </div>
+  );
+}

components/Modal/Collection/CollectionInfo.tsx

@@ -6,7 +6,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,10 +60,7 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-sm text-black dark:text-white mb-2">
-            Name
-            <RequiredBadge />
-          </p>
+          <p className="text-black dark:text-white mb-2">Name</p>
           <div className="flex flex-col gap-3">
             <TextInput
               value={collection.name}
@@ -75,9 +71,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full text-black dark:text-white mb-2">
-                  Icon Color
-                </p>
+                <p className="w-full text-black dark:text-white mb-2">Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -102,7 +96,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-black dark:text-white mb-2">Description</p>
+          <p className="text-black dark:text-white mb-2">Description</p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."

components/Modal/Collection/TeamManagement.tsx

@@ -9,7 +9,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
-import { useSession } from "next-auth/react";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Checkbox from "../../Checkbox";
 import SubmitButton from "@/components/SubmitButton";
@@ -18,6 +17,7 @@ import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import TextInput from "@/components/TextInput";
+import useAccountStore from "@/store/account";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -34,31 +34,25 @@ export default function TeamManagement({
   collection,
   method,
 }: Props) {
+  const { account } = useAccountStore();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [member, setMember] = useState<Member>({
-    canCreate: false,
-    canUpdate: false,
-    canDelete: false,
-    user: {
-      name: "",
-      username: "",
-    },
-  });
+  const [memberUsername, setMemberUsername] = useState("");
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null,
     name: "",
     username: "",
+    image: "",
   });
 
   useEffect(() => {
     const fetchOwner = async () => {
-      const owner = await getPublicUserData({ id: collection.ownerId });
+      const owner = await getPublicUserData(collection.ownerId as number);
       setCollectionOwner(owner);
     };
 
@@ -67,8 +61,6 @@ export default function TeamManagement({
 
   const { addCollection, updateCollection } = useCollectionStore();
 
-  const session = useSession();
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -77,15 +69,7 @@ export default function TeamManagement({
       members: [...collection.members, newMember],
     });
 
-    setMember({
-      canCreate: false,
-      canUpdate: false,
-      canDelete: false,
-      user: {
-        name: "",
-        username: "",
-      },
-    });
+    setMemberUsername("");
   };
 
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -118,7 +102,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-sm text-black dark:text-white">Make Public</p>
+          <p className="text-black dark:text-white">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -136,7 +120,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-black dark:text-white mb-2">
+          <p className="text-black dark:text-white mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -162,25 +146,18 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-black dark:text-white">
-            Member Management
-          </p>
+          <p className="text-black dark:text-white">Member Management</p>
 
           <div className="flex items-center gap-2">
             <TextInput
-              value={member.user.username || ""}
+              value={memberUsername || ""}
               placeholder="Username (without the '@')"
-              onChange={(e) => {
-                setMember({
-                  ...member,
-                  user: { ...member.user, username: e.target.value },
-                });
-              }}
+              onChange={(e) => setMemberUsername(e.target.value)}
               onKeyDown={(e) =>
                 e.key === "Enter" &&
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
@@ -190,8 +167,8 @@ export default function TeamManagement({
             <div
               onClick={() =>
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
@@ -238,7 +215,7 @@ export default function TeamManagement({
                     )}
                     <div className="flex items-center gap-2">
                       <ProfilePhoto
-                        src={`/api/avatar/${e.userId}?${Date.now()}`}
+                        src={e.user.image ? e.user.image : undefined}
                         className="border-[3px]"
                       />
                       <div>
@@ -425,7 +402,7 @@ export default function TeamManagement({
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
-            src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
+            src={collectionOwner.image ? collectionOwner.image : undefined}
             className="border-[3px]"
           />
           <div>

components/Modal/Link/AddOrEditLink.tsx

@@ -4,8 +4,7 @@ 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 { faPlus } from "@fortawesome/free-solid-svg-icons";
-import RequiredBadge from "../../RequiredBadge";
+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";
@@ -14,6 +13,7 @@ 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 =
   | {
@@ -46,6 +46,10 @@ export default function AddOrEditLink({
       url: "",
       description: "",
       tags: [],
+      screenshotPath: "",
+      pdfPath: "",
+      readabilityPath: "",
+      textContent: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
@@ -133,24 +137,21 @@ export default function AddOrEditLink({
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
-        <p
-          className="text-gray-500 dark:text-gray-300 text-center truncate w-full"
+        <div
+          className="text-gray-500 dark:text-gray-300 break-all w-full flex gap-2"
           title={link.url}
         >
-          Editing:{" "}
-          <Link href={link.url} target="_blank">
+          <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
+          <Link href={link.url} target="_blank" className="w-full">
             {link.url}
           </Link>
-        </p>
+        </div>
       ) : null}
 
       {method === "CREATE" ? (
         <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
           <div className="sm:col-span-3 col-span-5">
-            <p className="text-sm text-black dark:text-white mb-2 font-bold">
-              Address (URL)
-              <RequiredBadge />
-            </p>
+            <p className="text-black dark:text-white mb-2">Address (URL)</p>
             <TextInput
               value={link.url}
               onChange={(e) => setLink({ ...link, url: e.target.value })}
@@ -158,9 +159,7 @@ export default function AddOrEditLink({
             />
           </div>
           <div className="sm:col-span-2 col-span-5">
-            <p className="text-sm text-black dark:text-white mb-2">
-              Collection
-            </p>
+            <p className="text-black dark:text-white mb-2">Collection</p>
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
@@ -187,10 +186,10 @@ export default function AddOrEditLink({
 
       {optionsExpanded ? (
         <div>
-          <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+          {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-              <p className="text-sm text-black dark:text-white mb-2">Name</p>
+              <p className="text-black dark:text-white mb-2">Name</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -200,9 +199,7 @@ export default function AddOrEditLink({
 
             {method === "UPDATE" ? (
               <div>
-                <p className="text-sm text-black dark:text-white mb-2">
-                  Collection
-                </p>
+                <p className="text-black dark:text-white mb-2">Collection</p>
                 {link.collection.name ? (
                   <CollectionSelection
                     onChange={setCollection}
@@ -223,7 +220,7 @@ export default function AddOrEditLink({
             ) : undefined}
 
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">Tags</p>
+              <p className="text-black dark:text-white mb-2">Tags</p>
               <TagSelection
                 onChange={setTags}
                 defaultValue={link.tags.map((e) => {
@@ -233,9 +230,7 @@ export default function AddOrEditLink({
             </div>
 
             <div className="sm:col-span-2">
-              <p className="text-sm text-black dark:text-white mb-2">
-                Description
-              </p>
+              <p className="text-black dark:text-white mb-2">Description</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>
@@ -253,14 +248,14 @@ export default function AddOrEditLink({
         </div>
       ) : undefined}
 
-      <div className="flex justify-between items-center mt-2">
+      <div className="flex justify-between items-stretch mt-2">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`${
             method === "UPDATE" ? "hidden" : ""
-          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-1 px-2 w-fit text-sm`}
+          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          {optionsExpanded ? "Hide" : "More"} Options
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>
 
         <SubmitButton

components/Modal/Link/LinkDetails.tsx

@@ -1,326 +0,0 @@
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import Image from "next/image";
-import ColorThief, { RGBColor } from "colorthief";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faBoxArchive,
-  faCloudArrowDown,
-  faFolder,
-  faGlobe,
-} from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import {
-  faCalendarDays,
-  faFileImage,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/client/isValidUrl";
-import { useTheme } from "next-themes";
-import unescapeString from "@/lib/client/unescapeString";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  isOwnerOrMod: boolean;
-};
-
-export default function LinkDetails({ link, isOwnerOrMod }: Props) {
-  const { theme } = useTheme();
-
-  const [imageError, setImageError] = useState<boolean>(false);
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  const { collections } = useCollectionStore();
-
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-
-  useEffect(() => {
-    setCollection(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-  }, [collections]);
-
-  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
-
-  const colorThief = new ColorThief();
-
-  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  const rgbToHex = (r: number, g: number, b: number): string =>
-    "#" +
-    [r, g, b]
-      .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      })
-      .join("");
-
-  useEffect(() => {
-    const banner = document.getElementById("link-banner");
-    const bannerInner = document.getElementById("link-banner-inner");
-
-    if (colorPalette && banner && bannerInner) {
-      if (colorPalette[0] && colorPalette[1]) {
-        banner.style.background = `linear-gradient(to right, ${rgbToHex(
-          colorPalette[0][0],
-          colorPalette[0][1],
-          colorPalette[0][2]
-        )}, ${rgbToHex(
-          colorPalette[1][0],
-          colorPalette[1][1],
-          colorPalette[1][2]
-        )})`;
-      }
-
-      if (colorPalette[2] && colorPalette[3]) {
-        bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
-          colorPalette[2][0],
-          colorPalette[2][1],
-          colorPalette[2][2]
-        )}, ${rgbToHex(
-          colorPalette[3][0],
-          colorPalette[3][1],
-          colorPalette[3][2]
-        )})`;
-      }
-    }
-  }, [colorPalette, theme]);
-
-  const handleDownload = (format: "png" | "pdf") => {
-    const path = `/api/archives/${link.collection.id}/${link.id}.${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 === "pdf" ? "PDF" : "Screenshot";
-          link.click();
-        } else {
-          console.error("Failed to download file");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  };
-
-  return (
-    <div
-      className={`flex flex-col gap-3 sm:w-[35rem] w-80 ${
-        isOwnerOrMod ? "" : "mt-12"
-      } ${theme === "dark" ? "banner-dark-mode" : "banner-light-mode"}`}
-    >
-      {!imageError && (
-        <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
-          <div id="link-banner-inner" className="link-banner-inner"></div>
-        </div>
-      )}
-      <div
-        className={`relative flex gap-5 items-start ${!imageError && "-mt-24"}`}
-      >
-        {!imageError && url && (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-            width={42}
-            height={42}
-            alt=""
-            id={"favicon-" + link.id}
-            className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
-            draggable="false"
-            onLoad={(e) => {
-              try {
-                const color = colorThief.getPalette(
-                  e.target as HTMLImageElement,
-                  4
-                );
-
-                setColorPalette(color);
-              } catch (err) {
-                console.log(err);
-              }
-            }}
-            onError={(e) => {
-              setImageError(true);
-            }}
-          />
-        )}
-        <div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
-          <p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
-            {unescapeString(link.name)}
-          </p>
-          <Link
-            href={link.url}
-            target="_blank"
-            className={`${
-              link.name ? "text-sm" : "text-xl"
-            } text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
-          >
-            {url ? url.host : link.url}
-          </Link>
-        </div>
-      </div>
-      <div className="flex gap-1 items-center flex-wrap">
-        <Link
-          href={`/collections/${link.collection.id}`}
-          className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className="w-5 h-5 drop-shadow"
-            style={{ color: collection?.color }}
-          />
-          <p
-            title={collection?.name}
-            className="text-black dark:text-white text-lg truncate max-w-[12rem]"
-          >
-            {collection?.name}
-          </p>
-        </Link>
-        {link.tags.map((e, i) => (
-          <Link key={i} href={`/tags/${e.id}`} className="z-10">
-            <p
-              title={e.name}
-              className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
-            >
-              {e.name}
-            </p>
-          </Link>
-        ))}
-      </div>
-      {link.description && (
-        <>
-          <div className="text-black dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
-            {unescapeString(link.description)}
-          </div>
-        </>
-      )}
-
-      <div className="flex justify-between items-center">
-        <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-          <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
-          <p>Archived Formats:</p>
-        </div>
-        <div
-          className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
-          title={"Created at: " + formattedDate}
-        >
-          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-          <p>{formattedDate}</p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">Screenshot</p>
-          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
-            <div
-              onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
-
-            <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-500"
-              />
-            </Link>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">PDF</p>
-          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
-            <div
-              onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
-
-            <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
-              target="_blank"
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-500"
-              />
-            </Link>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faGlobe} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">
-              Latest archive.org Snapshot
-            </p>
-          </div>
-
-          <Link
-            href={`https://web.archive.org/web/${link.url.replace(
-              /(^\w+:|^)\/\//,
-              ""
-            )}`}
-            target="_blank"
-            className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-          >
-            <FontAwesomeIcon
-              icon={faArrowUpRightFromSquare}
-              className="w-5 h-5 text-sky-500 dark:text-sky-500"
-            />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

components/Modal/Link/PreservedFormats.tsx

@@ -0,0 +1,195 @@
+import { LinkIncludingShortenedCollectionAndTags } 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";
+import { useSession } from "next-auth/react";
+
+export default function PreservedFormats() {
+  const session = useSession();
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timer | undefined;
+    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+      interval = setInterval(() => getLink(link.id as number), 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
+
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link?.id as number);
+    } else toast.error(data.response);
+  };
+
+  const handleDownload = (format: "png" | "pdf") => {
+    const path = `/api/v1/archives/${link?.collection.id}/${link?.id}.${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 === "pdf" ? "PDF" : "Screenshot";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <div className={`flex flex-col gap-3 sm:w-[35rem] w-80 pt-3`}>
+      {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">Screenshot</p>
+          </div>
+
+          <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("png")}
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
+              target="_blank"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </Link>
+          </div>
+        </div>
+      ) : undefined}
+
+      {link?.pdfPath && link.pdfPath !== "pending" ? (
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">PDF</p>
+          </div>
+
+          <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("pdf")}
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            <Link
+              href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
+              target="_blank"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </Link>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex flex-col-reverse sm:flex-row gap-5 items-center justify-center">
+        {link?.collection.ownerId === session.data?.user.id ? (
+          <div
+            className={`w-full text-center bg-sky-700 p-1 rounded-md cursor-pointer select-none hover:bg-sky-600 duration-100 ${
+              link?.pdfPath &&
+              link?.screenshotPath &&
+              link?.pdfPath !== "pending" &&
+              link?.screenshotPath !== "pending"
+                ? "mt-3"
+                : ""
+            }`}
+            onClick={() => updateArchive()}
+          >
+            <p>Update Preserved Formats</p>
+            <p className="text-xs">(Refresh Formats)</p>
+          </div>
+        ) : undefined}
+        <Link
+          href={`https://web.archive.org/web/${link?.url.replace(
+            /(^\w+:|^)\/\//,
+            ""
+          )}`}
+          target="_blank"
+          className={`text-gray-500 dark:text-gray-300 duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm ${
+            link?.pdfPath &&
+            link?.screenshotPath &&
+            link?.pdfPath !== "pending" &&
+            link?.screenshotPath !== "pending"
+              ? "sm:mt-3"
+              : ""
+          }`}
+        >
+          <FontAwesomeIcon
+            icon={faArrowUpRightFromSquare}
+            className="w-4 h-4"
+          />
+          <p className="whitespace-nowrap">
+            View Latest Snapshot on archive.org
+          </p>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/Modal/Link/index.tsx

@@ -1,89 +1,63 @@
-import { Tab } from "@headlessui/react";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import AddOrEditLink from "./AddOrEditLink";
-import LinkDetails from "./LinkDetails";
+import PreservedFormats from "./PreservedFormats";
 
 type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
-      isOwnerOrMod?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
       className?: string;
     }
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
-      isOwnerOrMod: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
+      className?: string;
+    }
+  | {
+      toggleLinkModal: Function;
+      method: "FORMATS";
+      activeLink: LinkIncludingShortenedCollectionAndTags;
       className?: string;
     };
 
 export default function LinkModal({
   className,
-  defaultIndex,
   toggleLinkModal,
-  isOwnerOrMod,
   activeLink,
   method,
 }: Props) {
   return (
     <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        {method === "CREATE" && (
-          <p className="text-xl text-black dark:text-white text-center">
-            New Link
+      {method === "CREATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Create a New Link
           </p>
-        )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          {method === "UPDATE" && isOwnerOrMod && (
-            <>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-                }
-              >
-                Link Details
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-                }
-              >
-                Edit Link
-              </Tab>
-            </>
-          )}
-        </Tab.List>
-        <Tab.Panels>
-          {activeLink && method === "UPDATE" && (
-            <Tab.Panel>
-              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
-            </Tab.Panel>
-          )}
+          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
+        </>
+      ) : undefined}
 
-          <Tab.Panel>
-            {activeLink && method === "UPDATE" ? (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="UPDATE"
-                activeLink={activeLink}
-              />
-            ) : (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="CREATE"
-              />
-            )}
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+      {activeLink && method === "UPDATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
+          <AddOrEditLink
+            toggleLinkModal={toggleLinkModal}
+            method="UPDATE"
+            activeLink={activeLink}
+          />
+        </>
+      ) : undefined}
+
+      {method === "FORMATS" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Preserved Formats
+          </p>
+          <PreservedFormats />
+        </>
+      ) : undefined}
     </div>
   );
 }

components/Modal/index.tsx

@@ -14,7 +14,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`m-auto ${className}`}
+        className={`m-auto ${className || ""}`}
       >
         <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div

components/ModalManagement.tsx

@@ -27,8 +27,6 @@ export default function ModalManagement() {
         <LinkModal
           toggleLinkModal={toggleModal}
           method={modal.method}
-          isOwnerOrMod={modal.isOwnerOrMod as boolean}
-          defaultIndex={modal.defaultIndex}
           activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
         />
       </Modal>

components/Navbar.tsx

@@ -11,6 +11,7 @@ import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
 import { useTheme } from "next-themes";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -33,7 +34,11 @@ export default function Navbar() {
 
   const [sidebar, setSidebar] = useState(false);
 
-  window.addEventListener("resize", () => setSidebar(false));
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
 
   useEffect(() => {
     setSidebar(false);
@@ -78,7 +83,7 @@ export default function Navbar() {
             id="profile-dropdown"
           >
             <ProfilePhoto
-              src={account.profilePic}
+              src={account.image ? account.image : undefined}
               priority={true}
               className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />

components/NoLinksFound.tsx

@@ -11,7 +11,7 @@ export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+    <div className="w-full h-full flex flex-col justify-center p-10">
       <p className="text-center text-2xl text-black dark:text-white">
         {text || "You haven't created any Links Here"}
       </p>

components/ProfilePhoto.tsx

@@ -2,51 +2,45 @@ import React, { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
-import avatarExists from "@/lib/client/avatarExists";
 
 type Props = {
-  src: string;
+  src?: string;
   className?: string;
   emptyImage?: boolean;
-  status?: Function;
   priority?: boolean;
 };
 
-export default function ProfilePhoto({
-  src,
-  className,
-  emptyImage,
-  status,
-  priority,
-}: Props) {
-  const [error, setError] = useState<boolean>(emptyImage || true);
-
-  const checkAvatarExistence = async () => {
-    const canPass = await avatarExists(src);
-
-    setError(!canPass);
-  };
+export default function ProfilePhoto({ src, className, priority }: Props) {
+  const [image, setImage] = useState("");
 
   useEffect(() => {
-    if (src) checkAvatarExistence();
+    if (src && !src?.includes("base64"))
+      setImage(`/api/v1/${src.replace("uploads/", "").replace(".jpg", "")}`);
+    else if (!src) setImage("");
+    else {
+      setImage(src);
+    }
+  }, [src]);
 
-    status && status(error || !src);
-  }, [src, error]);
-
-  return error || !src ? (
+  return !image ? (
     <div
-      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
+        className || ""
+      }`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
   ) : (
     <Image
       alt=""
-      src={src}
+      src={image}
       height={112}
       width={112}
       priority={priority}
-      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
+      draggable={false}
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+        className || ""
+      }`}
     />
   );
 }

components/Search.tsx

@@ -41,7 +41,7 @@ export default function Search() {
         }}
         onKeyDown={(e) =>
           e.key === "Enter" &&
-          router.push("/search/" + encodeURIComponent(searchQuery))
+          router.push("/search?q=" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
         className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"

components/SettingsSidebar.tsx

@@ -20,6 +20,8 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
+  const LINKWARDEN_VERSION = "v2.2.0";
+
   const { collections } = useCollectionStore();
 
   const router = useRouter();
@@ -32,16 +34,18 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+        className || ""
+      }`}
     >
       <div className="flex flex-col gap-1">
         <Link href="/settings/account">
           <div
             className={`${
               active === `/settings/account`
-                ? "bg-sky-200 dark:bg-sky-800"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faUser}
@@ -58,9 +62,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/appearance`
-                ? "bg-sky-200 dark:bg-sky-800"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faPalette}
@@ -77,9 +81,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/archive`
-                ? "bg-sky-200 dark:bg-sky-800"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faBoxArchive}
@@ -96,9 +100,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/password`
-                ? "bg-sky-200 dark:bg-sky-800"
-                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faKey}
@@ -111,14 +115,14 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+        {process.env.NEXT_PUBLIC_STRIPE ? (
           <Link href="/settings/billing">
             <div
               className={`${
                 active === `/settings/billing`
-                  ? "bg-sky-200 dark:bg-sky-800"
-                  : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-              } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                  ? "bg-sky-500"
+                  : "hover:bg-slate-500"
+              } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
               <FontAwesomeIcon
                 icon={faCreditCard}
@@ -134,9 +138,16 @@ export default function SettingsSidebar({ className }: { className?: string }) {
       </div>
 
       <div className="flex flex-col gap-1">
+        <Link
+          href={`https://github.com/linkwarden/linkwarden/releases/tag/${LINKWARDEN_VERSION}`}
+          target="_blank"
+          className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
+        >
+          Linkwarden {LINKWARDEN_VERSION}
+        </Link>
         <Link href="https://docs.linkwarden.app" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faCircleQuestion as any}
@@ -151,7 +162,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faGithub as any}
@@ -166,7 +177,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faXTwitter as any}
@@ -181,7 +192,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <Link href="https://fosstodon.org/@linkwarden" target="_blank">
           <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faMastodon as any}

components/Sidebar.tsx

@@ -6,6 +6,8 @@ import {
   faChartSimple,
   faChevronDown,
   faLink,
+  faGlobe,
+  faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
@@ -50,61 +52,73 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
+        className || ""
+      }`}
     >
-      <div className="flex justify-center gap-2 mt-2">
-        <Link
-          href="/dashboard"
-          className={`${
-            active === "/dashboard"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
-
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Dashboard
-          </p>
+      <div className="flex flex-col gap-2 mt-2">
+        <Link href={`/dashboard`}>
+          <div
+            className={`${
+              active === `/dashboard` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faChartSimple}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Dashboard
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/links"
-          className={`${
-            active === "/links"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
-
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Links
-          </p>
+        <Link href={`/links`}>
+          <div
+            className={`${
+              active === `/links` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faLink}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Links
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/collections"
-          className={`${
-            active === "/collections"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
+        <Link href={`/collections`}>
+          <div
+            className={`${
+              active === `/collections` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faFolder}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Collections
+            </p>
+          </div>
+        </Link>
 
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Collections
-          </p>
+        <Link href={`/links/pinned`}>
+          <div
+            className={`${
+              active === `/links/pinned` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Pinned Links
+            </p>
+          </div>
         </Link>
       </div>
 
@@ -142,19 +156,26 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
                           icon={faFolder}
                           className="w-6 h-6 drop-shadow"
                           style={{ color: e.color }}
                         />
-
-                        <p className="text-black dark:text-white truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full">
                           {e.name}
                         </p>
+
+                        {e.isPublic ? (
+                          <FontAwesomeIcon
+                            icon={faGlobe}
+                            title="This collection is being shared publicly."
+                            className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                          />
+                        ) : undefined}
                       </div>
                     </Link>
                   );
@@ -202,9 +223,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}

components/SortDropdown.tsx

@@ -21,7 +21,7 @@ export default function SortDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
     >
       <p className="mb-2 text-black dark:text-white text-center font-semibold">
         Sort by

components/SubmitButton.tsx

@@ -2,11 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type Props = {
-  onClick: Function;
+  onClick?: Function;
   icon?: IconProp;
   label: string;
   loading: boolean;
   className?: string;
+  type?: "button" | "submit" | "reset" | undefined;
 };
 
 export default function SubmitButton({
@@ -15,20 +16,22 @@ export default function SubmitButton({
   label,
   loading,
   className,
+  type,
 }: Props) {
   return (
-    <div
+    <button
+      type={type ? type : undefined}
       className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
         loading
           ? "bg-sky-600 cursor-auto"
           : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className}`}
+      } ${className || ""}`}
       onClick={() => {
-        if (!loading) onClick();
+        if (!loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5 select-none" />}
-      <p className="text-center w-full select-none">{label}</p>
-    </div>
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="text-center w-full">{label}</p>
+    </button>
   );
 }

components/TextInput.tsx

@@ -27,7 +27,9 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${className}`}
+      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
+        className || ""
+      }`}
     />
   );
 }

hooks/useInitialData.tsx

@@ -2,7 +2,6 @@ import useCollectionStore from "@/store/collections";
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagStore from "@/store/tags";
-import useLinkStore from "@/store/links";
 import useAccountStore from "@/store/account";
 
 export default function useInitialData() {
@@ -10,17 +9,21 @@ export default function useInitialData() {
   const { setCollections } = useCollectionStore();
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
-  const { setAccount } = useAccountStore();
+  const { account, setAccount } = useAccountStore();
 
+  // Get account info
   useEffect(() => {
-    if (
-      status === "authenticated" &&
-      (!process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE || data.user.isSubscriber)
-    ) {
+    if (status === "authenticated") {
+      setAccount(data?.user.id as number);
+    }
+  }, [status, data]);
+
+  // Get the rest of the data
+  useEffect(() => {
+    if (account.id && (!process.env.NEXT_PUBLIC_STRIPE || account.username)) {
       setCollections();
       setTags();
       // setLinks();
-      setAccount(data.user.id);
     }
-  }, [status]);
+  }, [account]);
 }

hooks/useLinks.tsx

@@ -7,11 +7,15 @@ import useLinkStore from "@/store/links";
 export default function useLinks(
   {
     sort,
-    searchFilter,
-    searchQuery,
-    pinnedOnly,
     collectionId,
     tagId,
+    pinnedOnly,
+    searchQueryString,
+    searchByName,
+    searchByUrl,
+    searchByDescription,
+    searchByTags,
+    searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
   const { links, setLinks, resetLinks } = useLinkStore();
@@ -20,20 +24,38 @@ export default function useLinks(
   const { reachedBottom, setReachedBottom } = useDetectPageBottom();
 
   const getLinks = async (isInitialCall: boolean, cursor?: number) => {
-    const requestBody: LinkRequestQuery = {
-      cursor,
+    const params = {
       sort,
-      searchFilter,
-      searchQuery,
-      pinnedOnly,
+      cursor,
       collectionId,
       tagId,
+      pinnedOnly,
+      searchQueryString,
+      searchByName,
+      searchByUrl,
+      searchByDescription,
+      searchByTags,
+      searchByTextContent,
     };
 
-    const encodedData = encodeURIComponent(JSON.stringify(requestBody));
+    const buildQueryString = (params: LinkRequestQuery) => {
+      return Object.keys(params)
+        .filter((key) => params[key as keyof LinkRequestQuery] !== undefined)
+        .map(
+          (key) =>
+            `${encodeURIComponent(key)}=${encodeURIComponent(
+              params[key as keyof LinkRequestQuery] as string
+            )}`
+        )
+        .join("&");
+    };
+
+    const queryString = buildQueryString(params);
 
     const response = await fetch(
-      `/api/links?body=${encodeURIComponent(encodedData)}`
+      `/api/v1/${
+        router.asPath === "/dashboard" ? "dashboard" : "links"
+      }?${queryString}`
     );
 
     const data = await response.json();
@@ -45,7 +67,16 @@ export default function useLinks(
     resetLinks();
 
     getLinks(true);
-  }, [router, sort, searchFilter]);
+  }, [
+    router,
+    sort,
+    searchQueryString,
+    searchByName,
+    searchByUrl,
+    searchByDescription,
+    searchByTextContent,
+    searchByTags,
+  ]);
 
   useEffect(() => {
     if (reachedBottom) getLinks(false, links?.at(-1)?.id);

hooks/useRedirect.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-
-export default function useRedirect() {
-  const router = useRouter();
-  const { status } = useSession();
-  const [redirect, setRedirect] = useState(true);
-
-  useEffect(() => {
-    if (
-      status === "authenticated" &&
-      (router.pathname === "/login" || router.pathname === "/register")
-    ) {
-      router.push("/").then(() => {
-        setRedirect(false);
-      });
-    } else if (
-      status === "unauthenticated" &&
-      !(router.pathname === "/login" || router.pathname === "/register")
-    ) {
-      router.push("/login").then(() => {
-        setRedirect(false);
-      });
-    } else if (status === "loading") setRedirect(true);
-    else setRedirect(false);
-  }, [status]);
-
-  return redirect;
-}

hooks/useWindowDimensions.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+
+export default function useWindowDimensions() {
+  const [dimensions, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return dimensions;
+}

layouts/AuthRedirect.tsx

@@ -4,6 +4,7 @@ import Loader from "../components/Loader";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import useInitialData from "@/hooks/useInitialData";
+import useAccountStore from "@/store/account";
 
 interface Props {
   children: ReactNode;
@@ -13,40 +14,49 @@ export default function AuthRedirect({ children }: Props) {
   const router = useRouter();
   const { status, data } = useSession();
   const [redirect, setRedirect] = useState(true);
+  const { account } = useAccountStore();
 
-  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+  const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
   useInitialData();
 
   useEffect(() => {
     if (!router.pathname.startsWith("/public")) {
       if (
+        status === "authenticated" &&
+        account.id &&
+        !account.subscription?.active &&
+        stripeEnabled
+      ) {
+        router.push("/subscribe").then(() => {
+          setRedirect(false);
+        });
+      }
+      // Redirect to "/choose-username" if user is authenticated and is either a subscriber OR subscription is undefiend, and doesn't have a username
+      else if (
         emailEnabled &&
         status === "authenticated" &&
-        (data.user.isSubscriber === true ||
-          data.user.isSubscriber === undefined) &&
-        !data.user.username
+        account.subscription?.active &&
+        stripeEnabled &&
+        account.id &&
+        !account.username
       ) {
         router.push("/choose-username").then(() => {
           setRedirect(false);
         });
       } else if (
         status === "authenticated" &&
-        data.user.isSubscriber === false
-      ) {
-        router.push("/subscribe").then(() => {
-          setRedirect(false);
-        });
-      } else if (
-        status === "authenticated" &&
+        account.id &&
         (router.pathname === "/login" ||
           router.pathname === "/register" ||
           router.pathname === "/confirmation" ||
           router.pathname === "/subscribe" ||
           router.pathname === "/choose-username" ||
-          router.pathname === "/forgot")
+          router.pathname === "/forgot" ||
+          router.pathname === "/")
       ) {
-        router.push("/").then(() => {
+        router.push("/dashboard").then(() => {
           setRedirect(false);
         });
       } else if (
@@ -66,7 +76,7 @@ export default function AuthRedirect({ children }: Props) {
     } else {
       setRedirect(false);
     }
-  }, [status]);
+  }, [status, account, router.pathname]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
   else return <></>;

layouts/CenteredForm.tsx

@@ -10,10 +10,20 @@ interface Props {
 
 export default function CenteredForm({ text, children }: Props) {
   const { theme } = useTheme();
+
   return (
     <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
-      <div className="m-auto flex flex-col gap-2">
-        {theme === "dark" ? (
+      <div className="m-auto flex flex-col gap-2 w-full">
+        {theme ? (
+          <Image
+            src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`}
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : undefined}
+        {/* {theme === "dark" ? (
           <Image
             src="/linkwarden_dark.png"
             width={640}
@@ -29,9 +39,9 @@ export default function CenteredForm({ text, children }: Props) {
             alt="Linkwarden"
             className="h-12 w-fit mx-auto"
           />
-        )}
+        )} */}
         {text ? (
-          <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black dark:text-white px-2 text-center">
+          <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold text-black dark:text-white px-2 text-center">
             {text}
           </p>
         ) : undefined}

layouts/LinkLayout.tsx

@@ -0,0 +1,195 @@
+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 { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+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";
+
+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) 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 (
+    <>
+      <ModalManagement />
+
+      <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-5 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-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+            </div> */}
+
+            <div
+              onClick={() => router.push(`/collections/${linkCollection?.id}`)}
+              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
+              Back{" "}
+              <span className="hidden sm:inline-block">
+                to <span className="capitalize">{linkCollection?.name}</span>
+              </span>
+            </div>
+
+            <div className="lg:hidden">
+              <div className="flex 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;
+                    }}
+                    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-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+
+                <div
+                  onClick={() => {
+                    link
+                      ? setModal({
+                          modal: "LINK",
+                          state: true,
+                          active: link,
+                          method: "FORMATS",
+                        })
+                      : undefined;
+                  }}
+                  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-gray-500 dark:text-gray-300"
+                  />
+                </div>
+
+                {link?.collection.ownerId === userId ||
+                linkCollection?.members.some(
+                  (e) => e.userId === userId && e.canDelete
+                ) ? (
+                  <div
+                    onClick={() => {
+                      if (link?.id) {
+                        removeLink(link.id);
+                        router.back();
+                      }
+                    }}
+                    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-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+              </div>
+            </div>
+          </div>
+
+          {children}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 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>
+      </div>
+    </>
+  );
+}

layouts/MainLayout.tsx

@@ -1,8 +1,10 @@
 import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
+import getLatestVersion from "@/lib/client/getLatestVersion";
 
 interface Props {
   children: ReactNode;
@@ -17,16 +19,49 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
+
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
+
+  useEffect(() => {
+    if (showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "true");
+      setShowAnnouncement(true);
+    } else if (!showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "false");
+      setShowAnnouncement(false);
+    }
+  }, [showAnnouncement]);
+
+  const toggleAnnouncementBar = () => {
+    setShowAnnouncement(!showAnnouncement);
+  };
+
   return (
     <>
       <ModalManagement />
 
+      {showAnnouncement ? (
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+      ) : undefined}
+
       <div className="flex">
         <div className="hidden lg:block">
-          <Sidebar className="fixed top-0" />
+          <Sidebar
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
         </div>
 
-        <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80">
+        <div
+          className={`w-full flex flex-col min-h-${
+            showAnnouncement ? "full" : "screen"
+          } lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
+        >
           <Navbar />
           {children}
         </div>

layouts/SettingsLayout.tsx

@@ -7,6 +7,7 @@ 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";
 
 interface Props {
   children: ReactNode;
@@ -25,7 +26,11 @@ export default function SettingsLayout({ children }: Props) {
 
   const [sidebar, setSidebar] = useState(false);
 
-  window.addEventListener("resize", () => setSidebar(false));
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
 
   useEffect(() => {
     setSidebar(false);

lib/api/archive.ts

@@ -2,18 +2,29 @@ import { chromium, devices } from "playwright";
 import { prisma } from "@/lib/api/db";
 import createFile from "@/lib/api/storage/createFile";
 import sendToWayback from "./sendToWayback";
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
+import DOMPurify from "dompurify";
 
 export default async function archive(
   linkId: number,
   url: string,
   userId: number
 ) {
-  const user = await prisma.user.findUnique({
-    where: {
-      id: userId,
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+
+  const targetLink = await prisma.link.update({
+    where: { id: linkId },
+    data: {
+      screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
+      pdfPath: user?.archiveAsPDF ? "pending" : null,
+      readabilityPath: "pending",
+      lastPreserved: new Date().toISOString(),
     },
   });
 
+  // Archive.org
+
   if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
   if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
@@ -24,24 +35,48 @@ export default async function archive(
     try {
       await page.goto(url, { waitUntil: "domcontentloaded" });
 
-      await page.evaluate(
-        autoScroll,
-        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-      );
+      const content = await page.content();
 
-      const linkExists = await prisma.link.findUnique({
-        where: {
-          id: linkId,
+      // Readability
+
+      const window = new JSDOM("").window;
+      const purify = DOMPurify(window);
+      const cleanedUpContent = purify.sanitize(content);
+      const dom = new JSDOM(cleanedUpContent, { url: url });
+      const article = new Readability(dom.window.document).parse();
+
+      const articleText = article?.textContent
+        .replace(/ +(?= )/g, "") // strip out multiple spaces
+        .replace(/(\r\n|\n|\r)/gm, " "); // strip out line breaks
+
+      await createFile({
+        data: JSON.stringify(article),
+        filePath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+      });
+
+      await prisma.link.update({
+        where: { id: linkId },
+        data: {
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+          textContent: articleText,
         },
       });
 
-      if (linkExists) {
-        if (user.archiveAsScreenshot) {
-          const screenshot = await page.screenshot({
-            fullPage: true,
-          });
+      // Screenshot/PDF
 
-          createFile({
+      let faulty = false;
+      await page
+        .evaluate(autoScroll, Number(process.env.AUTOSCROLL_TIMEOUT) || 30)
+        .catch((e) => (faulty = true));
+
+      const linkExists = await prisma.link.findUnique({
+        where: { id: linkId },
+      });
+
+      if (linkExists && !faulty) {
+        if (user.archiveAsScreenshot) {
+          const screenshot = await page.screenshot({ fullPage: true });
+          await createFile({
             data: screenshot,
             filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
           });
@@ -55,16 +90,36 @@ export default async function archive(
             margin: { top: "15px", bottom: "15px" },
           });
 
-          createFile({
+          await createFile({
             data: pdf,
             filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
           });
         }
-      }
 
-      await browser.close();
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: user.archiveAsScreenshot
+              ? `archives/${linkExists.collectionId}/${linkId}.png`
+              : null,
+            pdfPath: user.archiveAsPDF
+              ? `archives/${linkExists.collectionId}/${linkId}.pdf`
+              : null,
+          },
+        });
+      } else if (faulty) {
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: null,
+            pdfPath: null,
+          },
+        });
+      }
     } catch (err) {
       console.log(err);
+      throw err;
+    } finally {
       await browser.close();
     }
   }
@@ -73,11 +128,7 @@ export default async function archive(
 const autoScroll = async (AUTOSCROLL_TIMEOUT: number) => {
   const timeoutPromise = new Promise<void>((_, reject) => {
     setTimeout(() => {
-      reject(
-        new Error(
-          `Auto scroll took too long (more than ${AUTOSCROLL_TIMEOUT} seconds).`
-        )
-      );
+      reject(new Error(`Webpage was too long to be archived.`));
     }, AUTOSCROLL_TIMEOUT * 1000);
   });
 

lib/api/checkSubscription.ts

@@ -1,49 +0,0 @@
-import Stripe from "stripe";
-
-export default async function checkSubscription(
-  stripeSecretKey: string,
-  email: string
-) {
-  const stripe = new Stripe(stripeSecretKey, {
-    apiVersion: "2022-11-15",
-  });
-
-  const listByEmail = await stripe.customers.list({
-    email: email.toLowerCase(),
-    expand: ["data.subscriptions"],
-  });
-
-  let subscriptionCanceledAt: number | null | undefined;
-
-  const isSubscriber = listByEmail.data.some((customer, i) => {
-    const hasValidSubscription = customer.subscriptions?.data.some(
-      (subscription) => {
-        const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-          process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
-        const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-          ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
-          : 1209600;
-
-        subscriptionCanceledAt = subscription.canceled_at;
-
-        const isNotCanceledOrHasTime = !(
-          subscription.canceled_at &&
-          new Date() >
-            new Date((subscription.canceled_at + secondsInTwoWeeks) * 1000)
-        );
-
-        return subscription?.items?.data[0].plan && isNotCanceledOrHasTime;
-      }
-    );
-
-    return (
-      customer.email?.toLowerCase() === email.toLowerCase() &&
-      hasValidSubscription
-    );
-  });
-
-  return {
-    isSubscriber,
-    subscriptionCanceledAt,
-  };
-}

lib/api/checkSubscriptionByEmail.ts

@@ -0,0 +1,52 @@
+import Stripe from "stripe";
+
+const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
+const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function checkSubscriptionByEmail(email: string) {
+  let active: boolean | undefined,
+    stripeSubscriptionId: string | undefined,
+    currentPeriodStart: number | undefined,
+    currentPeriodEnd: number | undefined;
+
+  if (!STRIPE_SECRET_KEY)
+    return {
+      active,
+      stripeSubscriptionId,
+      currentPeriodStart,
+      currentPeriodEnd,
+    };
+
+  const stripe = new Stripe(STRIPE_SECRET_KEY, {
+    apiVersion: "2022-11-15",
+  });
+
+  console.log("Request made to Stripe by:", email);
+  const listByEmail = await stripe.customers.list({
+    email: email.toLowerCase(),
+    expand: ["data.subscriptions"],
+  });
+
+  listByEmail.data.some((customer) => {
+    customer.subscriptions?.data.some((subscription) => {
+      subscription.current_period_end;
+
+      active = subscription.items.data.some(
+        (e) =>
+          (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
+          (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
+      );
+      stripeSubscriptionId = subscription.id;
+      currentPeriodStart = subscription.current_period_start * 1000;
+      currentPeriodEnd = subscription.current_period_end * 1000;
+    });
+  });
+
+  return {
+    active,
+    stripeSubscriptionId,
+    currentPeriodStart,
+    currentPeriodEnd,
+  };
+}

lib/api/controllers/collections/collectionId/deleteCollectionById.ts

@@ -4,15 +4,16 @@ import { Collection, UsersAndCollections } from "@prisma/client";
 import removeFolder from "@/lib/api/storage/removeFolder";
 
 export default async function deleteCollection(
-  collection: { id: number },
-  userId: number
+  userId: number,
+  collectionId: number
 ) {
-  const collectionId = collection.id;
-
   if (!collectionId)
     return { response: "Please choose a valid collection.", status: 401 };
 
-  const collectionIsAccessible = (await getPermission(userId, collectionId)) as
+  const collectionIsAccessible = (await getPermission({
+    userId,
+    collectionId,
+  })) as
     | (Collection & {
         members: UsersAndCollections[];
       })

lib/api/controllers/collections/collectionId/updateCollectionById.ts

@@ -4,16 +4,17 @@ import getPermission from "@/lib/api/getPermission";
 import { Collection, UsersAndCollections } from "@prisma/client";
 
 export default async function updateCollection(
-  collection: CollectionIncludingMembersAndLinkCount,
-  userId: number
+  userId: number,
+  collectionId: number,
+  data: CollectionIncludingMembersAndLinkCount
 ) {
-  if (!collection.id)
+  if (!collectionId)
     return { response: "Please choose a valid collection.", status: 401 };
 
-  const collectionIsAccessible = (await getPermission(
+  const collectionIsAccessible = (await getPermission({
     userId,
-    collection.id
-  )) as
+    collectionId,
+  })) as
     | (Collection & {
         members: UsersAndCollections[];
       })
@@ -26,23 +27,23 @@ export default async function updateCollection(
     await prisma.usersAndCollections.deleteMany({
       where: {
         collection: {
-          id: collection.id,
+          id: collectionId,
         },
       },
     });
 
     return await prisma.collection.update({
       where: {
-        id: collection.id,
+        id: collectionId,
       },
 
       data: {
-        name: collection.name.trim(),
-        description: collection.description,
-        color: collection.color,
-        isPublic: collection.isPublic,
+        name: data.name.trim(),
+        description: data.description,
+        color: data.color,
+        isPublic: data.isPublic,
         members: {
-          create: collection.members.map((e) => ({
+          create: data.members.map((e) => ({
             user: { connect: { id: e.user.id || e.userId } },
             canCreate: e.canCreate,
             canUpdate: e.canUpdate,
@@ -58,6 +59,7 @@ export default async function updateCollection(
           include: {
             user: {
               select: {
+                image: true,
                 username: true,
                 name: true,
                 id: true,

lib/api/controllers/collections/getCollections.ts

@@ -18,6 +18,7 @@ export default async function getCollection(userId: number) {
             select: {
               username: true,
               name: true,
+              image: true,
             },
           },
         },

lib/api/controllers/dashboard/getDashboardData.ts

@@ -0,0 +1,78 @@
+import { prisma } from "@/lib/api/db";
+import { LinkRequestQuery, Sort } from "@/types/global";
+
+export default async function getDashboardData(
+  userId: number,
+  query: LinkRequestQuery
+) {
+  let order: any;
+  if (query.sort === Sort.DateNewestFirst) order = { createdAt: "desc" };
+  else if (query.sort === Sort.DateOldestFirst) order = { createdAt: "asc" };
+  else if (query.sort === Sort.NameAZ) order = { name: "asc" };
+  else if (query.sort === Sort.NameZA) order = { name: "desc" };
+  else if (query.sort === Sort.DescriptionAZ) order = { description: "asc" };
+  else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
+
+  const pinnedLinks = await prisma.link.findMany({
+    take: 6,
+    where: {
+      AND: [
+        {
+          collection: {
+            OR: [
+              { ownerId: userId },
+              {
+                members: {
+                  some: { userId },
+                },
+              },
+            ],
+          },
+        },
+        {
+          pinnedBy: { some: { id: userId } },
+        },
+      ],
+    },
+    include: {
+      tags: true,
+      collection: true,
+      pinnedBy: {
+        where: { id: userId },
+        select: { id: true },
+      },
+    },
+    orderBy: order || { createdAt: "desc" },
+  });
+
+  const recentlyAddedLinks = await prisma.link.findMany({
+    take: 6,
+    where: {
+      collection: {
+        OR: [
+          { ownerId: userId },
+          {
+            members: {
+              some: { userId },
+            },
+          },
+        ],
+      },
+    },
+    include: {
+      tags: true,
+      collection: true,
+      pinnedBy: {
+        where: { id: userId },
+        select: { id: true },
+      },
+    },
+    orderBy: order || { createdAt: "desc" },
+  });
+
+  const links = [...recentlyAddedLinks, ...pinnedLinks].sort(
+    (a, b) => (new Date(b.createdAt) as any) - (new Date(a.createdAt) as any)
+  );
+
+  return { response: links, status: 200 };
+}

lib/api/controllers/links/getLinks.ts

@@ -1,9 +1,7 @@
 import { prisma } from "@/lib/api/db";
 import { LinkRequestQuery, Sort } from "@/types/global";
 
-export default async function getLink(userId: number, body: string) {
-  const query: LinkRequestQuery = JSON.parse(decodeURIComponent(body));
-
+export default async function getLink(userId: number, query: LinkRequestQuery) {
   const POSTGRES_IS_ENABLED = process.env.DATABASE_URL.startsWith("postgresql");
 
   let order: any;
@@ -16,40 +14,49 @@ export default async function getLink(userId: number, body: string) {
 
   const searchConditions = [];
 
-  if (query.searchQuery) {
-    if (query.searchFilter?.name) {
+  if (query.searchQueryString) {
+    if (query.searchByName) {
       searchConditions.push({
         name: {
-          contains: query.searchQuery,
+          contains: query.searchQueryString,
           mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
         },
       });
     }
 
-    if (query.searchFilter?.url) {
+    if (query.searchByUrl) {
       searchConditions.push({
         url: {
-          contains: query.searchQuery,
+          contains: query.searchQueryString,
           mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
         },
       });
     }
 
-    if (query.searchFilter?.description) {
+    if (query.searchByDescription) {
       searchConditions.push({
         description: {
-          contains: query.searchQuery,
+          contains: query.searchQueryString,
           mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
         },
       });
     }
 
-    if (query.searchFilter?.tags) {
+    if (query.searchByTextContent) {
+      searchConditions.push({
+        textContent: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchByTags) {
       searchConditions.push({
         tags: {
           some: {
             name: {
-              contains: query.searchQuery,
+              contains: query.searchQueryString,
               mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
             },
             OR: [
@@ -117,7 +124,7 @@ export default async function getLink(userId: number, body: string) {
           OR: [
             ...tagCondition,
             {
-              [query.searchQuery ? "OR" : "AND"]: [
+              [query.searchQueryString ? "OR" : "AND"]: [
                 {
                   pinnedBy: query.pinnedOnly
                     ? { some: { id: userId } }

lib/api/controllers/links/linkId/deleteLinkById.ts

@@ -1,20 +1,12 @@
 import { prisma } from "@/lib/api/db";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { Collection, Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import removeFile from "@/lib/api/storage/removeFile";
 
-export default async function deleteLink(
-  link: LinkIncludingShortenedCollectionAndTags,
-  userId: number
-) {
-  if (!link || !link.collectionId)
-    return { response: "Please choose a valid link.", status: 401 };
+export default async function deleteLink(userId: number, linkId: number) {
+  if (!linkId) return { response: "Please choose a valid link.", status: 401 };
 
-  const collectionIsAccessible = (await getPermission(
-    userId,
-    link.collectionId
-  )) as
+  const collectionIsAccessible = (await getPermission({ userId, linkId })) as
     | (Collection & {
         members: UsersAndCollections[];
       })
@@ -29,12 +21,19 @@ export default async function deleteLink(
 
   const deleteLink: Link = await prisma.link.delete({
     where: {
-      id: link.id,
+      id: linkId,
     },
   });
 
-  removeFile({ filePath: `archives/${link.collectionId}/${link.id}.pdf` });
-  removeFile({ filePath: `archives/${link.collectionId}/${link.id}.png` });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+  });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+  });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+  });
 
   return { response: deleteLink, status: 200 };
 }

lib/api/controllers/links/linkId/getLinkById.ts

@@ -0,0 +1,48 @@
+import { prisma } from "@/lib/api/db";
+import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+
+export default async function getLinkById(userId: number, linkId: number) {
+  if (!linkId)
+    return {
+      response: "Please choose a valid link.",
+      status: 401,
+    };
+
+  const collectionIsAccessible = (await getPermission({ userId, linkId })) as
+    | (Collection & {
+        members: UsersAndCollections[];
+      })
+    | null;
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId
+  );
+
+  const isCollectionOwner = collectionIsAccessible?.ownerId === userId;
+
+  if (collectionIsAccessible?.ownerId !== userId && !memberHasAccess)
+    return {
+      response: "Collection is not accessible.",
+      status: 401,
+    };
+  else {
+    const updatedLink = await prisma.link.findUnique({
+      where: {
+        id: linkId,
+      },
+      include: {
+        tags: true,
+        collection: true,
+        pinnedBy: isCollectionOwner
+          ? {
+              where: { id: userId },
+              select: { id: true },
+            }
+          : undefined,
+      },
+    });
+
+    return { response: updatedLink, status: 200 };
+  }
+}

lib/api/controllers/links/linkId/updateLinkById.ts

@@ -4,41 +4,33 @@ import { Collection, Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import moveFile from "@/lib/api/storage/moveFile";
 
-export default async function updateLink(
-  link: LinkIncludingShortenedCollectionAndTags,
-  userId: number
+export default async function updateLinkById(
+  userId: number,
+  linkId: number,
+  data: LinkIncludingShortenedCollectionAndTags
 ) {
-  console.log(link);
-  if (!link || !link.collection.id)
+  if (!data || !data.collection.id)
     return {
       response: "Please choose a valid link and collection.",
       status: 401,
     };
 
-  const targetLink = (await getPermission(
-    userId,
-    link.collection.id,
-    link.id
-  )) as
-    | (Link & {
-        collection: Collection & {
-          members: UsersAndCollections[];
-        };
+  const collectionIsAccessible = (await getPermission({ userId, linkId })) as
+    | (Collection & {
+        members: UsersAndCollections[];
       })
     | null;
 
-  const memberHasAccess = targetLink?.collection.members.some(
+  const memberHasAccess = collectionIsAccessible?.members.some(
     (e: UsersAndCollections) => e.userId === userId && e.canUpdate
   );
 
   const isCollectionOwner =
-    targetLink?.collection.ownerId === link.collection.ownerId &&
-    link.collection.ownerId === userId;
+    collectionIsAccessible?.ownerId === data.collection.ownerId &&
+    data.collection.ownerId === userId;
 
   const unauthorizedSwitchCollection =
-    !isCollectionOwner && targetLink?.collection.id !== link.collection.id;
-
-  console.log(isCollectionOwner);
+    !isCollectionOwner && collectionIsAccessible?.id !== data.collection.id;
 
   // Makes sure collection members (non-owners) cannot move a link to/from a collection.
   if (unauthorizedSwitchCollection)
@@ -46,7 +38,7 @@ export default async function updateLink(
       response: "You can't move a link to/from a collection you don't own.",
       status: 401,
     };
-  else if (targetLink?.collection.ownerId !== userId && !memberHasAccess)
+  else if (collectionIsAccessible?.ownerId !== userId && !memberHasAccess)
     return {
       response: "Collection is not accessible.",
       status: 401,
@@ -54,37 +46,37 @@ export default async function updateLink(
   else {
     const updatedLink = await prisma.link.update({
       where: {
-        id: link.id,
+        id: linkId,
       },
       data: {
-        name: link.name,
-        description: link.description,
+        name: data.name,
+        description: data.description,
         collection: {
           connect: {
-            id: link.collection.id,
+            id: data.collection.id,
           },
         },
         tags: {
           set: [],
-          connectOrCreate: link.tags.map((tag) => ({
+          connectOrCreate: data.tags.map((tag) => ({
             where: {
               name_ownerId: {
                 name: tag.name,
-                ownerId: link.collection.ownerId,
+                ownerId: data.collection.ownerId,
               },
             },
             create: {
               name: tag.name,
               owner: {
                 connect: {
-                  id: link.collection.ownerId,
+                  id: data.collection.ownerId,
                 },
               },
             },
           })),
         },
         pinnedBy:
-          link?.pinnedBy && link.pinnedBy[0]
+          data?.pinnedBy && data.pinnedBy[0]
             ? { connect: { id: userId } }
             : { disconnect: { id: userId } },
       },
@@ -100,15 +92,20 @@ export default async function updateLink(
       },
     });
 
-    if (targetLink?.collection.id !== link.collection.id) {
+    if (collectionIsAccessible?.id !== data.collection.id) {
       await moveFile(
-        `archives/${targetLink?.collection.id}/${link.id}.pdf`,
-        `archives/${link.collection.id}/${link.id}.pdf`
+        `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+        `archives/${data.collection.id}/${linkId}.pdf`
       );
 
       await moveFile(
-        `archives/${targetLink?.collection.id}/${link.id}.png`,
-        `archives/${link.collection.id}/${link.id}.png`
+        `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+        `archives/${data.collection.id}/${linkId}.png`
+      );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+        `archives/${data.collection.id}/${linkId}_readability.json`
       );
     }
 

lib/api/controllers/links/postLink.ts

@@ -27,10 +27,10 @@ export default async function postLink(
   link.collection.name = link.collection.name.trim();
 
   if (link.collection.id) {
-    const collectionIsAccessible = (await getPermission(
+    const collectionIsAccessible = (await getPermission({
       userId,
-      link.collection.id
-    )) as
+      collectionId: link.collection.id,
+    })) as
       | (Collection & {
           members: UsersAndCollections[];
         })
@@ -56,6 +56,7 @@ export default async function postLink(
       url: link.url,
       name: link.name,
       description,
+      readabilityPath: "pending",
       collection: {
         connectOrCreate: {
           where: {

lib/api/controllers/migration/exportData.ts

@@ -18,7 +18,7 @@ export default async function exportData(userId: number) {
 
   if (!user) return { response: "User not found.", status: 404 };
 
-  const { password, id, image, ...userData } = user;
+  const { password, id, ...userData } = user;
 
   function redactIds(obj: any) {
     if (Array.isArray(obj)) {

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -7,94 +7,97 @@ export default async function importFromHTMLFile(
   userId: number,
   rawData: string
 ) {
-  try {
-    const dom = new JSDOM(rawData);
-    const document = dom.window.document;
+  const dom = new JSDOM(rawData);
+  const document = dom.window.document;
 
-    const folders = document.querySelectorAll("H3");
+  const folders = document.querySelectorAll("H3");
 
-    // @ts-ignore
-    for (const folder of folders) {
-      const findCollection = await prisma.user.findUnique({
-        where: {
-          id: userId,
-        },
-        select: {
-          collections: {
+  await prisma
+    .$transaction(
+      async () => {
+        // @ts-ignore
+        for (const folder of folders) {
+          const findCollection = await prisma.user.findUnique({
             where: {
-              name: folder.textContent.trim(),
+              id: userId,
             },
-          },
-        },
-      });
+            select: {
+              collections: {
+                where: {
+                  name: folder.textContent.trim(),
+                },
+              },
+            },
+          });
 
-      const checkIfCollectionExists = findCollection?.collections[0];
+          const checkIfCollectionExists = findCollection?.collections[0];
 
-      let collectionId = findCollection?.collections[0]?.id;
+          let collectionId = findCollection?.collections[0]?.id;
 
-      if (!checkIfCollectionExists || !collectionId) {
-        const newCollection = await prisma.collection.create({
-          data: {
-            name: folder.textContent.trim(),
-            description: "",
-            color: "#0ea5e9",
-            isPublic: false,
-            ownerId: userId,
-          },
-        });
+          if (!checkIfCollectionExists || !collectionId) {
+            const newCollection = await prisma.collection.create({
+              data: {
+                name: folder.textContent.trim(),
+                description: "",
+                color: "#0ea5e9",
+                isPublic: false,
+                ownerId: userId,
+              },
+            });
 
-        createFolder({ filePath: `archives/${newCollection.id}` });
+            createFolder({ filePath: `archives/${newCollection.id}` });
 
-        collectionId = newCollection.id;
-      }
+            collectionId = newCollection.id;
+          }
 
-      createFolder({ filePath: `archives/${collectionId}` });
+          createFolder({ filePath: `archives/${collectionId}` });
 
-      const bookmarks = folder.nextElementSibling.querySelectorAll("A");
-      for (const bookmark of bookmarks) {
-        await prisma.link.create({
-          data: {
-            name: bookmark.textContent.trim(),
-            url: bookmark.getAttribute("HREF"),
-            tags: bookmark.getAttribute("TAGS")
-              ? {
-                  connectOrCreate: bookmark
-                    .getAttribute("TAGS")
-                    .split(",")
-                    .map((tag: string) =>
-                      tag
-                        ? {
-                            where: {
-                              name_ownerId: {
-                                name: tag.trim(),
-                                ownerId: userId,
-                              },
-                            },
-                            create: {
-                              name: tag.trim(),
-                              owner: {
-                                connect: {
-                                  id: userId,
+          const bookmarks = folder.nextElementSibling.querySelectorAll("A");
+          for (const bookmark of bookmarks) {
+            await prisma.link.create({
+              data: {
+                name: bookmark.textContent.trim(),
+                url: bookmark.getAttribute("HREF"),
+                tags: bookmark.getAttribute("TAGS")
+                  ? {
+                      connectOrCreate: bookmark
+                        .getAttribute("TAGS")
+                        .split(",")
+                        .map((tag: string) =>
+                          tag
+                            ? {
+                                where: {
+                                  name_ownerId: {
+                                    name: tag.trim(),
+                                    ownerId: userId,
+                                  },
                                 },
-                              },
-                            },
-                          }
-                        : undefined
-                    ),
-                }
-              : undefined,
-            description: bookmark.getAttribute("DESCRIPTION")
-              ? bookmark.getAttribute("DESCRIPTION")
-              : "",
-            collectionId: collectionId,
-            createdAt: new Date(),
-          },
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
+                                create: {
+                                  name: tag.trim(),
+                                  owner: {
+                                    connect: {
+                                      id: userId,
+                                    },
+                                  },
+                                },
+                              }
+                            : undefined
+                        ),
+                    }
+                  : undefined,
+                description: bookmark.getAttribute("DESCRIPTION")
+                  ? bookmark.getAttribute("DESCRIPTION")
+                  : "",
+                collectionId: collectionId,
+                createdAt: new Date(),
+              },
+            });
+          }
+        }
+      },
+      { timeout: 30000 }
+    )
+    .catch((err) => console.log(err));
 
   return { response: "Success.", status: 200 };
 }

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -5,87 +5,88 @@ import createFolder from "@/lib/api/storage/createFolder";
 export default async function getData(userId: number, rawData: string) {
   const data: Backup = JSON.parse(rawData);
 
-  console.log(typeof data);
+  await prisma
+    .$transaction(
+      async () => {
+        // Import collections
+        for (const e of data.collections) {
+          e.name = e.name.trim();
 
-  // Import collections
-  try {
-    for (const e of data.collections) {
-      e.name = e.name.trim();
-
-      const findCollection = await prisma.user.findUnique({
-        where: {
-          id: userId,
-        },
-        select: {
-          collections: {
+          const findCollection = await prisma.user.findUnique({
             where: {
-              name: e.name,
+              id: userId,
             },
-          },
-        },
-      });
-
-      const checkIfCollectionExists = findCollection?.collections[0];
-
-      let collectionId = findCollection?.collections[0]?.id;
-
-      if (!checkIfCollectionExists) {
-        const newCollection = await prisma.collection.create({
-          data: {
-            owner: {
-              connect: {
-                id: userId,
-              },
-            },
-            name: e.name,
-            description: e.description,
-            color: e.color,
-          },
-        });
-
-        createFolder({ filePath: `archives/${newCollection.id}` });
-
-        collectionId = newCollection.id;
-      }
-
-      // Import Links
-      for (const link of e.links) {
-        const newLink = await prisma.link.create({
-          data: {
-            url: link.url,
-            name: link.name,
-            description: link.description,
-            collection: {
-              connect: {
-                id: collectionId,
-              },
-            },
-            // Import Tags
-            tags: {
-              connectOrCreate: link.tags.map((tag) => ({
+            select: {
+              collections: {
                 where: {
-                  name_ownerId: {
-                    name: tag.name.trim(),
-                    ownerId: userId,
-                  },
+                  name: e.name,
                 },
-                create: {
-                  name: tag.name.trim(),
-                  owner: {
-                    connect: {
-                      id: userId,
-                    },
-                  },
-                },
-              })),
+              },
             },
-          },
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
+          });
+
+          const checkIfCollectionExists = findCollection?.collections[0];
+
+          let collectionId = findCollection?.collections[0]?.id;
+
+          if (!checkIfCollectionExists) {
+            const newCollection = await prisma.collection.create({
+              data: {
+                owner: {
+                  connect: {
+                    id: userId,
+                  },
+                },
+                name: e.name,
+                description: e.description,
+                color: e.color,
+              },
+            });
+
+            createFolder({ filePath: `archives/${newCollection.id}` });
+
+            collectionId = newCollection.id;
+          }
+
+          // Import Links
+          for (const link of e.links) {
+            const newLink = await prisma.link.create({
+              data: {
+                url: link.url,
+                name: link.name,
+                description: link.description,
+                collection: {
+                  connect: {
+                    id: collectionId,
+                  },
+                },
+                // Import Tags
+                tags: {
+                  connectOrCreate: link.tags.map((tag) => ({
+                    where: {
+                      name_ownerId: {
+                        name: tag.name.trim(),
+                        ownerId: userId,
+                      },
+                    },
+                    create: {
+                      name: tag.name.trim(),
+                      owner: {
+                        connect: {
+                          id: userId,
+                        },
+                      },
+                    },
+                  })),
+                },
+              },
+            });
+          }
+        }
+      },
+      { timeout: 30000 }
+    )
+    .catch((err) => console.log(err));
 
   return { response: "Success.", status: 200 };
 }

lib/api/controllers/public/users/getPublicUserById.ts

@@ -0,0 +1,61 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getPublicUserById(
+  targetId: number | string,
+  isId: boolean,
+  requestingId?: number
+) {
+  const user = await prisma.user.findUnique({
+    where: isId
+      ? {
+          id: Number(targetId) as number,
+        }
+      : {
+          username: targetId as string,
+        },
+    include: {
+      whitelistedUsers: {
+        select: {
+          username: true,
+        },
+      },
+    },
+  });
+
+  if (!user)
+    return { response: "User not found or profile is private.", status: 404 };
+
+  const whitelistedUsernames = user.whitelistedUsers?.map(
+    (usernames) => usernames.username
+  );
+
+  if (user?.isPrivate) {
+    if (requestingId) {
+      const requestingUsername = (
+        await prisma.user.findUnique({ where: { id: requestingId } })
+      )?.username;
+
+      if (
+        !requestingUsername ||
+        !whitelistedUsernames.includes(requestingUsername?.toLowerCase())
+      ) {
+        return {
+          response: "User not found or profile is private.",
+          status: 404,
+        };
+      }
+    } else
+      return { response: "User not found or profile is private.", status: 404 };
+  }
+
+  const { password, ...lessSensitiveInfo } = user;
+
+  const data = {
+    id: lessSensitiveInfo.id,
+    name: lessSensitiveInfo.name,
+    username: lessSensitiveInfo.username,
+    image: lessSensitiveInfo.image,
+  };
+
+  return { response: data, status: 200 };
+}

lib/api/controllers/tags/tagId/deleteTagById.ts

@@ -0,0 +1,26 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function deleteTagById(userId: number, tagId: number) {
+  if (!tagId)
+    return { response: "Please choose a valid name for the tag.", status: 401 };
+
+  const targetTag = await prisma.tag.findUnique({
+    where: {
+      id: tagId,
+    },
+  });
+
+  if (targetTag?.ownerId !== userId)
+    return {
+      response: "Permission denied.",
+      status: 401,
+    };
+
+  const updatedTag = await prisma.tag.delete({
+    where: {
+      id: tagId,
+    },
+  });
+
+  return { response: updatedTag, status: 200 };
+}

lib/api/controllers/tags/tagId/updeteTagById.ts

@@ -0,0 +1,47 @@
+import { prisma } from "@/lib/api/db";
+import { Tag } from "@prisma/client";
+
+export default async function updeteTagById(
+  userId: number,
+  tagId: number,
+  data: Tag
+) {
+  if (!tagId || !data.name)
+    return { response: "Please choose a valid name for the tag.", status: 401 };
+
+  const tagNameIsTaken = await prisma.tag.findFirst({
+    where: {
+      ownerId: userId,
+      name: data.name,
+    },
+  });
+
+  if (tagNameIsTaken)
+    return {
+      response: "Tag names should be unique.",
+      status: 400,
+    };
+
+  const targetTag = await prisma.tag.findUnique({
+    where: {
+      id: tagId,
+    },
+  });
+
+  if (targetTag?.ownerId !== userId)
+    return {
+      response: "Permission denied.",
+      status: 401,
+    };
+
+  const updatedTag = await prisma.tag.update({
+    where: {
+      id: tagId,
+    },
+    data: {
+      name: data.name,
+    },
+  });
+
+  return { response: updatedTag, status: 200 };
+}

lib/api/controllers/users/getUsers.ts

@@ -1,54 +0,0 @@
-import { prisma } from "@/lib/api/db";
-
-export default async function getUser({
-  params,
-  isSelf,
-  username,
-}: {
-  params: {
-    lookupUsername?: string;
-    lookupId?: number;
-  };
-  isSelf: boolean;
-  username: string;
-}) {
-  const user = await prisma.user.findUnique({
-    where: {
-      id: params.lookupId,
-      username: params.lookupUsername?.toLowerCase(),
-    },
-    include: {
-      whitelistedUsers: {
-        select: {
-          username: true
-        }
-      }
-    }
-  });
-
-  if (!user) return { response: "User not found.", status: 404 };
-
-  const whitelistedUsernames = user.whitelistedUsers?.map(usernames => usernames.username);
-
-  if (
-    !isSelf &&
-    user?.isPrivate &&
-    !whitelistedUsernames.includes(username.toLowerCase())
-  ) {
-    return { response: "This profile is private.", status: 401 };
-  }
-
-  const { password, ...lessSensitiveInfo } = user;
-
-  const data = isSelf
-    ? // If user is requesting its own data
-      {...lessSensitiveInfo, whitelistedUsers: whitelistedUsernames}
-    : {
-        // If user is requesting someone elses data
-        id: lessSensitiveInfo.id,
-        name: lessSensitiveInfo.name,
-        username: lessSensitiveInfo.username,
-      };
-
-  return { response: data || null, status: 200 };
-}

lib/api/controllers/users/postUser.ts

@@ -16,7 +16,7 @@ interface User {
   password: string;
 }
 
-export default async function Index(
+export default async function postUser(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
@@ -35,8 +35,16 @@ export default async function Index(
       .status(400)
       .json({ response: "Please fill out all the fields." });
 
-  const checkUsername = RegExp("^[a-z0-9_-]{3,31}$");
+  // Check email (if enabled)
+  const checkEmail =
+    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+  if (emailEnabled && !checkEmail.test(body.email?.toLowerCase() || ""))
+    return res.status(400).json({
+      response: "Please enter a valid email.",
+    });
 
+  // Check username (if email was disabled)
+  const checkUsername = RegExp("^[a-z0-9_-]{3,31}$");
   if (!emailEnabled && !checkUsername.test(body.username?.toLowerCase() || ""))
     return res.status(400).json({
       response:
@@ -46,11 +54,10 @@ export default async function Index(
   const checkIfUserExists = await prisma.user.findFirst({
     where: emailEnabled
       ? {
-          email: body.email?.toLowerCase(),
-          emailVerified: { not: null },
+          email: body.email?.toLowerCase().trim(),
         }
       : {
-          username: (body.username as string).toLowerCase(),
+          username: (body.username as string).toLowerCase().trim(),
         },
   });
 
@@ -64,16 +71,16 @@ export default async function Index(
         name: body.name,
         username: emailEnabled
           ? undefined
-          : (body.username as string).toLowerCase(),
-        email: emailEnabled ? body.email?.toLowerCase() : undefined,
+          : (body.username as string).toLowerCase().trim(),
+        email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
         password: hashedPassword,
       },
     });
 
     return res.status(201).json({ response: "User successfully created." });
   } else if (checkIfUserExists) {
-    return res
-      .status(400)
-      .json({ response: "Username and/or Email already exists." });
+    return res.status(400).json({
+      response: `${emailEnabled ? "Email" : "Username"} already exists.`,
+    });
   }
 }

lib/api/controllers/users/userId/deleteUserById.ts

@@ -0,0 +1,127 @@
+import { prisma } from "@/lib/api/db";
+import bcrypt from "bcrypt";
+import removeFolder from "@/lib/api/storage/removeFolder";
+import Stripe from "stripe";
+import { DeleteUserBody } from "@/types/global";
+import removeFile from "@/lib/api/storage/removeFile";
+
+export default async function deleteUserById(
+  userId: number,
+  body: DeleteUserBody
+) {
+  // First, we retrieve the user from the database
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+  });
+
+  if (!user) {
+    return {
+      response: "Invalid credentials.",
+      status: 404,
+    };
+  }
+
+  // Then, we check if the provided password matches the one stored in the database
+  const isPasswordValid = bcrypt.compareSync(body.password, user.password);
+
+  if (!isPasswordValid) {
+    return {
+      response: "Invalid credentials.",
+      status: 401, // Unauthorized
+    };
+  }
+
+  // Delete the user and all related data within a transaction
+  await prisma
+    .$transaction(
+      async (prisma) => {
+        // Delete whitelisted users
+        await prisma.whitelistedUser.deleteMany({
+          where: { userId },
+        });
+
+        // Delete links
+        await prisma.link.deleteMany({
+          where: { collection: { ownerId: userId } },
+        });
+
+        // Delete tags
+        await prisma.tag.deleteMany({
+          where: { ownerId: userId },
+        });
+
+        // Find collections that the user owns
+        const collections = await prisma.collection.findMany({
+          where: { ownerId: userId },
+        });
+
+        for (const collection of collections) {
+          // Delete related users and collections relations
+          await prisma.usersAndCollections.deleteMany({
+            where: { collectionId: collection.id },
+          });
+
+          // Delete archive folders
+          removeFolder({ filePath: `archives/${collection.id}` });
+        }
+
+        // Delete collections after cleaning up related data
+        await prisma.collection.deleteMany({
+          where: { ownerId: userId },
+        });
+
+        // Delete subscription
+        if (process.env.STRIPE_SECRET_KEY)
+          await prisma.subscription.delete({
+            where: { userId },
+          });
+
+        // Delete user's avatar
+        await removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
+
+        // Finally, delete the user
+        await prisma.user.delete({
+          where: { id: userId },
+        });
+      },
+      { timeout: 20000 }
+    )
+    .catch((err) => console.log(err));
+
+  if (process.env.STRIPE_SECRET_KEY) {
+    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
+      apiVersion: "2022-11-15",
+    });
+
+    try {
+      const listByEmail = await stripe.customers.list({
+        email: user.email?.toLowerCase(),
+        expand: ["data.subscriptions"],
+      });
+
+      if (listByEmail.data[0].subscriptions?.data[0].id) {
+        const deleted = await stripe.subscriptions.cancel(
+          listByEmail.data[0].subscriptions?.data[0].id,
+          {
+            cancellation_details: {
+              comment: body.cancellation_details?.comment,
+              feedback: body.cancellation_details?.feedback,
+            },
+          }
+        );
+
+        return {
+          response: deleted,
+          status: 200,
+        };
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  return {
+    response: "User account and all related data deleted successfully.",
+    status: 200,
+  };
+}

lib/api/controllers/users/userId/getUserById.ts

@@ -0,0 +1,36 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getUserById(userId: number) {
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+    include: {
+      whitelistedUsers: {
+        select: {
+          username: true,
+        },
+      },
+      subscriptions: true,
+    },
+  });
+
+  if (!user)
+    return { response: "User not found or profile is private.", status: 404 };
+
+  const whitelistedUsernames = user.whitelistedUsers?.map(
+    (usernames) => usernames.username
+  );
+
+  const { password, subscriptions, ...lessSensitiveInfo } = user;
+
+  const data = {
+    ...lessSensitiveInfo,
+    whitelistedUsers: whitelistedUsernames,
+    subscription: {
+      active: subscriptions?.active,
+    },
+  };
+
+  return { response: data, status: 200 };
+}

lib/api/controllers/users/userId/updateUserById.ts

@@ -9,29 +9,33 @@ import createFolder from "@/lib/api/storage/createFolder";
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
-export default async function updateUser(
-  user: AccountSettings,
-  sessionUser: {
-    id: number;
-    username: string;
-    email: string;
-    isSubscriber: boolean;
-  }
+export default async function updateUserById(
+  userId: number,
+  data: AccountSettings
 ) {
-  if (emailEnabled && !user.email)
+  if (emailEnabled && !data.email)
     return {
       response: "Email invalid.",
       status: 400,
     };
-  else if (!user.username)
+  else if (!data.username)
     return {
       response: "Username invalid.",
       status: 400,
     };
 
+  // Check email (if enabled)
+  const checkEmail =
+    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+  if (emailEnabled && !checkEmail.test(data.email?.toLowerCase() || ""))
+    return {
+      response: "Please enter a valid email.",
+      status: 400,
+    };
+
   const checkUsername = RegExp("^[a-z0-9_-]{3,31}$");
 
-  if (!checkUsername.test(user.username.toLowerCase()))
+  if (!checkUsername.test(data.username.toLowerCase()))
     return {
       response:
         "Username has to be between 3-30 characters, no spaces and special characters are allowed.",
@@ -40,43 +44,55 @@ export default async function updateUser(
 
   const userIsTaken = await prisma.user.findFirst({
     where: {
-      id: { not: sessionUser.id },
+      id: { not: userId },
       OR: emailEnabled
         ? [
             {
-              username: user.username.toLowerCase(),
+              username: data.username.toLowerCase(),
             },
             {
-              email: user.email?.toLowerCase(),
+              email: data.email?.toLowerCase(),
             },
           ]
         : [
             {
-              username: user.username.toLowerCase(),
+              username: data.username.toLowerCase(),
             },
           ],
     },
   });
 
-  if (userIsTaken)
+  if (userIsTaken) {
+    if (data.email?.toLowerCase().trim() === userIsTaken.email?.trim())
+      return {
+        response: "Email is taken.",
+        status: 400,
+      };
+    else if (
+      data.username?.toLowerCase().trim() === userIsTaken.username?.trim()
+    )
+      return {
+        response: "Username is taken.",
+        status: 400,
+      };
+
     return {
       response: "Username/Email is taken.",
       status: 400,
     };
+  }
 
   // Avatar Settings
 
-  const profilePic = user.profilePic;
-
-  if (profilePic.startsWith("data:image/jpeg;base64")) {
-    if (user.profilePic.length < 1572864) {
+  if (data.image?.startsWith("data:image/jpeg;base64")) {
+    if (data.image.length < 1572864) {
       try {
-        const base64Data = profilePic.replace(/^data:image\/jpeg;base64,/, "");
+        const base64Data = data.image.replace(/^data:image\/jpeg;base64,/, "");
 
         createFolder({ filePath: `uploads/avatar` });
 
         await createFile({
-          filePath: `uploads/avatar/${sessionUser.id}.jpg`,
+          filePath: `uploads/avatar/${userId}.jpg`,
           data: base64Data,
           isBase64: true,
         });
@@ -90,45 +106,54 @@ export default async function updateUser(
         status: 400,
       };
     }
-  } else if (profilePic == "") {
-    removeFile({ filePath: `uploads/avatar/${sessionUser.id}.jpg` });
+  } else if (data.image == "") {
+    removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
   }
 
+  const previousEmail = (
+    await prisma.user.findUnique({ where: { id: userId } })
+  )?.email;
+
   // Other settings
 
   const saltRounds = 10;
-  const newHashedPassword = bcrypt.hashSync(user.newPassword || "", saltRounds);
+  const newHashedPassword = bcrypt.hashSync(data.newPassword || "", saltRounds);
 
   const updatedUser = await prisma.user.update({
     where: {
-      id: sessionUser.id,
+      id: userId,
     },
     data: {
-      name: user.name,
-      username: user.username.toLowerCase(),
-      email: user.email?.toLowerCase(),
-      isPrivate: user.isPrivate,
-      archiveAsScreenshot: user.archiveAsScreenshot,
-      archiveAsPDF: user.archiveAsPDF,
-      archiveAsWaybackMachine: user.archiveAsWaybackMachine,
+      name: data.name,
+      username: data.username.toLowerCase().trim(),
+      email: data.email?.toLowerCase().trim(),
+      isPrivate: data.isPrivate,
+      image: data.image ? `uploads/avatar/${userId}.jpg` : "",
+      archiveAsScreenshot: data.archiveAsScreenshot,
+      archiveAsPDF: data.archiveAsPDF,
+      archiveAsWaybackMachine: data.archiveAsWaybackMachine,
+      displayLinkIcons: data.displayLinkIcons,
+      blurredFavicons: data.blurredFavicons,
       password:
-        user.newPassword && user.newPassword !== ""
+        data.newPassword && data.newPassword !== ""
           ? newHashedPassword
           : undefined,
     },
     include: {
       whitelistedUsers: true,
+      subscriptions: true,
     },
   });
 
-  const { whitelistedUsers, password, ...userInfo } = updatedUser;
+  const { whitelistedUsers, password, subscriptions, ...userInfo } =
+    updatedUser;
 
   // If user.whitelistedUsers is not provided, we will assume the whitelistedUsers should be removed
-  const newWhitelistedUsernames: string[] = user.whitelistedUsers || [];
+  const newWhitelistedUsernames: string[] = data.whitelistedUsers || [];
 
   // Get the current whitelisted usernames
   const currentWhitelistedUsernames: string[] = whitelistedUsers.map(
-    (user) => user.username
+    (data) => data.username
   );
 
   // Find the usernames to be deleted (present in current but not in new)
@@ -145,7 +170,7 @@ export default async function updateUser(
   // Delete whitelistedUsers that are not present in the new list
   await prisma.whitelistedUser.deleteMany({
     where: {
-      userId: sessionUser.id,
+      userId: userId,
       username: {
         in: usernamesToDelete,
       },
@@ -157,24 +182,25 @@ export default async function updateUser(
     await prisma.whitelistedUser.create({
       data: {
         username,
-        userId: sessionUser.id,
+        userId: userId,
       },
     });
   }
 
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
-  if (STRIPE_SECRET_KEY && emailEnabled && sessionUser.email !== user.email)
+  if (STRIPE_SECRET_KEY && emailEnabled && previousEmail !== data.email)
     await updateCustomerEmail(
       STRIPE_SECRET_KEY,
-      sessionUser.email,
-      user.email as string
+      previousEmail as string,
+      data.email as string
     );
 
   const response: Omit<AccountSettings, "password"> = {
     ...userInfo,
     whitelistedUsers: newWhitelistedUsernames,
-    profilePic: `/api/avatar/${userInfo.id}?${Date.now()}`,
+    image: userInfo.image ? `${userInfo.image}?${Date.now()}` : "",
+    subscription: { active: subscriptions?.active },
   };
 
   return { response, status: 200 };

lib/api/getPermission.ts

@@ -1,24 +1,30 @@
 import { prisma } from "@/lib/api/db";
 
-export default async function getPermission(
-  userId: number,
-  collectionId: number,
-  linkId?: number
-) {
+type Props = {
+  userId: number;
+  collectionId?: number;
+  linkId?: number;
+};
+
+export default async function getPermission({
+  userId,
+  collectionId,
+  linkId,
+}: Props) {
   if (linkId) {
-    const link = await prisma.link.findUnique({
+    const check = await prisma.collection.findFirst({
       where: {
-        id: linkId,
-      },
-      include: {
-        collection: {
-          include: { members: true },
+        links: {
+          some: {
+            id: linkId,
+          },
         },
       },
+      include: { members: true },
     });
 
-    return link;
-  } else {
+    return check;
+  } else if (collectionId) {
     const check = await prisma.collection.findFirst({
       where: {
         AND: {

lib/api/migration/migrateToV2.js

@@ -0,0 +1,122 @@
+const { S3 } = require("@aws-sdk/client-s3");
+const { PrismaClient } = require("@prisma/client");
+const { existsSync } = require("fs");
+const util = require("util");
+
+const prisma = new PrismaClient();
+
+const STORAGE_FOLDER = process.env.STORAGE_FOLDER || "data";
+
+const s3Client =
+  process.env.SPACES_ENDPOINT &&
+  process.env.SPACES_REGION &&
+  process.env.SPACES_KEY &&
+  process.env.SPACES_SECRET
+    ? new S3({
+        forcePathStyle: false,
+        endpoint: process.env.SPACES_ENDPOINT,
+        region: process.env.SPACES_REGION,
+        credentials: {
+          accessKeyId: process.env.SPACES_KEY,
+          secretAccessKey: process.env.SPACES_SECRET,
+        },
+      })
+    : undefined;
+
+async function checkFileExistence(path) {
+  if (s3Client) {
+    const bucketParams = {
+      Bucket: process.env.BUCKET_NAME,
+      Key: path,
+    };
+
+    try {
+      const headObjectAsync = util.promisify(
+        s3Client.headObject.bind(s3Client)
+      );
+
+      try {
+        await headObjectAsync(bucketParams);
+        return true;
+      } catch (err) {
+        return false;
+      }
+    } catch (err) {
+      console.log("Error:", err);
+
+      return false;
+    }
+  } else {
+    try {
+      if (existsSync(STORAGE_FOLDER + "/" + path)) {
+        return true;
+      } else return false;
+    } catch (err) {
+      console.log(err);
+    }
+  }
+}
+
+// Avatars
+async function migrateToV2() {
+  const users = await prisma.user.findMany();
+
+  for (let user of users) {
+    const path = `uploads/avatar/${user.id}.jpg`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.user.update({
+        where: { id: user.id },
+        data: { image: path },
+      });
+      console.log(`${user.id}`);
+    } else {
+      console.log(`${user.id}`);
+    }
+  }
+
+  const links = await prisma.link.findMany();
+
+  // PDFs
+  for (let link of links) {
+    const path = `archives/${link.collectionId}/${link.id}.pdf`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { pdfPath: path },
+      });
+      console.log(`${link.id}`);
+    } else {
+      console.log(`${link.id}`);
+    }
+  }
+
+  // Screenshots
+  for (let link of links) {
+    const path = `archives/${link.collectionId}/${link.id}.png`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { screenshotPath: path },
+      });
+      console.log(`${link.id}`);
+    } else {
+      console.log(`${link.id}`);
+    }
+  }
+
+  await prisma.$disconnect();
+}
+
+migrateToV2().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

lib/api/paymentCheckout.ts

@@ -14,12 +14,12 @@ export default async function paymentCheckout(
     expand: ["data.subscriptions"],
   });
 
-  const isExistingCostomer = listByEmail?.data[0]?.id || undefined;
+  const isExistingCustomer = listByEmail?.data[0]?.id || undefined;
 
   const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
     process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
   const session = await stripe.checkout.sessions.create({
-    customer: isExistingCostomer ? isExistingCostomer : undefined,
+    customer: isExistingCustomer ? isExistingCustomer : undefined,
     line_items: [
       {
         price: priceId,
@@ -27,7 +27,7 @@ export default async function paymentCheckout(
       },
     ],
     mode: "subscription",
-    customer_email: isExistingCostomer ? undefined : email.toLowerCase(),
+    customer_email: isExistingCustomer ? undefined : email.toLowerCase(),
     success_url: `${process.env.BASE_URL}?session_id={CHECKOUT_SESSION_ID}`,
     cancel_url: `${process.env.BASE_URL}/login`,
     automatic_tax: {

lib/api/storage/readFile.ts

@@ -9,14 +9,13 @@ import s3Client from "./s3Client";
 import util from "util";
 
 type ReturnContentTypes =
-  | "text/html"
+  | "text/plain"
   | "image/jpeg"
   | "image/png"
-  | "application/pdf";
+  | "application/pdf"
+  | "application/json";
 
 export default async function readFile(filePath: string) {
-  const isRequestingAvatar = filePath.startsWith("uploads/avatar");
-
   let contentType: ReturnContentTypes;
 
   if (s3Client) {
@@ -41,12 +40,12 @@ export default async function readFile(filePath: string) {
       try {
         await headObjectAsync(bucketParams);
       } catch (err) {
-        contentType = "text/html";
+        contentType = "text/plain";
 
         returnObject = {
-          file: isRequestingAvatar ? "File not found." : fileNotFoundTemplate,
+          file: "File not found.",
           contentType,
-          status: isRequestingAvatar ? 200 : 400,
+          status: 400,
         };
       }
 
@@ -60,6 +59,8 @@ export default async function readFile(filePath: string) {
           contentType = "application/pdf";
         } else if (filePath.endsWith(".png")) {
           contentType = "image/png";
+        } else if (filePath.endsWith("_readability.json")) {
+          contentType = "application/json";
         } else {
           // if (filePath.endsWith(".jpg"))
           contentType = "image/jpeg";
@@ -71,9 +72,9 @@ export default async function readFile(filePath: string) {
     } catch (err) {
       console.log("Error:", err);
 
-      contentType = "text/html";
+      contentType = "text/plain";
       return {
-        file: "An internal occurred, please contact support.",
+        file: "An internal occurred, please contact the support team.",
         contentType,
       };
     }
@@ -85,6 +86,8 @@ export default async function readFile(filePath: string) {
       contentType = "application/pdf";
     } else if (filePath.endsWith(".png")) {
       contentType = "image/png";
+    } else if (filePath.endsWith("_readability.json")) {
+      contentType = "application/json";
     } else {
       // if (filePath.endsWith(".jpg"))
       contentType = "image/jpeg";
@@ -92,9 +95,9 @@ export default async function readFile(filePath: string) {
 
     if (!fs.existsSync(creationPath))
       return {
-        file: isRequestingAvatar ? "File not found." : fileNotFoundTemplate,
-        contentType: "text/html",
-        status: isRequestingAvatar ? 200 : 400,
+        file: "File not found.",
+        contentType: "text/plain",
+        status: 400,
       };
     else {
       const file = fs.readFileSync(creationPath);

lib/api/verifySubscription.ts

@@ -0,0 +1,75 @@
+import { prisma } from "./db";
+import { Subscription, User } from "@prisma/client";
+import checkSubscriptionByEmail from "./checkSubscriptionByEmail";
+
+interface UserIncludingSubscription extends User {
+  subscriptions: Subscription | null;
+}
+
+export default async function verifySubscription(
+  user?: UserIncludingSubscription
+) {
+  if (!user) {
+    return null;
+  }
+
+  const subscription = user.subscriptions;
+
+  const currentDate = new Date();
+
+  if (
+    subscription &&
+    currentDate > subscription.currentPeriodEnd &&
+    !subscription.active
+  ) {
+    return null;
+  }
+
+  if (!subscription || currentDate > subscription.currentPeriodEnd) {
+    const {
+      active,
+      stripeSubscriptionId,
+      currentPeriodStart,
+      currentPeriodEnd,
+    } = await checkSubscriptionByEmail(user.email as string);
+
+    if (
+      active &&
+      stripeSubscriptionId &&
+      currentPeriodStart &&
+      currentPeriodEnd
+    ) {
+      await prisma.subscription
+        .upsert({
+          where: {
+            userId: user.id,
+          },
+          create: {
+            active,
+            stripeSubscriptionId,
+            currentPeriodStart: new Date(currentPeriodStart),
+            currentPeriodEnd: new Date(currentPeriodEnd),
+            userId: user.id,
+          },
+          update: {
+            active,
+            stripeSubscriptionId,
+            currentPeriodStart: new Date(currentPeriodStart),
+            currentPeriodEnd: new Date(currentPeriodEnd),
+          },
+        })
+        .catch((err) => console.log(err));
+    }
+
+    if (!active) {
+      if (user.username)
+        // await prisma.user.update({
+        //   where: { id: user.id },
+        //   data: { username: null },
+        // });
+        return null;
+    }
+  }
+
+  return user;
+}

lib/api/verifyUser.ts

@@ -0,0 +1,60 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "./db";
+import { User } from "@prisma/client";
+import verifySubscription from "./verifySubscription";
+
+type Props = {
+  req: NextApiRequest;
+  res: NextApiResponse;
+};
+
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function verifyUser({
+  req,
+  res,
+}: Props): Promise<User | null> {
+  const token = await getToken({ req });
+  const userId = token?.id;
+
+  if (!userId) {
+    res.status(401).json({ response: "You must be logged in." });
+    return null;
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+    include: {
+      subscriptions: true,
+    },
+  });
+
+  if (!user) {
+    res.status(404).json({ response: "User not found." });
+    return null;
+  }
+
+  if (!user.username) {
+    res.status(401).json({
+      response: "Username not found.",
+    });
+    return null;
+  }
+
+  if (STRIPE_SECRET_KEY) {
+    const subscribedUser = verifySubscription(user);
+
+    if (!subscribedUser) {
+      res.status(401).json({
+        response:
+          "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
+      });
+      return null;
+    }
+  }
+
+  return user;
+}

lib/client/addMemberToCollection.ts

@@ -22,21 +22,20 @@ const addMemberToCollection = async (
     memberUsername.trim().toLowerCase() !== ownerUsername.toLowerCase()
   ) {
     // Lookup, get data/err, list ...
-    const user = await getPublicUserData({
-      username: memberUsername.trim().toLowerCase(),
-    });
+    const user = await getPublicUserData(memberUsername.trim().toLowerCase());
 
     if (user.username) {
       setMember({
         collectionId: collection.id,
-        userId: user.id,
         canCreate: false,
         canUpdate: false,
         canDelete: false,
+        userId: user.id,
         user: {
           id: user.id,
           name: user.name,
           username: user.username,
+          image: user.image,
         },
       });
     }

lib/client/avatarExists.ts

@@ -1,13 +0,0 @@
-const avatarCache = new Map();
-
-export default async function avatarExists(fileUrl: string): Promise<boolean> {
-  if (avatarCache.has(fileUrl)) {
-    return avatarCache.get(fileUrl);
-  }
-
-  const response = await fetch(fileUrl, { method: "HEAD" });
-  const exists = !(response.headers.get("content-type") === "text/html");
-
-  avatarCache.set(fileUrl, exists);
-  return exists;
-}

lib/client/getLatestVersion.ts

@@ -0,0 +1,16 @@
+export default async function getLatestVersion(setShowAnnouncement: Function) {
+  const announcementId = localStorage.getItem("announcementId");
+
+  const response = await fetch(
+    `https://blog.linkwarden.app/latest-announcement.json`
+  );
+
+  const data = await response.json();
+
+  const latestAnnouncement = data.id;
+
+  if (announcementId !== latestAnnouncement) {
+    setShowAnnouncement(true);
+    localStorage.setItem("announcementId", latestAnnouncement);
+  }
+}

lib/client/getPublicCollectionData.ts

@@ -17,7 +17,7 @@ const getPublicCollectionData = async (
   const encodedData = encodeURIComponent(JSON.stringify(requestBody));
 
   const res = await fetch(
-    "/api/public/collections?body=" + encodeURIComponent(encodedData)
+    "/api/v1/public/collections?body=" + encodeURIComponent(encodedData)
   );
 
   const data = await res.json();

lib/client/getPublicUserData.ts

@@ -1,17 +1,7 @@
 import { toast } from "react-hot-toast";
 
-export default async function getPublicUserData({
-  username,
-  id,
-}: {
-  username?: string;
-  id?: number;
-}) {
-  const response = await fetch(
-    `/api/users?id=${id}&${
-      username ? `username=${username?.toLowerCase()}` : undefined
-    }`
-  );
+export default async function getPublicUserData(id: number | string) {
+  const response = await fetch(`/api/v1/public/users/${id}`);
 
   const data = await response.json();
 

next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ["t2.gstatic.com"],
+    minimumCacheTTL: 10,
   },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "repository": "https://github.com/Daniel31x13/link-warden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -21,6 +21,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
+    "@mozilla/readability": "^0.4.4",
     "@next/font": "13.4.9",
     "@prisma/client": "^4.16.2",
     "@stripe/stripe-js": "^1.54.1",
@@ -32,12 +33,14 @@
     "axios": "^1.5.1",
     "bcrypt": "^5.1.0",
     "colorthief": "^2.4.0",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "csstype": "^3.1.2",
+    "dompurify": "^3.0.6",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
     "framer-motion": "^10.16.4",
     "jsdom": "^22.1.0",
+    "micro": "^10.0.1",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
     "next-themes": "^0.2.1",
@@ -57,6 +60,7 @@
   "devDependencies": {
     "@playwright/test": "^1.35.1",
     "@types/bcrypt": "^5.0.0",
+    "@types/dompurify": "^3.0.4",
     "@types/jsdom": "^21.1.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.26",

pages/_app.tsx

@@ -22,7 +22,11 @@ export default function App({
   }, []);
 
   return (
-    <SessionProvider session={pageProps.session}>
+    <SessionProvider
+      session={pageProps.session}
+      refetchOnWindowFocus={false}
+      basePath="/api/v1/auth"
+    >
       <Head>
         <title>Linkwarden</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />

pages/api/collections/index.ts

@@ -1,40 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
-import getCollections from "@/lib/api/controllers/collections/getCollections";
-import postCollection from "@/lib/api/controllers/collections/postCollection";
-import updateCollection from "@/lib/api/controllers/collections/updateCollection";
-import deleteCollection from "@/lib/api/controllers/collections/deleteCollection";
-
-export default async function collections(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  if (req.method === "GET") {
-    const collections = await getCollections(session.user.id);
-    return res
-      .status(collections.status)
-      .json({ response: collections.response });
-  } else if (req.method === "POST") {
-    const newCollection = await postCollection(req.body, session.user.id);
-    return res
-      .status(newCollection.status)
-      .json({ response: newCollection.response });
-  } else if (req.method === "PUT") {
-    const updated = await updateCollection(req.body, session.user.id);
-    return res.status(updated.status).json({ response: updated.response });
-  } else if (req.method === "DELETE") {
-    const deleted = await deleteCollection(req.body, session.user.id);
-    return res.status(deleted.status).json({ response: deleted.response });
-  }
-}

pages/api/links/index.ts

@@ -1,39 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
-import getLinks from "@/lib/api/controllers/links/getLinks";
-import postLink from "@/lib/api/controllers/links/postLink";
-import deleteLink from "@/lib/api/controllers/links/deleteLink";
-import updateLink from "@/lib/api/controllers/links/updateLink";
-
-export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  if (req.method === "GET") {
-    const links = await getLinks(session.user.id, req?.query?.body as string);
-    return res.status(links.status).json({ response: links.response });
-  } else if (req.method === "POST") {
-    const newlink = await postLink(req.body, session.user.id);
-    return res.status(newlink.status).json({
-      response: newlink.response,
-    });
-  } else if (req.method === "PUT") {
-    const updated = await updateLink(req.body, session.user.id);
-    return res.status(updated.status).json({
-      response: updated.response,
-    });
-  } else if (req.method === "DELETE") {
-    const deleted = await deleteLink(req.body, session.user.id);
-    return res.status(deleted.status).json({
-      response: deleted.response,
-    });
-  }
-}

pages/api/tags/index.ts

@@ -1,21 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
-import getTags from "@/lib/api/controllers/tags/getTags";
-
-export default async function tags(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.username) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  if (req.method === "GET") {
-    const tags = await getTags(session.user.id);
-    return res.status(tags.status).json({ response: tags.response });
-  }
-}

pages/api/users/index.ts

@@ -1,39 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
-import getUsers from "@/lib/api/controllers/users/getUsers";
-import updateUser from "@/lib/api/controllers/users/updateUser";
-
-export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  const lookupUsername = (req.query.username as string) || undefined;
-  const lookupId = Number(req.query.id) || undefined;
-  const isSelf =
-    session.user.username === lookupUsername || session.user.id === lookupId
-      ? true
-      : false;
-
-  if (req.method === "GET") {
-    const users = await getUsers({
-      params: {
-        lookupUsername,
-        lookupId,
-      },
-      isSelf,
-      username: session.user.username,
-    });
-    return res.status(users.status).json({ response: users.response });
-  } else if (req.method === "PUT") {
-    const updated = await updateUser(req.body, session.user);
-    return res.status(updated.status).json({ response: updated.response });
-  }
-}

pages/api/v1/archives/[...params].ts

@@ -1,30 +1,22 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
 import getPermission from "@/lib/api/getPermission";
 import readFile from "@/lib/api/storage/readFile";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   if (!req.query.params)
     return res.status(401).json({ response: "Invalid parameters." });
 
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
   const collectionId = req.query.params[0];
   const linkId = req.query.params[1];
 
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user?.username)
-    return res.status(401).json({ response: "You must be logged in." });
-  else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
-
-  const collectionIsAccessible = await getPermission(
-    session.user.id,
-    Number(collectionId)
-  );
+  const collectionIsAccessible = await getPermission({
+    userId: user.id,
+    collectionId: Number(collectionId),
+  });
 
   if (!collectionIsAccessible)
     return res

pages/api/v1/auth/[...nextauth].ts

@@ -1,24 +1,26 @@
 import { prisma } from "@/lib/api/db";
 import NextAuth from "next-auth/next";
 import CredentialsProvider from "next-auth/providers/credentials";
-import { AuthOptions, Session } from "next-auth";
+import { AuthOptions } from "next-auth";
 import bcrypt from "bcrypt";
 import EmailProvider from "next-auth/providers/email";
-import { JWT } from "next-auth/jwt";
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
 import { Provider } from "next-auth/providers";
-import checkSubscription from "@/lib/api/checkSubscription";
+import verifySubscription from "@/lib/api/verifySubscription";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
 const providers: Provider[] = [
   CredentialsProvider({
     type: "credentials",
     credentials: {},
     async authorize(credentials, req) {
+      console.log("User log in attempt...");
       if (!credentials) return null;
 
       const { username, password } = credentials as {
@@ -26,7 +28,7 @@ const providers: Provider[] = [
         password: string;
       };
 
-      const findUser = await prisma.user.findFirst({
+      const user = await prisma.user.findFirst({
         where: emailEnabled
           ? {
               OR: [
@@ -46,12 +48,12 @@ const providers: Provider[] = [
 
       let passwordMatches: boolean = false;
 
-      if (findUser?.password) {
-        passwordMatches = bcrypt.compareSync(password, findUser.password);
+      if (user?.password) {
+        passwordMatches = bcrypt.compareSync(password, user.password);
       }
 
       if (passwordMatches) {
-        return findUser;
+        return { id: user?.id };
       } else return null as any;
     },
   }),
@@ -81,65 +83,31 @@ export const authOptions: AuthOptions = {
     verifyRequest: "/confirmation",
   },
   callbacks: {
-    session: async ({ session, token }: { session: Session; token: JWT }) => {
-      session.user.id = parseInt(token.id as string);
-      session.user.username = token.username as string;
-      session.user.isSubscriber = token.isSubscriber as boolean;
+    async jwt({ token, trigger, user }) {
+      token.sub = token.sub ? Number(token.sub) : undefined;
+      if (trigger === "signIn") token.id = user?.id as number;
 
-      return session;
+      return token;
     },
-    // Using the `...rest` parameter to be able to narrow down the type based on `trigger`
-    async jwt({ token, trigger, session, user }) {
-      const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
-
-      const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
-      const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-        ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
-        : 1209600;
-      const subscriptionIsTimesUp =
-        token.subscriptionCanceledAt &&
-        new Date() >
-          new Date(
-            ((token.subscriptionCanceledAt as number) + secondsInTwoWeeks) *
-              1000
-          );
-
-      if (
-        STRIPE_SECRET_KEY &&
-        (trigger || subscriptionIsTimesUp || !token.isSubscriber)
-      ) {
-        const subscription = await checkSubscription(
-          STRIPE_SECRET_KEY,
-          token.email as string
-        );
-
-        if (subscription.subscriptionCanceledAt) {
-          token.subscriptionCanceledAt = subscription.subscriptionCanceledAt;
-        } else token.subscriptionCanceledAt = undefined;
-
-        token.isSubscriber = subscription.isSubscriber;
-      }
-
-      if (trigger === "signIn") {
-        token.id = user.id;
-        token.username = (user as any).username;
-      } else if (trigger === "update" && token.id) {
-        console.log(token);
+    async session({ session, token }) {
+      session.user.id = token.id;
 
+      if (STRIPE_SECRET_KEY) {
         const user = await prisma.user.findUnique({
           where: {
-            id: token.id as number,
+            id: token.id,
+          },
+          include: {
+            subscriptions: true,
           },
         });
 
         if (user) {
-          token.name = user.name;
-          token.username = user.username?.toLowerCase();
-          token.email = user.email?.toLowerCase();
+          const subscribedUser = await verifySubscription(user);
         }
       }
-      return token;
+
+      return session;
     },
   },
 };

pages/api/v1/avatar/[id].ts

@@ -1,34 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
 import { prisma } from "@/lib/api/db";
 import readFile from "@/lib/api/storage/readFile";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  const userId = session?.user.id;
-  const username = session?.user.username?.toLowerCase();
   const queryId = Number(req.query.id);
 
-  if (!userId || !username)
-    return res
-      .setHeader("Content-Type", "text/html")
-      .status(401)
-      .send("You must be logged in.");
-  else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (!queryId)
     return res
-      .setHeader("Content-Type", "text/html")
+      .setHeader("Content-Type", "text/plain")
       .status(401)
       .send("Invalid parameters.");
 
-  if (userId !== queryId) {
+  if (user.id !== queryId) {
     const targetUser = await prisma.user.findUnique({
       where: {
         id: queryId,
@@ -42,10 +29,15 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       (whitelistedUsername) => whitelistedUsername.username
     );
 
-    if (targetUser?.isPrivate && !whitelistedUsernames?.includes(username)) {
+    if (
+      targetUser?.isPrivate &&
+      user.username &&
+      !whitelistedUsernames?.includes(user.username)
+    ) {
       return res
-        .setHeader("Content-Type", "text/html")
-        .send("This profile is private.");
+        .setHeader("Content-Type", "text/plain")
+        .status(400)
+        .send("File not found.");
     }
   }
 

pages/api/v1/collections/[id].ts

@@ -0,0 +1,27 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import updateCollectionById from "@/lib/api/controllers/collections/collectionId/updateCollectionById";
+import deleteCollectionById from "@/lib/api/controllers/collections/collectionId/deleteCollectionById";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function collections(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "PUT") {
+    const updated = await updateCollectionById(
+      user.id,
+      Number(req.query.id) as number,
+      req.body
+    );
+    return res.status(updated.status).json({ response: updated.response });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteCollectionById(
+      user.id,
+      Number(req.query.id) as number
+    );
+    return res.status(deleted.status).json({ response: deleted.response });
+  }
+}

pages/api/v1/collections/index.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getCollections from "@/lib/api/controllers/collections/getCollections";
+import postCollection from "@/lib/api/controllers/collections/postCollection";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function collections(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const collections = await getCollections(user.id);
+    return res
+      .status(collections.status)
+      .json({ response: collections.response });
+  } else if (req.method === "POST") {
+    const newCollection = await postCollection(req.body, user.id);
+    return res
+      .status(newCollection.status)
+      .json({ response: newCollection.response });
+  }
+}

pages/api/v1/dashboard/index.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { LinkRequestQuery } from "@/types/global";
+import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const convertedData: LinkRequestQuery = {
+      sort: Number(req.query.sort as string),
+      cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
+    };
+
+    const links = await getDashboardData(user.id, convertedData);
+    return res.status(links.status).json({ response: links.response });
+  }
+}

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

@@ -0,0 +1,63 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import archive from "@/lib/api/archive";
+import { prisma } from "@/lib/api/db";
+import verifyUser from "@/lib/api/verifyUser";
+
+const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const link = await prisma.link.findUnique({
+    where: {
+      id: Number(req.query.id),
+    },
+    include: { collection: true },
+  });
+
+  if (!link)
+    return res.status(404).json({
+      response: "Link not found.",
+    });
+
+  if (link.collection.ownerId !== user.id)
+    return res.status(401).json({
+      response: "Permission denied.",
+    });
+
+  if (req.method === "PUT") {
+    if (
+      link?.lastPreserved &&
+      getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved) <
+        RE_ARCHIVE_LIMIT
+    )
+      return res.status(400).json({
+        response: `This link is currently being saved or has already been preserved. Please retry in ${
+          RE_ARCHIVE_LIMIT -
+          Math.floor(
+            getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved)
+          )
+        } minutes or create a new one.`,
+      });
+
+    archive(link.id, link.url, user.id);
+    return res.status(200).json({
+      response: "Link is being archived.",
+    });
+  }
+
+  // TODO - Later?
+  // else if (req.method === "DELETE") {}
+}
+
+const getTimezoneDifferenceInMinutes = (future: Date, past: Date) => {
+  const date1 = new Date(future);
+  const date2 = new Date(past);
+
+  const diffInMilliseconds = Math.abs(date1.getTime() - date2.getTime());
+
+  const diffInMinutes = diffInMilliseconds / (1000 * 60);
+
+  return diffInMinutes;
+};

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

@@ -0,0 +1,31 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import deleteLinkById from "@/lib/api/controllers/links/linkId/deleteLinkById";
+import updateLinkById from "@/lib/api/controllers/links/linkId/updateLinkById";
+import getLinkById from "@/lib/api/controllers/links/linkId/getLinkById";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const updated = await getLinkById(user.id, Number(req.query.id));
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "PUT") {
+    const updated = await updateLinkById(
+      user.id,
+      Number(req.query.id),
+      req.body
+    );
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLinkById(user.id, Number(req.query.id));
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
+  }
+}

pages/api/v1/links/index.ts

@@ -0,0 +1,43 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getLinks from "@/lib/api/controllers/links/getLinks";
+import postLink from "@/lib/api/controllers/links/postLink";
+import { LinkRequestQuery } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    // Convert the type of the request query to "LinkRequestQuery"
+    const convertedData: LinkRequestQuery = {
+      sort: Number(req.query.sort as string),
+      cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
+      collectionId: req.query.collectionId
+        ? Number(req.query.collectionId as string)
+        : undefined,
+      tagId: req.query.tagId ? Number(req.query.tagId as string) : undefined,
+      pinnedOnly: req.query.pinnedOnly
+        ? req.query.pinnedOnly === "true"
+        : undefined,
+      searchQueryString: req.query.searchQueryString
+        ? (req.query.searchQueryString as string)
+        : undefined,
+      searchByName: req.query.searchByName === "true" ? true : undefined,
+      searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
+      searchByDescription:
+        req.query.searchByDescription === "true" ? true : undefined,
+      searchByTextContent:
+        req.query.searchByTextContent === "true" ? true : undefined,
+      searchByTags: req.query.searchByTags === "true" ? true : undefined,
+    };
+
+    const links = await getLinks(user.id, convertedData);
+    return res.status(links.status).json({ response: links.response });
+  } else if (req.method === "POST") {
+    const newlink = await postLink(req.body, user.id);
+    return res.status(newlink.status).json({
+      response: newlink.response,
+    });
+  }
+}

pages/api/v1/migration/index.ts

@@ -1,24 +1,24 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import exportData from "@/lib/api/controllers/migration/exportData";
 import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFile";
 import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
+import verifyUser from "@/lib/api/verifyUser";
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "10mb",
+    },
+  },
+};
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-
-  if (!session?.user.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-    });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
-    const data = await exportData(session.user.id);
+    const data = await exportData(user.id);
 
     if (data.status === 200)
       return res
@@ -31,10 +31,10 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
     let data;
     if (request.format === MigrationFormat.htmlFile)
-      data = await importFromHTMLFile(session.user.id, request.data);
+      data = await importFromHTMLFile(user.id, request.data);
 
     if (request.format === MigrationFormat.linkwarden)
-      data = await importFromLinkwarden(session.user.id, request.data);
+      data = await importFromLinkwarden(user.id, request.data);
 
     if (data) return res.status(data.status).json({ response: data.response });
   }

pages/api/v1/payment/index.ts

@@ -1,32 +1,39 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import paymentCheckout from "@/lib/api/paymentCheckout";
 import { Plan } from "@/types/global";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
   const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
   const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
-  const session = await getServerSession(req, res, authOptions);
 
-  if (!session?.user?.id)
-    return res.status(401).json({ response: "You must be logged in." });
-  else if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID) {
+  const token = await getToken({ req });
+
+  if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID)
     return res.status(400).json({ response: "Payment is disabled." });
-  }
+
+  console.log(token);
+
+  if (!token?.id) return res.status(404).json({ response: "Token invalid." });
+
+  const email = (await prisma.user.findUnique({ where: { id: token.id } }))
+    ?.email;
+
+  if (!email) return res.status(404).json({ response: "User not found." });
 
   let PRICE_ID = MONTHLY_PRICE_ID;
 
-  if ((Number(req.query.plan) as unknown as Plan) === Plan.monthly)
+  if ((Number(req.query.plan) as Plan) === Plan.monthly)
     PRICE_ID = MONTHLY_PRICE_ID;
-  else if ((Number(req.query.plan) as unknown as Plan) === Plan.yearly)
+  else if ((Number(req.query.plan) as Plan) === Plan.yearly)
     PRICE_ID = YEARLY_PRICE_ID;
 
   if (req.method === "GET") {
     const users = await paymentCheckout(
       STRIPE_SECRET_KEY,
-      session?.user.email,
+      email as string,
       PRICE_ID
     );
     return res.status(users.status).json({ response: users.response });

pages/api/v1/public/users/[id].ts

@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getPublicUserById from "@/lib/api/controllers/public/users/getPublicUserById";
+import { getToken } from "next-auth/jwt";
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const token = await getToken({ req });
+  const requestingId = token?.id;
+
+  const lookupId = req.query.id as string;
+
+  // Check if "lookupId" is the user "id" or their "username"
+  const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
+
+  if (req.method === "GET") {
+    const users = await getPublicUserById(lookupId, isId, requestingId);
+    return res.status(users.status).json({ response: users.response });
+  }
+}

pages/api/v1/tags/[id].ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteTagById from "@/lib/api/controllers/tags/tagId/deleteTagById";
+
+export default async function tags(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  const tagId = Number(req.query.id);
+
+  if (req.method === "PUT") {
+    const tags = await updeteTagById(user.id, tagId, req.body);
+    return res.status(tags.status).json({ response: tags.response });
+  } else if (req.method === "DELETE") {
+    const tags = await deleteTagById(user.id, tagId);
+    return res.status(tags.status).json({ response: tags.response });
+  }
+}

pages/api/v1/tags/index.ts

@@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getTags from "@/lib/api/controllers/tags/getTags";
+import verifyUser from "@/lib/api/verifyUser";
+
+export default async function tags(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "GET") {
+    const tags = await getTags(user.id);
+    return res.status(tags.status).json({ response: tags.response });
+  }
+}

pages/api/v1/users/[id].ts

@@ -0,0 +1,58 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import getUserById from "@/lib/api/controllers/users/userId/getUserById";
+import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
+import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
+import { getToken } from "next-auth/jwt";
+import { prisma } from "@/lib/api/db";
+import verifySubscription from "@/lib/api/verifySubscription";
+
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
+
+export default async function users(req: NextApiRequest, res: NextApiResponse) {
+  const token = await getToken({ req });
+  const userId = token?.id;
+
+  if (!userId) {
+    return res.status(401).json({ response: "You must be logged in." });
+  }
+
+  if (userId !== Number(req.query.id))
+    return res.status(401).json({ response: "Permission denied." });
+
+  if (req.method === "GET") {
+    const users = await getUserById(userId);
+    return res.status(users.status).json({ response: users.response });
+  }
+
+  if (STRIPE_SECRET_KEY) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+      include: {
+        subscriptions: true,
+      },
+    });
+
+    if (user) {
+      const subscribedUser = await verifySubscription(user);
+      if (!subscribedUser) {
+        return res.status(401).json({
+          response:
+            "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
+        });
+      }
+    } else {
+      return res.status(404).json({ response: "User not found." });
+    }
+  }
+
+  if (req.method === "PUT") {
+    const updated = await updateUserById(userId, req.body);
+    return res.status(updated.status).json({ response: updated.response });
+  } else if (req.method === "DELETE") {
+    console.log(req.body);
+    const updated = await deleteUserById(userId, req.body);
+    return res.status(updated.status).json({ response: updated.response });
+  }
+}