From 966136dab6a1ab7c27f1532d6a01d481ccf92fe9 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 25 Oct 2023 15:42:36 -0400
Subject: [PATCH 01/33] created migration script [WIP]

---
 .../users/userId/deleteUserById.ts            |  2 +-
 lib/api/migration/migrateToV2.js              | 83 +++++++++++++++++++
 .../migration.sql                             | 13 +++
 prisma/schema.prisma                          |  5 +-
 4 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 lib/api/migration/migrateToV2.js
 create mode 100644 prisma/migrations/20231025123038_added_pathname_to_files/migration.sql

diff --git a/lib/api/controllers/users/userId/deleteUserById.ts b/lib/api/controllers/users/userId/deleteUserById.ts
index 731e877..0641525 100644
--- a/lib/api/controllers/users/userId/deleteUserById.ts
+++ b/lib/api/controllers/users/userId/deleteUserById.ts
@@ -59,7 +59,7 @@ export default async function deleteUserById(
         where: { collectionId: collection.id },
       });
 
-      // Delete archive folders associated with collections
+      // Delete archive folders
       removeFolder({ filePath: `archives/${collection.id}` });
     }
 
diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
new file mode 100644
index 0000000..aeb07fb
--- /dev/null
+++ b/lib/api/migration/migrateToV2.js
@@ -0,0 +1,83 @@
+const { PrismaClient } = require("@prisma/client");
+const axios = require("axios");
+const { existsSync } = require("fs");
+
+const prisma = new PrismaClient();
+
+const STORAGE_FOLDER = process.env.STORAGE_FOLDER || "data";
+
+async function checkFileExistence(path) {
+  try {
+    if (existsSync(path)) {
+      return true;
+    } else return false;
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+// Avatars
+async function migrateAvatars() {
+  const users = await prisma.user.findMany();
+
+  for (let user of users) {
+    const path = STORAGE_FOLDER + `/uploads/avatar/${user.id}.jpg`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      // await prisma.user.update({
+      //   where: { id: user.id },
+      //   data: { image: "avatar/" + user.id },
+      // });
+      console.log(`Updated avatar for user ${user.id}`);
+    } else {
+      console.log(`No avatar found for user ${user.id}`);
+    }
+  }
+
+  const links = await prisma.link.findMany();
+
+  // Screenshots
+  for (let link of links) {
+    const path =
+      STORAGE_FOLDER + `/archives/${link.collectionId}/${link.id}.pdf`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      // await prisma.user.update({
+      //   where: { id: user.id },
+      //   data: { image: "avatar/" + user.id },
+      // });
+      console.log(`Updated capture for link ${link.id}`);
+    } else {
+      console.log(`No capture found for link ${link.id}`);
+    }
+  }
+
+  // PDFs
+  for (let link of links) {
+    const path =
+      STORAGE_FOLDER + `/archives/${link.collectionId}/${link.id}.png`;
+
+    const res = await checkFileExistence(path);
+
+    if (res) {
+      // await prisma.user.update({
+      //   where: { id: user.id },
+      //   data: { image: "avatar/" + user.id },
+      // });
+      console.log(`Updated capture for link ${link.id}`);
+    } else {
+      console.log(`No capture found for link ${link.id}`);
+    }
+  }
+
+  await prisma.$disconnect();
+}
+
+migrateAvatars().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql b/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql
new file mode 100644
index 0000000..65fa41a
--- /dev/null
+++ b/prisma/migrations/20231025123038_added_pathname_to_files/migration.sql
@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `image` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "pdfPath" TEXT,
+ADD COLUMN     "screenshotPath" TEXT;
+
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "image",
+ADD COLUMN     "imagePath" TEXT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ab67eb6..e417a4f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -42,7 +42,7 @@ model User {
 
   email         String?   @unique
   emailVerified DateTime?
-  image         String?
+  imagePath     String?
 
   accounts Account[]
   sessions Session[]
@@ -122,6 +122,9 @@ model Link {
   collectionId   Int
   tags           Tag[]
 
+  screenshotPath String?
+  pdfPath        String?
+
   createdAt      DateTime   @default(now())
 }
 

From 788fc56caf6bea85150f7114405ef4bfa60de557 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:23:38 +0000
Subject: [PATCH 02/33] Bump crypto-js from 4.1.1 to 4.2.0

Bumps [crypto-js](https://github.com/brix/crypto-js) from 4.1.1 to 4.2.0.
- [Commits](https://github.com/brix/crypto-js/compare/4.1.1...4.2.0)

---
updated-dependencies:
- dependency-name: crypto-js
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 93867e6..c84eddc 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "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",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
diff --git a/yarn.lock b/yarn.lock
index bb2f10a..ddbf62f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2097,10 +2097,10 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto-js@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
-  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
 
 cssesc@^3.0.0:
   version "3.0.0"

From ea8673783503dff0f0a74e71568bc51f41c38fde Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 26 Oct 2023 18:49:46 -0400
Subject: [PATCH 03/33] bugs fixed

---
 components/FilterSearchDropdown.tsx         |   8 +-
 components/Modal/Link/AddOrEditLink.tsx     |   2 +
 lib/api/controllers/migration/exportData.ts |   2 +-
 lib/api/migration/migrateToV2.js            | 107 ++++++++++++++------
 pages/api/v1/getToken.ts                    |   2 +
 pages/collections/index.tsx                 |   2 +-
 pages/settings/delete.tsx                   |   3 +-
 7 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 2c835ab..181febb 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -1,12 +1,16 @@
 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;
+    tags: boolean;
+  };
 };
 
 export default function FilterSearchDropdown({
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index dcdf422..201b3d0 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -46,6 +46,8 @@ export default function AddOrEditLink({
       url: "",
       description: "",
       tags: [],
+      screenshotPath: "",
+      pdfPath: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
diff --git a/lib/api/controllers/migration/exportData.ts b/lib/api/controllers/migration/exportData.ts
index 49a25b4..2776d85 100644
--- a/lib/api/controllers/migration/exportData.ts
+++ b/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)) {
diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
index aeb07fb..29c7e17 100644
--- a/lib/api/migration/migrateToV2.js
+++ b/lib/api/migration/migrateToV2.js
@@ -1,83 +1,124 @@
+const { S3 } = require("@aws-sdk/client-s3");
 const { PrismaClient } = require("@prisma/client");
 const axios = require("axios");
 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) {
-  try {
-    if (existsSync(path)) {
-      return true;
-    } else return false;
-  } catch (err) {
-    console.log(err);
+  if (s3Client) {
+    const bucketParams = {
+      Bucket: process.env.BUCKET_NAME,
+      Key: path,
+    };
+
+    console.log(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 migrateAvatars() {
+async function migrateToV2() {
   const users = await prisma.user.findMany();
 
   for (let user of users) {
-    const path = STORAGE_FOLDER + `/uploads/avatar/${user.id}.jpg`;
+    const path = `uploads/avatar/${user.id}.jpg`;
 
     const res = await checkFileExistence(path);
 
     if (res) {
-      // await prisma.user.update({
-      //   where: { id: user.id },
-      //   data: { image: "avatar/" + user.id },
-      // });
-      console.log(`Updated avatar for user ${user.id}`);
+      await prisma.user.update({
+        where: { id: user.id },
+        data: { imagePath: path },
+      });
+      console.log(`Updated avatar for avatar ${user.id}`);
     } else {
-      console.log(`No avatar found for user ${user.id}`);
+      console.log(`No avatar found for avatar ${user.id}`);
     }
   }
 
   const links = await prisma.link.findMany();
 
-  // Screenshots
+  // PDFs
   for (let link of links) {
-    const path =
-      STORAGE_FOLDER + `/archives/${link.collectionId}/${link.id}.pdf`;
+    const path = `archives/${link.collectionId}/${link.id}.pdf`;
 
     const res = await checkFileExistence(path);
 
     if (res) {
-      // await prisma.user.update({
-      //   where: { id: user.id },
-      //   data: { image: "avatar/" + user.id },
-      // });
-      console.log(`Updated capture for link ${link.id}`);
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { pdfPath: path },
+      });
+      console.log(`Updated capture for pdf ${link.id}`);
     } else {
-      console.log(`No capture found for link ${link.id}`);
+      console.log(`No capture found for pdf ${link.id}`);
     }
   }
 
-  // PDFs
+  // Screenshots
   for (let link of links) {
-    const path =
-      STORAGE_FOLDER + `/archives/${link.collectionId}/${link.id}.png`;
+    const path = `archives/${link.collectionId}/${link.id}.png`;
 
     const res = await checkFileExistence(path);
 
     if (res) {
-      // await prisma.user.update({
-      //   where: { id: user.id },
-      //   data: { image: "avatar/" + user.id },
-      // });
-      console.log(`Updated capture for link ${link.id}`);
+      await prisma.link.update({
+        where: { id: link.id },
+        data: { screenshotPath: path },
+      });
+      console.log(`Updated capture for screenshot ${link.id}`);
     } else {
-      console.log(`No capture found for link ${link.id}`);
+      console.log(`No capture found for screenshot ${link.id}`);
     }
   }
 
   await prisma.$disconnect();
 }
 
-migrateAvatars().catch((e) => {
+migrateToV2().catch((e) => {
   console.error(e);
   process.exit(1);
 });
diff --git a/pages/api/v1/getToken.ts b/pages/api/v1/getToken.ts
index c767075..e51c4bb 100644
--- a/pages/api/v1/getToken.ts
+++ b/pages/api/v1/getToken.ts
@@ -14,3 +14,5 @@
 //   }
 //   res.end();
 // };
+
+export {};
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 0df0588..1f81285 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -154,7 +154,7 @@ export default function Collections() {
                 </p>
 
                 <p className="capitalize text-black dark:text-white">
-                  Shared collections you're a member of
+                  Shared collections you&apos;re a member of
                 </p>
               </div>
             </div>
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index e072ab1..6a293af 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -119,7 +119,8 @@ export default function Password() {
             </label>
             <div>
               <p className="text-sm mb-2 text-black dark:text-white">
-                More information (the more details, the more helpful it'd be)
+                More information (the more details, the more helpful it&apos;d
+                be)
               </p>
 
               <textarea

From c08e7d45803a5f841f671c580ccf2d54779f490d Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Fri, 27 Oct 2023 16:06:42 -0400
Subject: [PATCH 04/33] updated prisma schema

---
 lib/api/migration/migrateToV2.js              |  1 -
 .../migration.sql                             | 24 +++++
 .../migration.sql                             | 18 ++++
 prisma/schema.prisma                          | 89 ++++++++-----------
 4 files changed, 79 insertions(+), 53 deletions(-)
 create mode 100644 prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql
 create mode 100644 prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql

diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
index 29c7e17..ec2300a 100644
--- a/lib/api/migration/migrateToV2.js
+++ b/lib/api/migration/migrateToV2.js
@@ -31,7 +31,6 @@ async function checkFileExistence(path) {
       Key: path,
     };
 
-    console.log(path);
     try {
       const headObjectAsync = util.promisify(
         s3Client.headObject.bind(s3Client)
diff --git a/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql b/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql
new file mode 100644
index 0000000..80cc4b5
--- /dev/null
+++ b/prisma/migrations/20231027194841_add_updated_at_fields_to_tables/migration.sql
@@ -0,0 +1,24 @@
+-- AlterTable
+ALTER TABLE "Collection" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "Tag" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "UsersAndCollections" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "VerificationToken" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- AlterTable
+ALTER TABLE "WhitelistedUser" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
diff --git a/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql b/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql
new file mode 100644
index 0000000..e4c46ac
--- /dev/null
+++ b/prisma/migrations/20231027195438_remove_unnecessary_tables/migration.sql
@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Account` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `Session` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Account" DROP CONSTRAINT "Account_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Session" DROP CONSTRAINT "Session_userId_fkey";
+
+-- DropTable
+DROP TABLE "Account";
+
+-- DropTable
+DROP TABLE "Session";
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e417a4f..dda64fd 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -7,75 +7,52 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model Account {
-  id                String  @id @default(cuid())
-  userId            Int
-  type              String
-  provider          String
-  providerAccountId String
-  refresh_token     String?
-  access_token      String?
-  expires_at        Int?
-  token_type        String?
-  scope             String?
-  id_token          String?
-  session_state     String?
-
-  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-  @@unique([provider, providerAccountId])
-}
-
-model Session {
-  id           String   @id @default(cuid())
-  sessionToken String   @unique
-  userId       Int
-  expires      DateTime
-  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
-}
-
 model User {
-  id   Int    @id @default(autoincrement())
-  name String
+  id                      Int             @id @default(autoincrement())
+  name                    String
 
-  username String? @unique
+  username                String?         @unique
 
-  email         String?   @unique
-  emailVerified DateTime?
-  imagePath     String?
+  email                   String?         @unique
+  emailVerified           DateTime?
+  imagePath               String?
 
-  accounts Account[]
-  sessions Session[]
+  password                String
+  collections             Collection[]
 
-  password    String
-  collections Collection[]
+  tags                    Tag[]
 
-  tags Tag[]
-
-  pinnedLinks Link[]
+  pinnedLinks             Link[]
 
   archiveAsScreenshot     Boolean         @default(true)
   archiveAsPDF            Boolean         @default(true)
   archiveAsWaybackMachine Boolean         @default(false)
 
-  collectionsJoined UsersAndCollections[]
-  isPrivate         Boolean               @default(false)
-  whitelistedUsers  WhitelistedUser[]
-  createdAt         DateTime              @default(now())
+  collectionsJoined       UsersAndCollections[]
+  isPrivate               Boolean         @default(false)
+  whitelistedUsers        WhitelistedUser[]
+  createdAt               DateTime        @default(now())
+  updatedAt               DateTime        @updatedAt @default(now())
 }
 
 model WhitelistedUser {
-  id Int @id @default(autoincrement())
+  id             Int        @id @default(autoincrement())
 
-  username String @default("")
-  User     User?  @relation(fields: [userId], references: [id])
-  userId   Int?
+  username       String     @default("")
+  User           User?      @relation(fields: [userId], references: [id])
+  userId         Int?
+
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 }
 
 model VerificationToken {
-  identifier String
-  token      String   @unique
-  expires    DateTime
+  identifier     String
+  token          String     @unique
+  expires        DateTime
+
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 
   @@unique([identifier, token])
 }
@@ -91,7 +68,8 @@ model Collection {
   ownerId   Int
   members   UsersAndCollections[]
   links     Link[]
-  createdAt DateTime              @default(now())
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 
   @@unique([name, ownerId])
 }
@@ -107,6 +85,9 @@ model UsersAndCollections {
   canUpdate    Boolean
   canDelete    Boolean
 
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
+
   @@id([userId, collectionId])
 }
 
@@ -126,6 +107,7 @@ model Link {
   pdfPath        String?
 
   createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
 }
 
 model Tag {
@@ -135,5 +117,8 @@ model Tag {
   owner   User   @relation(fields: [ownerId], references: [id])
   ownerId Int
 
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt @default(now())
+
   @@unique([name, ownerId])
 }

From cdcfabec0b2d70e365609e31064b837808d1cc71 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 00:45:14 -0400
Subject: [PATCH 05/33] refactored how avatars are being handled

---
 components/CollectionCard.tsx                 |  2 +-
 .../Modal/Collection/TeamManagement.tsx       |  4 +--
 components/Navbar.tsx                         |  2 +-
 components/ProfilePhoto.tsx                   | 36 +++++++------------
 .../controllers/collections/getCollections.ts |  1 +
 .../users/userId/getPublicUserById.ts         |  1 +
 .../users/userId/updateUserById.ts            | 13 ++++---
 lib/api/migration/migrateToV2.js              |  2 +-
 lib/api/storage/readFile.ts                   | 20 +++++------
 lib/client/addMemberToCollection.ts           |  1 +
 lib/client/avatarExists.ts                    | 13 -------
 lib/client/getPublicUserData.ts               |  2 ++
 next.config.js                                |  1 +
 pages/api/v1/avatar/[id].ts                   |  9 ++---
 pages/collections/[id].tsx                    |  2 +-
 pages/collections/index.tsx                   |  3 --
 pages/settings/account.tsx                    | 18 ++++------
 .../migration.sql                             |  1 +
 prisma/schema.prisma                          |  2 +-
 store/account.ts                              |  4 +--
 types/global.ts                               |  3 +-
 21 files changed, 55 insertions(+), 85 deletions(-)
 delete mode 100644 lib/client/avatarExists.ts
 create mode 100644 prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 76a2706..a67d48d 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -68,7 +68,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 return (
                   <ProfilePhoto
                     key={i}
-                    src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
+                    src={e.user.image ? e.user.image : undefined}
                     className="-mr-3 border-[3px]"
                   />
                 );
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index b163681..07854aa 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -238,7 +238,7 @@ export default function TeamManagement({
                     )}
                     <div className="flex items-center gap-2">
                       <ProfilePhoto
-                        src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
+                        src={e.user.image ? e.user.image : undefined}
                         className="border-[3px]"
                       />
                       <div>
@@ -425,7 +425,7 @@ export default function TeamManagement({
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
-            src={`/api/v1/avatar/${collection.ownerId}?${Date.now()}`}
+            src={`uploads/avatar/${collection.ownerId}.jpg`}
             className="border-[3px]"
           />
           <div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 9f8984f..4a91fb5 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -83,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]"
             />
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index e2f2b39..7dcb02c 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -2,38 +2,28 @@ 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();
+    console.log(src);
+    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}`}
     >
@@ -42,7 +32,7 @@ export default function ProfilePhoto({
   ) : (
     <Image
       alt=""
-      src={src}
+      src={image}
       height={112}
       width={112}
       priority={priority}
diff --git a/lib/api/controllers/collections/getCollections.ts b/lib/api/controllers/collections/getCollections.ts
index 0ac3d9c..3742163 100644
--- a/lib/api/controllers/collections/getCollections.ts
+++ b/lib/api/controllers/collections/getCollections.ts
@@ -18,6 +18,7 @@ export default async function getCollection(userId: number) {
             select: {
               username: true,
               name: true,
+              image: true,
             },
           },
         },
diff --git a/lib/api/controllers/users/userId/getPublicUserById.ts b/lib/api/controllers/users/userId/getPublicUserById.ts
index d0c844e..1626043 100644
--- a/lib/api/controllers/users/userId/getPublicUserById.ts
+++ b/lib/api/controllers/users/userId/getPublicUserById.ts
@@ -42,6 +42,7 @@ export default async function getPublicUserById(
   const data = {
     name: lessSensitiveInfo.name,
     username: lessSensitiveInfo.username,
+    image: lessSensitiveInfo.image,
   };
 
   return { response: data, status: 200 };
diff --git a/lib/api/controllers/users/userId/updateUserById.ts b/lib/api/controllers/users/userId/updateUserById.ts
index 6ceb764..f167ea6 100644
--- a/lib/api/controllers/users/userId/updateUserById.ts
+++ b/lib/api/controllers/users/userId/updateUserById.ts
@@ -89,12 +89,10 @@ export default async function updateUserById(
 
   // Avatar Settings
 
-  const profilePic = data.profilePic;
-
-  if (profilePic.startsWith("data:image/jpeg;base64")) {
-    if (data.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` });
 
@@ -113,7 +111,7 @@ export default async function updateUserById(
         status: 400,
       };
     }
-  } else if (profilePic == "") {
+  } else if (data.image == "") {
     removeFile({ filePath: `uploads/avatar/${sessionUser.id}.jpg` });
   }
 
@@ -131,6 +129,7 @@ export default async function updateUserById(
       username: data.username.toLowerCase().trim(),
       email: data.email?.toLowerCase().trim(),
       isPrivate: data.isPrivate,
+      image: data.image ? `uploads/avatar/${sessionUser.id}.jpg` : "",
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
@@ -197,7 +196,7 @@ export default async function updateUserById(
   const response: Omit<AccountSettings, "password"> = {
     ...userInfo,
     whitelistedUsers: newWhitelistedUsernames,
-    profilePic: `/api/v1/avatar/${userInfo.id}?${Date.now()}`,
+    image: userInfo.image ? `${userInfo.image}?${Date.now()}` : "",
   };
 
   return { response, status: 200 };
diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
index ec2300a..dc4781d 100644
--- a/lib/api/migration/migrateToV2.js
+++ b/lib/api/migration/migrateToV2.js
@@ -70,7 +70,7 @@ async function migrateToV2() {
     if (res) {
       await prisma.user.update({
         where: { id: user.id },
-        data: { imagePath: path },
+        data: { image: path },
       });
       console.log(`Updated avatar for avatar ${user.id}`);
     } else {
diff --git a/lib/api/storage/readFile.ts b/lib/api/storage/readFile.ts
index 0721d9d..bf543cf 100644
--- a/lib/api/storage/readFile.ts
+++ b/lib/api/storage/readFile.ts
@@ -9,14 +9,12 @@ import s3Client from "./s3Client";
 import util from "util";
 
 type ReturnContentTypes =
-  | "text/html"
+  | "text/plain"
   | "image/jpeg"
   | "image/png"
   | "application/pdf";
 
 export default async function readFile(filePath: string) {
-  const isRequestingAvatar = filePath.startsWith("uploads/avatar");
-
   let contentType: ReturnContentTypes;
 
   if (s3Client) {
@@ -41,12 +39,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,
         };
       }
 
@@ -71,9 +69,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,
       };
     }
@@ -92,9 +90,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);
diff --git a/lib/client/addMemberToCollection.ts b/lib/client/addMemberToCollection.ts
index af0db51..95f3217 100644
--- a/lib/client/addMemberToCollection.ts
+++ b/lib/client/addMemberToCollection.ts
@@ -35,6 +35,7 @@ const addMemberToCollection = async (
           id: user.id,
           name: user.name,
           username: user.username,
+          image: user.image,
         },
       });
     }
diff --git a/lib/client/avatarExists.ts b/lib/client/avatarExists.ts
deleted file mode 100644
index f81f1e9..0000000
--- a/lib/client/avatarExists.ts
+++ /dev/null
@@ -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;
-}
diff --git a/lib/client/getPublicUserData.ts b/lib/client/getPublicUserData.ts
index 20bd1e9..6b3706e 100644
--- a/lib/client/getPublicUserData.ts
+++ b/lib/client/getPublicUserData.ts
@@ -5,6 +5,8 @@ export default async function getPublicUserData(id: number | string) {
 
   const data = await response.json();
 
+  console.log(data);
+
   if (!response.ok) toast.error(data.response);
 
   return data.response;
diff --git a/next.config.js b/next.config.js
index 1c05e95..71cfd8e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ["t2.gstatic.com"],
+    minimumCacheTTL: 10,
   },
 };
 
diff --git a/pages/api/v1/avatar/[id].ts b/pages/api/v1/avatar/[id].ts
index c92b98b..97eeb91 100644
--- a/pages/api/v1/avatar/[id].ts
+++ b/pages/api/v1/avatar/[id].ts
@@ -13,7 +13,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
   if (!userId || !username)
     return res
-      .setHeader("Content-Type", "text/html")
+      .setHeader("Content-Type", "text/plain")
       .status(401)
       .send("You must be logged in.");
   else if (session?.user?.isSubscriber === false)
@@ -24,7 +24,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
   if (!queryId)
     return res
-      .setHeader("Content-Type", "text/html")
+      .setHeader("Content-Type", "text/plain")
       .status(401)
       .send("Invalid parameters.");
 
@@ -44,8 +44,9 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
     if (targetUser?.isPrivate && !whitelistedUsernames?.includes(username)) {
       return res
-        .setHeader("Content-Type", "text/html")
-        .send("This profile is private.");
+        .setHeader("Content-Type", "text/plain")
+        .status(400)
+        .send("File not found.");
     }
   }
 
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 59a7fc2..f1751aa 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -104,7 +104,7 @@ export default function Index() {
                       return (
                         <ProfilePhoto
                           key={i}
-                          src={`/api/v1/avatar/${e.userId}?${Date.now()}`}
+                          src={e.user.image ? e.user.image : undefined}
                           className="-mr-3 border-[3px]"
                         />
                       );
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 1f81285..a06ad6c 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -15,11 +15,8 @@ import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
-import { useTheme } from "next-themes";
 
 export default function Collections() {
-  const { theme } = useTheme();
-
   const { collections } = useCollectionStore();
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 20434ea..8248006 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -21,13 +21,8 @@ export default function Account() {
 
   const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
-  const [profileStatus, setProfileStatus] = useState(true);
   const [submitLoader, setSubmitLoader] = useState(false);
 
-  const handleProfileStatus = (e: boolean) => {
-    setProfileStatus(!e);
-  };
-
   const { account, updateAccount } = useAccountStore();
 
   const [user, setUser] = useState<AccountSettings>(
@@ -40,12 +35,11 @@ export default function Account() {
           username: "",
           email: "",
           emailVerified: null,
-          image: null,
+          image: "",
           isPrivate: true,
           // @ts-ignore
           createdAt: null,
           whitelistedUsers: [],
-          profilePic: "",
         } as unknown as AccountSettings)
   );
 
@@ -54,6 +48,7 @@ export default function Account() {
   }
 
   useEffect(() => {
+    console.log(account);
     if (!objectIsEmpty(account)) setUser({ ...account });
   }, [account]);
 
@@ -68,7 +63,7 @@ export default function Account() {
       ) {
         const reader = new FileReader();
         reader.onload = () => {
-          setUser({ ...user, profilePic: reader.result as string });
+          setUser({ ...user, image: reader.result as string });
         };
         reader.readAsDataURL(resizedFile);
       } else {
@@ -220,16 +215,15 @@ export default function Account() {
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
-                src={user.profilePic}
+                src={user.image ? user.image : undefined}
                 className="h-auto border-none w-28"
-                status={handleProfileStatus}
               />
-              {profileStatus && (
+              {user.image && (
                 <div
                   onClick={() =>
                     setUser({
                       ...user,
-                      profilePic: "",
+                      image: "",
                     })
                   }
                   className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
diff --git a/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql b/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql
new file mode 100644
index 0000000..6833e7b
--- /dev/null
+++ b/prisma/migrations/20231028041930_rename_image_path_to_image/migration.sql
@@ -0,0 +1 @@
+ALTER TABLE "User" RENAME COLUMN "imagePath" TO "image";
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dda64fd..d89d2a6 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -15,7 +15,7 @@ model User {
 
   email                   String?         @unique
   emailVerified           DateTime?
-  imagePath               String?
+  image                   String?
 
   password                String
   collections             Collection[]
diff --git a/store/account.ts b/store/account.ts
index c57d71e..c1da399 100644
--- a/store/account.ts
+++ b/store/account.ts
@@ -19,9 +19,7 @@ const useAccountStore = create<AccountStore>()((set) => ({
 
     const data = await response.json();
 
-    const profilePic = `/api/v1/avatar/${data.response.id}?${Date.now()}`;
-
-    if (response.ok) set({ account: { ...data.response, profilePic } });
+    if (response.ok) set({ account: { ...data.response } });
   },
   updateAccount: async (user) => {
     const response = await fetch(`/api/v1/users/${user.id}`, {
diff --git a/types/global.ts b/types/global.ts
index 09959c5..4944c83 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -35,7 +35,6 @@ export interface CollectionIncludingMembersAndLinkCount
 }
 
 export interface AccountSettings extends User {
-  profilePic: string;
   newPassword?: string;
   whitelistedUsers: string[];
 }
@@ -79,7 +78,7 @@ interface CollectionIncludingLinks extends Collection {
   links: LinksIncludingTags[];
 }
 
-export interface Backup extends Omit<User, "password" | "id" | "image"> {
+export interface Backup extends Omit<User, "password" | "id"> {
   collections: CollectionIncludingLinks[];
 }
 

From 9486d699c9ba3d1ba2e8bd25e6477e1c66a8f85c Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 01:42:31 -0400
Subject: [PATCH 06/33] bug fixed

---
 .../Modal/Collection/TeamManagement.tsx       | 33 ++++---------------
 components/ProfilePhoto.tsx                   |  2 +-
 .../collectionId/updateCollectionById.ts      |  1 +
 .../users/userId/getPublicUserById.ts         |  1 +
 lib/client/addMemberToCollection.ts           |  2 +-
 lib/client/getPublicUserData.ts               |  2 --
 pages/collections/[id].tsx                    |  2 +-
 pages/settings/account.tsx                    |  1 -
 types/global.ts                               |  4 +--
 9 files changed, 13 insertions(+), 35 deletions(-)

diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 07854aa..68a2a81 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -40,15 +40,7 @@ export default function TeamManagement({
 
   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,
@@ -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);
@@ -168,19 +152,14 @@ export default function TeamManagement({
 
           <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 || "",
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
@@ -191,7 +170,7 @@ export default function TeamManagement({
               onClick={() =>
                 addMemberToCollection(
                   session.data?.user.username as string,
-                  member.user.username || "",
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index 7dcb02c..a96e8ba 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -14,7 +14,6 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
   const [image, setImage] = useState("");
 
   useEffect(() => {
-    console.log(src);
     if (src && !src?.includes("base64"))
       setImage(`/api/v1/${src.replace("uploads/", "").replace(".jpg", "")}`);
     else if (!src) setImage("");
@@ -36,6 +35,7 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
       height={112}
       width={112}
       priority={priority}
+      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}`}
     />
   );
diff --git a/lib/api/controllers/collections/collectionId/updateCollectionById.ts b/lib/api/controllers/collections/collectionId/updateCollectionById.ts
index 076bb08..30bb601 100644
--- a/lib/api/controllers/collections/collectionId/updateCollectionById.ts
+++ b/lib/api/controllers/collections/collectionId/updateCollectionById.ts
@@ -59,6 +59,7 @@ export default async function updateCollection(
           include: {
             user: {
               select: {
+                image: true,
                 username: true,
                 name: true,
                 id: true,
diff --git a/lib/api/controllers/users/userId/getPublicUserById.ts b/lib/api/controllers/users/userId/getPublicUserById.ts
index 1626043..c5a575e 100644
--- a/lib/api/controllers/users/userId/getPublicUserById.ts
+++ b/lib/api/controllers/users/userId/getPublicUserById.ts
@@ -40,6 +40,7 @@ export default async function getPublicUserById(
   const { password, ...lessSensitiveInfo } = user;
 
   const data = {
+    id: lessSensitiveInfo.id,
     name: lessSensitiveInfo.name,
     username: lessSensitiveInfo.username,
     image: lessSensitiveInfo.image,
diff --git a/lib/client/addMemberToCollection.ts b/lib/client/addMemberToCollection.ts
index 95f3217..8d1e0b1 100644
--- a/lib/client/addMemberToCollection.ts
+++ b/lib/client/addMemberToCollection.ts
@@ -27,10 +27,10 @@ const addMemberToCollection = async (
     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,
diff --git a/lib/client/getPublicUserData.ts b/lib/client/getPublicUserData.ts
index 6b3706e..20bd1e9 100644
--- a/lib/client/getPublicUserData.ts
+++ b/lib/client/getPublicUserData.ts
@@ -5,8 +5,6 @@ export default async function getPublicUserData(id: number | string) {
 
   const data = await response.json();
 
-  console.log(data);
-
   if (!response.ok) toast.error(data.response);
 
   return data.response;
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index f1751aa..320e031 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -105,7 +105,7 @@ export default function Index() {
                         <ProfilePhoto
                           key={i}
                           src={e.user.image ? e.user.image : undefined}
-                          className="-mr-3 border-[3px]"
+                          className="border-[3px]"
                         />
                       );
                     })
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 8248006..d7cf248 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -48,7 +48,6 @@ export default function Account() {
   }
 
   useEffect(() => {
-    console.log(account);
     if (!objectIsEmpty(account)) setUser({ ...account });
   }, [account]);
 
diff --git a/types/global.ts b/types/global.ts
index 4944c83..cfc149b 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -18,11 +18,11 @@ export interface LinkIncludingShortenedCollectionAndTags
 
 export interface Member {
   collectionId?: number;
-  userId?: number;
+  userId: number;
   canCreate: boolean;
   canUpdate: boolean;
   canDelete: boolean;
-  user: OptionalExcluding<User, "username" | "name">;
+  user: OptionalExcluding<User, "username" | "name" | "id">;
 }
 
 export interface CollectionIncludingMembersAndLinkCount

From 9b6038201c89a5d7eac1405f066bfcb2ffa116b5 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 01:46:51 -0400
Subject: [PATCH 07/33] bug fixed

---
 lib/api/migration/migrateToV2.js | 1 -
 pages/collections/[id].tsx       | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/api/migration/migrateToV2.js b/lib/api/migration/migrateToV2.js
index dc4781d..0b34118 100644
--- a/lib/api/migration/migrateToV2.js
+++ b/lib/api/migration/migrateToV2.js
@@ -1,6 +1,5 @@
 const { S3 } = require("@aws-sdk/client-s3");
 const { PrismaClient } = require("@prisma/client");
-const axios = require("axios");
 const { existsSync } = require("fs");
 const util = require("util");
 
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 320e031..5d72d1d 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -82,7 +82,7 @@ export default function Index() {
             {activeCollection ? (
               <div
                 className={`min-w-[15rem] ${
-                  activeCollection.members[0] && "mr-3"
+                  activeCollection.members[1] && "mr-3"
                 }`}
               >
                 <div
@@ -105,7 +105,9 @@ export default function Index() {
                         <ProfilePhoto
                           key={i}
                           src={e.user.image ? e.user.image : undefined}
-                          className="border-[3px]"
+                          className={`${
+                            activeCollection.members[1] && "-mr-3"
+                          } border-[3px]`}
                         />
                       );
                     })

From ac795cdbdc71b5d4c065338951b18f48ff8b4b6b Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 05:57:53 -0400
Subject: [PATCH 08/33] added rearchive functionallity + dropdown fix [WIP]

---
 components/LinkCard.tsx                       |  37 +++++-
 components/Modal/Link/LinkDetails.tsx         | 119 +++++++++---------
 lib/api/archive.ts                            |  28 ++++-
 pages/api/v1/links/[id]/archive/index.ts      |  45 +++++++
 pages/api/v1/links/{[id].ts => [id]/index.ts} |   0
 types/global.ts                               |   2 +-
 6 files changed, 169 insertions(+), 62 deletions(-)
 create mode 100644 pages/api/v1/links/[id]/archive/index.ts
 rename pages/api/v1/links/{[id].ts => [id]/index.ts} (100%)

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 04903fa..e4dbbdc 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -28,12 +28,19 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function LinkCard({ link, count, className }: Props) {
   const { setModal } = useModalStore();
 
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const { collections } = useCollectionStore();
 
@@ -84,6 +91,23 @@ export default function LinkCard({ link, count, className }: Props) {
       toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
+  const updateArchive = async () => {
+    const load = toast.loading("Applying...");
+
+    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.`);
+    else toast.error(data);
+  };
+
   const deleteLink = async () => {
     const load = toast.loading("Deleting...");
 
@@ -114,7 +138,10 @@ export default function LinkCard({ link, count, className }: Props) {
         permissions?.canUpdate ||
         permissions?.canDelete) && (
         <div
-          onClick={() => setExpandDropdown(!expandDropdown)}
+          onClick={(e) => {
+            console.log();
+            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"
         >
@@ -228,6 +255,12 @@ export default function LinkCard({ link, count, className }: Props) {
                   },
                 }
               : undefined,
+            permissions === true
+              ? {
+                  name: "Update Archive",
+                  onClick: updateArchive,
+                }
+              : undefined,
             permissions === true || permissions?.canDelete
               ? {
                   name: "Delete",
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index e593e09..55328f6 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -228,72 +228,77 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           <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" />
+        {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>
 
-            <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>
 
-          <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"
-              />
+              <Link
+                href={`/api/v1/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>
+        ) : 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>
 
-            <Link
-              href={`/api/v1/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 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>
 
-        <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" />
+              <Link
+                href={`/api/v1/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>
-
-            <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/v1/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>
+        ) : undefined}
 
         <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">
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index fce0454..b257940 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -14,6 +14,16 @@ export default async function archive(
     },
   });
 
+  const link = await prisma.link.update({
+    where: {
+      id: linkId,
+    },
+    data: {
+      screenshotPath: "pending",
+      pdfPath: "pending",
+    },
+  });
+
   if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
   if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
@@ -41,7 +51,7 @@ export default async function archive(
             fullPage: true,
           });
 
-          createFile({
+          await createFile({
             data: screenshot,
             filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
           });
@@ -55,11 +65,25 @@ export default async function archive(
             margin: { top: "15px", bottom: "15px" },
           });
 
-          createFile({
+          await createFile({
             data: pdf,
             filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
           });
         }
+
+        const updateLink = 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,
+          },
+        });
       }
 
       await browser.close();
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
new file mode 100644
index 0000000..29e5c66
--- /dev/null
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -0,0 +1,45 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
+import archive from "@/lib/api/archive";
+import { prisma } from "@/lib/api/db";
+
+export default async function links(req: NextApiRequest, res: NextApiResponse) {
+  console.log("hi");
+  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 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 !== session.user.id)
+    return res.status(401).json({
+      response: "Permission denied.",
+    });
+
+  if (req.method === "PUT") {
+    archive(link.id, link.url, session.user.id);
+    return res.status(200).json({
+      response: "Link is being archived.",
+    });
+  }
+
+  // Later?
+  // else if (req.method === "DELETE") {}
+}
diff --git a/pages/api/v1/links/[id].ts b/pages/api/v1/links/[id]/index.ts
similarity index 100%
rename from pages/api/v1/links/[id].ts
rename to pages/api/v1/links/[id]/index.ts
diff --git a/types/global.ts b/types/global.ts
index cfc149b..4af954d 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -5,7 +5,7 @@ type OptionalExcluding<T, TRequired extends keyof T> = Partial<T> &
   Pick<T, TRequired>;
 
 export interface LinkIncludingShortenedCollectionAndTags
-  extends Omit<Link, "id" | "createdAt" | "collectionId"> {
+  extends Omit<Link, "id" | "createdAt" | "collectionId" | "updatedAt"> {
   id?: number;
   createdAt?: string;
   collectionId?: number;

From db47a2a142e1ee746662068fb7d57824802e26da Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 07:20:35 -0400
Subject: [PATCH 09/33] [WIP] dropdown bug

---
 components/ClickAwayHandler.tsx | 4 +++-
 components/Dropdown.tsx         | 9 ++++++++-
 components/LinkCard.tsx         | 9 +++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/ClickAwayHandler.tsx b/components/ClickAwayHandler.tsx
index 88ff23b..090932a 100644
--- a/components/ClickAwayHandler.tsx
+++ b/components/ClickAwayHandler.tsx
@@ -4,6 +4,7 @@ type Props = {
   children: ReactNode;
   onClickOutside: Function;
   className?: string;
+  style?: React.CSSProperties;
 };
 
 function useOutsideAlerter(
@@ -30,12 +31,13 @@ export default function ClickAwayHandler({
   children,
   onClickOutside,
   className,
+  style,
 }: Props) {
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef, onClickOutside);
 
   return (
-    <div ref={wrapperRef} className={className}>
+    <div ref={wrapperRef} className={className} style={style}>
       {children}
     </div>
   );
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index abc9e46..49f1d39 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -19,11 +19,18 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  style?: React.CSSProperties;
 };
 
-export default function Dropdown({ onClickOutside, className, items }: Props) {
+export default function Dropdown({
+  style,
+  onClickOutside,
+  className,
+  items,
+}: Props) {
   return (
     <ClickAwayHandler
+      style={style}
       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`}
     >
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index e4dbbdc..d037f7f 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -139,7 +139,7 @@ export default function LinkCard({ link, count, className }: Props) {
         permissions?.canDelete) && (
         <div
           onClick={(e) => {
-            console.log();
+            console.log(expandDropdown);
             setExpandDropdown({ x: e.clientX, y: e.clientY });
           }}
           id={"expand-dropdown" + link.id}
@@ -228,6 +228,11 @@ export default function LinkCard({ link, count, className }: Props) {
       </div>
       {expandDropdown ? (
         <Dropdown
+          style={{
+            position: "fixed",
+            top: `${expandDropdown.y}px`,
+            left: `${expandDropdown.x}px`,
+          }}
           items={[
             permissions === true
               ? {
@@ -273,7 +278,7 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-12 right-5 w-40"
+          className="w-40"
         />
       ) : null}
     </div>

From 2856e23a4a7199219bade4f8cbc625935e99ce2f Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sat, 28 Oct 2023 12:50:11 -0400
Subject: [PATCH 10/33] fixed the dropdown

---
 components/Checkbox.tsx         |   4 +-
 components/ClickAwayHandler.tsx |  12 +++-
 components/CollectionCard.tsx   |   4 +-
 components/Dropdown.tsx         | 109 ++++++++++++++++++++++++--------
 components/LinkCard.tsx         |  13 ++--
 components/Modal/index.tsx      |   2 +-
 components/ProfilePhoto.tsx     |   8 ++-
 components/SettingsSidebar.tsx  |   4 +-
 components/Sidebar.tsx          |   4 +-
 components/SubmitButton.tsx     |   2 +-
 components/TextInput.tsx        |   4 +-
 11 files changed, 120 insertions(+), 46 deletions(-)

diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index 6c661c5..d54c08b 100644
--- a/components/Checkbox.tsx
+++ b/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}
diff --git a/components/ClickAwayHandler.tsx b/components/ClickAwayHandler.tsx
index 090932a..63378a1 100644
--- a/components/ClickAwayHandler.tsx
+++ b/components/ClickAwayHandler.tsx
@@ -5,6 +5,7 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   style?: React.CSSProperties;
+  onMount?: (rect: DOMRect) => void;
 };
 
 function useOutsideAlerter(
@@ -32,10 +33,19 @@ export default function ClickAwayHandler({
   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} style={style}>
       {children}
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index a67d48d..7d0442e 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -40,7 +40,9 @@ export default function CollectionCard({ collection, className }: Props) {
           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}`}
+      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)}
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 49f1d39..aac1ad6 100644
--- a/components/Dropdown.tsx
+++ b/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,42 +19,95 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
+  points: { x: number; y: number };
   style?: React.CSSProperties;
+  width: number; // in rem
 };
 
 export default function Dropdown({
-  style,
+  points,
   onClickOutside,
   className,
   items,
+  width,
 }: Props) {
-  return (
-    <ClickAwayHandler
-      style={style}
-      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`}
-    >
-      {items.map((e, i) => {
-        const inner = e && (
-          <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
-            </div>
-          </div>
-        );
+  const [pos, setPos] = useState<{ x: number; y: number }>();
+  const [dropdownHeight, setDropdownHeight] = useState<number>();
 
-        return e && e.href ? (
-          <Link key={i} href={e.href}>
-            {inner}
-          </Link>
-        ) : (
-          e && (
-            <div key={i} onClick={e.onClick}>
-              {inner}
+  function convertRemToPixels(rem: number) {
+    return (
+      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+    );
+  }
+
+  useEffect(() => {
+    const dropdownWidth = convertRemToPixels(width);
+
+    let finalX = points.x;
+    let finalY = points.y;
+
+    // Check for x-axis overflow (left side)
+    if (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, width, dropdownHeight]);
+
+  useEffect(() => {
+    const dropdownWidth = convertRemToPixels(width);
+
+    if (points.x + dropdownWidth > window.innerWidth) {
+      setPos({ x: points.x - dropdownWidth, y: points.y });
+    } else setPos(points);
+  }, [points, width]);
+
+  return (
+    pos && (
+      <ClickAwayHandler
+        onMount={(e) => {
+          setDropdownHeight(e.height);
+        }}
+        style={{
+          position: "fixed",
+          top: `${pos?.y}px`,
+          left: `${pos?.x}px`,
+        }}
+        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 w-[${width}rem]`}
+      >
+        {items.map((e, i) => {
+          const inner = e && (
+            <div className="cursor-pointer rounded-md">
+              <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
+                <p className="text-black dark:text-white select-none">
+                  {e.name}
+                </p>
+              </div>
             </div>
-          )
-        );
-      })}
-    </ClickAwayHandler>
+          );
+
+          return e && e.href ? (
+            <Link key={i} href={e.href}>
+              {inner}
+            </Link>
+          ) : (
+            e && (
+              <div key={i} onClick={e.onClick}>
+                {inner}
+              </div>
+            )
+          );
+        })}
+      </ClickAwayHandler>
+    )
   );
 }
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index d037f7f..5809025 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -132,14 +132,15 @@ 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}`}
+      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={(e) => {
-            console.log(expandDropdown);
             setExpandDropdown({ x: e.clientX, y: e.clientY });
           }}
           id={"expand-dropdown" + link.id}
@@ -228,11 +229,7 @@ export default function LinkCard({ link, count, className }: Props) {
       </div>
       {expandDropdown ? (
         <Dropdown
-          style={{
-            position: "fixed",
-            top: `${expandDropdown.y}px`,
-            left: `${expandDropdown.x}px`,
-          }}
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -278,7 +275,7 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="w-40"
+          width={10}
         />
       ) : null}
     </div>
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index b52feff..cd4b04e 100644
--- a/components/Modal/index.tsx
+++ b/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
diff --git a/components/ProfilePhoto.tsx b/components/ProfilePhoto.tsx
index a96e8ba..8575d6d 100644
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@@ -24,7 +24,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
 
   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>
@@ -36,7 +38,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
       width={112}
       priority={priority}
       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}`}
+      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 || ""
+      }`}
     />
   );
 }
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index 128af2b..d5b072b 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -32,7 +32,9 @@ 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">
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index eb8cfad..7d2c614 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,7 +51,9 @@ 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
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index 6ee0a78..fbcd8b8 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -25,7 +25,7 @@ export default function SubmitButton({
         loading
           ? "bg-sky-600 cursor-auto"
           : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className}`}
+      } ${className || ""}`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
index a075757..44587e7 100644
--- a/components/TextInput.tsx
+++ b/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 || ""
+      }`}
     />
   );
 }

From 16024f40be9868a9059bd853d03a8be4f57528d0 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sun, 29 Oct 2023 00:57:24 -0400
Subject: [PATCH 11/33] added new api route + fixed dropdown

---
 README.md                                     |   1 -
 components/CollectionCard.tsx                 | 148 +++++++-------
 components/Dropdown.tsx                       |  61 +++---
 components/LinkCard.tsx                       | 188 +++++++++---------
 components/Modal/Link/LinkDetails.tsx         |  46 ++++-
 components/Modal/Link/index.tsx               |   9 +-
 components/SortDropdown.tsx                   |   2 +-
 lib/api/archive.ts                            |  22 +-
 .../controllers/links/linkId/getLinkById.ts   |  48 +++++
 .../links/linkId/updateLinkById.ts            |   2 +-
 pages/api/v1/links/[id]/index.ts              |   8 +-
 store/links.ts                                |  16 ++
 12 files changed, 348 insertions(+), 203 deletions(-)
 create mode 100644 lib/api/controllers/links/linkId/getLinkById.ts

diff --git a/README.md b/README.md
index a830530..cf74430 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,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.
diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 7d0442e..c382f6e 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -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,83 +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={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>
+          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
               ? {
@@ -161,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 w-fit"
+          className="w-fit"
         />
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index aac1ad6..19e2778 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -19,9 +19,9 @@ type Props = {
   onClickOutside: Function;
   className?: string;
   items: MenuItem[];
-  points: { x: number; y: number };
+  points?: { x: number; y: number };
   style?: React.CSSProperties;
-  width: number; // in rem
+  width?: number; // in rem
 };
 
 export default function Dropdown({
@@ -33,6 +33,7 @@ export default function Dropdown({
 }: Props) {
   const [pos, setPos] = useState<{ x: number; y: number }>();
   const [dropdownHeight, setDropdownHeight] = useState<number>();
+  const [dropdownWidth, setDropdownWidth] = useState<number>();
 
   function convertRemToPixels(rem: number) {
     return (
@@ -41,48 +42,46 @@ export default function Dropdown({
   }
 
   useEffect(() => {
-    const dropdownWidth = convertRemToPixels(width);
+    if (points) {
+      let finalX = points.x;
+      let finalY = points.y;
 
-    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 x-axis overflow (left side)
-    if (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 });
     }
-
-    // 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, width, dropdownHeight]);
 
-  useEffect(() => {
-    const dropdownWidth = convertRemToPixels(width);
-
-    if (points.x + dropdownWidth > window.innerWidth) {
-      setPos({ x: points.x - dropdownWidth, y: points.y });
-    } else setPos(points);
-  }, [points, width]);
-
   return (
-    pos && (
+    (!points || pos) && (
       <ClickAwayHandler
         onMount={(e) => {
           setDropdownHeight(e.height);
+          setDropdownWidth(e.width);
         }}
-        style={{
-          position: "fixed",
-          top: `${pos?.y}px`,
-          left: `${pos?.x}px`,
-        }}
+        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 w-[${width}rem]`}
+        } 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 && (
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 5809025..e972d45 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -71,7 +71,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];
@@ -92,7 +92,7 @@ export default function LinkCard({ link, count, className }: Props) {
   };
 
   const updateArchive = async () => {
-    const load = toast.loading("Applying...");
+    const load = toast.loading("Sending request...");
 
     setExpandDropdown(false);
 
@@ -104,8 +104,10 @@ export default function LinkCard({ link, count, className }: Props) {
 
     toast.dismiss(load);
 
-    if (response.ok) toast.success(`Link is being archived.`);
-    else toast.error(data);
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link.id as number);
+    } else toast.error(data);
   };
 
   const deleteLink = async () => {
@@ -131,98 +133,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={(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
-        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={() => {
+            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"
+        >
+          {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";
               }}
-              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-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>
             </div>
           </div>
         </div>
@@ -275,9 +279,9 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          width={10}
+          className="w-40"
         />
       ) : null}
-    </div>
+    </>
   );
 }
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 55328f6..ddf2c5b 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -23,15 +23,49 @@ import {
 import isValidUrl from "@/lib/client/isValidUrl";
 import { useTheme } from "next-themes";
 import unescapeString from "@/lib/client/unescapeString";
+import useLinkStore from "@/store/links";
 
 type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
+  linkId: number;
   isOwnerOrMod: boolean;
 };
 
-export default function LinkDetails({ link, isOwnerOrMod }: Props) {
+export default function LinkDetails({ linkId, isOwnerOrMod }: Props) {
   const { theme } = useTheme();
 
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
+    links.find(
+      (e) => e.id === linkId
+    ) as LinkIncludingShortenedCollectionAndTags
+  );
+
+  useEffect(() => {
+    setLink(
+      links.find(
+        (e) => e.id === linkId
+      ) as LinkIncludingShortenedCollectionAndTags
+    );
+  }, [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]);
+
   const [imageError, setImageError] = useState<boolean>(false);
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
     "en-US",
@@ -59,6 +93,14 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
     );
   }, [collections]);
 
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [collections]);
+
   const [colorPalette, setColorPalette] = useState<RGBColor[]>();
 
   const colorThief = new ColorThief();
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 3f9f243..2ebf08d 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -64,7 +64,10 @@ export default function LinkModal({
         <Tab.Panels>
           {activeLink && method === "UPDATE" && (
             <Tab.Panel>
-              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
+              <LinkDetails
+                linkId={activeLink.id as number}
+                isOwnerOrMod={isOwnerOrMod}
+              />
             </Tab.Panel>
           )}
 
@@ -73,7 +76,9 @@ export default function LinkModal({
               <AddOrEditLink
                 toggleLinkModal={toggleLinkModal}
                 method="UPDATE"
-                activeLink={activeLink}
+                activeLink={
+                  activeLink as LinkIncludingShortenedCollectionAndTags
+                }
               />
             ) : (
               <AddOrEditLink
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 9e910e1..51d1b29 100644
--- a/components/SortDropdown.tsx
+++ b/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
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index b257940..e92873f 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -14,13 +14,29 @@ export default async function archive(
     },
   });
 
+  // const checkExistingLink = await prisma.link.findFirst({
+  //   where: {
+  //     id: linkId,
+  //     OR: [
+  //       {
+  //         screenshotPath: "pending",
+  //       },
+  //       {
+  //         pdfPath: "pending",
+  //       },
+  //     ],
+  //   },
+  // });
+
+  // if (checkExistingLink) return "A request has already been made.";
+
   const link = await prisma.link.update({
     where: {
       id: linkId,
     },
     data: {
-      screenshotPath: "pending",
-      pdfPath: "pending",
+      screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
+      pdfPath: user?.archiveAsPDF ? "pending" : null,
     },
   });
 
@@ -88,8 +104,8 @@ export default async function archive(
 
       await browser.close();
     } catch (err) {
-      console.log(err);
       await browser.close();
+      return err;
     }
   }
 }
diff --git a/lib/api/controllers/links/linkId/getLinkById.ts b/lib/api/controllers/links/linkId/getLinkById.ts
new file mode 100644
index 0000000..fb7d0c8
--- /dev/null
+++ b/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 && e.canUpdate
+  );
+
+  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 };
+  }
+}
diff --git a/lib/api/controllers/links/linkId/updateLinkById.ts b/lib/api/controllers/links/linkId/updateLinkById.ts
index 9ed6464..588978f 100644
--- a/lib/api/controllers/links/linkId/updateLinkById.ts
+++ b/lib/api/controllers/links/linkId/updateLinkById.ts
@@ -4,7 +4,7 @@ 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(
+export default async function updateLinkById(
   userId: number,
   linkId: number,
   data: LinkIncludingShortenedCollectionAndTags
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
index 9847f2a..748e009 100644
--- a/pages/api/v1/links/[id]/index.ts
+++ b/pages/api/v1/links/[id]/index.ts
@@ -3,6 +3,7 @@ import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 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";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
   const session = await getServerSession(req, res, authOptions);
@@ -15,7 +16,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
         "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
     });
 
-  if (req.method === "PUT") {
+  if (req.method === "GET") {
+    const updated = await getLinkById(session.user.id, Number(req.query.id));
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "PUT") {
     const updated = await updateLinkById(
       session.user.id,
       Number(req.query.id),
diff --git a/store/links.ts b/store/links.ts
index b106530..b5e14ff 100644
--- a/store/links.ts
+++ b/store/links.ts
@@ -17,6 +17,7 @@ type LinkStore = {
   addLink: (
     body: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
+  getLink: (linkId: number) => Promise<ResponseObject>;
   updateLink: (
     link: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
@@ -65,6 +66,21 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  getLink: async (linkId) => {
+    const response = await fetch(`/api/v1/links/${linkId}`);
+
+    const data = await response.json();
+
+    if (response.ok) {
+      set((state) => ({
+        links: state.links.map((e) =>
+          e.id === data.response.id ? data.response : e
+        ),
+      }));
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   updateLink: async (link) => {
     const response = await fetch(`/api/v1/links/${link.id}`, {
       body: JSON.stringify(link),

From de20fb7bc13d335e844b1eb435d95fc58869e11a Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sun, 29 Oct 2023 12:56:38 -0400
Subject: [PATCH 12/33] minor change

---
 components/Modal/Link/LinkDetails.tsx | 4 ++--
 pages/collections/[id].tsx            | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index ddf2c5b..551ef4b 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -10,9 +10,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowUpRightFromSquare,
   faBoxArchive,
+  faBuildingColumns,
   faCloudArrowDown,
   faFolder,
-  faGlobe,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import {
@@ -345,7 +345,7 @@ export default function LinkDetails({ linkId, isOwnerOrMod }: Props) {
         <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" />
+              <FontAwesomeIcon icon={faBuildingColumns} className="w-6 h-6" />
             </div>
 
             <p className="text-black dark:text-white">
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 5d72d1d..8967cf1 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -31,8 +31,6 @@ export default function Index() {
   const { links } = useLinkStore();
   const { collections } = useCollectionStore();
 
-  const { data } = useSession();
-
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

From c9c62b615b2f2e41246969adc214773b28647db8 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 30 Oct 2023 00:30:45 -0400
Subject: [PATCH 13/33] finished implementing readable mode api side

---
 lib/api/archive.ts                            | 60 +++++++++++++++++--
 .../links/linkId/deleteLinkById.ts            |  3 +
 .../links/linkId/updateLinkById.ts            |  5 ++
 lib/api/storage/readFile.ts                   |  4 ++
 package.json                                  |  3 +
 pages/collections/[id].tsx                    |  8 ++-
 pages/tags/[id].tsx                           |  8 ++-
 .../migration.sql                             |  2 +
 prisma/schema.prisma                          | 33 +++++-----
 yarn.lock                                     | 22 +++++++
 10 files changed, 120 insertions(+), 28 deletions(-)
 create mode 100644 prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql

diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index e92873f..b081564 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -2,6 +2,9 @@ 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,
@@ -30,13 +33,14 @@ export default async function archive(
 
   // if (checkExistingLink) return "A request has already been made.";
 
-  const link = await prisma.link.update({
+  const targetLink = await prisma.link.update({
     where: {
       id: linkId,
     },
     data: {
       screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
       pdfPath: user?.archiveAsPDF ? "pending" : null,
+      readabilityPath: "pending",
     },
   });
 
@@ -50,10 +54,43 @@ export default async function archive(
     try {
       await page.goto(url, { waitUntil: "domcontentloaded" });
 
-      await page.evaluate(
-        autoScroll,
-        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-      );
+      await page.goto(url);
+      const content = await page.content();
+
+      // 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();
+
+      await prisma.link.update({
+        where: {
+          id: linkId,
+        },
+        data: {
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.txt`,
+        },
+      });
+
+      await createFile({
+        data: JSON.stringify(article),
+        filePath: `archives/${targetLink.collectionId}/${linkId}_readability.txt`,
+      });
+
+      console.log(JSON.parse(JSON.stringify(article)));
+
+      // Screenshot/PDF
+
+      let faulty = true;
+      await page
+        .evaluate(autoScroll, Number(process.env.AUTOSCROLL_TIMEOUT) || 30)
+        .catch((e) => (faulty = false));
 
       const linkExists = await prisma.link.findUnique({
         where: {
@@ -61,7 +98,7 @@ export default async function archive(
         },
       });
 
-      if (linkExists) {
+      if (linkExists && faulty) {
         if (user.archiveAsScreenshot) {
           const screenshot = await page.screenshot({
             fullPage: true,
@@ -100,10 +137,21 @@ export default async function archive(
               : null,
           },
         });
+      } else if (faulty) {
+        await prisma.link.update({
+          where: {
+            id: linkId,
+          },
+          data: {
+            screenshotPath: null,
+            pdfPath: null,
+          },
+        });
       }
 
       await browser.close();
     } catch (err) {
+      console.log(err);
       await browser.close();
       return err;
     }
diff --git a/lib/api/controllers/links/linkId/deleteLinkById.ts b/lib/api/controllers/links/linkId/deleteLinkById.ts
index b66b850..3273a5c 100644
--- a/lib/api/controllers/links/linkId/deleteLinkById.ts
+++ b/lib/api/controllers/links/linkId/deleteLinkById.ts
@@ -31,6 +31,9 @@ export default async function deleteLink(userId: number, linkId: number) {
   removeFile({
     filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
   });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.txt`,
+  });
 
   return { response: deleteLink, status: 200 };
 }
diff --git a/lib/api/controllers/links/linkId/updateLinkById.ts b/lib/api/controllers/links/linkId/updateLinkById.ts
index 588978f..0f744b4 100644
--- a/lib/api/controllers/links/linkId/updateLinkById.ts
+++ b/lib/api/controllers/links/linkId/updateLinkById.ts
@@ -102,6 +102,11 @@ export default async function updateLinkById(
         `archives/${collectionIsAccessible?.id}/${linkId}.png`,
         `archives/${data.collection.id}/${linkId}.png`
       );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.txt`,
+        `archives/${data.collection.id}/${linkId}_readability.txt`
+      );
     }
 
     return { response: updatedLink, status: 200 };
diff --git a/lib/api/storage/readFile.ts b/lib/api/storage/readFile.ts
index bf543cf..59e1bef 100644
--- a/lib/api/storage/readFile.ts
+++ b/lib/api/storage/readFile.ts
@@ -58,6 +58,8 @@ export default async function readFile(filePath: string) {
           contentType = "application/pdf";
         } else if (filePath.endsWith(".png")) {
           contentType = "image/png";
+        } else if (filePath.endsWith("_readability.txt")) {
+          contentType = "text/plain";
         } else {
           // if (filePath.endsWith(".jpg"))
           contentType = "image/jpeg";
@@ -83,6 +85,8 @@ export default async function readFile(filePath: string) {
       contentType = "application/pdf";
     } else if (filePath.endsWith(".png")) {
       contentType = "image/png";
+    } else if (filePath.endsWith("_readability.txt")) {
+      contentType = "text/plain";
     } else {
       // if (filePath.endsWith(".jpg"))
       contentType = "image/jpeg";
diff --git a/package.json b/package.json
index c84eddc..39ae11f 100644
--- a/package.json
+++ b/package.json
@@ -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",
@@ -34,6 +35,7 @@
     "colorthief": "^2.4.0",
     "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",
@@ -57,6 +59,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",
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 8967cf1..77b0334 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -229,9 +229,11 @@ export default function Index() {
         </div>
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
+            {links
+              .filter((e) => e.collection.id === activeCollection?.id)
+              .map((e, i) => {
+                return <LinkCard key={i} link={e} count={i} />;
+              })}
           </div>
         ) : (
           <NoLinksFound />
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index b8435f5..549ef5f 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -191,9 +191,11 @@ export default function Index() {
           </div>
         </div>
         <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links.map((e, i) => {
-            return <LinkCard key={i} link={e} count={i} />;
-          })}
+          {links
+            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
+            .map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
         </div>
       </div>
     </MainLayout>
diff --git a/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql b/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql
new file mode 100644
index 0000000..bbf2423
--- /dev/null
+++ b/prisma/migrations/20231029183108_added_readability_path_field_to_the_link_table/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "readabilityPath" TEXT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index d89d2a6..638a12f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -92,22 +92,23 @@ model UsersAndCollections {
 }
 
 model Link {
-  id             Int        @id @default(autoincrement())
-  name           String
-  url            String
-  description    String     @default("")
-
-  pinnedBy       User[]
-
-  collection     Collection @relation(fields: [collectionId], references: [id])
-  collectionId   Int
-  tags           Tag[]
-
-  screenshotPath String?
-  pdfPath        String?
-
-  createdAt      DateTime   @default(now())
-  updatedAt      DateTime   @updatedAt @default(now())
+  id                Int        @id @default(autoincrement())
+  name              String
+  url               String
+  description       String     @default("")
+    
+  pinnedBy          User[]
+    
+  collection        Collection @relation(fields: [collectionId], references: [id])
+  collectionId      Int
+  tags              Tag[]
+    
+  screenshotPath    String?
+  pdfPath           String?
+  readabilityPath   String?
+    
+  createdAt         DateTime   @default(now())
+  updatedAt         DateTime   @updatedAt @default(now())
 }
 
 model Tag {
diff --git a/yarn.lock b/yarn.lock
index ddbf62f..bd41d88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -902,6 +902,11 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@mozilla/readability@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@mozilla/readability/-/readability-0.4.4.tgz#5d258b3436eba1d5fe31c4386e50a848d5cb5811"
+  integrity sha512-MCgZyANpJ6msfvVMi6+A0UAsvZj//4OHREYUB9f2087uXHVoU+H+SWhuihvb1beKpM323bReQPRio0WNk2+V6g==
+
 "@next/env@13.4.12":
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.12.tgz#0b88115ab817f178bf9dc0c5e7b367277595b58d"
@@ -1490,6 +1495,13 @@
   resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.1.tgz#602859584cecc91894eb23a4892f38cfa927890d"
   integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
 
+"@types/dompurify@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.4.tgz#8a6369dec2dd0c397d01751adf3364be035b40d8"
+  integrity sha512-1Jk8S/IRzNSbwQRbuGuLFHviwxQ8pX81ZEW3INY9432Cwb4VedkBYan8gSIXVLOLHBtimOmUTEYphjRVmo+30g==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/jsdom@^21.1.3":
   version "21.1.3"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-21.1.3.tgz#a88c5dc65703e1b10b2a7839c12db49662b43ff0"
@@ -1559,6 +1571,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
   integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
 
+"@types/trusted-types@*":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.5.tgz#5cac7e7df3275bb95f79594f192d97da3b4fd5fe"
+  integrity sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==
+
 "@typescript-eslint/parser@^5.42.0":
   version "5.49.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.49.0.tgz#d699734b2f20e16351e117417d34a2bc9d7c4b90"
@@ -2290,6 +2307,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.6.tgz#925ebd576d54a9531b5d76f0a5bef32548351dae"
+  integrity sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"

From ed91c4267b89d12e72875aafef9bad4a212c4ab5 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 30 Oct 2023 00:50:43 -0400
Subject: [PATCH 14/33] changed readable format to json

---
 lib/api/archive.ts                                 |  6 ++++--
 lib/api/controllers/links/linkId/deleteLinkById.ts |  2 +-
 lib/api/controllers/links/linkId/updateLinkById.ts |  4 ++--
 lib/api/storage/readFile.ts                        | 11 ++++++-----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index b081564..635703e 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -44,6 +44,8 @@ export default async function archive(
     },
   });
 
+  // Archive.org
+
   if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
   if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
@@ -74,13 +76,13 @@ export default async function archive(
           id: linkId,
         },
         data: {
-          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.txt`,
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
         },
       });
 
       await createFile({
         data: JSON.stringify(article),
-        filePath: `archives/${targetLink.collectionId}/${linkId}_readability.txt`,
+        filePath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
       });
 
       console.log(JSON.parse(JSON.stringify(article)));
diff --git a/lib/api/controllers/links/linkId/deleteLinkById.ts b/lib/api/controllers/links/linkId/deleteLinkById.ts
index 3273a5c..8a56656 100644
--- a/lib/api/controllers/links/linkId/deleteLinkById.ts
+++ b/lib/api/controllers/links/linkId/deleteLinkById.ts
@@ -32,7 +32,7 @@ export default async function deleteLink(userId: number, linkId: number) {
     filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
   });
   removeFile({
-    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.txt`,
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
   });
 
   return { response: deleteLink, status: 200 };
diff --git a/lib/api/controllers/links/linkId/updateLinkById.ts b/lib/api/controllers/links/linkId/updateLinkById.ts
index 0f744b4..41fb54b 100644
--- a/lib/api/controllers/links/linkId/updateLinkById.ts
+++ b/lib/api/controllers/links/linkId/updateLinkById.ts
@@ -104,8 +104,8 @@ export default async function updateLinkById(
       );
 
       await moveFile(
-        `archives/${collectionIsAccessible?.id}/${linkId}_readability.txt`,
-        `archives/${data.collection.id}/${linkId}_readability.txt`
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+        `archives/${data.collection.id}/${linkId}_readability.json`
       );
     }
 
diff --git a/lib/api/storage/readFile.ts b/lib/api/storage/readFile.ts
index 59e1bef..01e6fda 100644
--- a/lib/api/storage/readFile.ts
+++ b/lib/api/storage/readFile.ts
@@ -12,7 +12,8 @@ type ReturnContentTypes =
   | "text/plain"
   | "image/jpeg"
   | "image/png"
-  | "application/pdf";
+  | "application/pdf"
+  | "application/json";
 
 export default async function readFile(filePath: string) {
   let contentType: ReturnContentTypes;
@@ -58,8 +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.txt")) {
-          contentType = "text/plain";
+        } else if (filePath.endsWith("_readability.json")) {
+          contentType = "application/json";
         } else {
           // if (filePath.endsWith(".jpg"))
           contentType = "image/jpeg";
@@ -85,8 +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.txt")) {
-      contentType = "text/plain";
+    } else if (filePath.endsWith("_readability.json")) {
+      contentType = "application/json";
     } else {
       // if (filePath.endsWith(".jpg"))
       contentType = "image/jpeg";

From fb61812356932c316258d9adafe19f264176f110 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 30 Oct 2023 15:20:15 -0400
Subject: [PATCH 15/33] fully added reader view support

---
 components/InputSelect/styles.ts              |   4 -
 components/LinkCard.tsx                       |  17 +-
 components/LinkSidebar.tsx                    | 138 ++++++++++
 components/Modal/Link/AddOrEditLink.tsx       |  20 +-
 components/Modal/Link/PreservedFormats.tsx    | 181 ++++++++++++
 components/Modal/Link/index.tsx               | 104 +++----
 components/ModalManagement.tsx                |   2 -
 layouts/LinkLayout.tsx                        |  88 ++++++
 lib/api/archive.ts                            |   2 -
 .../controllers/links/linkId/getLinkById.ts   |   2 +-
 pages/api/v1/links/[id]/archive/index.ts      |   1 -
 pages/links/[id].tsx                          | 257 ++++++++++++++++++
 pages/{links.tsx => links/index.tsx}          |   0
 store/links.ts                                |  22 +-
 store/modals.ts                               |  10 +-
 styles/globals.css                            |  77 +-----
 16 files changed, 753 insertions(+), 172 deletions(-)
 create mode 100644 components/LinkSidebar.tsx
 create mode 100644 components/Modal/Link/PreservedFormats.tsx
 create mode 100644 layouts/LinkLayout.tsx
 create mode 100644 pages/links/[id].tsx
 rename pages/{links.tsx => links/index.tsx} (100%)

diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts
index b86698a..2e2be2b 100644
--- a/components/InputSelect/styles.ts
+++ b/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",
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index e972d45..35f60e4 100644
--- a/components/LinkCard.tsx
+++ b/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;
@@ -38,6 +39,8 @@ type DropdownTrigger =
 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<DropdownTrigger>(false);
@@ -159,16 +162,7 @@ export default function LinkCard({ link, count, className }: Props) {
         )}
 
         <div
-          onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              method: "UPDATE",
-              isOwnerOrMod:
-                permissions === true || (permissions?.canUpdate as boolean),
-              active: link,
-            });
-          }}
+          onClick={() => router.push("/links/" + link.id)}
           className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
         >
           {url && (
@@ -252,10 +246,7 @@ 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);
                   },
diff --git a/components/LinkSidebar.tsx b/components/LinkSidebar.tsx
new file mode 100644
index 0000000..d8c553f
--- /dev/null
+++ b/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-50 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-50 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-50 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>
+  );
+}
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index 201b3d0..eab727b 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/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 =
   | {
@@ -48,6 +48,7 @@ export default function AddOrEditLink({
       tags: [],
       screenshotPath: "",
       pdfPath: "",
+      readabilityPath: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
@@ -135,23 +136,22 @@ 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">
+            <p className="text-sm text-black dark:text-white mb-2">
               Address (URL)
-              <RequiredBadge />
             </p>
             <TextInput
               value={link.url}
@@ -189,7 +189,7 @@ 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>
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
new file mode 100644
index 0000000..c6b7e18
--- /dev/null
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -0,0 +1,181 @@
+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);
+  };
+
+  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-50 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-50 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-50 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-50 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-600 p-1 rounded-md cursor-pointer select-none mt-3"
+            onClick={() => updateArchive()}
+          >
+            <p>Update Preserved Formats</p>
+            <p className="text-xs">(re-fetch)</p>
+          </div>
+        ) : undefined}
+        <Link
+          href={`https://web.archive.org/web/${link?.url.replace(
+            /(^\w+:|^)\/\//,
+            ""
+          )}`}
+          target="_blank"
+          className="sm:mt-3 text-gray-500 dark:text-gray-300 duration-100 hover:opacity-50 flex gap-2 w-fit items-center text-sm"
+        >
+          <FontAwesomeIcon
+            icon={faArrowUpRightFromSquare}
+            className="w-4 h-4"
+          />
+          <p className="whitespace-nowrap">
+            View Latest Snapshot on archive.org
+          </p>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 2ebf08d..ff48950 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -1,94 +1,68 @@
-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
-          </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
-                linkId={activeLink.id as number}
-                isOwnerOrMod={isOwnerOrMod}
-              />
-            </Tab.Panel>
-          )}
+      {/* {method === "CREATE" && (
+        <p className="text-xl text-black dark:text-white text-center">
+          New Link
+        </p>
+      )} */}
+      {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}
 
-          <Tab.Panel>
-            {activeLink && method === "UPDATE" ? (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="UPDATE"
-                activeLink={
-                  activeLink as LinkIncludingShortenedCollectionAndTags
-                }
-              />
-            ) : (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="CREATE"
-              />
-            )}
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+      {method === "CREATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Create a New Link
+          </p>
+          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
+        </>
+      ) : undefined}
+
+      {activeLink && method === "FORMATS" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Manage Preserved Formats
+          </p>
+          <PreservedFormats activeLink={activeLink} />
+        </>
+      ) : undefined}
     </div>
   );
 }
diff --git a/components/ModalManagement.tsx b/components/ModalManagement.tsx
index aa7790d..0a3d6a8 100644
--- a/components/ModalManagement.tsx
+++ b/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>
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
new file mode 100644
index 0000000..fdafab3
--- /dev/null
+++ b/layouts/LinkLayout.tsx
@@ -0,0 +1,88 @@
+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";
+
+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);
+  };
+
+  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">
+            <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.back()}
+              className="inline-flex gap-1 lg:hover:opacity-50 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 hover:bg-slate-200 dark:hover:bg-neutral-700 lg:hover:bg-transparent lg:dark:hover:bg-transparent"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
+              Back
+            </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>
+    </>
+  );
+}
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index 635703e..f5506fb 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -85,8 +85,6 @@ export default async function archive(
         filePath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
       });
 
-      console.log(JSON.parse(JSON.stringify(article)));
-
       // Screenshot/PDF
 
       let faulty = true;
diff --git a/lib/api/controllers/links/linkId/getLinkById.ts b/lib/api/controllers/links/linkId/getLinkById.ts
index fb7d0c8..83a3ceb 100644
--- a/lib/api/controllers/links/linkId/getLinkById.ts
+++ b/lib/api/controllers/links/linkId/getLinkById.ts
@@ -16,7 +16,7 @@ export default async function getLinkById(userId: number, linkId: number) {
     | null;
 
   const memberHasAccess = collectionIsAccessible?.members.some(
-    (e: UsersAndCollections) => e.userId === userId && e.canUpdate
+    (e: UsersAndCollections) => e.userId === userId
   );
 
   const isCollectionOwner = collectionIsAccessible?.ownerId === userId;
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 29e5c66..5bc4c2c 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -5,7 +5,6 @@ import archive from "@/lib/api/archive";
 import { prisma } from "@/lib/api/db";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  console.log("hi");
   const session = await getServerSession(req, res, authOptions);
 
   if (!session?.user?.id) {
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
new file mode 100644
index 0000000..fef38e4
--- /dev/null
+++ b/pages/links/[id].tsx
@@ -0,0 +1,257 @@
+import LinkLayout from "@/layouts/LinkLayout";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Image from "next/image";
+import ColorThief, { RGBColor } from "colorthief";
+import { useTheme } from "next-themes";
+import unescapeString from "@/lib/client/unescapeString";
+import isValidUrl from "@/lib/client/isValidUrl";
+import DOMPurify from "dompurify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBoxesStacked } from "@fortawesome/free-solid-svg-icons";
+import useModalStore from "@/store/modals";
+import { useSession } from "next-auth/react";
+
+type LinkContent = {
+  title: string;
+  content: string;
+  textContent: string;
+  length: number;
+  excerpt: string;
+  byline: string;
+  dir: string;
+  siteName: string;
+  lang: string;
+};
+
+export default function Index() {
+  const { theme } = useTheme();
+  const { links, getLink } = useLinkStore();
+  const { setModal } = useModalStore();
+
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+  const [linkContent, setLinkContent] = useState<LinkContent>();
+  const [imageError, setImageError] = useState<boolean>(false);
+  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id));
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    const fetchLinkContent = async () => {
+      if (
+        router.query.id &&
+        link?.readabilityPath &&
+        link?.readabilityPath !== "pending"
+      ) {
+        const response = await fetch(`/api/v1/${link?.readabilityPath}`);
+
+        const data = await response?.json();
+
+        setLinkContent(data);
+      }
+    };
+
+    fetchLinkContent();
+  }, [link]);
+
+  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 colorThief = new ColorThief();
+
+  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]
+        )}30, ${rgbToHex(
+          colorPalette[1][0],
+          colorPalette[1][1],
+          colorPalette[1][2]
+        )}30)`;
+      }
+
+      if (colorPalette[2] && colorPalette[3]) {
+        bannerInner.style.background = `linear-gradient(to left, ${rgbToHex(
+          colorPalette[2][0],
+          colorPalette[2][1],
+          colorPalette[2][2]
+        )}30, ${rgbToHex(
+          colorPalette[3][0],
+          colorPalette[3][1],
+          colorPalette[3][2]
+        )})30`;
+      }
+    }
+  }, [colorPalette, theme]);
+
+  return (
+    <LinkLayout>
+      <div
+        className={`flex flex-col max-w-screen-md h-full ${
+          theme === "dark" ? "banner-dark-mode" : "banner-light-mode"
+        }`}
+      >
+        <div
+          id="link-banner"
+          className="link-banner p-5 mb-6 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
+        >
+          <div id="link-banner-inner" className="link-banner-inner"></div>
+
+          <div className={`relative flex gap-5 items-start`}>
+            {!imageError && link?.url && (
+              <Image
+                src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&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>
+              <p className="capitalize text-3xl font-thin">
+                {unescapeString(link?.name || link?.description || "")}
+              </p>
+              <div className="flex gap-2 text-sm text-gray-500 dark:text-gray-300">
+                <p className=" min-w-fit">
+                  {link?.createdAt
+                    ? new Date(link?.createdAt).toLocaleString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })
+                    : undefined}
+                </p>
+                {link?.url ? (
+                  <>
+                    <p>•</p>
+                    <Link
+                      href={link?.url || ""}
+                      target="_blank"
+                      className="hover:underline break-all"
+                    >
+                      {isValidUrl(link?.url || "")
+                        ? new URL(link?.url as string).host
+                        : undefined}
+                    </Link>
+                  </>
+                ) : undefined}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-5 h-full">
+          {link &&
+          link?.readabilityPath &&
+          link?.readabilityPath !== "pending" ? (
+            <div
+              className="line-break px-5"
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(linkContent?.content || "") || "",
+              }}
+            ></div>
+          ) : (
+            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+              <p className="text-center text-2xl text-black dark:text-white">
+                There is no reader view for this webpage
+              </p>
+              <p className="text-center text-sm text-black dark:text-white">
+                {link?.collection.ownerId === userId
+                  ? "You can update (refetch) the preserved formats by managing them below"
+                  : "The collections owners can refetch the preserved formats"}
+              </p>
+              {link?.collection.ownerId === userId ? (
+                <div
+                  onClick={() =>
+                    link
+                      ? setModal({
+                          modal: "LINK",
+                          state: true,
+                          active: link,
+                          method: "FORMATS",
+                        })
+                      : undefined
+                  }
+                  className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
+                >
+                  <FontAwesomeIcon
+                    icon={faBoxesStacked}
+                    className="w-5 h-5 duration-100"
+                  />
+                  <p>Manage preserved formats</p>
+                </div>
+              ) : undefined}
+            </div>
+          )}
+        </div>
+      </div>
+    </LinkLayout>
+  );
+}
diff --git a/pages/links.tsx b/pages/links/index.tsx
similarity index 100%
rename from pages/links.tsx
rename to pages/links/index.tsx
diff --git a/store/links.ts b/store/links.ts
index b5e14ff..9362742 100644
--- a/store/links.ts
+++ b/store/links.ts
@@ -72,11 +72,23 @@ const useLinkStore = create<LinkStore>()((set) => ({
     const data = await response.json();
 
     if (response.ok) {
-      set((state) => ({
-        links: state.links.map((e) =>
-          e.id === data.response.id ? data.response : e
-        ),
-      }));
+      set((state) => {
+        const linkExists = state.links.some(
+          (link) => link.id === data.response.id
+        );
+
+        if (linkExists) {
+          return {
+            links: state.links.map((e) =>
+              e.id === data.response.id ? data.response : e
+            ),
+          };
+        } else {
+          return {
+            links: [...state.links, data.response],
+          };
+        }
+      });
     }
 
     return { ok: response.ok, data: data.response };
diff --git a/store/modals.ts b/store/modals.ts
index 71c336f..71ecef0 100644
--- a/store/modals.ts
+++ b/store/modals.ts
@@ -9,17 +9,19 @@ type Modal =
       modal: "LINK";
       state: boolean;
       method: "CREATE";
-      isOwnerOrMod?: boolean;
       active?: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
     }
   | {
       modal: "LINK";
       state: boolean;
       method: "UPDATE";
-      isOwnerOrMod: boolean;
       active: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
+    }
+  | {
+      modal: "LINK";
+      state: boolean;
+      method: "FORMATS";
+      active: LinkIncludingShortenedCollectionAndTags;
     }
   | {
       modal: "COLLECTION";
diff --git a/styles/globals.css b/styles/globals.css
index bf7e9a9..3088396 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -129,72 +129,9 @@
 
 /* For the Link banner */
 .link-banner {
-  /* box-shadow: inset 0px 10px 20px 20px #ffffff; */
-  opacity: 25%;
   z-index: 0;
-}
-.link-banner .link-banner-inner {
-  /* box-shadow: inset 0px 10px 20px 20px #ffffff; */
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-mask: linear-gradient(#fff, transparent);
-  mask: linear-gradient(#fff, transparent);
-}
-.link-banner::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 4rem;
-}
-.link-banner::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  width: 100%;
-  height: 4rem;
-}
-
-/* For light mode */
-.banner-light-mode .link-banner::after {
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
-}
-.banner-light-mode .link-banner::before {
-  background-image: linear-gradient(
-    to top,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
-}
-
-/* For dark mode */
-.banner-dark-mode .link-banner::after {
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    #171717 90%
-  );
-}
-.banner-dark-mode .link-banner::before {
-  background-image: linear-gradient(
-    to top,
-    rgba(255, 255, 255, 0),
-    #171717 90%
-  );
+  border-radius: 1rem;
+  height: fit-content;
 }
 
 /* Theme */
@@ -227,6 +164,12 @@
     @apply dark:text-white;
   }
 }
+.react-select__clear-indicator * {
+  display: none;
+  width: 0;
+  margin: 0;
+  padding: 0;
+}
 
 .sky-shadow {
   box-shadow: 0px 0px 3px #0ea5e9;
@@ -239,3 +182,7 @@
 .primary-btn-gradient:hover {
   box-shadow: inset 0px -15px 10px #059bf8;
 }
+
+.line-break * {
+  overflow-x: auto;
+}

From 35665ce292c4ca4ee3d57fa7d7261552f0e00a7e Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 30 Oct 2023 15:21:16 -0400
Subject: [PATCH 16/33] minor fix

---
 components/Modal/Link/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index ff48950..821f8bd 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -60,7 +60,7 @@ export default function LinkModal({
           <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
             Manage Preserved Formats
           </p>
-          <PreservedFormats activeLink={activeLink} />
+          <PreservedFormats />
         </>
       ) : undefined}
     </div>

From dbeefecec6c10b66c615fab205c6ca0c19f820b4 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 31 Oct 2023 05:35:45 -0400
Subject: [PATCH 17/33] better design

---
 pages/links/[id].tsx | 96 +++++++++++++++++++++++++++++---------------
 1 file changed, 64 insertions(+), 32 deletions(-)

diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index fef38e4..54d7d87 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -11,7 +11,7 @@ import unescapeString from "@/lib/client/unescapeString";
 import isValidUrl from "@/lib/client/isValidUrl";
 import DOMPurify from "dompurify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBoxesStacked } from "@fortawesome/free-solid-svg-icons";
+import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons";
 import useModalStore from "@/store/modals";
 import { useSession } from "next-auth/react";
 
@@ -142,42 +142,39 @@ export default function Index() {
       >
         <div
           id="link-banner"
-          className="link-banner p-5 mb-6 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
+          className="link-banner p-3 mb-6 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
         >
           <div id="link-banner-inner" className="link-banner-inner"></div>
 
-          <div className={`relative flex gap-5 items-start`}>
-            {!imageError && link?.url && (
-              <Image
-                src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&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
-                    );
+          <div className={`relative flex flex-col gap-3 items-start`}>
+            <div className="flex gap-3 items-end">
+              {!imageError && link?.url && (
+                <Image
+                  src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&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);
-                }}
-              />
-            )}
+                      setColorPalette(color);
+                    } catch (err) {
+                      console.log(err);
+                    }
+                  }}
+                  onError={(e) => {
+                    setImageError(true);
+                  }}
+                />
+              )}
 
-            <div>
-              <p className="capitalize text-3xl font-thin">
-                {unescapeString(link?.name || link?.description || "")}
-              </p>
               <div className="flex gap-2 text-sm text-gray-500 dark:text-gray-300">
                 <p className=" min-w-fit">
                   {link?.createdAt
@@ -204,6 +201,41 @@ export default function Index() {
                 ) : undefined}
               </div>
             </div>
+
+            <div className="flex flex-col gap-2">
+              <p className="capitalize text-3xl font-thin">
+                {unescapeString(link?.name || link?.description || "")}
+              </p>
+
+              <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: link?.collection.color }}
+                  />
+                  <p
+                    title={link?.collection.name}
+                    className="text-black dark:text-white text-lg truncate max-w-[12rem]"
+                  >
+                    {link?.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>
+            </div>
           </div>
         </div>
 

From 417c16d08b2def15bd98b1a90a25e3a98ab890b6 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 31 Oct 2023 05:39:05 -0400
Subject: [PATCH 18/33] minor UI change

---
 components/LinkSidebar.tsx                 |  6 +++---
 components/Modal/Link/PreservedFormats.tsx | 10 +++++-----
 layouts/LinkLayout.tsx                     |  2 +-
 pages/links/[id].tsx                       |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/LinkSidebar.tsx b/components/LinkSidebar.tsx
index d8c553f..6ffc2f5 100644
--- a/components/LinkSidebar.tsx
+++ b/components/LinkSidebar.tsx
@@ -69,7 +69,7 @@ export default function SettingsSidebar({ className, onClick }: Props) {
                 : undefined;
               onClick && onClick();
             }}
-            className={`hover:opacity-50 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+            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}
@@ -95,7 +95,7 @@ export default function SettingsSidebar({ className, onClick }: Props) {
             onClick && onClick();
           }}
           title="Preserved Formats"
-          className={`hover:opacity-50 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+          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}
@@ -120,7 +120,7 @@ export default function SettingsSidebar({ className, onClick }: Props) {
               }
             }}
             title="Delete"
-            className={`hover:opacity-50 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+            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}
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
index c6b7e18..5fe643f 100644
--- a/components/Modal/Link/PreservedFormats.tsx
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -92,7 +92,7 @@ export default function PreservedFormats() {
           <div className="flex text-black dark:text-white gap-1">
             <div
               onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:opacity-50 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
@@ -103,7 +103,7 @@ export default function PreservedFormats() {
             <Link
               href={`/api/v1/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
-              className="cursor-pointer hover:opacity-50 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -127,7 +127,7 @@ export default function PreservedFormats() {
           <div className="flex text-black dark:text-white gap-1">
             <div
               onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:opacity-50 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
@@ -138,7 +138,7 @@ export default function PreservedFormats() {
             <Link
               href={`/api/v1/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
-              className="cursor-pointer hover:opacity-50 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
@@ -165,7 +165,7 @@ export default function PreservedFormats() {
             ""
           )}`}
           target="_blank"
-          className="sm:mt-3 text-gray-500 dark:text-gray-300 duration-100 hover:opacity-50 flex gap-2 w-fit items-center text-sm"
+          className="sm:mt-3 text-gray-500 dark:text-gray-300 duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm"
         >
           <FontAwesomeIcon
             icon={faArrowUpRightFromSquare}
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
index fdafab3..b3c61c1 100644
--- a/layouts/LinkLayout.tsx
+++ b/layouts/LinkLayout.tsx
@@ -60,7 +60,7 @@ export default function LinkLayout({ children }: Props) {
 
             <div
               onClick={() => router.back()}
-              className="inline-flex gap-1 lg:hover:opacity-50 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 hover:bg-slate-200 dark:hover:bg-neutral-700 lg:hover:bg-transparent lg:dark:hover:bg-transparent"
+              className="inline-flex gap-1 lg: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 hover:bg-slate-200 dark:hover:bg-neutral-700 lg:hover:bg-transparent lg:dark:hover:bg-transparent"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
               Back
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index 54d7d87..1f77e3c 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -191,7 +191,7 @@ export default function Index() {
                     <Link
                       href={link?.url || ""}
                       target="_blank"
-                      className="hover:underline break-all"
+                      className="hover:opacity-60 duration-100 break-all"
                     >
                       {isValidUrl(link?.url || "")
                         ? new URL(link?.url as string).host

From ccafc997fcd8c6e8578aeae7c94e5f770ff02444 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 31 Oct 2023 05:41:19 -0400
Subject: [PATCH 19/33] minor change

---
 pages/links/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index 1f77e3c..8b33e10 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -203,7 +203,7 @@ export default function Index() {
             </div>
 
             <div className="flex flex-col gap-2">
-              <p className="capitalize text-3xl font-thin">
+              <p className="capitalize text-2xl sm:text-3xl font-thin">
                 {unescapeString(link?.name || link?.description || "")}
               </p>
 

From 56a281ae3da0e84946e0dcda4616e6f36a6e5fbb Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 31 Oct 2023 15:44:58 -0400
Subject: [PATCH 20/33] rearchive protection

---
 .env.sample                                   |   1 +
 components/Dropdown.tsx                       |   4 +-
 components/LinkCard.tsx                       |   2 +-
 components/Modal/Link/PreservedFormats.tsx    |  22 +++-
 components/Modal/Link/index.tsx               |  27 ++---
 layouts/LinkLayout.tsx                        | 112 +++++++++++++++++-
 lib/api/archive.ts                            |  96 +++++----------
 lib/api/controllers/links/postLink.ts         |   1 +
 pages/api/v1/links/[id]/archive/index.ts      |  27 +++++
 pages/collections/[id].tsx                    |   2 +-
 pages/links/[id].tsx                          |  79 ++++++------
 .../migration.sql                             |   2 +
 prisma/schema.prisma                          |   2 +
 types/enviornment.d.ts                        |   1 +
 14 files changed, 246 insertions(+), 132 deletions(-)
 create mode 100644 prisma/migrations/20231031100017_add_last_preserved_field/migration.sql

diff --git a/.env.sample b/.env.sample
index 39e1e43..1277ade 100644
--- a/.env.sample
+++ b/.env.sample
@@ -9,6 +9,7 @@ STORAGE_FOLDER=
 AUTOSCROLL_TIMEOUT=
 NEXT_PUBLIC_DISABLE_REGISTRATION=
 IMPORT_SIZE_LIMIT=
+RE_ARCHIVE_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 19e2778..5ec8198 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -21,7 +21,6 @@ type Props = {
   items: MenuItem[];
   points?: { x: number; y: number };
   style?: React.CSSProperties;
-  width?: number; // in rem
 };
 
 export default function Dropdown({
@@ -29,7 +28,6 @@ export default function Dropdown({
   onClickOutside,
   className,
   items,
-  width,
 }: Props) {
   const [pos, setPos] = useState<{ x: number; y: number }>();
   const [dropdownHeight, setDropdownHeight] = useState<number>();
@@ -60,7 +58,7 @@ export default function Dropdown({
 
       setPos({ x: finalX, y: finalY });
     }
-  }, [points, width, dropdownHeight]);
+  }, [points, dropdownHeight]);
 
   return (
     (!points || pos) && (
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 35f60e4..d7c28eb 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -254,7 +254,7 @@ export default function LinkCard({ link, count, className }: Props) {
               : undefined,
             permissions === true
               ? {
-                  name: "Update Archive",
+                  name: "Refresh Formats",
                   onClick: updateArchive,
                 }
               : undefined,
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
index 5fe643f..1a6712b 100644
--- a/components/Modal/Link/PreservedFormats.tsx
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -55,7 +55,7 @@ export default function PreservedFormats() {
     if (response.ok) {
       toast.success(`Link is being archived...`);
       getLink(link?.id as number);
-    } else toast.error(data);
+    } else toast.error(data.response);
   };
 
   const handleDownload = (format: "png" | "pdf") => {
@@ -152,11 +152,18 @@ export default function PreservedFormats() {
       <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-600 p-1 rounded-md cursor-pointer select-none mt-3"
+            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">(re-fetch)</p>
+            <p className="text-xs">(Refresh Formats)</p>
           </div>
         ) : undefined}
         <Link
@@ -165,7 +172,14 @@ export default function PreservedFormats() {
             ""
           )}`}
           target="_blank"
-          className="sm:mt-3 text-gray-500 dark:text-gray-300 duration-100 hover:opacity-60 flex gap-2 w-fit items-center text-sm"
+          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}
diff --git a/components/Modal/Link/index.tsx b/components/Modal/Link/index.tsx
index 821f8bd..546a3ef 100644
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@@ -30,11 +30,15 @@ export default function LinkModal({
 }: Props) {
   return (
     <div className={className}>
-      {/* {method === "CREATE" && (
-        <p className="text-xl text-black dark:text-white text-center">
-          New Link
-        </p>
-      )} */}
+      {method === "CREATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Create a New Link
+          </p>
+          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
+        </>
+      ) : undefined}
+
       {activeLink && method === "UPDATE" ? (
         <>
           <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
@@ -46,19 +50,10 @@ export default function LinkModal({
         </>
       ) : undefined}
 
-      {method === "CREATE" ? (
+      {method === "FORMATS" ? (
         <>
           <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Create a New Link
-          </p>
-          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
-        </>
-      ) : undefined}
-
-      {activeLink && method === "FORMATS" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Manage Preserved Formats
+            Preserved Formats
           </p>
           <PreservedFormats />
         </>
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
index b3c61c1..4850802 100644
--- a/layouts/LinkLayout.tsx
+++ b/layouts/LinkLayout.tsx
@@ -8,6 +8,18 @@ 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;
@@ -40,6 +52,28 @@ export default function LinkLayout({ children }: Props) {
     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 />
@@ -50,21 +84,91 @@ export default function LinkLayout({ children }: Props) {
         </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">
-            <div
+          <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> */}
 
             <div
               onClick={() => router.back()}
-              className="inline-flex gap-1 lg: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 hover:bg-slate-200 dark:hover:bg-neutral-700 lg:hover:bg-transparent lg:dark:hover:bg-transparent"
+              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
             </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}
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index f5506fb..25f5514 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -11,36 +11,15 @@ export default async function archive(
   url: string,
   userId: number
 ) {
-  const user = await prisma.user.findUnique({
-    where: {
-      id: userId,
-    },
-  });
-
-  // const checkExistingLink = await prisma.link.findFirst({
-  //   where: {
-  //     id: linkId,
-  //     OR: [
-  //       {
-  //         screenshotPath: "pending",
-  //       },
-  //       {
-  //         pdfPath: "pending",
-  //       },
-  //     ],
-  //   },
-  // });
-
-  // if (checkExistingLink) return "A request has already been made.";
+  const user = await prisma.user.findUnique({ where: { id: userId } });
 
   const targetLink = await prisma.link.update({
-    where: {
-      id: linkId,
-    },
+    where: { id: linkId },
     data: {
       screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
       pdfPath: user?.archiveAsPDF ? "pending" : null,
       readabilityPath: "pending",
+      lastPreserved: new Date().toISOString(),
     },
   });
 
@@ -56,7 +35,6 @@ export default async function archive(
     try {
       await page.goto(url, { waitUntil: "domcontentloaded" });
 
-      await page.goto(url);
       const content = await page.content();
 
       // Readability
@@ -64,46 +42,35 @@ export default async function archive(
       const window = new JSDOM("").window;
       const purify = DOMPurify(window);
       const cleanedUpContent = purify.sanitize(content);
-
-      const dom = new JSDOM(cleanedUpContent, {
-        url: url,
-      });
-
+      const dom = new JSDOM(cleanedUpContent, { url: url });
       const article = new Readability(dom.window.document).parse();
 
-      await prisma.link.update({
-        where: {
-          id: linkId,
-        },
-        data: {
-          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
-        },
-      });
-
       await createFile({
         data: JSON.stringify(article),
         filePath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
       });
 
-      // Screenshot/PDF
-
-      let faulty = true;
-      await page
-        .evaluate(autoScroll, Number(process.env.AUTOSCROLL_TIMEOUT) || 30)
-        .catch((e) => (faulty = false));
-
-      const linkExists = await prisma.link.findUnique({
-        where: {
-          id: linkId,
+      await prisma.link.update({
+        where: { id: linkId },
+        data: {
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
         },
       });
 
-      if (linkExists && faulty) {
-        if (user.archiveAsScreenshot) {
-          const screenshot = await page.screenshot({
-            fullPage: true,
-          });
+      // Screenshot/PDF
 
+      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`,
@@ -124,10 +91,8 @@ export default async function archive(
           });
         }
 
-        const updateLink = await prisma.link.update({
-          where: {
-            id: linkId,
-          },
+        await prisma.link.update({
+          where: { id: linkId },
           data: {
             screenshotPath: user.archiveAsScreenshot
               ? `archives/${linkExists.collectionId}/${linkId}.png`
@@ -139,21 +104,18 @@ export default async function archive(
         });
       } else if (faulty) {
         await prisma.link.update({
-          where: {
-            id: linkId,
-          },
+          where: { id: linkId },
           data: {
             screenshotPath: null,
             pdfPath: null,
           },
         });
       }
-
-      await browser.close();
     } catch (err) {
       console.log(err);
+      throw err;
+    } finally {
       await browser.close();
-      return err;
     }
   }
 }
@@ -161,11 +123,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);
   });
 
diff --git a/lib/api/controllers/links/postLink.ts b/lib/api/controllers/links/postLink.ts
index 5830040..a147814 100644
--- a/lib/api/controllers/links/postLink.ts
+++ b/lib/api/controllers/links/postLink.ts
@@ -56,6 +56,7 @@ export default async function postLink(
       url: link.url,
       name: link.name,
       description,
+      readabilityPath: "pending",
       collection: {
         connectOrCreate: {
           where: {
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 5bc4c2c..c1c38b0 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -4,6 +4,8 @@ import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import archive from "@/lib/api/archive";
 import { prisma } from "@/lib/api/db";
 
+const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
+
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
   const session = await getServerSession(req, res, authOptions);
 
@@ -33,6 +35,20 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     });
 
   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, session.user.id);
     return res.status(200).json({
       response: "Link is being archived.",
@@ -42,3 +58,14 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
   // 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;
+};
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 77b0334..ea09742 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -220,7 +220,7 @@ export default function Index() {
                       if (target.id !== "expand-dropdown")
                         setExpandDropdown(false);
                     }}
-                    className="absolute top-8 right-0 z-10 w-40"
+                    className="absolute top-8 right-0 z-10 w-44"
                   />
                 ) : null}
               </div>
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index 8b33e10..dfc3388 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -76,7 +76,11 @@ export default function Index() {
 
   useEffect(() => {
     let interval: NodeJS.Timer | undefined;
-    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+    if (
+      link?.screenshotPath === "pending" ||
+      link?.pdfPath === "pending" ||
+      link?.readabilityPath === "pending"
+    ) {
       interval = setInterval(() => getLink(link.id as number), 5000);
     } else {
       if (interval) {
@@ -190,6 +194,7 @@ export default function Index() {
                     <p>•</p>
                     <Link
                       href={link?.url || ""}
+                      title={link?.url}
                       target="_blank"
                       className="hover:opacity-60 duration-100 break-all"
                     >
@@ -240,46 +245,52 @@ export default function Index() {
         </div>
 
         <div className="flex flex-col gap-5 h-full">
-          {link &&
-          link?.readabilityPath &&
-          link?.readabilityPath !== "pending" ? (
+          {link?.readabilityPath?.startsWith("archives") ? (
             <div
-              className="line-break px-5"
+              className="line-break px-3"
               dangerouslySetInnerHTML={{
                 __html: DOMPurify.sanitize(linkContent?.content || "") || "",
               }}
             ></div>
           ) : (
             <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
-              <p className="text-center text-2xl text-black dark:text-white">
-                There is no reader view for this webpage
-              </p>
-              <p className="text-center text-sm text-black dark:text-white">
-                {link?.collection.ownerId === userId
-                  ? "You can update (refetch) the preserved formats by managing them below"
-                  : "The collections owners can refetch the preserved formats"}
-              </p>
-              {link?.collection.ownerId === userId ? (
-                <div
-                  onClick={() =>
-                    link
-                      ? setModal({
-                          modal: "LINK",
-                          state: true,
-                          active: link,
-                          method: "FORMATS",
-                        })
-                      : undefined
-                  }
-                  className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
-                >
-                  <FontAwesomeIcon
-                    icon={faBoxesStacked}
-                    className="w-5 h-5 duration-100"
-                  />
-                  <p>Manage preserved formats</p>
-                </div>
-              ) : undefined}
+              {link?.readabilityPath === "pending" ? (
+                <p className="text-center">
+                  Generating readable format, please wait...
+                </p>
+              ) : (
+                <>
+                  <p className="text-center text-2xl text-black dark:text-white">
+                    There is no reader view for this webpage
+                  </p>
+                  <p className="text-center text-sm text-black dark:text-white">
+                    {link?.collection.ownerId === userId
+                      ? "You can update (refetch) the preserved formats by managing them below"
+                      : "The collections owners can refetch the preserved formats"}
+                  </p>
+                  {link?.collection.ownerId === userId ? (
+                    <div
+                      onClick={() =>
+                        link
+                          ? setModal({
+                              modal: "LINK",
+                              state: true,
+                              active: link,
+                              method: "FORMATS",
+                            })
+                          : undefined
+                      }
+                      className="mt-4 flex gap-2 w-fit mx-auto relative items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-md dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100"
+                    >
+                      <FontAwesomeIcon
+                        icon={faBoxesStacked}
+                        className="w-5 h-5 duration-100"
+                      />
+                      <p>Manage preserved formats</p>
+                    </div>
+                  ) : undefined}
+                </>
+              )}
             </div>
           )}
         </div>
diff --git a/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql b/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql
new file mode 100644
index 0000000..912cad0
--- /dev/null
+++ b/prisma/migrations/20231031100017_add_last_preserved_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "lastPreserved" TIMESTAMP(3);
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 638a12f..a6bd6bb 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -106,6 +106,8 @@ model Link {
   screenshotPath    String?
   pdfPath           String?
   readabilityPath   String?
+
+  lastPreserved     DateTime?
     
   createdAt         DateTime   @default(now())
   updatedAt         DateTime   @updatedAt @default(now())
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index 985958f..f529759 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -9,6 +9,7 @@ declare global {
       STORAGE_FOLDER?: string;
       AUTOSCROLL_TIMEOUT?: string;
       IMPORT_SIZE_LIMIT?: string;
+      RE_ARCHIVE_LIMIT?: string;
 
       SPACES_KEY?: string;
       SPACES_SECRET?: string;

From b1c6a3faf11ab3c74d04ae25e000b1d1cb5e7ff0 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 31 Oct 2023 18:02:41 -0400
Subject: [PATCH 21/33] readable format styling

---
 pages/links/[id].tsx |  2 +-
 styles/globals.css   | 64 +++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index dfc3388..b05d0fb 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -247,7 +247,7 @@ export default function Index() {
         <div className="flex flex-col gap-5 h-full">
           {link?.readabilityPath?.startsWith("archives") ? (
             <div
-              className="line-break px-3"
+              className="line-break px-3 reader-view"
               dangerouslySetInnerHTML={{
                 __html: DOMPurify.sanitize(linkContent?.content || "") || "",
               }}
diff --git a/styles/globals.css b/styles/globals.css
index 3088396..9621be8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -184,5 +184,67 @@
 }
 
 .line-break * {
-  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* Reader view custom stylings */
+.reader-view {
+  line-height: 3rem;
+}
+.reader-view h1 {
+  font-size: 2.2rem;
+}
+.reader-view h2 {
+  line-height: 4rem;
+  font-size: 1.9rem;
+}
+.reader-view h3 {
+  line-height: 3.5rem;
+  font-size: 1.6rem;
+}
+.reader-view h4 {
+  font-size: 1.3rem;
+}
+.reader-view h5 {
+  font-size: 1.1rem;
+}
+.reader-view li {
+  list-style: inside;
+  margin-left: 2rem;
+}
+.reader-view a {
+  text-decoration: underline;
+}
+.reader-view b {
+  font-weight: bolder;
+}
+.reader-view pre,
+.reader-view code {
+  font-family: "Courier New", Courier, monospace;
+}
+.reader-view blockquote {
+  opacity: 50%;
+  padding-left: 1.5rem;
+  border-left: solid 3px;
+}
+.reader-view img {
+  margin: auto;
+  border-radius: 10px;
+}
+.reader-view pre {
+  padding: 1rem;
+  line-height: normal;
+}
+.reader-view code {
+  padding: 0.15rem 0.4rem 0.15rem 0.4rem;
+}
+[class="dark"] .reader-view code,
+[class="dark"] .reader-view pre {
+  background-color: rgb(49, 49, 49);
+  border-radius: 8px;
+}
+[class="light"] .reader-view code,
+[class="light"] .reader-view pre {
+  background-color: rgb(230, 230, 230);
+  border-radius: 8px;
 }

From b1b0d98eb26e96630e0c317d5294189fe3e4dac2 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 1 Nov 2023 06:01:26 -0400
Subject: [PATCH 22/33] search by text content functionality

---
 components/FilterSearchDropdown.tsx                   | 11 +++++++++++
 hooks/useLinks.tsx                                    |  3 +++
 lib/api/archive.ts                                    |  5 +++++
 lib/api/controllers/links/getLinks.ts                 |  9 +++++++++
 pages/api/v1/links/index.ts                           |  2 ++
 pages/search/index.tsx                                |  2 ++
 .../migration.sql                                     |  2 ++
 prisma/schema.prisma                                  |  2 ++
 types/global.ts                                       |  1 +
 9 files changed, 37 insertions(+)
 create mode 100644 prisma/migrations/20231101085207_add_text_content_field/migration.sql

diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index 181febb..0b32bee 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -9,6 +9,7 @@ type Props = {
     name: boolean;
     url: boolean;
     description: boolean;
+    textContent: boolean;
     tags: boolean;
   };
 };
@@ -54,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}
diff --git a/hooks/useLinks.tsx b/hooks/useLinks.tsx
index 56024b0..60f43db 100644
--- a/hooks/useLinks.tsx
+++ b/hooks/useLinks.tsx
@@ -15,6 +15,7 @@ export default function useLinks(
     searchByUrl,
     searchByDescription,
     searchByTags,
+    searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
   const { links, setLinks, resetLinks } = useLinkStore();
@@ -34,6 +35,7 @@ export default function useLinks(
       searchByUrl,
       searchByDescription,
       searchByTags,
+      searchByTextContent,
     };
 
     const buildQueryString = (params: LinkRequestQuery) => {
@@ -72,6 +74,7 @@ export default function useLinks(
     searchByName,
     searchByUrl,
     searchByDescription,
+    searchByTextContent,
     searchByTags,
   ]);
 
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index 25f5514..e55d86d 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -45,6 +45,10 @@ export default async function archive(
       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`,
@@ -54,6 +58,7 @@ export default async function archive(
         where: { id: linkId },
         data: {
           readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+          textContent: articleText,
         },
       });
 
diff --git a/lib/api/controllers/links/getLinks.ts b/lib/api/controllers/links/getLinks.ts
index fd0f257..18edf91 100644
--- a/lib/api/controllers/links/getLinks.ts
+++ b/lib/api/controllers/links/getLinks.ts
@@ -42,6 +42,15 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
       });
     }
 
+    if (query.searchByTextContent) {
+      searchConditions.push({
+        textContent: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
     if (query.searchByTags) {
       searchConditions.push({
         tags: {
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index c878083..e882c15 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -35,6 +35,8 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       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,
     };
 
diff --git a/pages/search/index.tsx b/pages/search/index.tsx
index 01ca6ef..35abdc7 100644
--- a/pages/search/index.tsx
+++ b/pages/search/index.tsx
@@ -19,6 +19,7 @@ export default function Search() {
     name: true,
     url: true,
     description: true,
+    textContent: true,
     tags: true,
   });
 
@@ -32,6 +33,7 @@ export default function Search() {
     searchByName: searchFilter.name,
     searchByUrl: searchFilter.url,
     searchByDescription: searchFilter.description,
+    searchByTextContent: searchFilter.textContent,
     searchByTags: searchFilter.tags,
   });
 
diff --git a/prisma/migrations/20231101085207_add_text_content_field/migration.sql b/prisma/migrations/20231101085207_add_text_content_field/migration.sql
new file mode 100644
index 0000000..3d03e3c
--- /dev/null
+++ b/prisma/migrations/20231101085207_add_text_content_field/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "textContent" TEXT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index a6bd6bb..f5574e2 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -103,6 +103,8 @@ model Link {
   collectionId      Int
   tags              Tag[]
     
+  textContent       String?
+
   screenshotPath    String?
   pdfPath           String?
   readabilityPath   String?
diff --git a/types/global.ts b/types/global.ts
index 4af954d..b878a84 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -66,6 +66,7 @@ export type LinkRequestQuery = {
   searchByName?: boolean;
   searchByUrl?: boolean;
   searchByDescription?: boolean;
+  searchByTextContent?: boolean;
   searchByTags?: boolean;
 };
 

From b458fad567f4f9ae05015fe0aaf9aefb4ed54199 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 2 Nov 2023 01:52:49 -0400
Subject: [PATCH 23/33] WIP changes

---
 lib/api/authenticateUser.ts              |  21 ++++
 package.json                             |   1 +
 pages/api/v1/archives/[...params].ts     |   2 +-
 pages/api/v1/auth/[...nextauth].ts       |  22 ++--
 pages/api/v1/avatar/[id].ts              |   2 +-
 pages/api/v1/collections/[id].ts         |   2 +-
 pages/api/v1/collections/index.ts        |   2 +-
 pages/api/v1/dashboard/index.ts          |   2 +-
 pages/api/v1/getToken.ts                 |  26 ++---
 pages/api/v1/links/[id]/archive/index.ts |   2 +-
 pages/api/v1/links/[id]/index.ts         |   2 +-
 pages/api/v1/links/index.ts              |   9 +-
 pages/api/v1/migration/index.ts          |   2 +-
 pages/api/v1/tags/[id].ts                |   2 +-
 pages/api/v1/tags/index.ts               |   2 +-
 pages/api/v1/users/[id].ts               |   2 +-
 pages/api/v1/webhooks/stripe/index.ts    |  62 +++++++++++
 pages/test.tsx                           | 125 +++++++++++++++++++++++
 types/next-auth.d.ts                     |  32 ++++++
 yarn.lock                                |  81 ++++++++++++++-
 20 files changed, 358 insertions(+), 43 deletions(-)
 create mode 100644 lib/api/authenticateUser.ts
 create mode 100644 pages/api/v1/webhooks/stripe/index.ts
 create mode 100644 pages/test.tsx

diff --git a/lib/api/authenticateUser.ts b/lib/api/authenticateUser.ts
new file mode 100644
index 0000000..6ef51b6
--- /dev/null
+++ b/lib/api/authenticateUser.ts
@@ -0,0 +1,21 @@
+import { NextApiRequest } from "next";
+import { getToken } from "next-auth/jwt";
+
+type Props = {
+  req: NextApiRequest;
+};
+
+export default async function authenticateUser({ req }: Props) {
+  const token = await getToken({ req });
+
+  if (!token?.id) {
+    return { response: "You must be logged in.", status: 401 };
+  } else if (token.isSubscriber === false)
+    return {
+      response:
+        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
+      status: 401,
+    };
+
+  return token;
+}
diff --git a/package.json b/package.json
index 39ae11f..5f53bc2 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "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",
diff --git a/pages/api/v1/archives/[...params].ts b/pages/api/v1/archives/[...params].ts
index 814e5ee..d29099e 100644
--- a/pages/api/v1/archives/[...params].ts
+++ b/pages/api/v1/archives/[...params].ts
@@ -16,7 +16,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/auth/[...nextauth].ts b/pages/api/v1/auth/[...nextauth].ts
index 1bde92d..67b01f7 100644
--- a/pages/api/v1/auth/[...nextauth].ts
+++ b/pages/api/v1/auth/[...nextauth].ts
@@ -1,10 +1,9 @@
 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, Session, User } 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";
@@ -19,6 +18,7 @@ const providers: Provider[] = [
     type: "credentials",
     credentials: {},
     async authorize(credentials, req) {
+      console.log("User logged in...");
       if (!credentials) return null;
 
       const { username, password } = credentials as {
@@ -81,13 +81,6 @@ 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;
-
-      return session;
-    },
     async jwt({ token, trigger, user }) {
       const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
@@ -121,7 +114,7 @@ export const authOptions: AuthOptions = {
       }
 
       if (trigger === "signIn") {
-        token.id = user.id;
+        token.id = user.id as number;
         token.username = (user as any).username;
       } else if (trigger === "update" && token.id) {
         console.log(token);
@@ -132,7 +125,7 @@ export const authOptions: AuthOptions = {
           },
         });
 
-        if (user) {
+        if (user?.name && user.username && user.email) {
           token.name = user.name;
           token.username = user.username?.toLowerCase();
           token.email = user.email?.toLowerCase();
@@ -140,6 +133,13 @@ export const authOptions: AuthOptions = {
       }
       return token;
     },
+    async session({ session, token }) {
+      session.user.id = token.id;
+      session.user.username = token.username;
+      session.user.isSubscriber = token.isSubscriber;
+
+      return session;
+    },
   },
 };
 
diff --git a/pages/api/v1/avatar/[id].ts b/pages/api/v1/avatar/[id].ts
index 97eeb91..0a379fc 100644
--- a/pages/api/v1/avatar/[id].ts
+++ b/pages/api/v1/avatar/[id].ts
@@ -17,7 +17,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       .status(401)
       .send("You must be logged in.");
   else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
+    return 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.",
     });
diff --git a/pages/api/v1/collections/[id].ts b/pages/api/v1/collections/[id].ts
index 3ac289c..4f888d9 100644
--- a/pages/api/v1/collections/[id].ts
+++ b/pages/api/v1/collections/[id].ts
@@ -13,7 +13,7 @@ export default async function collections(
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/collections/index.ts b/pages/api/v1/collections/index.ts
index 73cb45e..f5f00ae 100644
--- a/pages/api/v1/collections/index.ts
+++ b/pages/api/v1/collections/index.ts
@@ -13,7 +13,7 @@ export default async function collections(
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/dashboard/index.ts b/pages/api/v1/dashboard/index.ts
index 5c92e00..af98b4b 100644
--- a/pages/api/v1/dashboard/index.ts
+++ b/pages/api/v1/dashboard/index.ts
@@ -10,7 +10,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/getToken.ts b/pages/api/v1/getToken.ts
index e51c4bb..84114d2 100644
--- a/pages/api/v1/getToken.ts
+++ b/pages/api/v1/getToken.ts
@@ -1,18 +1,10 @@
-// For future...
-// import { getToken } from "next-auth/jwt";
+import { NextApiRequest, NextApiResponse } from "next";
+import { getToken } from "next-auth/jwt";
 
-// export default async (req, res) => {
-//   // If you don't have NEXTAUTH_SECRET set, you will have to pass your secret as `secret` to `getToken`
-//   console.log({ req });
-//   const token = await getToken({ req, raw: true });
-//   if (token) {
-//     // Signed in
-//     console.log("JSON Web Token", JSON.stringify(token, null, 2));
-//   } else {
-//     // Not Signed in
-//     res.status(401);
-//   }
-//   res.end();
-// };
-
-export {};
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // if using `NEXTAUTH_SECRET` env variable, we detect it, and you won't actually need to `secret`
+  // const token = await getToken({ req })
+  const token = await getToken({ req });
+  console.log("JSON Web Token", token);
+  res.end();
+};
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index c1c38b0..750d440 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -12,7 +12,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
index 748e009..28defa4 100644
--- a/pages/api/v1/links/[id]/index.ts
+++ b/pages/api/v1/links/[id]/index.ts
@@ -11,7 +11,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index e882c15..7fe25c9 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -4,14 +4,19 @@ import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 import { LinkRequestQuery } from "@/types/global";
+import { getToken } from "next-auth/jwt";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
+  const token = await getToken({ req });
+
+  // const session = await getServerSession(req, res, authOptions);
+
+  return res.status(200).json(token);
 
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 628a0d2..08d8336 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -20,7 +20,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index 22b355f..eb6a1b5 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -9,7 +9,7 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/tags/index.ts b/pages/api/v1/tags/index.ts
index efaf7b2..a516123 100644
--- a/pages/api/v1/tags/index.ts
+++ b/pages/api/v1/tags/index.ts
@@ -9,7 +9,7 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   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({
+    return 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.",
     });
diff --git a/pages/api/v1/users/[id].ts b/pages/api/v1/users/[id].ts
index 20b3551..2eff580 100644
--- a/pages/api/v1/users/[id].ts
+++ b/pages/api/v1/users/[id].ts
@@ -26,7 +26,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   if (!userId) {
     return res.status(401).json({ response: "You must be logged in." });
   } else if (session?.user?.isSubscriber === false)
-    res.status(401).json({
+    return 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.",
     });
diff --git a/pages/api/v1/webhooks/stripe/index.ts b/pages/api/v1/webhooks/stripe/index.ts
new file mode 100644
index 0000000..a1df0ea
--- /dev/null
+++ b/pages/api/v1/webhooks/stripe/index.ts
@@ -0,0 +1,62 @@
+// TODO - Stripe webhooks for user cancellation...
+
+// import { NextApiRequest, NextApiResponse } from "next";
+// import Stripe from "stripe";
+// import { buffer } from "micro";
+// import { prisma } from "@/lib/api/db";
+
+// const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
+//   apiVersion: "2022-11-15",
+// });
+
+// const endpointSecret =
+//   "whsec_7c144bcd924041257e3d83eac1e2fba9c8a938b240fd8adb1c902f079e0cdee0";
+
+// export const config = {
+//   api: {
+//     bodyParser: false,
+//   },
+// };
+
+// export default async function handler(
+//   req: NextApiRequest,
+//   res: NextApiResponse
+// ) {
+//   if (req.method === "POST") {
+//     const buf = await buffer(req);
+//     const sig = req.headers["stripe-signature"];
+
+//     let event: Stripe.Event;
+
+//     try {
+//       if (!sig) throw new Error("Stripe Signature is not defined.");
+//       event = stripe.webhooks.constructEvent(buf, sig, endpointSecret);
+//     } catch (err) {
+//       console.log(err);
+//       return res.status(400).send({ response: "Error..." });
+//     }
+
+//     // Handle the event
+//     switch (event.type) {
+//       case "customer.subscription.deleted":
+//         const customerSubscriptionDeleted = event.data.object as any;
+
+//         // Revoke all the token under the customers email...
+
+//         const customer = (await stripe.customers.retrieve(
+//           customerSubscriptionDeleted.customer
+//         )) as any;
+
+//         if (customer?.email) {
+//           // Revoke tokens inside the database
+//         }
+
+//         break;
+//       // ... handle other event types
+//       default:
+//         console.log(`Unhandled event type ${event.type}`);
+//     }
+
+//     return res.status(200).send({ response: "Done!" });
+//   }
+// }
diff --git a/pages/test.tsx b/pages/test.tsx
new file mode 100644
index 0000000..beae84f
--- /dev/null
+++ b/pages/test.tsx
@@ -0,0 +1,125 @@
+import SubmitButton from "@/components/SubmitButton";
+import TextInput from "@/components/TextInput";
+import CenteredForm from "@/layouts/CenteredForm";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useState, FormEvent } from "react";
+import { toast } from "react-hot-toast";
+
+interface FormData {
+  username: string;
+  password: string;
+}
+
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+
+export default function Login() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [form, setForm] = useState<FormData>({
+    username: "",
+    password: "",
+  });
+
+  async function loginUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (form.username !== "" && form.password !== "") {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Authenticating...");
+
+      const res = await signIn("credentials", {
+        username: form.username,
+        password: form.password,
+        redirect: false,
+      });
+
+      console.log(res);
+
+      toast.dismiss(load);
+
+      setSubmitLoader(false);
+
+      if (!res?.ok) {
+        toast.error("Invalid login.");
+      }
+    } else {
+      toast.error("Please fill out all the fields.");
+    }
+  }
+
+  return (
+    <CenteredForm text="Sign in to your account">
+      <form onSubmit={loginUser}>
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+          <p className="text-3xl text-black dark:text-white text-center font-extralight">
+            Enter your credentials
+          </p>
+
+          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+
+          <div>
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Username
+              {emailEnabled ? " or Email" : undefined}
+            </p>
+
+            <TextInput
+              autoFocus={true}
+              placeholder="johnny"
+              value={form.username}
+              className="bg-white"
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+            />
+          </div>
+
+          <div className="w-full">
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Password
+            </p>
+
+            <TextInput
+              type="password"
+              placeholder="••••••••••••••"
+              value={form.password}
+              className="bg-white"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            />
+            {emailEnabled && (
+              <div className="w-fit ml-auto mt-1">
+                <Link
+                  href={"/forgot"}
+                  className="text-gray-500 dark:text-gray-400 font-semibold"
+                >
+                  Forgot Password?
+                </Link>
+              </div>
+            )}
+          </div>
+
+          <SubmitButton
+            type="submit"
+            label="Login"
+            className=" w-full text-center"
+            loading={submitLoader}
+          />
+          {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION ===
+          "true" ? undefined : (
+            <div className="flex items-baseline gap-1 justify-center">
+              <p className="w-fit text-gray-500 dark:text-gray-400">
+                New here?
+              </p>
+              <Link
+                href={"/register"}
+                className="block text-black dark:text-white font-semibold"
+              >
+                Sign Up
+              </Link>
+            </div>
+          )}
+        </div>
+      </form>
+    </CenteredForm>
+  );
+}
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index 6df7f6c..d78b116 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -1,4 +1,5 @@
 import NextAuth from "next-auth";
+import { JWT } from "next-auth/jwt";
 
 declare module "next-auth" {
   interface Session {
@@ -9,4 +10,35 @@ declare module "next-auth" {
       isSubscriber: boolean;
     };
   }
+
+  interface User {
+    id: number;
+    name: string;
+    username: string;
+    email: string;
+    emailVerified: Date;
+    image: string;
+    password: string;
+    archiveAsScreenshot: boolean;
+    archiveAsPDF: boolean;
+    archiveAsWaybackMachine: boolean;
+    isPrivate: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    name: string;
+    email: string;
+    picture: string;
+    sub: string;
+    isSubscriber: boolean;
+    id: number;
+    username: string;
+    iat: number;
+    exp: number;
+    jti: string;
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index bd41d88..024191a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1702,6 +1702,11 @@ are-we-there-yet@^2.0.0:
     delegates "^1.0.0"
     readable-stream "^3.6.0"
 
+arg@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0"
+  integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==
+
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -1929,6 +1934,11 @@ busboy@1.6.0:
   dependencies:
     streamsearch "^1.1.0"
 
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -2079,6 +2089,11 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
+content-type@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
 convert-source-map@^1.5.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -2256,6 +2271,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
 
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
 detect-libc@^2.0.0, detect-libc@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
@@ -3122,6 +3142,17 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
+http-errors@1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
@@ -3148,6 +3179,13 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -3186,7 +3224,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3613,6 +3651,15 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+micro@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/micro/-/micro-10.0.1.tgz#2601e02b0dacd2eaee77e9de18f12b2e595c5951"
+  integrity sha512-9uwZSsUrqf6+4FLLpiPj5TRWQv5w5uJrJwsx1LR/TjqvQmKC1XnGQ9OHrFwR3cbZ46YqPqxO/XJCOpWnqMPw2Q==
+  dependencies:
+    arg "4.1.0"
+    content-type "1.0.4"
+    raw-body "2.4.1"
+
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -4273,6 +4320,16 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raw-body@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
+  integrity sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.3"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -4483,7 +4540,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -4519,6 +4576,11 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
 sharp@^0.32.1:
   version "0.32.1"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.1.tgz#41aa0d0b2048b2e0ee453d9fcb14ec1f408390fe"
@@ -4615,6 +4677,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+"statuses@>= 1.5.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -4877,6 +4944,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
 tough-cookie@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
@@ -4997,6 +5069,11 @@ universalify@^0.2.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
 update-browserslist-db@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"

From ae1889e75798a1dae0ed007dc65f85d4bb6a09c6 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 2 Nov 2023 14:59:31 -0400
Subject: [PATCH 24/33] support for bearer tokens

---
 .../Modal/Collection/TeamManagement.tsx       |   9 +-
 components/Modal/Link/AddOrEditLink.tsx       |   1 +
 hooks/useInitialData.tsx                      |   2 +-
 layouts/AuthRedirect.tsx                      |   7 +-
 lib/api/authenticateUser.ts                   |  32 +++--
 .../users/userId/updateUserById.ts            |  29 ++--
 pages/api/v1/archives/[...params].ts          |  18 +--
 pages/api/v1/auth/[...nextauth].ts            |  21 +--
 pages/api/v1/avatar/[id].ts                   |  27 ++--
 pages/api/v1/collections/[id].ts              |  18 +--
 pages/api/v1/collections/index.ts             |  18 +--
 pages/api/v1/dashboard/index.ts               |  16 +--
 pages/api/v1/getToken.ts                      |   6 +-
 pages/api/v1/links/[id]/archive/index.ts      |  18 +--
 pages/api/v1/links/[id]/index.ts              |  20 +--
 pages/api/v1/links/index.ts                   |  23 +---
 pages/api/v1/migration/index.ts               |  20 +--
 pages/api/v1/payment/index.ts                 |  13 +-
 pages/api/v1/tags/[id].ts                     |  16 +--
 pages/api/v1/tags/index.ts                    |  16 +--
 pages/api/v1/users/[id].ts                    |  38 +++---
 pages/api/v1/webhooks/stripe/index.ts         |  62 ---------
 pages/collections/[id].tsx                    |   1 -
 pages/subscribe.tsx                           |   3 -
 pages/test.tsx                                | 125 ------------------
 types/global.ts                               |   5 +-
 types/next-auth.d.ts                          |  20 +--
 27 files changed, 148 insertions(+), 436 deletions(-)
 delete mode 100644 pages/api/v1/webhooks/stripe/index.ts
 delete mode 100644 pages/test.tsx

diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 68a2a81..b551969 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/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,6 +34,7 @@ export default function TeamManagement({
   collection,
   method,
 }: Props) {
+  const { account } = useAccountStore();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);
@@ -59,8 +60,6 @@ export default function TeamManagement({
 
   const { addCollection, updateCollection } = useCollectionStore();
 
-  const session = useSession();
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -158,7 +157,7 @@ export default function TeamManagement({
               onKeyDown={(e) =>
                 e.key === "Enter" &&
                 addMemberToCollection(
-                  session.data?.user.username as string,
+                  account.username as string,
                   memberUsername || "",
                   collection,
                   setMemberState
@@ -169,7 +168,7 @@ export default function TeamManagement({
             <div
               onClick={() =>
                 addMemberToCollection(
-                  session.data?.user.username as string,
+                  account.username as string,
                   memberUsername || "",
                   collection,
                   setMemberState
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index eab727b..1c863bd 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -49,6 +49,7 @@ export default function AddOrEditLink({
       screenshotPath: "",
       pdfPath: "",
       readabilityPath: "",
+      textContent: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
diff --git a/hooks/useInitialData.tsx b/hooks/useInitialData.tsx
index c6b1ea3..1300265 100644
--- a/hooks/useInitialData.tsx
+++ b/hooks/useInitialData.tsx
@@ -21,5 +21,5 @@ export default function useInitialData() {
       // setLinks();
       setAccount(data.user.id);
     }
-  }, [status]);
+  }, [status, data]);
 }
diff --git a/layouts/AuthRedirect.tsx b/layouts/AuthRedirect.tsx
index a5fd1ad..8942666 100644
--- a/layouts/AuthRedirect.tsx
+++ b/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,6 +14,7 @@ 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;
 
@@ -25,7 +27,8 @@ export default function AuthRedirect({ children }: Props) {
         status === "authenticated" &&
         (data.user.isSubscriber === true ||
           data.user.isSubscriber === undefined) &&
-        !data.user.username
+        account.id &&
+        !account.username
       ) {
         router.push("/choose-username").then(() => {
           setRedirect(false);
@@ -66,7 +69,7 @@ export default function AuthRedirect({ children }: Props) {
     } else {
       setRedirect(false);
     }
-  }, [status]);
+  }, [status, account]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
   else return <></>;
diff --git a/lib/api/authenticateUser.ts b/lib/api/authenticateUser.ts
index 6ef51b6..d6bb3f3 100644
--- a/lib/api/authenticateUser.ts
+++ b/lib/api/authenticateUser.ts
@@ -1,21 +1,31 @@
-import { NextApiRequest } from "next";
+import { NextApiRequest, NextApiResponse } from "next";
 import { getToken } from "next-auth/jwt";
+import { prisma } from "./db";
+import { User } from "@prisma/client";
 
 type Props = {
   req: NextApiRequest;
+  res: NextApiResponse;
 };
 
-export default async function authenticateUser({ req }: Props) {
+export default async function authenticateUser({
+  req,
+  res,
+}: Props): Promise<User | null> {
   const token = await getToken({ req });
+  const userId = token?.id;
 
-  if (!token?.id) {
-    return { response: "You must be logged in.", status: 401 };
-  } else if (token.isSubscriber === false)
-    return {
-      response:
-        "You are not a subscriber, feel free to reach out to us at support@linkwarden.app in case of any issues.",
-      status: 401,
-    };
+  if (!userId) {
+    res.status(401).json({ message: "You must be logged in." });
+    return null;
+  } else if (token.isSubscriber === false) {
+    res.status(401).json({
+      message:
+        "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 token;
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+  return user;
 }
diff --git a/lib/api/controllers/users/userId/updateUserById.ts b/lib/api/controllers/users/userId/updateUserById.ts
index f167ea6..fc4c015 100644
--- a/lib/api/controllers/users/userId/updateUserById.ts
+++ b/lib/api/controllers/users/userId/updateUserById.ts
@@ -10,12 +10,7 @@ const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
 
 export default async function updateUserById(
-  sessionUser: {
-    id: number;
-    username: string;
-    email: string;
-    isSubscriber: boolean;
-  },
+  userId: number,
   data: AccountSettings
 ) {
   if (emailEnabled && !data.email)
@@ -49,7 +44,7 @@ export default async function updateUserById(
 
   const userIsTaken = await prisma.user.findFirst({
     where: {
-      id: { not: sessionUser.id },
+      id: { not: userId },
       OR: emailEnabled
         ? [
             {
@@ -97,7 +92,7 @@ export default async function updateUserById(
         createFolder({ filePath: `uploads/avatar` });
 
         await createFile({
-          filePath: `uploads/avatar/${sessionUser.id}.jpg`,
+          filePath: `uploads/avatar/${userId}.jpg`,
           data: base64Data,
           isBase64: true,
         });
@@ -112,9 +107,13 @@ export default async function updateUserById(
       };
     }
   } else if (data.image == "") {
-    removeFile({ filePath: `uploads/avatar/${sessionUser.id}.jpg` });
+    removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
   }
 
+  const previousEmail = (
+    await prisma.user.findUnique({ where: { id: userId } })
+  )?.email;
+
   // Other settings
 
   const saltRounds = 10;
@@ -122,14 +121,14 @@ export default async function updateUserById(
 
   const updatedUser = await prisma.user.update({
     where: {
-      id: sessionUser.id,
+      id: userId,
     },
     data: {
       name: data.name,
       username: data.username.toLowerCase().trim(),
       email: data.email?.toLowerCase().trim(),
       isPrivate: data.isPrivate,
-      image: data.image ? `uploads/avatar/${sessionUser.id}.jpg` : "",
+      image: data.image ? `uploads/avatar/${userId}.jpg` : "",
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
@@ -167,7 +166,7 @@ export default async function updateUserById(
   // Delete whitelistedUsers that are not present in the new list
   await prisma.whitelistedUser.deleteMany({
     where: {
-      userId: sessionUser.id,
+      userId: userId,
       username: {
         in: usernamesToDelete,
       },
@@ -179,17 +178,17 @@ export default async function updateUserById(
     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 !== data.email)
+  if (STRIPE_SECRET_KEY && emailEnabled && previousEmail !== data.email)
     await updateCustomerEmail(
       STRIPE_SECRET_KEY,
-      sessionUser.email,
+      previousEmail as string,
       data.email as string
     );
 
diff --git a/pages/api/v1/archives/[...params].ts b/pages/api/v1/archives/[...params].ts
index d29099e..5534ea3 100644
--- a/pages/api/v1/archives/[...params].ts
+++ b/pages/api/v1/archives/[...params].ts
@@ -1,28 +1,20 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getPermission from "@/lib/api/getPermission";
 import readFile from "@/lib/api/storage/readFile";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   if (!req.query.params)
     return res.status(401).json({ response: "Invalid parameters." });
 
+  const user = await authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
+
   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)
-    return 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({
-    userId: session.user.id,
+    userId: user.id,
     collectionId: Number(collectionId),
   });
 
diff --git a/pages/api/v1/auth/[...nextauth].ts b/pages/api/v1/auth/[...nextauth].ts
index 67b01f7..3228a35 100644
--- a/pages/api/v1/auth/[...nextauth].ts
+++ b/pages/api/v1/auth/[...nextauth].ts
@@ -18,7 +18,7 @@ const providers: Provider[] = [
     type: "credentials",
     credentials: {},
     async authorize(credentials, req) {
-      console.log("User logged in...");
+      console.log("User logged in attempt...");
       if (!credentials) return null;
 
       const { username, password } = credentials as {
@@ -51,7 +51,7 @@ const providers: Provider[] = [
       }
 
       if (passwordMatches) {
-        return findUser;
+        return { id: findUser?.id };
       } else return null as any;
     },
   }),
@@ -101,9 +101,15 @@ export const authOptions: AuthOptions = {
         STRIPE_SECRET_KEY &&
         (trigger || subscriptionIsTimesUp || !token.isSubscriber)
       ) {
+        const user = await prisma.user.findUnique({
+          where: {
+            id: Number(token.sub),
+          },
+        });
+
         const subscription = await checkSubscription(
           STRIPE_SECRET_KEY,
-          token.email as string
+          user?.email as string
         );
 
         if (subscription.subscriptionCanceledAt) {
@@ -115,27 +121,22 @@ export const authOptions: AuthOptions = {
 
       if (trigger === "signIn") {
         token.id = user.id as number;
-        token.username = (user as any).username;
       } else if (trigger === "update" && token.id) {
-        console.log(token);
-
         const user = await prisma.user.findUnique({
           where: {
             id: token.id as number,
           },
         });
 
-        if (user?.name && user.username && user.email) {
+        if (user?.name) {
           token.name = user.name;
-          token.username = user.username?.toLowerCase();
-          token.email = user.email?.toLowerCase();
         }
       }
+
       return token;
     },
     async session({ session, token }) {
       session.user.id = token.id;
-      session.user.username = token.username;
       session.user.isSubscriber = token.isSubscriber;
 
       return session;
diff --git a/pages/api/v1/avatar/[id].ts b/pages/api/v1/avatar/[id].ts
index 0a379fc..307cb8a 100644
--- a/pages/api/v1/avatar/[id].ts
+++ b/pages/api/v1/avatar/[id].ts
@@ -1,26 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import { prisma } from "@/lib/api/db";
 import readFile from "@/lib/api/storage/readFile";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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/plain")
-      .status(401)
-      .send("You must be logged in.");
-  else if (session?.user?.isSubscriber === false)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (!queryId)
     return res
@@ -28,7 +15,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       .status(401)
       .send("Invalid parameters.");
 
-  if (userId !== queryId) {
+  if (user.id !== queryId) {
     const targetUser = await prisma.user.findUnique({
       where: {
         id: queryId,
@@ -42,7 +29,11 @@ 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/plain")
         .status(400)
diff --git a/pages/api/v1/collections/[id].ts b/pages/api/v1/collections/[id].ts
index 4f888d9..6f98690 100644
--- a/pages/api/v1/collections/[id].ts
+++ b/pages/api/v1/collections/[id].ts
@@ -1,33 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import updateCollectionById from "@/lib/api/controllers/collections/collectionId/updateCollectionById";
 import deleteCollectionById from "@/lib/api/controllers/collections/collectionId/deleteCollectionById";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "PUT") {
     const updated = await updateCollectionById(
-      session.user.id,
+      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(
-      session.user.id,
+      user.id,
       Number(req.query.id) as number
     );
     return res.status(deleted.status).json({ response: deleted.response });
diff --git a/pages/api/v1/collections/index.ts b/pages/api/v1/collections/index.ts
index f5f00ae..5f938f5 100644
--- a/pages/api/v1/collections/index.ts
+++ b/pages/api/v1/collections/index.ts
@@ -1,30 +1,22 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
 import postCollection from "@/lib/api/controllers/collections/postCollection";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
-    const collections = await getCollections(session.user.id);
+    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, session.user.id);
+    const newCollection = await postCollection(req.body, user.id);
     return res
       .status(newCollection.status)
       .json({ response: newCollection.response });
diff --git a/pages/api/v1/dashboard/index.ts b/pages/api/v1/dashboard/index.ts
index af98b4b..dfbd50a 100644
--- a/pages/api/v1/dashboard/index.ts
+++ b/pages/api/v1/dashboard/index.ts
@@ -1,19 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import { LinkRequestQuery } from "@/types/global";
 import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
     const convertedData: LinkRequestQuery = {
@@ -21,7 +13,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
     };
 
-    const links = await getDashboardData(session.user.id, convertedData);
+    const links = await getDashboardData(user.id, convertedData);
     return res.status(links.status).json({ response: links.response });
   }
 }
diff --git a/pages/api/v1/getToken.ts b/pages/api/v1/getToken.ts
index 84114d2..0143d89 100644
--- a/pages/api/v1/getToken.ts
+++ b/pages/api/v1/getToken.ts
@@ -4,7 +4,7 @@ import { getToken } from "next-auth/jwt";
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   // if using `NEXTAUTH_SECRET` env variable, we detect it, and you won't actually need to `secret`
   // const token = await getToken({ req })
-  const token = await getToken({ req });
-  console.log("JSON Web Token", token);
-  res.end();
+  // const token = await getToken({ req });
+  // console.log("JSON Web Token", token);
+  // res.end();
 };
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 750d440..2306202 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -1,21 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import archive from "@/lib/api/archive";
 import { prisma } from "@/lib/api/db";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   const link = await prisma.link.findUnique({
     where: {
@@ -29,7 +21,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: "Link not found.",
     });
 
-  if (link.collection.ownerId !== session.user.id)
+  if (link.collection.ownerId !== user.id)
     return res.status(401).json({
       response: "Permission denied.",
     });
@@ -49,7 +41,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
         } minutes or create a new one.`,
       });
 
-    archive(link.id, link.url, session.user.id);
+    archive(link.id, link.url, user.id);
     return res.status(200).json({
       response: "Link is being archived.",
     });
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
index 28defa4..290aea5 100644
--- a/pages/api/v1/links/[id]/index.ts
+++ b/pages/api/v1/links/[id]/index.ts
@@ -1,29 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 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 authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
-    const updated = await getLinkById(session.user.id, Number(req.query.id));
+    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(
-      session.user.id,
+      user.id,
       Number(req.query.id),
       req.body
     );
@@ -31,7 +23,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: updated.response,
     });
   } else if (req.method === "DELETE") {
-    const deleted = await deleteLinkById(session.user.id, Number(req.query.id));
+    const deleted = await deleteLinkById(user.id, Number(req.query.id));
     return res.status(deleted.status).json({
       response: deleted.response,
     });
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index 7fe25c9..35dcacc 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -1,25 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 import { LinkRequestQuery } from "@/types/global";
-import { getToken } from "next-auth/jwt";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const token = await getToken({ req });
-
-  // const session = await getServerSession(req, res, authOptions);
-
-  return res.status(200).json(token);
-
-  if (!session?.user?.id) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
     // Convert the type of the request query to "LinkRequestQuery"
@@ -45,10 +32,10 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       searchByTags: req.query.searchByTags === "true" ? true : undefined,
     };
 
-    const links = await getLinks(session.user.id, convertedData);
+    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, session.user.id);
+    const newlink = await postLink(req.body, user.id);
     return res.status(newlink.status).json({
       response: newlink.response,
     });
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 08d8336..74db8c6 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -1,10 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/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 authenticateUser from "@/lib/api/authenticateUser";
 
 export const config = {
   api: {
@@ -15,18 +14,11 @@ export const config = {
 };
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
-    const data = await exportData(session.user.id);
+    const data = await exportData(user.id);
 
     if (data.status === 200)
       return res
@@ -39,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 });
   }
diff --git a/pages/api/v1/payment/index.ts b/pages/api/v1/payment/index.ts
index 23e0673..c4076af 100644
--- a/pages/api/v1/payment/index.ts
+++ b/pages/api/v1/payment/index.ts
@@ -1,21 +1,20 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import paymentCheckout from "@/lib/api/paymentCheckout";
 import { Plan } from "@/types/global";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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) {
+  if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID) {
     return res.status(400).json({ response: "Payment is disabled." });
   }
 
+  const user = await authenticateUser({ req, res });
+  if (!user) 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)
@@ -26,7 +25,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "GET") {
     const users = await paymentCheckout(
       STRIPE_SECRET_KEY,
-      session?.user.email,
+      user.email as string,
       PRICE_ID
     );
     return res.status(users.status).json({ response: users.response });
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index eb6a1b5..2445a10 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -1,23 +1,15 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import updateTag from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   const tagId = Number(req.query.id);
 
   if (req.method === "PUT") {
-    const tags = await updateTag(session.user.id, tagId, req.body);
+    const tags = await updateTag(user.id, tagId, req.body);
     return res.status(tags.status).json({ response: tags.response });
   }
 }
diff --git a/pages/api/v1/tags/index.ts b/pages/api/v1/tags/index.ts
index a516123..dd4cd39 100644
--- a/pages/api/v1/tags/index.ts
+++ b/pages/api/v1/tags/index.ts
@@ -1,21 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getTags from "@/lib/api/controllers/tags/getTags";
+import authenticateUser from "@/lib/api/authenticateUser";
 
 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)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
-    const tags = await getTags(session.user.id);
+    const tags = await getTags(user.id);
     return res.status(tags.status).json({ response: tags.response });
   }
 }
diff --git a/pages/api/v1/users/[id].ts b/pages/api/v1/users/[id].ts
index 2eff580..0c69c25 100644
--- a/pages/api/v1/users/[id].ts
+++ b/pages/api/v1/users/[id].ts
@@ -1,15 +1,23 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "@/pages/api/v1/auth/[...nextauth]";
 import getUserById from "@/lib/api/controllers/users/userId/getUserById";
 import getPublicUserById from "@/lib/api/controllers/users/userId/getPublicUserById";
 import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
 import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
+import authenticateUser from "@/lib/api/authenticateUser";
+import { prisma } from "@/lib/api/db";
+import { getToken } from "next-auth/jwt";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getServerSession(req, res, authOptions);
-  const userId = session?.user.id;
-  const username = session?.user.username;
+  const token = await getToken({ req });
+  const userId = token?.id;
+
+  if (!token?.id)
+    return res.status(400).json({ response: "Invalid parameters." });
+
+  const username = (await prisma.user.findUnique({ where: { id: token.id } }))
+    ?.username;
+
+  if (!username) return res.status(404).json({ response: "User not found." });
 
   const lookupId = req.query.id as string;
   const isSelf =
@@ -23,26 +31,18 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
     return res.status(users.status).json({ response: users.response });
   }
 
-  if (!userId) {
-    return res.status(401).json({ response: "You must be logged in." });
-  } else if (session?.user?.isSubscriber === false)
-    return 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 authenticateUser({ req, res });
+  if (!user) return res.status(404).json({ response: "User not found." });
 
   if (req.method === "GET") {
-    const users = await getUserById(session.user.id);
+    const users = await getUserById(user.id);
     return res.status(users.status).json({ response: users.response });
   } else if (req.method === "PUT") {
-    const updated = await updateUserById(session.user, req.body);
+    const updated = await updateUserById(user.id, req.body);
     return res.status(updated.status).json({ response: updated.response });
-  } else if (
-    req.method === "DELETE" &&
-    session.user.id === Number(req.query.id)
-  ) {
+  } else if (req.method === "DELETE" && user.id === Number(req.query.id)) {
     console.log(req.body);
-    const updated = await deleteUserById(session.user.id, req.body);
+    const updated = await deleteUserById(user.id, req.body);
     return res.status(updated.status).json({ response: updated.response });
   }
 }
diff --git a/pages/api/v1/webhooks/stripe/index.ts b/pages/api/v1/webhooks/stripe/index.ts
deleted file mode 100644
index a1df0ea..0000000
--- a/pages/api/v1/webhooks/stripe/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-// TODO - Stripe webhooks for user cancellation...
-
-// import { NextApiRequest, NextApiResponse } from "next";
-// import Stripe from "stripe";
-// import { buffer } from "micro";
-// import { prisma } from "@/lib/api/db";
-
-// const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
-//   apiVersion: "2022-11-15",
-// });
-
-// const endpointSecret =
-//   "whsec_7c144bcd924041257e3d83eac1e2fba9c8a938b240fd8adb1c902f079e0cdee0";
-
-// export const config = {
-//   api: {
-//     bodyParser: false,
-//   },
-// };
-
-// export default async function handler(
-//   req: NextApiRequest,
-//   res: NextApiResponse
-// ) {
-//   if (req.method === "POST") {
-//     const buf = await buffer(req);
-//     const sig = req.headers["stripe-signature"];
-
-//     let event: Stripe.Event;
-
-//     try {
-//       if (!sig) throw new Error("Stripe Signature is not defined.");
-//       event = stripe.webhooks.constructEvent(buf, sig, endpointSecret);
-//     } catch (err) {
-//       console.log(err);
-//       return res.status(400).send({ response: "Error..." });
-//     }
-
-//     // Handle the event
-//     switch (event.type) {
-//       case "customer.subscription.deleted":
-//         const customerSubscriptionDeleted = event.data.object as any;
-
-//         // Revoke all the token under the customers email...
-
-//         const customer = (await stripe.customers.retrieve(
-//           customerSubscriptionDeleted.customer
-//         )) as any;
-
-//         if (customer?.email) {
-//           // Revoke tokens inside the database
-//         }
-
-//         break;
-//       // ... handle other event types
-//       default:
-//         console.log(`Unhandled event type ${event.type}`);
-//     }
-
-//     return res.status(200).send({ response: "Done!" });
-//   }
-// }
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index ea09742..d4858e2 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -12,7 +12,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
-import { useSession } from "next-auth/react";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
 import useModalStore from "@/store/modals";
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index 7d44614..4398b9a 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -1,8 +1,6 @@
-import SubmitButton from "@/components/SubmitButton";
 import { signOut } from "next-auth/react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
@@ -12,7 +10,6 @@ export default function Subscribe() {
 
   const [plan, setPlan] = useState<Plan>(1);
 
-  const { data, status } = useSession();
   const router = useRouter();
 
   async function submit() {
diff --git a/pages/test.tsx b/pages/test.tsx
deleted file mode 100644
index beae84f..0000000
--- a/pages/test.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import SubmitButton from "@/components/SubmitButton";
-import TextInput from "@/components/TextInput";
-import CenteredForm from "@/layouts/CenteredForm";
-import { signIn } from "next-auth/react";
-import Link from "next/link";
-import { useState, FormEvent } from "react";
-import { toast } from "react-hot-toast";
-
-interface FormData {
-  username: string;
-  password: string;
-}
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
-
-export default function Login() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [form, setForm] = useState<FormData>({
-    username: "",
-    password: "",
-  });
-
-  async function loginUser(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    if (form.username !== "" && form.password !== "") {
-      setSubmitLoader(true);
-
-      const load = toast.loading("Authenticating...");
-
-      const res = await signIn("credentials", {
-        username: form.username,
-        password: form.password,
-        redirect: false,
-      });
-
-      console.log(res);
-
-      toast.dismiss(load);
-
-      setSubmitLoader(false);
-
-      if (!res?.ok) {
-        toast.error("Invalid login.");
-      }
-    } else {
-      toast.error("Please fill out all the fields.");
-    }
-  }
-
-  return (
-    <CenteredForm text="Sign in to your account">
-      <form onSubmit={loginUser}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
-          <p className="text-3xl text-black dark:text-white text-center font-extralight">
-            Enter your credentials
-          </p>
-
-          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
-
-          <div>
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Username
-              {emailEnabled ? " or Email" : undefined}
-            </p>
-
-            <TextInput
-              autoFocus={true}
-              placeholder="johnny"
-              value={form.username}
-              className="bg-white"
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-            />
-          </div>
-
-          <div className="w-full">
-            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-              Password
-            </p>
-
-            <TextInput
-              type="password"
-              placeholder="••••••••••••••"
-              value={form.password}
-              className="bg-white"
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-            {emailEnabled && (
-              <div className="w-fit ml-auto mt-1">
-                <Link
-                  href={"/forgot"}
-                  className="text-gray-500 dark:text-gray-400 font-semibold"
-                >
-                  Forgot Password?
-                </Link>
-              </div>
-            )}
-          </div>
-
-          <SubmitButton
-            type="submit"
-            label="Login"
-            className=" w-full text-center"
-            loading={submitLoader}
-          />
-          {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION ===
-          "true" ? undefined : (
-            <div className="flex items-baseline gap-1 justify-center">
-              <p className="w-fit text-gray-500 dark:text-gray-400">
-                New here?
-              </p>
-              <Link
-                href={"/register"}
-                className="block text-black dark:text-white font-semibold"
-              >
-                Sign Up
-              </Link>
-            </div>
-          )}
-        </div>
-      </form>
-    </CenteredForm>
-  );
-}
diff --git a/types/global.ts b/types/global.ts
index b878a84..6daf62a 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -5,7 +5,10 @@ type OptionalExcluding<T, TRequired extends keyof T> = Partial<T> &
   Pick<T, TRequired>;
 
 export interface LinkIncludingShortenedCollectionAndTags
-  extends Omit<Link, "id" | "createdAt" | "collectionId" | "updatedAt"> {
+  extends Omit<
+    Link,
+    "id" | "createdAt" | "collectionId" | "updatedAt" | "lastPreserved"
+  > {
   id?: number;
   createdAt?: string;
   collectionId?: number;
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index d78b116..e412e7e 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -5,38 +5,20 @@ declare module "next-auth" {
   interface Session {
     user: {
       id: number;
-      username: string;
-      email: string;
       isSubscriber: boolean;
     };
   }
 
   interface User {
     id: number;
-    name: string;
-    username: string;
-    email: string;
-    emailVerified: Date;
-    image: string;
-    password: string;
-    archiveAsScreenshot: boolean;
-    archiveAsPDF: boolean;
-    archiveAsWaybackMachine: boolean;
-    isPrivate: boolean;
-    createdAt: Date;
-    updatedAt: Date;
   }
 }
 
 declare module "next-auth/jwt" {
   interface JWT {
-    name: string;
-    email: string;
-    picture: string;
     sub: string;
-    isSubscriber: boolean;
     id: number;
-    username: string;
+    isSubscriber: boolean;
     iat: number;
     exp: number;
     jti: string;

From b5a28f68ad7670027970ceaee149aa12c551bbbe Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Fri, 3 Nov 2023 00:09:50 -0400
Subject: [PATCH 25/33] remove tag functionality

---
 .../Modal/Collection/CollectionInfo.tsx       |  12 +-
 .../Modal/Collection/TeamManagement.tsx       |   8 +-
 components/Modal/Link/AddOrEditLink.tsx       |  26 +-
 components/Modal/Link/LinkDetails.tsx         | 373 ------------------
 lib/api/authenticateUser.ts                   |   2 +-
 .../controllers/tags/tagId/deleteTagById.ts   |  26 ++
 .../controllers/tags/tagId/updeteTagById.ts   |   2 +-
 pages/api/v1/payment/index.ts                 |   4 +-
 pages/api/v1/tags/[id].ts                     |   8 +-
 pages/links/index.tsx                         |   2 +-
 pages/settings/account.tsx                    |  55 ++-
 pages/settings/appearance.tsx                 |   2 +-
 pages/settings/delete.tsx                     |   2 +-
 pages/settings/password.tsx                   |   6 +-
 pages/tags/[id].tsx                           |  28 +-
 store/tags.ts                                 |  15 +
 16 files changed, 123 insertions(+), 448 deletions(-)
 delete mode 100644 components/Modal/Link/LinkDetails.tsx
 create mode 100644 lib/api/controllers/tags/tagId/deleteTagById.ts

diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx
index ff00919..f0e71b2 100644
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/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..."
diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index b551969..0dfa92e 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -101,7 +101,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."
@@ -119,7 +119,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
@@ -145,9 +145,7 @@ 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
diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx
index 1c863bd..79f6979 100644
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@@ -151,9 +151,7 @@ export default function AddOrEditLink({
       {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">
-              Address (URL)
-            </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 })}
@@ -161,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}
@@ -193,7 +189,7 @@ export default function AddOrEditLink({
           {/* <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 })}
@@ -203,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}
@@ -226,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) => {
@@ -236,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) =>
@@ -256,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
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
deleted file mode 100644
index 551ef4b..0000000
--- a/components/Modal/Link/LinkDetails.tsx
+++ /dev/null
@@ -1,373 +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,
-  faBuildingColumns,
-  faCloudArrowDown,
-  faFolder,
-} 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";
-import useLinkStore from "@/store/links";
-
-type Props = {
-  linkId: number;
-  isOwnerOrMod: boolean;
-};
-
-export default function LinkDetails({ linkId, isOwnerOrMod }: Props) {
-  const { theme } = useTheme();
-
-  const { links, getLink } = useLinkStore();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
-    links.find(
-      (e) => e.id === linkId
-    ) as LinkIncludingShortenedCollectionAndTags
-  );
-
-  useEffect(() => {
-    setLink(
-      links.find(
-        (e) => e.id === linkId
-      ) as LinkIncludingShortenedCollectionAndTags
-    );
-  }, [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]);
-
-  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]);
-
-  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/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 ${
-        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">
-        {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: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/v1/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>
-        ) : 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: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/v1/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>
-        ) : undefined}
-
-        <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={faBuildingColumns} 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>
-  );
-}
diff --git a/lib/api/authenticateUser.ts b/lib/api/authenticateUser.ts
index d6bb3f3..12f744f 100644
--- a/lib/api/authenticateUser.ts
+++ b/lib/api/authenticateUser.ts
@@ -18,7 +18,7 @@ export default async function authenticateUser({
   if (!userId) {
     res.status(401).json({ message: "You must be logged in." });
     return null;
-  } else if (token.isSubscriber === false) {
+  } else if (process.env.STRIPE_SECRET_KEY && token.isSubscriber === false) {
     res.status(401).json({
       message:
         "You are not a subscriber, feel free to reach out to us at support@linkwarden.app if you think this is an issue.",
diff --git a/lib/api/controllers/tags/tagId/deleteTagById.ts b/lib/api/controllers/tags/tagId/deleteTagById.ts
new file mode 100644
index 0000000..6115184
--- /dev/null
+++ b/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 };
+}
diff --git a/lib/api/controllers/tags/tagId/updeteTagById.ts b/lib/api/controllers/tags/tagId/updeteTagById.ts
index c477475..f2d2608 100644
--- a/lib/api/controllers/tags/tagId/updeteTagById.ts
+++ b/lib/api/controllers/tags/tagId/updeteTagById.ts
@@ -1,7 +1,7 @@
 import { prisma } from "@/lib/api/db";
 import { Tag } from "@prisma/client";
 
-export default async function updateTag(
+export default async function updeteTagById(
   userId: number,
   tagId: number,
   data: Tag
diff --git a/pages/api/v1/payment/index.ts b/pages/api/v1/payment/index.ts
index c4076af..2404610 100644
--- a/pages/api/v1/payment/index.ts
+++ b/pages/api/v1/payment/index.ts
@@ -17,9 +17,9 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
   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") {
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index 2445a10..3a6b5f3 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import updateTag from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
 import authenticateUser from "@/lib/api/authenticateUser";
+import deleteTagById from "@/lib/api/controllers/tags/tagId/deleteTagById";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const user = await authenticateUser({ req, res });
@@ -9,7 +10,10 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const tagId = Number(req.query.id);
 
   if (req.method === "PUT") {
-    const tags = await updateTag(user.id, tagId, req.body);
+    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 });
   }
 }
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index b0d5967..3fd46a1 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -32,7 +32,7 @@ export default function Links() {
               </p>
 
               <p className="capitalize text-black dark:text-white">
-                All Links from every Collections
+                Links from every Collections
               </p>
             </div>
           </div>
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index d7cf248..d177025 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -87,19 +87,19 @@ export default function Account() {
     if (response.ok) {
       toast.success("Settings Applied!");
 
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
+      // if (user.email !== account.email) {
+      //   update({
+      //     id: data?.user.id,
+      //   });
 
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
+      //   signOut();
+      // } else if (
+      //   user.username !== account.username ||
+      //   user.name !== account.name
+      // )
+      //   update({
+      //     id: data?.user.id,
+      //   });
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
@@ -172,18 +172,14 @@ export default function Account() {
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
-                Display Name
-              </p>
+              <p className="text-black dark:text-white mb-2">Display Name</p>
               <TextInput
                 value={user.name || ""}
                 onChange={(e) => setUser({ ...user, name: e.target.value })}
               />
             </div>
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
-                Username
-              </p>
+              <p className="text-black dark:text-white mb-2">Username</p>
               <TextInput
                 value={user.username || ""}
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
@@ -192,23 +188,23 @@ export default function Account() {
 
             {emailEnabled ? (
               <div>
-                <p className="text-sm text-black dark:text-white mb-2">Email</p>
+                <p className="text-black dark:text-white mb-2">Email</p>
+                {user.email !== account.email &&
+                process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE === "true" ? (
+                  <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
+                    Updating this field will change your billing email as well
+                  </p>
+                ) : undefined}
                 <TextInput
                   value={user.email || ""}
                   onChange={(e) => setUser({ ...user, email: e.target.value })}
                 />
               </div>
             ) : undefined}
-
-            {user.email !== account.email ? (
-              <p className="text-gray-500 dark:text-gray-400">
-                You will need to log back in after you apply this Email.
-              </p>
-            ) : undefined}
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="text-sm text-black dark:text-white mb-2 text-center">
+            <p className="text-black dark:text-white mb-2 text-center">
               Profile Photo
             </p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
@@ -258,7 +254,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Import your data from other platforms.
               </p>
               <div
@@ -323,7 +319,7 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Download your data instantly.
               </p>
               <Link className="w-fit" href="/api/v1/migration">
@@ -347,7 +343,6 @@ export default function Account() {
           <Checkbox
             label="Make profile private"
             state={user.isPrivate}
-            className="text-sm sm:text-base"
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
@@ -357,7 +352,7 @@ export default function Account() {
 
           {user.isPrivate && (
             <div>
-              <p className="text-sm text-black dark:text-white mt-2">
+              <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>
               <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
diff --git a/pages/settings/appearance.tsx b/pages/settings/appearance.tsx
index 4f333bc..2ddde66 100644
--- a/pages/settings/appearance.tsx
+++ b/pages/settings/appearance.tsx
@@ -8,7 +8,7 @@ export default function Appearance() {
 
   return (
     <SettingsLayout>
-      <p className="mb-3 text-sm">Select Theme</p>
+      <p className="mb-3">Select Theme</p>
       <div className="flex gap-3 w-full">
         <div
           className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index 6a293af..a0096e1 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -79,7 +79,7 @@ export default function Password() {
         </p>
 
         <div>
-          <p className="text-sm mb-2 text-black dark:text-white">
+          <p className="mb-2 text-black dark:text-white">
             Confirm Your Password
           </p>
 
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index d54a9b0..90b8abf 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -51,7 +51,7 @@ export default function Password() {
         should be at least 8 characters.
       </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p className="text-sm text-black dark:text-white">New Password</p>
+        <p className="text-black dark:text-white">New Password</p>
 
         <TextInput
           value={newPassword}
@@ -60,9 +60,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="text-sm text-black dark:text-white">
-          Confirm New Password
-        </p>
+        <p className="text-black dark:text-white">Confirm New Password</p>
 
         <TextInput
           value={newPassword2}
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 549ef5f..466c3bb 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -23,7 +23,7 @@ export default function Index() {
   const router = useRouter();
 
   const { links } = useLinkStore();
-  const { tags, updateTag } = useTagStore();
+  const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -81,6 +81,25 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const remove = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    let response;
+
+    if (activeTag?.id) response = await removeTag(activeTag?.id);
+
+    toast.dismiss(load);
+
+    if (response?.ok) {
+      toast.success("Tag Removed.");
+      router.push("/links");
+    } else toast.error(response?.data as string);
+    setSubmitLoader(false);
+    setRenameTag(false);
+  };
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
@@ -153,6 +172,13 @@ export default function Index() {
                               setExpandDropdown(false);
                             },
                           },
+                          {
+                            name: "Remove Tag",
+                            onClick: () => {
+                              remove();
+                              setExpandDropdown(false);
+                            },
+                          },
                         ]}
                         onClickOutside={(e: Event) => {
                           const target = e.target as HTMLInputElement;
diff --git a/store/tags.ts b/store/tags.ts
index 26552bf..a27b859 100644
--- a/store/tags.ts
+++ b/store/tags.ts
@@ -10,6 +10,7 @@ type TagStore = {
   tags: Tag[];
   setTags: () => void;
   updateTag: (tag: Tag) => Promise<ResponseObject>;
+  removeTag: (tagId: number) => Promise<ResponseObject>;
 };
 
 const useTagStore = create<TagStore>()((set) => ({
@@ -42,6 +43,20 @@ const useTagStore = create<TagStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  removeTag: async (tagId) => {
+    const response = await fetch(`/api/v1/tags/${tagId}`, {
+      method: "DELETE",
+    });
+
+    if (response.ok) {
+      set((state) => ({
+        tags: state.tags.filter((e) => e.id !== tagId),
+      }));
+    }
+
+    const data = await response.json();
+    return { ok: response.ok, data: data.response };
+  },
 }));
 
 export default useTagStore;

From c8edc3844b9c9815461313dd107f50c261a3f339 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 6 Nov 2023 08:25:57 -0500
Subject: [PATCH 26/33] code refactoring + many security/bug fixes

---
 .../Modal/Collection/TeamManagement.tsx       |  3 +-
 components/SettingsSidebar.tsx                |  2 +-
 hooks/useInitialData.tsx                      | 18 ++--
 hooks/useRedirect.tsx                         | 30 -------
 layouts/AuthRedirect.tsx                      | 33 +++++---
 layouts/CenteredForm.tsx                      | 14 +++-
 layouts/LinkLayout.tsx                        |  7 +-
 lib/api/authenticateUser.ts                   | 31 -------
 lib/api/checkSubscription.ts                  | 49 -----------
 lib/api/checkSubscriptionByEmail.ts           | 52 ++++++++++++
 .../users}/getPublicUserById.ts               | 25 ++++--
 .../users/userId/deleteUserById.ts            |  5 ++
 .../controllers/users/userId/getUserById.ts   |  6 +-
 .../users/userId/updateUserById.ts            |  5 +-
 lib/api/paymentCheckout.ts                    |  6 +-
 lib/api/verifySubscription.ts                 | 70 ++++++++++++++++
 lib/api/verifyUser.ts                         | 60 +++++++++++++
 lib/client/getPublicUserData.ts               |  2 +-
 pages/_app.tsx                                |  6 +-
 pages/api/v1/archives/[...params].ts          |  6 +-
 pages/api/v1/auth/[...nextauth].ts            | 84 ++++++-------------
 pages/api/v1/avatar/[id].ts                   |  6 +-
 pages/api/v1/collections/[id].ts              |  6 +-
 pages/api/v1/collections/index.ts             |  6 +-
 pages/api/v1/dashboard/index.ts               |  6 +-
 pages/api/v1/links/[id]/archive/index.ts      |  6 +-
 pages/api/v1/links/[id]/index.ts              |  6 +-
 pages/api/v1/links/index.ts                   |  6 +-
 pages/api/v1/migration/index.ts               |  6 +-
 pages/api/v1/payment/index.ts                 | 22 +++--
 pages/api/v1/public/users/[id].ts             | 18 ++++
 pages/api/v1/tags/[id].ts                     |  6 +-
 pages/api/v1/tags/index.ts                    |  6 +-
 pages/api/v1/users/[id].ts                    | 64 ++++++++------
 pages/index.tsx                               |  9 +-
 pages/register.tsx                            |  4 +-
 pages/settings/account.tsx                    | 18 +---
 pages/settings/billing.tsx                    |  3 +-
 pages/settings/delete.tsx                     |  4 +-
 pages/settings/password.tsx                   |  1 -
 pages/subscribe.tsx                           |  5 +-
 .../migration.sql                             | 19 +++++
 .../migration.sql                             |  8 ++
 prisma/schema.prisma                          | 24 +++++-
 styles/globals.css                            |  5 ++
 types/enviornment.d.ts                        |  4 +-
 types/global.ts                               |  3 +
 types/next-auth.d.ts                          |  4 +-
 48 files changed, 472 insertions(+), 317 deletions(-)
 delete mode 100644 hooks/useRedirect.tsx
 delete mode 100644 lib/api/authenticateUser.ts
 delete mode 100644 lib/api/checkSubscription.ts
 create mode 100644 lib/api/checkSubscriptionByEmail.ts
 rename lib/api/controllers/{users/userId => public/users}/getPublicUserById.ts (62%)
 create mode 100644 lib/api/verifySubscription.ts
 create mode 100644 lib/api/verifyUser.ts
 create mode 100644 pages/api/v1/public/users/[id].ts
 create mode 100644 prisma/migrations/20231103051515_add_subscription_table/migration.sql
 create mode 100644 prisma/migrations/20231104052926_changed_subscription_relation/migration.sql

diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx
index 0dfa92e..b625570 100644
--- a/components/Modal/Collection/TeamManagement.tsx
+++ b/components/Modal/Collection/TeamManagement.tsx
@@ -47,6 +47,7 @@ export default function TeamManagement({
     id: null,
     name: "",
     username: "",
+    image: "",
   });
 
   useEffect(() => {
@@ -401,7 +402,7 @@ export default function TeamManagement({
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
-            src={`uploads/avatar/${collection.ownerId}.jpg`}
+            src={collectionOwner.image ? collectionOwner.image : undefined}
             className="border-[3px]"
           />
           <div>
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index d5b072b..ac9a7b7 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -113,7 +113,7 @@ 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={`${
diff --git a/hooks/useInitialData.tsx b/hooks/useInitialData.tsx
index 1300265..b3d61a7 100644
--- a/hooks/useInitialData.tsx
+++ b/hooks/useInitialData.tsx
@@ -9,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, data]);
+  }, [account]);
 }
diff --git a/hooks/useRedirect.tsx b/hooks/useRedirect.tsx
deleted file mode 100644
index a6b9637..0000000
--- a/hooks/useRedirect.tsx
+++ /dev/null
@@ -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;
-}
diff --git a/layouts/AuthRedirect.tsx b/layouts/AuthRedirect.tsx
index 8942666..da1f6fc 100644
--- a/layouts/AuthRedirect.tsx
+++ b/layouts/AuthRedirect.tsx
@@ -16,17 +16,29 @@ export default function AuthRedirect({ children }: Props) {
   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) &&
+        account.subscription?.active &&
+        stripeEnabled &&
         account.id &&
         !account.username
       ) {
@@ -35,21 +47,16 @@ export default function AuthRedirect({ children }: Props) {
         });
       } 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 (
@@ -69,7 +76,7 @@ export default function AuthRedirect({ children }: Props) {
     } else {
       setRedirect(false);
     }
-  }, [status, account]);
+  }, [status, account, router.pathname]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
   else return <></>;
diff --git a/layouts/CenteredForm.tsx b/layouts/CenteredForm.tsx
index 03052ec..83ac99a 100644
--- a/layouts/CenteredForm.tsx
+++ b/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 w-full">
-        {theme === "dark" ? (
+        {theme ? (
+          <Image
+            src={`/linkwarden_${theme === "dark" ? "dark" : "li"}.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,7 +39,7 @@ export default function CenteredForm({ text, children }: Props) {
             alt="Linkwarden"
             className="h-12 w-fit mx-auto"
           />
-        )}
+        )} */}
         {text ? (
           <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}
diff --git a/layouts/LinkLayout.tsx b/layouts/LinkLayout.tsx
index 4850802..b2c135e 100644
--- a/layouts/LinkLayout.tsx
+++ b/layouts/LinkLayout.tsx
@@ -93,11 +93,14 @@ export default function LinkLayout({ children }: Props) {
             </div> */}
 
             <div
-              onClick={() => router.back()}
+              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
+              Back{" "}
+              <span className="hidden sm:inline-block">
+                to <span className="capitalize">{linkCollection?.name}</span>
+              </span>
             </div>
 
             <div className="lg:hidden">
diff --git a/lib/api/authenticateUser.ts b/lib/api/authenticateUser.ts
deleted file mode 100644
index 12f744f..0000000
--- a/lib/api/authenticateUser.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import { getToken } from "next-auth/jwt";
-import { prisma } from "./db";
-import { User } from "@prisma/client";
-
-type Props = {
-  req: NextApiRequest;
-  res: NextApiResponse;
-};
-
-export default async function authenticateUser({
-  req,
-  res,
-}: Props): Promise<User | null> {
-  const token = await getToken({ req });
-  const userId = token?.id;
-
-  if (!userId) {
-    res.status(401).json({ message: "You must be logged in." });
-    return null;
-  } else if (process.env.STRIPE_SECRET_KEY && token.isSubscriber === false) {
-    res.status(401).json({
-      message:
-        "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;
-  }
-
-  const user = await prisma.user.findUnique({ where: { id: userId } });
-  return user;
-}
diff --git a/lib/api/checkSubscription.ts b/lib/api/checkSubscription.ts
deleted file mode 100644
index b459fb3..0000000
--- a/lib/api/checkSubscription.ts
+++ /dev/null
@@ -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,
-  };
-}
diff --git a/lib/api/checkSubscriptionByEmail.ts b/lib/api/checkSubscriptionByEmail.ts
new file mode 100644
index 0000000..460a168
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/lib/api/controllers/users/userId/getPublicUserById.ts b/lib/api/controllers/public/users/getPublicUserById.ts
similarity index 62%
rename from lib/api/controllers/users/userId/getPublicUserById.ts
rename to lib/api/controllers/public/users/getPublicUserById.ts
index c5a575e..8f7ea48 100644
--- a/lib/api/controllers/users/userId/getPublicUserById.ts
+++ b/lib/api/controllers/public/users/getPublicUserById.ts
@@ -3,7 +3,7 @@ import { prisma } from "@/lib/api/db";
 export default async function getPublicUserById(
   targetId: number | string,
   isId: boolean,
-  requestingUsername?: string
+  requestingId?: number
 ) {
   const user = await prisma.user.findUnique({
     where: isId
@@ -29,12 +29,23 @@ export default async function getPublicUserById(
     (usernames) => usernames.username
   );
 
-  if (
-    user?.isPrivate &&
-    (!requestingUsername ||
-      !whitelistedUsernames.includes(requestingUsername?.toLowerCase()))
-  ) {
-    return { response: "User not found or profile is private.", status: 404 };
+  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;
diff --git a/lib/api/controllers/users/userId/deleteUserById.ts b/lib/api/controllers/users/userId/deleteUserById.ts
index 0641525..4b2e940 100644
--- a/lib/api/controllers/users/userId/deleteUserById.ts
+++ b/lib/api/controllers/users/userId/deleteUserById.ts
@@ -68,6 +68,11 @@ export default async function deleteUserById(
       where: { ownerId: userId },
     });
 
+    // Delete subscription
+    await prisma.subscription.delete({
+      where: { userId },
+    });
+
     // Delete user's avatar
     removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
 
diff --git a/lib/api/controllers/users/userId/getUserById.ts b/lib/api/controllers/users/userId/getUserById.ts
index 32bc3a6..8c6faa8 100644
--- a/lib/api/controllers/users/userId/getUserById.ts
+++ b/lib/api/controllers/users/userId/getUserById.ts
@@ -11,6 +11,7 @@ export default async function getUserById(userId: number) {
           username: true,
         },
       },
+      subscriptions: true,
     },
   });
 
@@ -21,11 +22,14 @@ export default async function getUserById(userId: number) {
     (usernames) => usernames.username
   );
 
-  const { password, ...lessSensitiveInfo } = user;
+  const { password, subscriptions, ...lessSensitiveInfo } = user;
 
   const data = {
     ...lessSensitiveInfo,
     whitelistedUsers: whitelistedUsernames,
+    subscription: {
+      active: subscriptions?.active,
+    },
   };
 
   return { response: data, status: 200 };
diff --git a/lib/api/controllers/users/userId/updateUserById.ts b/lib/api/controllers/users/userId/updateUserById.ts
index fc4c015..0043c8b 100644
--- a/lib/api/controllers/users/userId/updateUserById.ts
+++ b/lib/api/controllers/users/userId/updateUserById.ts
@@ -139,10 +139,12 @@ export default async function updateUserById(
     },
     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[] = data.whitelistedUsers || [];
@@ -196,6 +198,7 @@ export default async function updateUserById(
     ...userInfo,
     whitelistedUsers: newWhitelistedUsernames,
     image: userInfo.image ? `${userInfo.image}?${Date.now()}` : "",
+    subscription: { active: subscriptions?.active },
   };
 
   return { response, status: 200 };
diff --git a/lib/api/paymentCheckout.ts b/lib/api/paymentCheckout.ts
index 49bf027..bae7f1d 100644
--- a/lib/api/paymentCheckout.ts
+++ b/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: {
diff --git a/lib/api/verifySubscription.ts b/lib/api/verifySubscription.ts
new file mode 100644
index 0000000..d8055d4
--- /dev/null
+++ b/lib/api/verifySubscription.ts
@@ -0,0 +1,70 @@
+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) {
+      return null;
+    }
+  }
+
+  return user;
+}
diff --git a/lib/api/verifyUser.ts b/lib/api/verifyUser.ts
new file mode 100644
index 0000000..943f68e
--- /dev/null
+++ b/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;
+}
diff --git a/lib/client/getPublicUserData.ts b/lib/client/getPublicUserData.ts
index 20bd1e9..595ea7c 100644
--- a/lib/client/getPublicUserData.ts
+++ b/lib/client/getPublicUserData.ts
@@ -1,7 +1,7 @@
 import { toast } from "react-hot-toast";
 
 export default async function getPublicUserData(id: number | string) {
-  const response = await fetch(`/api/v1/users/${id}`);
+  const response = await fetch(`/api/v1/public/users/${id}`);
 
   const data = await response.json();
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 69d8b6f..25217f9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -22,7 +22,11 @@ export default function App({
   }, []);
 
   return (
-    <SessionProvider session={pageProps.session} basePath="/api/v1/auth">
+    <SessionProvider
+      session={pageProps.session}
+      refetchOnWindowFocus={false}
+      basePath="/api/v1/auth"
+    >
       <Head>
         <title>Linkwarden</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/pages/api/v1/archives/[...params].ts b/pages/api/v1/archives/[...params].ts
index 5534ea3..1436c04 100644
--- a/pages/api/v1/archives/[...params].ts
+++ b/pages/api/v1/archives/[...params].ts
@@ -1,14 +1,14 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getPermission from "@/lib/api/getPermission";
 import readFile from "@/lib/api/storage/readFile";
-import authenticateUser from "@/lib/api/authenticateUser";
+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 authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   const collectionId = req.query.params[0];
   const linkId = req.query.params[1];
diff --git a/pages/api/v1/auth/[...nextauth].ts b/pages/api/v1/auth/[...nextauth].ts
index 3228a35..0b4ab7e 100644
--- a/pages/api/v1/auth/[...nextauth].ts
+++ b/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, User } from "next-auth";
+import { AuthOptions } from "next-auth";
 import bcrypt from "bcrypt";
 import EmailProvider from "next-auth/providers/email";
 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 logged in attempt...");
+      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 { id: findUser?.id };
+        return { id: user?.id };
       } else return null as any;
     },
   }),
@@ -82,62 +84,28 @@ export const authOptions: AuthOptions = {
   },
   callbacks: {
     async jwt({ token, trigger, 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 user = await prisma.user.findUnique({
-          where: {
-            id: Number(token.sub),
-          },
-        });
-
-        const subscription = await checkSubscription(
-          STRIPE_SECRET_KEY,
-          user?.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 as number;
-      } else if (trigger === "update" && token.id) {
-        const user = await prisma.user.findUnique({
-          where: {
-            id: token.id as number,
-          },
-        });
-
-        if (user?.name) {
-          token.name = user.name;
-        }
-      }
+      token.sub = token.sub ? Number(token.sub) : undefined;
+      if (trigger === "signIn") token.id = user?.id as number;
 
       return token;
     },
     async session({ session, token }) {
       session.user.id = token.id;
-      session.user.isSubscriber = token.isSubscriber;
+
+      if (STRIPE_SECRET_KEY) {
+        const user = await prisma.user.findUnique({
+          where: {
+            id: token.id,
+          },
+          include: {
+            subscriptions: true,
+          },
+        });
+
+        if (user) {
+          const subscribedUser = await verifySubscription(user);
+        }
+      }
 
       return session;
     },
diff --git a/pages/api/v1/avatar/[id].ts b/pages/api/v1/avatar/[id].ts
index 307cb8a..f20b9b6 100644
--- a/pages/api/v1/avatar/[id].ts
+++ b/pages/api/v1/avatar/[id].ts
@@ -1,13 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import readFile from "@/lib/api/storage/readFile";
-import authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   const queryId = Number(req.query.id);
 
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (!queryId)
     return res
diff --git a/pages/api/v1/collections/[id].ts b/pages/api/v1/collections/[id].ts
index 6f98690..4f8020c 100644
--- a/pages/api/v1/collections/[id].ts
+++ b/pages/api/v1/collections/[id].ts
@@ -1,14 +1,14 @@
 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 authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function collections(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "PUT") {
     const updated = await updateCollectionById(
diff --git a/pages/api/v1/collections/index.ts b/pages/api/v1/collections/index.ts
index 5f938f5..3b229dd 100644
--- a/pages/api/v1/collections/index.ts
+++ b/pages/api/v1/collections/index.ts
@@ -1,14 +1,14 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getCollections from "@/lib/api/controllers/collections/getCollections";
 import postCollection from "@/lib/api/controllers/collections/postCollection";
-import authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function collections(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const collections = await getCollections(user.id);
diff --git a/pages/api/v1/dashboard/index.ts b/pages/api/v1/dashboard/index.ts
index dfbd50a..ea2a3da 100644
--- a/pages/api/v1/dashboard/index.ts
+++ b/pages/api/v1/dashboard/index.ts
@@ -1,11 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { LinkRequestQuery } from "@/types/global";
 import getDashboardData from "@/lib/api/controllers/dashboard/getDashboardData";
-import authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const convertedData: LinkRequestQuery = {
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 2306202..7fc141f 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -1,13 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import archive from "@/lib/api/archive";
 import { prisma } from "@/lib/api/db";
-import authenticateUser from "@/lib/api/authenticateUser";
+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 authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   const link = await prisma.link.findUnique({
     where: {
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
index 290aea5..146ecb2 100644
--- a/pages/api/v1/links/[id]/index.ts
+++ b/pages/api/v1/links/[id]/index.ts
@@ -2,11 +2,11 @@ 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 authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const updated = await getLinkById(user.id, Number(req.query.id));
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index 35dcacc..58a352a 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -2,11 +2,11 @@ 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 authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     // Convert the type of the request query to "LinkRequestQuery"
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 74db8c6..4afd7e7 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -3,7 +3,7 @@ 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 authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export const config = {
   api: {
@@ -14,8 +14,8 @@ export const config = {
 };
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const data = await exportData(user.id);
diff --git a/pages/api/v1/payment/index.ts b/pages/api/v1/payment/index.ts
index 2404610..779d646 100644
--- a/pages/api/v1/payment/index.ts
+++ b/pages/api/v1/payment/index.ts
@@ -1,19 +1,27 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import paymentCheckout from "@/lib/api/paymentCheckout";
 import { Plan } from "@/types/global";
-import authenticateUser from "@/lib/api/authenticateUser";
+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;
 
-  if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID) {
-    return res.status(400).json({ response: "Payment is disabled." });
-  }
+  const token = await getToken({ req });
 
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  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;
 
@@ -25,7 +33,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "GET") {
     const users = await paymentCheckout(
       STRIPE_SECRET_KEY,
-      user.email as string,
+      email as string,
       PRICE_ID
     );
     return res.status(users.status).json({ response: users.response });
diff --git a/pages/api/v1/public/users/[id].ts b/pages/api/v1/public/users/[id].ts
new file mode 100644
index 0000000..5126740
--- /dev/null
+++ b/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 });
+  }
+}
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index 3a6b5f3..d82b1f7 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -1,11 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
-import authenticateUser from "@/lib/api/authenticateUser";
+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 authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   const tagId = Number(req.query.id);
 
diff --git a/pages/api/v1/tags/index.ts b/pages/api/v1/tags/index.ts
index dd4cd39..2376ef9 100644
--- a/pages/api/v1/tags/index.ts
+++ b/pages/api/v1/tags/index.ts
@@ -1,10 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getTags from "@/lib/api/controllers/tags/getTags";
-import authenticateUser from "@/lib/api/authenticateUser";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  const user = await verifyUser({ req, res });
+  if (!user) return;
 
   if (req.method === "GET") {
     const tags = await getTags(user.id);
diff --git a/pages/api/v1/users/[id].ts b/pages/api/v1/users/[id].ts
index 0c69c25..6063d53 100644
--- a/pages/api/v1/users/[id].ts
+++ b/pages/api/v1/users/[id].ts
@@ -1,48 +1,58 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getUserById from "@/lib/api/controllers/users/userId/getUserById";
-import getPublicUserById from "@/lib/api/controllers/users/userId/getPublicUserById";
 import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
 import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
-import authenticateUser from "@/lib/api/authenticateUser";
-import { prisma } from "@/lib/api/db";
 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 (!token?.id)
-    return res.status(400).json({ response: "Invalid parameters." });
+  if (!userId) {
+    return res.status(401).json({ response: "You must be logged in." });
+  }
 
-  const username = (await prisma.user.findUnique({ where: { id: token.id } }))
-    ?.username;
+  if (userId !== Number(req.query.id))
+    return res.status(401).json({ response: "Permission denied." });
 
-  if (!username) return res.status(404).json({ response: "User not found." });
-
-  const lookupId = req.query.id as string;
-  const isSelf =
-    userId === Number(lookupId) || username === lookupId ? true : false;
-
-  // Check if "lookupId" is the user "id" or their "username"
-  const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
-
-  if (req.method === "GET" && !isSelf) {
-    const users = await getPublicUserById(lookupId, isId, username);
+  if (req.method === "GET") {
+    const users = await getUserById(userId);
     return res.status(users.status).json({ response: users.response });
   }
 
-  const user = await authenticateUser({ req, res });
-  if (!user) return res.status(404).json({ response: "User not found." });
+  if (STRIPE_SECRET_KEY) {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: token.id,
+      },
+      include: {
+        subscriptions: true,
+      },
+    });
 
-  if (req.method === "GET") {
-    const users = await getUserById(user.id);
-    return res.status(users.status).json({ response: users.response });
-  } else if (req.method === "PUT") {
-    const updated = await updateUserById(user.id, req.body);
+    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" && user.id === Number(req.query.id)) {
+  } else if (req.method === "DELETE") {
     console.log(req.body);
-    const updated = await deleteUserById(user.id, req.body);
+    const updated = await deleteUserById(userId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index e4679ca..aa5897c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,3 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
 export default function Index() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.push("/dashboard");
-  }, []);
+  return null;
 }
diff --git a/pages/register.tsx b/pages/register.tsx
index 62ce26d..f836843 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -96,7 +96,7 @@ export default function Register() {
   return (
     <CenteredForm
       text={
-        process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
+        process.env.NEXT_PUBLIC_STRIPE
           ? `Unlock ${
               process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
             } days of Premium Service at no cost!`
@@ -196,7 +196,7 @@ export default function Register() {
               />
             </div>
 
-            {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+            {process.env.NEXT_PUBLIC_STRIPE ? (
               <div>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
                   By signing up, you agree to our{" "}
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index d177025..0642424 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -86,20 +86,6 @@ export default function Account() {
 
     if (response.ok) {
       toast.success("Settings Applied!");
-
-      // if (user.email !== account.email) {
-      //   update({
-      //     id: data?.user.id,
-      //   });
-
-      //   signOut();
-      // } else if (
-      //   user.username !== account.username ||
-      //   user.name !== account.name
-      // )
-      //   update({
-      //     id: data?.user.id,
-      //   });
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
@@ -190,7 +176,7 @@ export default function Account() {
               <div>
                 <p className="text-black dark:text-white mb-2">Email</p>
                 {user.email !== account.email &&
-                process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE === "true" ? (
+                process.env.NEXT_PUBLIC_STRIPE === "true" ? (
                   <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
                     Updating this field will change your billing email as well
                   </p>
@@ -388,7 +374,7 @@ export default function Account() {
           <p>
             This will permanently delete ALL the Links, Collections, Tags, and
             archived data you own.{" "}
-            {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
+            {process.env.NEXT_PUBLIC_STRIPE
               ? "It will also cancel your subscription. "
               : undefined}{" "}
             You will be prompted to enter your password before the deletion
diff --git a/pages/settings/billing.tsx b/pages/settings/billing.tsx
index 185f2a7..953d1ee 100644
--- a/pages/settings/billing.tsx
+++ b/pages/settings/billing.tsx
@@ -6,8 +6,7 @@ export default function Billing() {
   const router = useRouter();
 
   useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE)
-      router.push("/settings/profile");
+    if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
   }, []);
 
   return (
diff --git a/pages/settings/delete.tsx b/pages/settings/delete.tsx
index a0096e1..bd0c632 100644
--- a/pages/settings/delete.tsx
+++ b/pages/settings/delete.tsx
@@ -72,7 +72,7 @@ export default function Password() {
         <p>
           This will permanently delete all the Links, Collections, Tags, and
           archived data you own. It will also log you out
-          {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
+          {process.env.NEXT_PUBLIC_STRIPE
             ? " and cancel your subscription"
             : undefined}
           . This action is irreversible!
@@ -91,7 +91,7 @@ export default function Password() {
           />
         </div>
 
-        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+        {process.env.NEXT_PUBLIC_STRIPE ? (
           <fieldset className="border rounded-md p-2 border-sky-500">
             <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-sky-500">
               <b>Optional</b>{" "}
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index 90b8abf..fe3aa35 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -1,7 +1,6 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState } from "react";
 import useAccountStore from "@/store/account";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx
index 4398b9a..2edd4ba 100644
--- a/pages/subscribe.tsx
+++ b/pages/subscribe.tsx
@@ -1,4 +1,4 @@
-import { signOut } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
@@ -7,6 +7,7 @@ import { Plan } from "@/types/global";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
+  const session = useSession();
 
   const [plan, setPlan] = useState<Plan>(1);
 
@@ -83,7 +84,7 @@ export default function Subscribe() {
           <p className="font-semibold">
             Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
           </p>
-          <fieldset className="w-full px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
+          <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
             <legend className="w-fit font-extralight px-2 border border-sky-100 dark:border-neutral-700 rounded-md text-xl">
               Total
             </legend>
diff --git a/prisma/migrations/20231103051515_add_subscription_table/migration.sql b/prisma/migrations/20231103051515_add_subscription_table/migration.sql
new file mode 100644
index 0000000..07f28f2
--- /dev/null
+++ b/prisma/migrations/20231103051515_add_subscription_table/migration.sql
@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "Subscription" (
+    "id" SERIAL NOT NULL,
+    "active" BOOLEAN NOT NULL,
+    "stripeSubscriptionId" TEXT NOT NULL,
+    "currentPeriodStart" TIMESTAMP(3) NOT NULL,
+    "currentPeriodEnd" TIMESTAMP(3) NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_stripeSubscriptionId_key" ON "Subscription"("stripeSubscriptionId");
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql b/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql
new file mode 100644
index 0000000..0dad558
--- /dev/null
+++ b/prisma/migrations/20231104052926_changed_subscription_relation/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[userId]` on the table `Subscription` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_key" ON "Subscription"("userId");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index f5574e2..13b755f 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -18,19 +18,21 @@ model User {
   image                   String?
 
   password                String
+
   collections             Collection[]
-
   tags                    Tag[]
-
   pinnedLinks             Link[]
+  collectionsJoined       UsersAndCollections[]
+  whitelistedUsers        WhitelistedUser[]
+
+  subscriptions           Subscription?
 
   archiveAsScreenshot     Boolean         @default(true)
   archiveAsPDF            Boolean         @default(true)
   archiveAsWaybackMachine Boolean         @default(false)
 
-  collectionsJoined       UsersAndCollections[]
   isPrivate               Boolean         @default(false)
-  whitelistedUsers        WhitelistedUser[]
+
   createdAt               DateTime        @default(now())
   updatedAt               DateTime        @updatedAt @default(now())
 }
@@ -127,3 +129,17 @@ model Tag {
 
   @@unique([name, ownerId])
 }
+
+model Subscription {
+  id                   Int        @id @default(autoincrement())
+  active               Boolean    
+  stripeSubscriptionId String     @unique
+  currentPeriodStart   DateTime
+  currentPeriodEnd     DateTime
+
+  user                 User       @relation(fields: [userId], references: [id])
+  userId               Int        @unique
+
+  createdAt            DateTime   @default(now())
+  updatedAt            DateTime   @updatedAt @default(now())
+}
diff --git a/styles/globals.css b/styles/globals.css
index 9621be8..a2c51d2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  scroll-behavior: smooth;
+}
+
 /* Hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts
index f529759..b8da6f2 100644
--- a/types/enviornment.d.ts
+++ b/types/enviornment.d.ts
@@ -17,11 +17,11 @@ declare global {
       BUCKET_NAME?: string;
       SPACES_REGION?: string;
 
-      NEXT_PUBLIC_EMAIL_PROVIDER?: true;
+      NEXT_PUBLIC_EMAIL_PROVIDER?: string;
       EMAIL_FROM?: string;
       EMAIL_SERVER?: string;
 
-      NEXT_PUBLIC_STRIPE_IS_ACTIVE?: string;
+      NEXT_PUBLIC_STRIPE?: string;
       STRIPE_SECRET_KEY?: string;
       MONTHLY_PRICE_ID?: string;
       YEARLY_PRICE_ID?: string;
diff --git a/types/global.ts b/types/global.ts
index 6daf62a..ce461e3 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -40,6 +40,9 @@ export interface CollectionIncludingMembersAndLinkCount
 export interface AccountSettings extends User {
   newPassword?: string;
   whitelistedUsers: string[];
+  subscription?: {
+    active?: boolean;
+  };
 }
 
 interface LinksIncludingTags extends Link {
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index e412e7e..e129025 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -5,7 +5,6 @@ declare module "next-auth" {
   interface Session {
     user: {
       id: number;
-      isSubscriber: boolean;
     };
   }
 
@@ -16,9 +15,8 @@ declare module "next-auth" {
 
 declare module "next-auth/jwt" {
   interface JWT {
-    sub: string;
+    sub?: number;
     id: number;
-    isSubscriber: boolean;
     iat: number;
     exp: number;
     jti: string;

From 7bdef522c1666c72a7395904145e752fbc7b73cf Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 6 Nov 2023 10:01:39 -0500
Subject: [PATCH 27/33] bug fixed

---
 components/LinkCard.tsx                  | 2 +-
 pages/api/v1/links/[id]/archive/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index d7c28eb..55b5d1b 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -110,7 +110,7 @@ export default function LinkCard({ link, count, className }: Props) {
     if (response.ok) {
       toast.success(`Link is being archived...`);
       getLink(link.id as number);
-    } else toast.error(data);
+    } else toast.error(data.response);
   };
 
   const deleteLink = async () => {
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index 7fc141f..65da756 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -47,7 +47,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     });
   }
 
-  // Later?
+  // TODO - Later?
   // else if (req.method === "DELETE") {}
 }
 

From 9bee9b8ae4edb38aadeee0c71143b65e775f26ef Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 6 Nov 2023 10:06:14 -0500
Subject: [PATCH 28/33] bug fix

---
 lib/api/controllers/users/userId/deleteUserById.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/api/controllers/users/userId/deleteUserById.ts b/lib/api/controllers/users/userId/deleteUserById.ts
index 4b2e940..28e43a1 100644
--- a/lib/api/controllers/users/userId/deleteUserById.ts
+++ b/lib/api/controllers/users/userId/deleteUserById.ts
@@ -60,7 +60,7 @@ export default async function deleteUserById(
       });
 
       // Delete archive folders
-      removeFolder({ filePath: `archives/${collection.id}` });
+      await removeFolder({ filePath: `archives/${collection.id}` });
     }
 
     // Delete collections after cleaning up related data
@@ -69,12 +69,13 @@ export default async function deleteUserById(
     });
 
     // Delete subscription
-    await prisma.subscription.delete({
-      where: { userId },
-    });
+    if (process.env.STRIPE_SECRET_KEY)
+      await prisma.subscription.delete({
+        where: { userId },
+      });
 
     // Delete user's avatar
-    removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
+    await removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
 
     // Finally, delete the user
     await prisma.user.delete({

From 6f5245cbc42dc5470d11331b75be2d7c56378a8e Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 6 Nov 2023 10:54:39 -0500
Subject: [PATCH 29/33] minor change

---
 lib/api/verifySubscription.ts | 7 ++++++-
 pages/dashboard.tsx           | 2 +-
 pages/settings/account.tsx    | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/api/verifySubscription.ts b/lib/api/verifySubscription.ts
index d8055d4..fd32307 100644
--- a/lib/api/verifySubscription.ts
+++ b/lib/api/verifySubscription.ts
@@ -62,7 +62,12 @@ export default async function verifySubscription(
     }
 
     if (!active) {
-      return null;
+      if (user.username)
+        // await prisma.user.update({
+        //   where: { id: user.id },
+        //   data: { username: null },
+        // });
+        return null;
     }
   }
 
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 8970883..d6d2001 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -261,7 +261,7 @@ export default function Dashboard() {
                           title="JSON File"
                           className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                         >
-                          Linkwarden...
+                          Linkwarden File...
                           <input
                             type="file"
                             name="photo"
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index 0642424..c9dbe65 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -269,7 +269,7 @@ export default function Account() {
                         title="JSON File"
                         className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                       >
-                        Linkwarden...
+                        Linkwarden File...
                         <input
                           type="file"
                           name="photo"

From cb5b1751c090d6b0eb80635b24ce3d510e739bbf Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 7 Nov 2023 08:03:35 -0500
Subject: [PATCH 30/33] bug fix

---
 components/Dropdown.tsx                       |  84 +++++-----
 .../migration/importFromHTMLFile.ts           | 155 +++++++++---------
 .../migration/importFromLinkwarden.ts         | 151 ++++++++---------
 .../users/userId/deleteUserById.ts            |  87 +++++-----
 pages/api/v1/getToken.ts                      |  10 --
 pages/api/v1/migration/index.ts               |   2 +-
 types/global.ts                               |   2 +-
 7 files changed, 243 insertions(+), 248 deletions(-)
 delete mode 100644 pages/api/v1/getToken.ts

diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 5ec8198..ac1ee59 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -60,51 +60,47 @@ export default function Dropdown({
     }
   }, [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`}
-      >
-        {items.map((e, i) => {
-          const inner = e && (
-            <div className="cursor-pointer rounded-md">
-              <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-                <p className="text-black dark:text-white select-none">
-                  {e.name}
-                </p>
-              </div>
+  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`}
+    >
+      {items.map((e, i) => {
+        const inner = e && (
+          <div className="cursor-pointer rounded-md">
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
+              <p className="text-black dark:text-white select-none">{e.name}</p>
             </div>
-          );
+          </div>
+        );
 
-          return e && e.href ? (
-            <Link key={i} href={e.href}>
+        return e && e.href ? (
+          <Link key={i} href={e.href}>
+            {inner}
+          </Link>
+        ) : (
+          e && (
+            <div key={i} onClick={e.onClick}>
               {inner}
-            </Link>
-          ) : (
-            e && (
-              <div key={i} onClick={e.onClick}>
-                {inner}
-              </div>
-            )
-          );
-        })}
-      </ClickAwayHandler>
-    )
-  );
+            </div>
+          )
+        );
+      })}
+    </ClickAwayHandler>
+  ) : null;
 }
diff --git a/lib/api/controllers/migration/importFromHTMLFile.ts b/lib/api/controllers/migration/importFromHTMLFile.ts
index 36c48c0..7791777 100644
--- a/lib/api/controllers/migration/importFromHTMLFile.ts
+++ b/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 };
 }
diff --git a/lib/api/controllers/migration/importFromLinkwarden.ts b/lib/api/controllers/migration/importFromLinkwarden.ts
index eb68e7e..78af4e3 100644
--- a/lib/api/controllers/migration/importFromLinkwarden.ts
+++ b/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 };
 }
diff --git a/lib/api/controllers/users/userId/deleteUserById.ts b/lib/api/controllers/users/userId/deleteUserById.ts
index 28e43a1..f072e65 100644
--- a/lib/api/controllers/users/userId/deleteUserById.ts
+++ b/lib/api/controllers/users/userId/deleteUserById.ts
@@ -32,56 +32,61 @@ export default async function deleteUserById(
   }
 
   // Delete the user and all related data within a transaction
-  await prisma.$transaction(async (prisma) => {
-    // Delete whitelisted users
-    await prisma.whitelistedUser.deleteMany({
-      where: { userId },
-    });
+  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 links
+        await prisma.link.deleteMany({
+          where: { collection: { ownerId: userId } },
+        });
 
-    // Delete tags
-    await prisma.tag.deleteMany({
-      where: { 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 },
-    });
+        // 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 },
-      });
+        for (const collection of collections) {
+          // Delete related users and collections relations
+          await prisma.usersAndCollections.deleteMany({
+            where: { collectionId: collection.id },
+          });
 
-      // Delete archive folders
-      await removeFolder({ filePath: `archives/${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 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 subscription
+        if (process.env.STRIPE_SECRET_KEY)
+          await prisma.subscription.delete({
+            where: { userId },
+          });
 
-    // Delete user's avatar
-    await removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
+        // Delete user's avatar
+        await removeFile({ filePath: `uploads/avatar/${userId}.jpg` });
 
-    // Finally, delete the user
-    await prisma.user.delete({
-      where: { id: userId },
-    });
-  });
+        // 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, {
diff --git a/pages/api/v1/getToken.ts b/pages/api/v1/getToken.ts
deleted file mode 100644
index 0143d89..0000000
--- a/pages/api/v1/getToken.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import { getToken } from "next-auth/jwt";
-
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  // if using `NEXTAUTH_SECRET` env variable, we detect it, and you won't actually need to `secret`
-  // const token = await getToken({ req })
-  // const token = await getToken({ req });
-  // console.log("JSON Web Token", token);
-  // res.end();
-};
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 4afd7e7..e950563 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -8,7 +8,7 @@ import verifyUser from "@/lib/api/verifyUser";
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: process.env.IMPORT_SIZE_LIMIT || "2mb",
+      sizeLimit: `${process.env.IMPORT_SIZE_LIMIT || "5"}mb`,
     },
   },
 };
diff --git a/types/global.ts b/types/global.ts
index ce461e3..26058cf 100644
--- a/types/global.ts
+++ b/types/global.ts
@@ -29,7 +29,7 @@ export interface Member {
 }
 
 export interface CollectionIncludingMembersAndLinkCount
-  extends Omit<Collection, "id" | "createdAt" | "ownerId"> {
+  extends Omit<Collection, "id" | "createdAt" | "ownerId" | "updatedAt"> {
   id?: number;
   ownerId?: number;
   createdAt?: string;

From 2f4af7f3d90ae3c04874beb162053e32b34bbc85 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 7 Nov 2023 13:06:42 -0500
Subject: [PATCH 31/33] added announcement bar

---
 components/AnnouncementBar.tsx | 28 +++++++++++++++++++++++
 layouts/MainLayout.tsx         | 41 +++++++++++++++++++++++++++++++---
 lib/client/getLatestVersion.ts | 16 +++++++++++++
 styles/globals.css             | 26 +++++++++++++++++++++
 4 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 components/AnnouncementBar.tsx
 create mode 100644 lib/client/getLatestVersion.ts

diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
new file mode 100644
index 0000000..57f60ad
--- /dev/null
+++ b/components/AnnouncementBar.tsx
@@ -0,0 +1,28 @@
+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="" target="_blank" className="underline">
+            Linkwarden v2.0
+          </Link>{" "}
+          is now out! 🥳️
+        </div>
+
+        <button className="fixed top-3 right-3" onClick={toggleAnnouncementBar}>
+          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index f3f17cb..6b8ab83 100644
--- a/layouts/MainLayout.tsx
+++ b/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 min-h-screen lg:ml-64 xl:ml-80">
+        <div
+          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
+            showAnnouncement ? "mt-10" : ""
+          }`}
+        >
           <Navbar />
           {children}
         </div>
diff --git a/lib/client/getLatestVersion.ts b/lib/client/getLatestVersion.ts
new file mode 100644
index 0000000..414b53b
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
index a2c51d2..82b1178 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -253,3 +253,29 @@ body {
   background-color: rgb(230, 230, 230);
   border-radius: 8px;
 }
+
+.rainbow {
+  background: linear-gradient(
+    45deg,
+    #ff00004b,
+    #ff99004b,
+    #33cc334b,
+    #0099cc4b,
+    #9900cc4b,
+    #ff33cc4b
+  );
+  background-size: 400% 400%;
+  animation: rainbow 30s linear infinite;
+}
+
+@keyframes rainbow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

From c300da172ba3885137458d5b5e0cb64a88763f58 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 7 Nov 2023 14:51:22 -0500
Subject: [PATCH 32/33] added url to announcment bar

---
 components/AnnouncementBar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
index 57f60ad..cf6350d 100644
--- a/components/AnnouncementBar.tsx
+++ b/components/AnnouncementBar.tsx
@@ -13,7 +13,11 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
       <div className="w-full h-10 rainbow flex items-center justify-center">
         <div className="w-fit font-semibold">
           🎉️{" "}
-          <Link href="" target="_blank" className="underline">
+          <Link
+            href="https://blog.linkwarden.app/releases/v2.0"
+            target="_blank"
+            className="underline"
+          >
             Linkwarden v2.0
           </Link>{" "}
           is now out! 🥳️

From a2f03ff468115e8b36dbb8cc8fae680badc3a7d0 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 7 Nov 2023 14:54:37 -0500
Subject: [PATCH 33/33] added hover effect to announcement bar components

---
 components/AnnouncementBar.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/AnnouncementBar.tsx b/components/AnnouncementBar.tsx
index cf6350d..6e46eea 100644
--- a/components/AnnouncementBar.tsx
+++ b/components/AnnouncementBar.tsx
@@ -16,14 +16,17 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
           <Link
             href="https://blog.linkwarden.app/releases/v2.0"
             target="_blank"
-            className="underline"
+            className="underline hover:opacity-50 duration-100"
           >
             Linkwarden v2.0
           </Link>{" "}
           is now out! 🥳️
         </div>
 
-        <button className="fixed top-3 right-3" onClick={toggleAnnouncementBar}>
+        <button
+          className="fixed top-3 right-3 hover:opacity-50 duration-100"
+          onClick={toggleAnnouncementBar}
+        >
           <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
         </button>
       </div>