Merge pull request #316 from linkwarden/dev

bug fixed

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	"remoteUser": "root"
+}

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+pgdata
+.env
+.devcontainer
+docker-compose.yml
+Dockerfile
+README.md

.env.sample

@@ -1,28 +1,34 @@
 NEXTAUTH_SECRET=very_sensitive_secret
-DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
 NEXTAUTH_URL=http://localhost:3000
 
-# Additional Optional Settings
+# Manual installation database settings
+DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
 
+# Docker installation database settings
+POSTGRES_PASSWORD=super_secret_password
+
+# Additional Optional Settings
 PAGINATION_TAKE_COUNT=
 STORAGE_FOLDER=
+AUTOSCROLL_TIMEOUT=
+NEXT_PUBLIC_DISABLE_REGISTRATION=
+RE_ARCHIVE_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
 SPACES_SECRET=
 SPACES_ENDPOINT=
+SPACES_BUCKET_NAME=
 SPACES_REGION=
+SPACES_FORCE_PATH_STYLE=
 
 # SMTP Settings
 NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
 
-# Stripe settings (You don't need these, it's for the cloud instance payments)
-NEXT_PUBLIC_STRIPE_IS_ACTIVE=
-STRIPE_SECRET_KEY=
-PRICE_ID=
-NEXT_PUBLIC_TRIAL_PERIOD_DAYS=
-NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
-BASE_URL=http://localhost:3000
-NEXT_PUBLIC_PRICING=
+# Keycloak
+NEXT_PUBLIC_KEYCLOAK_ENABLED=
+KEYCLOAK_ISSUER=
+KEYCLOAK_CLIENT_ID=
+KEYCLOAK_CLIENT_SECRET=

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

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

.github/ISSUE_TEMPLATE/bug-report.md

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

.github/ISSUE_TEMPLATE/feature-request.md

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

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-    target-branch: "dev"

.github/workflows/release-container.yml

@@ -0,0 +1,49 @@
+name: Create and publish a container image on release
+
+on:
+  push:
+    tags:
+      - "*"
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -36,9 +36,14 @@ next-env.d.ts
 
 # generated files and folders
 /data
+.idea
+prisma/dev.db
 
 # tests
 /tests
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+# docker
+pgdata

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:18.18-bullseye-slim
+
+ARG DEBIAN_FRONTEND=noninteractive
+
+RUN mkdir /data
+
+WORKDIR /data
+
+COPY ./package.json ./yarn.lock ./playwright.config.ts ./
+
+# Increase timeout to pass github actions arm64 build
+RUN yarn install --network-timeout 10000000
+
+RUN npx playwright install-deps && \
+    apt-get clean && \
+    yarn cache clean
+
+COPY . .
+
+RUN yarn prisma generate && \
+    yarn build
+
+CMD yarn prisma migrate deploy && yarn start

README.md

@@ -1,9 +1,9 @@
 <div align="center">
-  <img src="./assets/icon.png" width="100px" />
+  <img src="./assets/logo.png" width="100px" />
   <h1>Linkwarden</h1>
 
 <a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>
-<img src="https://img.shields.io/github/commit-activity/m/linkwarden/linkwarden?style=flat-square" alt="Github Activity">
+<img alt="GitHub commits since latest release (by SemVer including pre-releases)" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/v1.1.0/dev">
 <img src="https://img.shields.io/github/languages/top/linkwarden/linkwarden?style=flat-square" alt="Top Language">
 <img src="https://img.shields.io/github/stars/linkwarden/linkwarden?style=flat-square" alt="Github Stars">
 
@@ -11,7 +11,7 @@
 
 <div align='center'>
 
-[Homepage](https://linkwarden.app) | [Getting Started](https://docs.linkwarden.app/getting-started) | [Features](https://github.com/linkwarden/linkwarden#features) | [Roadmap](https://github.com/linkwarden/linkwarden#roadmap) | [Screenshots](https://github.com/linkwarden/linkwarden#screenshots) | [Support ❤](https://github.com/linkwarden/linkwarden#support-)
+[Website](https://linkwarden.app) | [Getting Started](https://docs.linkwarden.app) | [Features](https://github.com/linkwarden/linkwarden#features) | [Roadmap](https://github.com/orgs/linkwarden/projects/1) | [Support ❤](https://github.com/linkwarden/linkwarden#support-)
 
 </div>
 
@@ -21,17 +21,64 @@
 
 Additionally, Linkwarden is designed with collaboration in mind, sharing links with the public and/or allowing multiple users to work together seamlessly.
 
-<img src="./assets/showcase_image.png" />
+> [!TIP]  
+> Our official [Cloud](https://linkwarden.app/#pricing) offering provides the simplest way to begin using Linkwarden and it's the preferred choice for many due to its time-saving benefits. <br> Your subscription supports our hosting infrastructure and ongoing development. <br> Alternatively, if you prefer [self-hosting](https://docs.linkwarden.app/self-hosting/installation) Linkwarden, no problem! You'll still have access to all the premium features.
+
+<img src="./assets/dashboard.png" />
+
+<div align="center">
+<img src="./assets/all_links.png" width="32%" />
+
+<img src="./assets/all_collections.png" width="32%" />
+
+<img src="./assets/manage_team.png" width="32%" />
+
+<img src="./assets/readable_view.png" width="32%" />
+
+<img src="./assets/public_page.png" width="32%" />
+
+<img src="./assets/light_mode.png" width="32%" />
+</div>
 
 <details>
 <summary><b>A bit of a "history"</b></summary>
 Linkwarden has been completely rebuilt and redesigned from ground up, so pretty much the only thing it has in common with its predecessor is the idea behind it - bookmark management.
 
 **What happened to the old version?**
-We highly recommend you **not** to use the old version as it is no longer maintained and has much less features. But anyway if you really wanna check it out, here it is in [this repo](https://github.com/linkwarden/linkwarden-old).
+We've forked the old version from the current repository into [this repo](https://github.com/linkwarden/linkwarden-old).
 
 </details>
 
+## Features
+
+- 📸 Auto capture a screenshot, PDF, and readable view of each webpage.
+- 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot. (Optional)
+- 📂 Organize links by collection, name, description and multiple tags.
+- 👥 Collaborate on gathering links in a collection.
+- 🎛️ Customize the permissions of each member.
+- 🌐 Share your collected links and preserved formats with the world.
+- 📌 Pin your favorite links to dashboard.
+- 🔍 Full text search, filter and sort for easy retrieval.
+- 📱 Responsive design and supports most modern browsers.
+- 🌓 Dark/Light mode support.
+- 🧩 Browser extension, managed by the community. [Star it here!](https://github.com/linkwarden/browser-extension)
+- ⬇️ Import your bookmarks from other browsers.
+- ⚡️ Powerful API.
+- 🔐 SSO and Keycloak integration. (Enterprise and Self-hosted users only)
+- ✅ And many more features!
+
+## Suggestions
+
+We _usually_ go after the [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc). Feel free to open a [new issue](https://github.com/linkwarden/linkwarden/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) to suggest one - others might be interested too! :)
+
+## Roadmap
+
+Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/projects/1).
+
+## Docs
+
+For information on how to get started or to set up your own instance, please visit the [documentation](https://docs.linkwarden.app).
+
 ## Main Tech Stack
 
 - NextJS
@@ -40,56 +87,22 @@ We highly recommend you **not** to use the old version as it is no longer mainta
 - Prisma
 - Zustand
 
-## Features
-
-- ✅ Auto capture a screenshot and a PDF of each link.
-- ✅ Organize links by collection, name, description and multiple tags.
-- ✅ Collaborate on gathering links in a collection.
-- ✅ Customize the permissions of each member.
-- ✅ Share your collected links with the world.
-- ✅ Search, filter and sort by link details.
-- ✅ Responsive design and supports most browsers.
-
-## Roadmap
-
-There are _many_ upcoming features, below are only _some_ of the 100% planned ones:
-
-- 🐳 Docker version.
-- 🌒 Dark mode.
-- 📦 Import/Export your data.
-- 🧩 Browser extention.
-
-Also make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/projects/1). 
-
-## Docs
-
-Currently, the Documentation is a bit targeted towards a more tech-savvy audience and has so much room to improve, you can find it [here](https://docs.linkwarden.app).
-
 ## Development
 
-If you want to contribute, Thanks! Start by checking our [public roadmap](https://github.com/orgs/linkwarden/projects/1), there you'll see a [readme item for contributers](https://github.com/orgs/linkwarden/projects/1?pane=issue&itemId=34708277) for the rest of the info on how to contribute to this repo.
+If you want to contribute, Thanks! Start by checking our [public roadmap](https://github.com/orgs/linkwarden/projects/1), there you'll see a [README for contributers](https://github.com/orgs/linkwarden/projects/1?pane=issue&itemId=34708277) for the rest of the info on how to contribute to this repo.
 
 ## Security
 
 If you found a security vulnerability, please do **not** create a public issue, instead send an email to [security@linkwarden.app](mailto:security@linkwarden.app) stating the vulnerability. Thanks!
 
-## Screenshots
-
-<img src="./assets/collections.png" />
-
-<img src="./assets/collaborators.png" />
-
-<img src="./assets/link_details.png" />
-
 ## Support ❤
 
-Any [donations](https://opencollective.com/linkwarden) are highly appreciated. <3
+Other than using our official [Cloud](https://linkwarden.app/#pricing) offering, any [donations](https://opencollective.com/linkwarden) are highly appreciated as well!
 
 Here are the other ways to support/cheer this project:
 
-- Starring this repo.
+- Starring this repository.
 - Joining us on [Discord](https://discord.com/invite/CtuYV47nuJ).
-- Following @daniel31x13 on [Mastodon](https://mastodon.social/@daniel31x13), [Twitter](https://twitter.com/daniel31x13) and [GitHub](https://github.com/daniel31x13).
 - Referring Linkwarden to a friend.
 
 If you did any of the above, Thanksss! Otherwise thanks.

components/AnnouncementBar.tsx

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

components/Checkbox.tsx

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

components/ClickAwayHandler.tsx

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

components/CollectionCard.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faLink } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Dropdown from "./Dropdown";
@@ -8,15 +8,25 @@ import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import useModalStore from "@/store/modals";
 import usePermissions from "@/hooks/usePermissions";
+import { useTheme } from "next-themes";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
 
+  const { theme } = useTheme();
+
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
     {
@@ -26,66 +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
-      className={`bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none 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 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"
-        />
-      </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 font-bold capitalize text-sky-700 break-words line-clamp-3 w-4/5">
-          {collection.name}
-        </p>
-        <div className="flex justify-between items-center">
-          <div className="flex items-center w-full">
-            {collection.members
-              .sort((a, b) => (a.userId as number) - (b.userId as number))
-              .map((e, i) => {
-                return (
-                  <ProfilePhoto
-                    key={i}
-                    src={`/api/avatar/${e.userId}?${Date.now()}`}
-                    className="-mr-3 border-[3px]"
-                  />
-                );
-              })
-              .slice(0, 4)}
-            {collection.members.length - 4 > 0 ? (
-              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-700 border-sky-100 -mr-3">
-                +{collection.members.length - 4}
-              </div>
-            ) : null}
-          </div>
-          <div className="text-right w-40">
-            <div className="text-sky-700 font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500" />
-              {collection._count && collection._count.links}
-            </div>
-            <div className="flex items-center justify-end gap-1 text-gray-600">
-              <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
               ? {
@@ -141,9 +171,9 @@ export default function CollectionCard({ collection, className }: Props) {
             if (target.id !== "expand-dropdown" + collection.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-[3.2rem] right-5 z-10"
+          className="w-fit"
         />
       ) : null}
-    </div>
+    </>
   );
 }

components/DashboardItem.tsx

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

components/Dropdown.tsx

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

components/FilterSearchDropdown.tsx

@@ -1,12 +1,17 @@
 import React, { SetStateAction } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import Checkbox from "./Checkbox";
-import { LinkSearchFilter } from "@/types/global";
 
 type Props = {
   setFilterDropdown: (value: SetStateAction<boolean>) => void;
   setSearchFilter: Function;
-  searchFilter: LinkSearchFilter;
+  searchFilter: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    textContent: boolean;
+    tags: boolean;
+  };
 };
 
 export default function FilterSearchDropdown({
@@ -20,9 +25,11 @@ export default function FilterSearchDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "filter-dropdown") setFilterDropdown(false);
       }}
-      className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
+      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-40"
     >
-      <p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
+        Filter by
+      </p>
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"
@@ -48,6 +55,16 @@ export default function FilterSearchDropdown({
             })
           }
         />
+        <Checkbox
+          label="Full Content"
+          state={searchFilter.textContent}
+          onClick={() =>
+            setSearchFilter({
+              ...searchFilter,
+              textContent: !searchFilter.textContent,
+            })
+          }
+        />
         <Checkbox
           label="Tags"
           state={searchFilter.tags}

components/InputSelect/CollectionSelection.tsx

@@ -45,7 +45,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   return (
     <Select
       isClearable
-      placeholder="Default: Unnamed Collection"
+      className="react-select-container"
+      classNamePrefix="react-select"
       onChange={onChange}
       options={options}
       styles={styles}

components/InputSelect/TagSelection.tsx

@@ -28,6 +28,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
   return (
     <CreatableSelect
       isClearable
+      className="react-select-container"
+      classNamePrefix="react-select"
       onChange={onChange}
       options={options}
       styles={styles}

components/InputSelect/styles.ts

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

components/LinkCard.tsx

@@ -19,6 +19,9 @@ import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 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;
@@ -26,12 +29,21 @@ type Props = {
   className?: string;
 };
 
+type DropdownTrigger =
+  | {
+      x: number;
+      y: number;
+    }
+  | false;
+
 export default function LinkCard({ link, count, className }: Props) {
   const { setModal } = useModalStore();
 
+  const router = useRouter();
+
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState(false);
+  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
 
   const { collections } = useCollectionStore();
 
@@ -62,7 +74,7 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections, links]);
 
-  const { removeLink, updateLink } = useLinkStore();
+  const { removeLink, updateLink, getLink } = useLinkStore();
 
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
@@ -82,10 +94,29 @@ export default function LinkCard({ link, count, className }: Props) {
       toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    setExpandDropdown(false);
+
+    const response = await fetch(`/api/v1/links/${link.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link.id as number);
+    } else toast.error(data.response);
+  };
+
   const deleteLink = async () => {
     const load = toast.loading("Deleting...");
 
-    const response = await removeLink(link);
+    const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
@@ -105,87 +136,121 @@ export default function LinkCard({ link, count, className }: Props) {
   );
 
   return (
-    <div
-      className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
-    >
-      {(permissions === true ||
-        permissions?.canUpdate ||
-        permissions?.canDelete) && (
-        <div
-          onClick={() => setExpandDropdown(!expandDropdown)}
-          id={"expand-dropdown" + link.id}
-          className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 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 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-md 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-4 top-4 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-sky-500 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
-                {link.name || link.description}
-              </p>
-            </div>
-            <div className="flex gap-3 items-center my-3">
-              <div className="flex items-center gap-1 w-full pr-20">
+        <div
+          onClick={() => router.push("/links/" + link.id)}
+          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4"
+        >
+          {url && account.displayLinkIcons && (
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={64}
+              height={64}
+              alt=""
+              className={`${
+                account.blurredFavicons ? "blur-sm " : ""
+              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none z-10`}
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          )}
+
+          <div className="flex justify-between gap-5 w-full h-full z-0">
+            <div className="flex flex-col justify-between w-full">
+              <div className="flex items-baseline gap-1">
+                <p className="text-sm text-gray-500 dark:text-gray-300">
+                  {count + 1}
+                </p>
+                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                  {unescapeString(link.name || link.description)}
+                </p>
+              </div>
+              <Link
+                href={`/collections/${link.collection.id}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
+              >
                 <FontAwesomeIcon
                   icon={faFolder}
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900 truncate capitalize">
+                <p className="text-black dark:text-white truncate capitalize w-full">
                   {collection?.name}
                 </p>
+              </Link>
+
+              {/* {link.tags[0] ? (
+                <div className="flex gap-3 items-center flex-wrap my-2 truncate relative">
+                  <div className="flex gap-1 items-center flex-nowrap">
+                    {link.tags.map((e, i) => (
+                      <Link
+                        href={"/tags/" + e.id}
+                        key={i}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                        className="px-2 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}
+                      </Link>
+                    ))}
+                  </div>
+                  <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-slate-100 dark:to-neutral-800 to-35%"></div>
+                </div>
+              ) : undefined} */}
+
+              <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 className="flex items-center gap-1 w-full pr-20 text-gray-500">
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </div>
-            <div className="flex items-center gap-1 text-gray-500">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
-            </div>
           </div>
         </div>
       </div>
       {expandDropdown ? (
         <Dropdown
+          points={{ x: expandDropdown.x, y: expandDropdown.y }}
           items={[
             permissions === true
               ? {
@@ -204,15 +269,18 @@ export default function LinkCard({ link, count, className }: Props) {
                       modal: "LINK",
                       state: true,
                       method: "UPDATE",
-                      isOwnerOrMod:
-                        permissions === true || permissions?.canUpdate,
                       active: link,
-                      defaultIndex: 1,
                     });
                     setExpandDropdown(false);
                   },
                 }
               : undefined,
+            permissions === true
+              ? {
+                  name: "Refresh Link",
+                  onClick: updateArchive,
+                }
+              : undefined,
             permissions === true || permissions?.canDelete
               ? {
                   name: "Delete",
@@ -225,9 +293,9 @@ export default function LinkCard({ link, count, className }: Props) {
             if (target.id !== "expand-dropdown" + link.id)
               setExpandDropdown(false);
           }}
-          className="absolute top-12 right-5 w-36"
+          className="w-40"
         />
       ) : null}
-    </div>
+    </>
   );
 }

components/LinkPreview.tsx

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

components/LinkSidebar.tsx

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

components/Modal/Collection/CollectionInfo.tsx

@@ -6,11 +6,11 @@ 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";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -18,7 +18,7 @@ type Props = {
     SetStateAction<CollectionIncludingMembersAndLinkCount>
   >;
   collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
+  method: "CREATE" | "UPDATE" | "VIEW_TEAM";
 };
 
 export default function CollectionInfo({
@@ -60,23 +60,18 @@ 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-sky-700 mb-2">
-            Name
-            <RequiredBadge />
-          </p>
+          <p className="text-black dark:text-white mb-2">Name</p>
           <div className="flex flex-col gap-3">
-            <input
+            <TextInput
               value={collection.name}
+              placeholder="e.g. Example Collection"
               onChange={(e) =>
                 setCollection({ ...collection, name: e.target.value })
               }
-              type="text"
-              placeholder="e.g. Example Collection"
-              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
             />
             <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-sky-700 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}
@@ -84,7 +79,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -101,9 +96,9 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 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-white p-3 outline-none border-sky-100 focus:border-sky-700"
+            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..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Collection/DeleteCollection.tsx

@@ -9,6 +9,7 @@ import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
@@ -50,7 +51,7 @@ export default function DeleteCollection({
           <p className="text-red-500 font-bold text-center">Warning!</p>
 
           <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-gray-500">
+            <div className="text-black dark:text-white">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -81,25 +82,24 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-sky-900 select-none text-center">
+            <p className="text-black dark:text-white text-center">
               To confirm, type &quot;
-              <span className="font-bold text-sky-700">{collection.name}</span>
+              <span className="font-bold">{collection.name}</span>
               &quot; in the box below:
             </p>
 
-            <input
-              autoFocus
+            <TextInput
+              autoFocus={true}
               value={inputField}
               onChange={(e) => setInputField(e.target.value)}
-              type="text"
               placeholder={`Type "${collection.name}" Here.`}
-              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-3/4 mx-auto"
             />
           </div>
         </>
       ) : (
-        <p className="text-gray-500">
-          Click the button below to leave the current collection:
+        <p className="text-black dark:text-white">
+          Click the button below to leave the current collection.
         </p>
       )}
 
@@ -107,9 +107,9 @@ export default function DeleteCollection({
         className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
           permissions === true
             ? inputField === collection.name
-              ? "bg-red-500 hover:bg-red-400 cursor-pointer"
-              : "cursor-not-allowed bg-red-300"
-            : "bg-red-500 hover:bg-red-400 cursor-pointer"
+              ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
+              : "cursor-not-allowed bg-red-300 dark:bg-red-900"
+            : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
         }`}
         onClick={submit}
       >

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";
@@ -17,6 +16,8 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import getPublicUserData from "@/lib/client/getPublicUserData";
+import TextInput from "@/components/TextInput";
+import useAccountStore from "@/store/account";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -33,31 +34,25 @@ export default function TeamManagement({
   collection,
   method,
 }: Props) {
+  const { account } = useAccountStore();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [member, setMember] = useState<Member>({
-    canCreate: false,
-    canUpdate: false,
-    canDelete: false,
-    user: {
-      name: "",
-      username: "",
-    },
-  });
+  const [memberUsername, setMemberUsername] = useState("");
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null,
     name: "",
     username: "",
+    image: "",
   });
 
   useEffect(() => {
     const fetchOwner = async () => {
-      const owner = await getPublicUserData({ id: collection.ownerId });
+      const owner = await getPublicUserData(collection.ownerId as number);
       setCollectionOwner(owner);
     };
 
@@ -66,8 +61,6 @@ export default function TeamManagement({
 
   const { addCollection, updateCollection } = useCollectionStore();
 
-  const session = useSession();
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -76,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);
@@ -117,7 +102,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700">Make Public</p>
+          <p className="text-black dark:text-white">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -127,7 +112,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 text-sm">
+          <p className="text-gray-500 dark:text-gray-300 text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -135,7 +120,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-black dark:text-white mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -148,52 +133,47 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
         </div>
       ) : null}
 
-      {permissions !== true && collection.isPublic && <hr />}
+      {permissions !== true && collection.isPublic && (
+        <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+      )}
 
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700">Member Management</p>
+          <p className="text-black dark:text-white">Member Management</p>
 
           <div className="flex items-center gap-2">
-            <input
-              value={member.user.username || ""}
-              onChange={(e) => {
-                setMember({
-                  ...member,
-                  user: { ...member.user, username: e.target.value },
-                });
-              }}
+            <TextInput
+              value={memberUsername || ""}
+              placeholder="Username (without the '@')"
+              onChange={(e) => setMemberUsername(e.target.value)}
               onKeyDown={(e) =>
                 e.key === "Enter" &&
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
               }
-              type="text"
-              placeholder="Username (without the '@')"
-              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
             />
 
             <div
               onClick={() =>
                 addMemberToCollection(
-                  session.data?.user.username as string,
-                  member.user.username || "",
+                  account.username as string,
+                  memberUsername || "",
                   collection,
                   setMemberState
                 )
               }
-              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
+              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
             >
               <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
             </div>
@@ -203,7 +183,7 @@ export default function TeamManagement({
 
       {collection?.members[0]?.user && (
         <>
-          <p className="text-center text-gray-500 text-xs sm:text-sm">
+          <p className="text-center text-gray-500 dark:text-gray-300 text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
           <div className="flex flex-col gap-3 rounded-md">
@@ -213,12 +193,12 @@ export default function TeamManagement({
                 return (
                   <div
                     key={i}
-                    className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
                       <FontAwesomeIcon
                         icon={faClose}
-                        className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                        className="absolute right-2 top-2 text-gray-500 dark:text-gray-300 h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -235,27 +215,29 @@ export default function TeamManagement({
                     )}
                     <div className="flex items-center gap-2">
                       <ProfilePhoto
-                        src={`/api/avatar/${e.userId}?${Date.now()}`}
+                        src={e.user.image ? e.user.image : undefined}
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-sky-700">
+                        <p className="text-sm font-bold text-black dark:text-white">
                           {e.user.name}
                         </p>
-                        <p className="text-sky-900">@{e.user.username}</p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
                       </div>
                     </div>
-                    <div className="flex sm:block items-center gap-5 min-w-[10rem]">
+                    <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-sky-700 ${
+                          className={`font-bold text-sm text-black dark:text-white ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
                           Permissions
                         </p>
                         {permissions === true && (
-                          <p className="text-xs text-gray-500 mb-2">
+                          <p className="text-xs text-gray-500 dark:text-gray-300 mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -265,7 +247,7 @@ export default function TeamManagement({
                       !e.canCreate &&
                       !e.canUpdate &&
                       !e.canDelete ? (
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-gray-500 dark:text-gray-300">
                           Has no permissions.
                         </p>
                       ) : (
@@ -305,11 +287,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Create
                             </span>
@@ -350,11 +332,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Update
                             </span>
@@ -395,11 +377,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Delete
                             </span>
@@ -415,17 +397,17 @@ export default function TeamManagement({
       )}
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
-            src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
+            src={collectionOwner.image ? collectionOwner.image : undefined}
             className="border-[3px]"
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-sky-700">
+              <p className="text-sm font-bold text-black dark:text-white">
                 {collectionOwner.name}
               </p>
               <FontAwesomeIcon
@@ -433,13 +415,15 @@ export default function TeamManagement({
                 className="w-3 h-3 text-yellow-500"
               />
             </div>
-            <p className="text-sky-900">@{collectionOwner.username}</p>
+            <p className="text-gray-500 dark:text-gray-300">
+              @{collectionOwner.username}
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col justify-center min-w-[10rem]">
-          <p className={`font-bold text-sm text-sky-700`}>Permissions</p>
-          <p className="text-sky-700">Full Access (Owner)</p>
+        <div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
+          <p className={`font-bold text-sm`}>Permissions</p>
+          <p>Full Access (Owner)</p>
         </div>
       </div>
 

components/Modal/Collection/ViewTeam.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCrown } from "@fortawesome/free-solid-svg-icons";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+
+type Props = {
+  collection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function ViewTeam({ collection }: Props) {
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null,
+    name: "",
+    username: "",
+    image: "",
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="ml-10 text-xl font-thin">Team</p>
+
+      <p>Here are all the members who are collaborating on this collection.</p>
+
+      <div
+        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[4rem] gap-2 justify-between"
+        title={`'@${collectionOwner.username}' is the owner of this collection.`}
+      >
+        <div className="flex items-center gap-2 w-full">
+          <ProfilePhoto
+            src={collectionOwner.image ? collectionOwner.image : undefined}
+            className="border-[3px]"
+          />
+          <div className="w-full">
+            <div className="flex items-center gap-1 w-full justify-between">
+              <p className="text-sm font-bold text-black dark:text-white">
+                {collectionOwner.name}
+              </p>
+              <div className="flex text-xs gap-1 items-center">
+                <FontAwesomeIcon
+                  icon={faCrown}
+                  className="w-3 h-3 text-yellow-500"
+                />
+                Admin
+              </div>
+            </div>
+            <p className="text-gray-500 dark:text-gray-300">
+              @{collectionOwner.username}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {collection?.members[0]?.user && (
+        <>
+          <div className="flex flex-col gap-3 rounded-md">
+            {collection.members
+              .sort((a, b) => (a.userId as number) - (b.userId as number))
+              .map((e, i) => {
+                return (
+                  <div
+                    key={i}
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <ProfilePhoto
+                        src={e.user.image ? e.user.image : undefined}
+                        className="border-[3px]"
+                      />
+                      <div>
+                        <p className="text-sm font-bold text-black dark:text-white">
+                          {e.user.name}
+                        </p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

components/Modal/Collection/index.tsx

@@ -4,6 +4,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
 import { useState } from "react";
 import DeleteCollection from "./DeleteCollection";
+import ViewTeam from "./ViewTeam";
 
 type Props =
   | {
@@ -21,6 +22,14 @@ type Props =
       isOwner: boolean;
       className?: string;
       defaultIndex?: number;
+    }
+  | {
+      toggleCollectionModal: Function;
+      activeCollection: CollectionIncludingMembersAndLinkCount;
+      method: "VIEW_TEAM";
+      isOwner: boolean;
+      className?: string;
+      defaultIndex?: number;
     };
 
 export default function CollectionModal({
@@ -46,43 +55,47 @@ export default function CollectionModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-sky-700 text-center">New Collection</p>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            New Collection
+          </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-sky-700">
-          {method === "UPDATE" && (
-            <>
-              {isOwner && (
+        {method !== "VIEW_TEAM" && (
+          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
+            {method === "UPDATE" && (
+              <>
+                {isOwner && (
+                  <Tab
+                    className={({ selected }) =>
+                      selected
+                        ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                        : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                    }
+                  >
+                    Collection Info
+                  </Tab>
+                )}
                 <Tab
                   className={({ selected }) =>
                     selected
-                      ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                      : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                   }
                 >
-                  Collection Info
+                  {isOwner ? "Share & Collaborate" : "View Team"}
                 </Tab>
-              )}
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Share & Collaborate" : "View Team"}
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Delete Collection" : "Leave Collection"}
-              </Tab>
-            </>
-          )}
-        </Tab.List>
+                <Tab
+                  className={({ selected }) =>
+                    selected
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                  }
+                >
+                  {isOwner ? "Delete Collection" : "Leave Collection"}
+                </Tab>
+              </>
+            )}
+          </Tab.List>
+        )}
         <Tab.Panels>
           {(isOwner || method === "CREATE") && (
             <Tab.Panel>
@@ -113,6 +126,14 @@ export default function CollectionModal({
               </Tab.Panel>
             </>
           )}
+
+          {method === "VIEW_TEAM" && (
+            <>
+              <Tab.Panel>
+                <ViewTeam collection={collection} />
+              </Tab.Panel>
+            </>
+          )}
         </Tab.Panels>
       </Tab.Group>
     </div>

components/Modal/Link/AddOrEditLink.tsx

@@ -4,14 +4,16 @@ 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";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props =
   | {
@@ -32,6 +34,10 @@ export default function AddOrEditLink({
 }: Props) {
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [optionsExpanded, setOptionsExpanded] = useState(
+    method === "UPDATE" ? true : false
+  );
+
   const { data } = useSession();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
@@ -40,6 +46,10 @@ export default function AddOrEditLink({
       url: "",
       description: "",
       tags: [],
+      screenshotPath: "",
+      pdfPath: "",
+      readabilityPath: "",
+      textContent: "",
       collection: {
         name: "",
         ownerId: data?.user.id as number,
@@ -50,22 +60,35 @@ export default function AddOrEditLink({
   const { updateLink, addLink } = useLinkStore();
 
   const router = useRouter();
-
   const { collections } = useCollectionStore();
 
   useEffect(() => {
-    if (router.query.id) {
-      const currentCollection = collections.find(
-        (e) => e.id == Number(router.query.id)
-      );
+    if (method === "CREATE") {
+      if (router.query.id) {
+        const currentCollection = collections.find(
+          (e) => e.id == Number(router.query.id)
+        );
 
-      if (currentCollection && currentCollection.ownerId)
+        if (
+          currentCollection &&
+          currentCollection.ownerId &&
+          router.asPath.startsWith("/collections/")
+        )
+          setLink({
+            ...link,
+            collection: {
+              id: currentCollection.id,
+              name: currentCollection.name,
+              ownerId: currentCollection.ownerId,
+            },
+          });
+      } else
         setLink({
           ...link,
           collection: {
-            id: currentCollection.id,
-            name: currentCollection.name,
-            ownerId: currentCollection.ownerId,
+            // id: ,
+            name: "Unorganized",
+            ownerId: data?.user.id as number,
           },
         });
     }
@@ -114,95 +137,135 @@ export default function AddOrEditLink({
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
-        <p
-          className="text-gray-500 my-2 text-center truncate w-full"
+        <div
+          className="text-gray-500 dark:text-gray-300 break-all w-full flex gap-2"
           title={link.url}
         >
-          <Link href={link.url} target="_blank" className=" font-bold">
+          <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>
-          <p className="text-sm text-sky-700 mb-2 font-bold">
-            Address (URL)
-            <RequiredBadge />
-          </p>
-          <input
-            value={link.url}
-            onChange={(e) => setLink({ ...link, url: e.target.value })}
-            type="text"
-            placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-          />
+        <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-black dark:text-white mb-2">Address (URL)</p>
+            <TextInput
+              value={link.url}
+              onChange={(e) => setLink({ ...link, url: e.target.value })}
+              placeholder="e.g. http://example.com/"
+            />
+          </div>
+          <div className="sm:col-span-2 col-span-5">
+            <p className="text-black dark:text-white mb-2">Collection</p>
+            {link.collection.name ? (
+              <CollectionSelection
+                onChange={setCollection}
+                // defaultValue={{
+                //   label: link.collection.name,
+                //   value: link.collection.id,
+                // }}
+                defaultValue={
+                  link.collection.id
+                    ? {
+                        value: link.collection.id,
+                        label: link.collection.name,
+                      }
+                    : {
+                        value: null as unknown as number,
+                        label: "Unorganized",
+                      }
+                }
+              />
+            ) : null}
+          </div>
         </div>
-      ) : null}
-      <hr />
-      <div className="grid sm:grid-cols-2 gap-3">
+      ) : undefined}
+
+      {optionsExpanded ? (
         <div>
-          <p className="text-sm text-sky-700 mb-2">Collection</p>
-          <CollectionSelection
-            onChange={setCollection}
-            // defaultValue={{
-            //   label: link.collection.name,
-            //   value: link.collection.id,
-            // }}
-            defaultValue={
-              link.collection.name && link.collection.id
-                ? {
-                    value: link.collection.id,
-                    label: link.collection.name,
-                  }
-                : undefined
-            }
-          />
+          {/* <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-black dark:text-white mb-2">Name</p>
+              <TextInput
+                value={link.name}
+                onChange={(e) => setLink({ ...link, name: e.target.value })}
+                placeholder="e.g. Example Link"
+              />
+            </div>
+
+            {method === "UPDATE" ? (
+              <div>
+                <p className="text-black dark:text-white mb-2">Collection</p>
+                {link.collection.name ? (
+                  <CollectionSelection
+                    onChange={setCollection}
+                    defaultValue={
+                      link.collection.name && link.collection.id
+                        ? {
+                            value: link.collection.id,
+                            label: link.collection.name,
+                          }
+                        : {
+                            value: null as unknown as number,
+                            label: "Unorganized",
+                          }
+                    }
+                  />
+                ) : undefined}
+              </div>
+            ) : undefined}
+
+            <div>
+              <p className="text-black dark:text-white mb-2">Tags</p>
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => {
+                  return { label: e.name, value: e.id };
+                })}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <p className="text-black dark:text-white mb-2">Description</p>
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder={
+                  method === "CREATE"
+                    ? "Will be auto generated if nothing is provided."
+                    : ""
+                }
+                className="resize-none w-full rounded-md p-2 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+              />
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex justify-between items-stretch mt-2">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`${
+            method === "UPDATE" ? "hidden" : ""
+          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 flex items-center px-2 w-fit text-sm`}
+        >
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
         </div>
 
-        <div>
-          <p className="text-sm text-sky-700 mb-2">Tags</p>
-          <TagSelection
-            onChange={setTags}
-            defaultValue={link.tags.map((e) => {
-              return { label: e.name, value: e.id };
-            })}
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Name</p>
-          <input
-            value={link.name}
-            onChange={(e) => setLink({ ...link, name: e.target.value })}
-            type="text"
-            placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Description</p>
-          <textarea
-            value={link.description}
-            onChange={(e) => setLink({ ...link, description: e.target.value })}
-            placeholder={
-              method === "CREATE"
-                ? "Will be auto generated if nothing is provided."
-                : ""
-            }
-            className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-          />
-        </div>
+        <SubmitButton
+          onClick={submit}
+          label={method === "CREATE" ? "Add" : "Save"}
+          icon={method === "CREATE" ? faPlus : faPenToSquare}
+          loading={submitLoader}
+          className={`${method === "CREATE" ? "" : "mx-auto"}`}
+        />
       </div>
-
-      <SubmitButton
-        onClick={submit}
-        label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
-        loading={submitLoader}
-        className={`mx-auto mt-2`}
-      />
     </div>
   );
 }

components/Modal/Link/LinkDetails.tsx

@@ -1,287 +0,0 @@
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import Image from "next/image";
-import ColorThief, { RGBColor } from "colorthief";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faBoxArchive,
-  faCloudArrowDown,
-  faFolder,
-} 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";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-};
-
-export default function LinkDetails({ link }: Props) {
-  const [imageError, setImageError] = useState<boolean>(false);
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  const { collections } = useCollectionStore();
-
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-
-  useEffect(() => {
-    setCollection(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-  }, [collections]);
-
-  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
-
-  const colorThief = new ColorThief();
-
-  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  const rgbToHex = (r: number, g: number, b: number): string =>
-    "#" +
-    [r, g, b]
-      .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      })
-      .join("");
-
-  useEffect(() => {
-    const banner = document.getElementById("link-banner");
-    const bannerInner = document.getElementById("link-banner-inner");
-
-    if (colorPalette && banner && bannerInner) {
-      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]
-      )})`;
-
-      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]);
-
-  const handleDownload = (format: "png" | "pdf") => {
-    const path = `/api/archives/${link.collection.id}/${link.id}.${format}`;
-    fetch(path)
-      .then((response) => {
-        if (response.ok) {
-          // Create a temporary link and click it to trigger the download
-          const link = document.createElement("a");
-          link.href = path;
-          link.download = format === "pdf" ? "PDF" : "Screenshot";
-          link.click();
-        } else {
-          console.error("Failed to download file");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      {!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 rounded-md shadow border-[3px] border-white bg-white 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 flex-col min-h-[3rem] justify-end drop-shadow">
-          <p className="text-2xl text-sky-700 capitalize break-words hyphens-auto">
-            {link.name}
-          </p>
-          <Link
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
-            className="text-sm text-gray-500 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-sky-900 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-sky-700 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-gray-500 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
-            {link.description}
-          </div>
-        </>
-      )}
-
-      <div className="flex justify-between items-center">
-        <div className="flex items-center gap-1 text-gray-500">
-          <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
-          <p className=" text-gray-500">Archived Formats:</p>
-        </div>
-        <div
-          className="flex items-center gap-1 text-gray-500"
-          title={"Created at: " + formattedDate}
-        >
-          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-          <p>{formattedDate}</p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 p-2 rounded-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-            </div>
-
-            <p className="text-gray-500">Screenshot</p>
-          </div>
-
-          <div className="flex text-sky-500 gap-1">
-            <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
-              />
-            </Link>
-
-            <div
-              onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-between items-center p-2 border border-sky-100 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 p-2 rounded-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-            </div>
-
-            <p className="text-gray-500">PDF</p>
-          </div>
-
-          <div className="flex text-sky-500 gap-1">
-            <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
-              target="_blank"
-              rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
-              />
-            </Link>
-
-            <div
-              onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

components/Modal/Link/PreservedFormats.tsx

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

components/Modal/Link/index.tsx

@@ -1,91 +1,63 @@
-import { Tab } from "@headlessui/react";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import AddOrEditLink from "./AddOrEditLink";
-import LinkDetails from "./LinkDetails";
+import PreservedFormats from "./PreservedFormats";
 
 type Props =
   | {
       toggleLinkModal: Function;
       method: "CREATE";
-      isOwnerOrMod?: boolean;
       activeLink?: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
       className?: string;
     }
   | {
       toggleLinkModal: Function;
       method: "UPDATE";
-      isOwnerOrMod: boolean;
       activeLink: LinkIncludingShortenedCollectionAndTags;
-      defaultIndex?: number;
+      className?: string;
+    }
+  | {
+      toggleLinkModal: Function;
+      method: "FORMATS";
+      activeLink: LinkIncludingShortenedCollectionAndTags;
       className?: string;
     };
 
 export default function LinkModal({
   className,
-  defaultIndex,
   toggleLinkModal,
-  isOwnerOrMod,
   activeLink,
   method,
 }: Props) {
   return (
     <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        {method === "CREATE" && (
-          <p className="text-xl text-sky-700 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-sky-700 ${
-            isOwnerOrMod ? "" : "pb-8"
-          }`}
-        >
-          {method === "UPDATE" && isOwnerOrMod && (
-            <>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-                }
-              >
-                Link Details
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-                }
-              >
-                Edit Link
-              </Tab>
-            </>
-          )}
-        </Tab.List>
-        <Tab.Panels>
-          {activeLink && method === "UPDATE" && (
-            <Tab.Panel>
-              <LinkDetails link={activeLink} />
-            </Tab.Panel>
-          )}
+      {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}
 
-          <Tab.Panel>
-            {activeLink && method === "UPDATE" ? (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="UPDATE"
-                activeLink={activeLink}
-              />
-            ) : (
-              <AddOrEditLink
-                toggleLinkModal={toggleLinkModal}
-                method="CREATE"
-              />
-            )}
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+      {activeLink && method === "UPDATE" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
+          <AddOrEditLink
+            toggleLinkModal={toggleLinkModal}
+            method="UPDATE"
+            activeLink={activeLink}
+          />
+        </>
+      ) : undefined}
+
+      {method === "FORMATS" ? (
+        <>
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
+            Preserved Formats
+          </p>
+          <PreservedFormats />
+        </>
+      ) : undefined}
     </div>
   );
 }

components/Modal/User/BillingPortal.tsx

@@ -1,43 +0,0 @@
-import { useState } from "react";
-import SubmitButton from "@/components/SubmitButton";
-import { toast } from "react-hot-toast";
-import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-
-export default function PaymentPortal() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const router = useRouter();
-
-  const submit = () => {
-    setSubmitLoader(true);
-    const load = toast.loading("Redirecting to billing portal...");
-
-    router.push(process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL as string);
-  };
-
-  return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-gray-500">
-          To manage/cancel your subsciption, visit the billing portal.
-        </p>
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Go to Billing Portal"
-          icon={faArrowUpRightFromSquare}
-          className="mx-auto mt-2"
-        />
-
-        <p className="text-md text-gray-500">
-          If you still need help or encountered any issues, feel free to reach
-          out to us at:{" "}
-          <a className="font-semibold" href="mailto:support@linkwarden.app">
-            support@linkwarden.app
-          </a>
-        </p>
-      </div>
-    </div>
-  );
-}

components/Modal/User/ChangePassword.tsx

@@ -1,113 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { AccountSettings } from "@/types/global";
-import useAccountStore from "@/store/account";
-import { signOut, useSession } from "next-auth/react";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "@/components/SubmitButton";
-import { toast } from "react-hot-toast";
-
-type Props = {
-  togglePasswordFormModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function ChangePassword({
-  togglePasswordFormModal,
-  setUser,
-  user,
-}: Props) {
-  const [newPassword, setNewPassword1] = useState("");
-  const [newPassword2, setNewPassword2] = useState("");
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-  const { update, data } = useSession();
-
-  useEffect(() => {
-    if (
-      !(newPassword == "" || newPassword2 == "") &&
-      newPassword === newPassword2
-    ) {
-      setUser({ ...user, newPassword });
-    }
-  }, [newPassword, newPassword2]);
-
-  const submit = async () => {
-    if (newPassword == "" || newPassword2 == "") {
-      toast.error("Please fill all the fields.");
-    }
-
-    if (newPassword !== newPassword2)
-      return toast.error("Passwords do not match.");
-    else if (newPassword.length < 8)
-      return toast.error("Passwords must be at least 8 characters.");
-
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    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,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      togglePasswordFormModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-sm text-sky-700">New Password</p>
-
-        <input
-          value={newPassword}
-          onChange={(e) => setNewPassword1(e.target.value)}
-          type="password"
-          placeholder="••••••••••••••"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-        />
-        <p className="text-sm text-sky-700">Confirm New Password</p>
-
-        <input
-          value={newPassword2}
-          onChange={(e) => setNewPassword2(e.target.value)}
-          type="password"
-          placeholder="••••••••••••••"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-        />
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Apply Settings"
-          icon={faPenToSquare}
-          className="mx-auto mt-2"
-        />
-      </div>
-    </div>
-  );
-}

components/Modal/User/PrivacySettings.tsx

@@ -1,127 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import Checkbox from "../../Checkbox";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import { toast } from "react-hot-toast";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function PrivacySettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
-    user.whitelistedUsers.join(", ")
-  );
-
-  useEffect(() => {
-    setUser({
-      ...user,
-      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
-    });
-  }, [whitelistedUsersTextbox]);
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces.split(",");
-
-    return wordsArray;
-  };
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    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,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div>
-        <p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
-
-        <Checkbox
-          label="Make profile private"
-          state={user.isPrivate}
-          className="text-sm sm:text-base"
-          onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
-        />
-
-        <p className="text-gray-500 text-sm">
-          This will limit who can find and add you to other Collections.
-        </p>
-
-        {user.isPrivate && (
-          <div>
-            <p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
-            <p className="text-gray-500 text-sm mb-3">
-              Please provide the Username of the users you wish to grant
-              visibility to your profile. Separated by comma.
-            </p>
-            <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
-              placeholder="Your profile is hidden from everyone right now..."
-              value={whitelistedUsersTextbox}
-              onChange={(e) => {
-                setWhiteListedUsersTextbox(e.target.value);
-              }}
-            />
-          </div>
-        )}
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/ProfileSettings.tsx

@@ -1,205 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { resizeImage } from "@/lib/client/resizeImage";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import ProfilePhoto from "../../ProfilePhoto";
-import { toast } from "react-hot-toast";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
-
-export default function ProfileSettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-  const [profileStatus, setProfileStatus] = useState(true);
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const handleProfileStatus = (e: boolean) => {
-    setProfileStatus(!e);
-  };
-
-  const handleImageUpload = async (e: any) => {
-    const file: File = e.target.files[0];
-
-    const fileExtension = file.name.split(".").pop()?.toLowerCase();
-    const allowedExtensions = ["png", "jpeg", "jpg"];
-
-    if (allowedExtensions.includes(fileExtension as string)) {
-      const resizedFile = await resizeImage(file);
-
-      if (
-        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
-      ) {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          setUser({ ...user, profilePic: reader.result as string });
-        };
-
-        reader.readAsDataURL(resizedFile);
-      } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
-      }
-    } else {
-      toast.error("Invalid file format.");
-    }
-  };
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    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,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
-        <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-sky-700 mb-2 text-center">Profile Photo</p>
-          <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
-            <ProfilePhoto
-              src={user.profilePic}
-              className="h-auto  w-28"
-              status={handleProfileStatus}
-            />
-            {profileStatus && (
-              <div
-                onClick={() =>
-                  setUser({
-                    ...user,
-                    profilePic: "",
-                  })
-                }
-                className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-slate-200 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer"
-              >
-                <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
-              </div>
-            )}
-
-            <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-              <label
-                htmlFor="upload-photo"
-                title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
-              >
-                Browse...
-                <input
-                  type="file"
-                  name="photo"
-                  id="upload-photo"
-                  accept=".png, .jpeg, .jpg"
-                  className="hidden"
-                  onChange={handleImageUpload}
-                />
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div>
-            <p className="text-sm text-sky-700 mb-2">Display Name</p>
-            <input
-              type="text"
-              value={user.name}
-              onChange={(e) => setUser({ ...user, name: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
-          </div>
-
-          <div>
-            <p className="text-sm text-sky-700 mb-2">Username</p>
-            <input
-              type="text"
-              value={user.username || ""}
-              onChange={(e) => setUser({ ...user, username: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
-          </div>
-
-          {emailEnabled ? (
-            <div>
-              <p className="text-sm text-sky-700 mb-2">Email</p>
-              <input
-                type="text"
-                value={user.email || ""}
-                onChange={(e) => setUser({ ...user, email: e.target.value })}
-                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-              />
-            </div>
-          ) : undefined}
-
-          {user.email !== account.email ? (
-            <p className="text-gray-500">
-              You will need to log back in after you apply this Email.
-            </p>
-          ) : undefined}
-        </div>
-      </div>
-
-      {/* <hr /> TODO: Export functionality
-
-      <p className="text-sky-700">Data Settings</p>
-
-      <div className="w-fit">
-        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
-          Export Data
-        </div>
-      </div> */}
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/index.tsx

@@ -1,107 +0,0 @@
-import { Tab } from "@headlessui/react";
-import { AccountSettings } from "@/types/global";
-import { useState } from "react";
-import ChangePassword from "./ChangePassword";
-import ProfileSettings from "./ProfileSettings";
-import PrivacySettings from "./PrivacySettings";
-import BillingPortal from "./BillingPortal";
-
-type Props = {
-  toggleSettingsModal: Function;
-  activeUser: AccountSettings;
-  className?: string;
-  defaultIndex?: number;
-};
-
-const STRIPE_BILLING_PORTAL_URL =
-  process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL;
-
-export default function UserModal({
-  className,
-  defaultIndex,
-  toggleSettingsModal,
-  activeUser,
-}: Props) {
-  const [user, setUser] = useState<AccountSettings>(activeUser);
-
-  return (
-    <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        <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-sky-700">
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-            }
-          >
-            Profile Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-            }
-          >
-            Privacy Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-            }
-          >
-            Password
-          </Tab>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab
-              className={({ selected }) =>
-                selected
-                  ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                  : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
-              }
-            >
-              Billing Portal
-            </Tab>
-          ) : undefined}
-        </Tab.List>
-        <Tab.Panels>
-          <Tab.Panel>
-            <ProfileSettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <PrivacySettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <ChangePassword
-              togglePasswordFormModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab.Panel>
-              <BillingPortal />
-            </Tab.Panel>
-          ) : undefined}
-        </Tab.Panels>
-      </Tab.Group>
-    </div>
-  );
-}

components/Modal/index.tsx

@@ -14,16 +14,16 @@ 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 rounded-2xl border-solid border shadow-lg p-5 bg-white">
+        <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
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500"
+              className="w-4 h-4 text-gray-500 dark:text-gray-300"
             />
           </div>
           {children}

components/ModalManagement.tsx

@@ -2,12 +2,10 @@ import useModalStore from "@/store/modals";
 import Modal from "./Modal";
 import LinkModal from "./Modal/Link";
 import {
-  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import CollectionModal from "./Modal/Collection";
-import UserModal from "./Modal/User";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
@@ -29,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>
@@ -49,15 +45,5 @@ export default function ModalManagement() {
         />
       </Modal>
     );
-  else if (modal && modal.modal === "ACCOUNT")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <UserModal
-          toggleSettingsModal={toggleModal}
-          defaultIndex={modal.defaultIndex}
-          activeUser={modal.active as AccountSettings}
-        />
-      </Modal>
-    );
   else return <></>;
 }

components/Navbar.tsx

@@ -6,10 +6,13 @@ import Dropdown from "@/components/Dropdown";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
-import Search from "@/components/Search";
+import SearchBar from "@/components/SearchBar";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import useModalStore from "@/store/modals";
+import { useTheme } from "next-themes";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import ToggleDarkMode from "./ToggleDarkMode";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -18,11 +21,25 @@ export default function Navbar() {
 
   const [profileDropdown, setProfileDropdown] = useState(false);
 
-  const [sidebar, setSidebar] = useState(false);
-
   const router = useRouter();
 
-  window.addEventListener("resize", () => setSidebar(false));
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  const [sidebar, setSidebar] = useState(false);
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
 
   useEffect(() => {
     setSidebar(false);
@@ -33,14 +50,14 @@ export default function Navbar() {
   };
 
   return (
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-neutral-700 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-sky-700 rounded-md duration-100 hover:bg-slate-200"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] 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>
-      <Search />
+      <SearchBar />
       <div className="flex items-center gap-2">
         <div
           onClick={() => {
@@ -50,7 +67,7 @@ export default function Navbar() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-sky-500 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -61,19 +78,22 @@ export default function Navbar() {
           </span>
         </div>
 
+        <ToggleDarkMode className="sm:flex hidden" />
+
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
             <ProfilePhoto
-              src={account.profilePic}
-              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100  border-[3px]"
+              src={account.image ? account.image : undefined}
+              priority={true}
+              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />
             <p
               id="profile-dropdown"
-              className="font-bold text-sky-700 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
+              className="text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
               {account.name}
             </p>
@@ -83,12 +103,12 @@ export default function Navbar() {
               items={[
                 {
                   name: "Settings",
+                  href: "/settings/account",
+                },
+                {
+                  name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
                   onClick: () => {
-                    setModal({
-                      modal: "ACCOUNT",
-                      state: true,
-                      active: account,
-                    });
+                    handleToggle();
                     setProfileDropdown(!profileDropdown);
                   },
                 },
@@ -115,7 +135,7 @@ export default function Navbar() {
                 onClickOutside={toggleSidebar}
               >
                 <div className="slide-right h-full shadow-lg">
-                  <Sidebar className="" />
+                  <Sidebar />
                 </div>
               </ClickAwayHandler>
             </div>

components/NoLinksFound.tsx

@@ -3,17 +3,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import useModalStore from "@/store/modals";
 
-export default function NoLinksFound() {
+type Props = {
+  text?: string;
+};
+
+export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-sky-700">
-        You haven&apos;t created any Links Here
+    <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">
+        {text || "You haven't created any Links Here"}
       </p>
-      <br />
-      <div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
-        <p>Start by creating a</p>{" "}
+      <div className="text-center text-black dark:text-white w-full mt-4">
         <div
           onClick={() => {
             setModal({
@@ -22,14 +24,14 @@ export default function NoLinksFound() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
-            className="w-5 h-5 group-hover:ml-9 absolute duration-100"
+            className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
           />
-          <span className="block group-hover:opacity-0 text-right w-full duration-100">
-            New Link
+          <span className="group-hover:opacity-0 text-right w-full duration-100">
+            Create New Link
           </span>
         </div>
       </div>

components/ProfilePhoto.tsx

@@ -2,48 +2,46 @@ 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,
-}: Props) {
-  const [error, setError] = useState<boolean>(emptyImage || true);
-
-  const checkAvatarExistence = async () => {
-    const canPass = await avatarExists(src);
-
-    setError(!canPass);
-  };
+export default function ProfilePhoto({ src, className, priority }: Props) {
+  const [image, setImage] = useState("");
 
   useEffect(() => {
-    if (src) checkAvatarExistence();
+    if (src && !src?.includes("base64"))
+      setImage(`/api/v1/${src.replace("uploads/", "").replace(".jpg", "")}`);
+    else if (!src) setImage("");
+    else {
+      setImage(src);
+    }
+  }, [src]);
 
-    status && status(error || !src);
-  }, [src, error]);
-
-  return error || !src ? (
+  return !image ? (
     <div
-      className={`bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
+        className || ""
+      }`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
   ) : (
     <Image
       alt=""
-      src={src}
+      src={image}
       height={112}
       width={112}
-      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 ${className}`}
+      priority={priority}
+      draggable={false}
+      onError={() => setImage("")}
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+        className || ""
+      }`}
     />
   );
 }

components/PublicPage/LinkCard.tsx

@@ -1,97 +0,0 @@
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Image from "next/image";
-import { Link as LinkType, Tag } from "@prisma/client";
-import isValidUrl from "@/lib/client/isValidUrl";
-
-interface LinksIncludingTags extends LinkType {
-  tags: Tag[];
-}
-
-type Props = {
-  link: LinksIncludingTags;
-  count: number;
-};
-
-export default function LinkCard({ link, count }: Props) {
-  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  const formattedDate = new Date(
-    link.createdAt as unknown as string
-  ).toLocaleString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-
-  return (
-    <a href={link.url} target="_blank" rel="noreferrer" className="rounded-3xl">
-      <div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
-        {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=""
-              className="select-none mt-3 z-10 rounded-md shadow border-[3px] border-white bg-white"
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-            <Image
-              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-              width={80}
-              height={80}
-              alt=""
-              className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          </>
-        )}
-        <div className="flex justify-between items-center gap-5 w-full h-full z-0">
-          <div className="flex flex-col justify-between">
-            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700  font-bold">{link.name}</p>
-            </div>
-
-            <p className="text-gray-500 text-sm font-medium">
-              {link.description}
-            </p>
-            <div className="flex gap-3 items-center flex-wrap my-3">
-              <div className="flex gap-1 items-center flex-wrap mt-1">
-                {link.tags.map((e, i) => (
-                  <p
-                    key={i}
-                    className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
-                  >
-                    {e.name}
-                  </p>
-                ))}
-              </div>
-            </div>
-            <div className="flex gap-2 items-center flex-wrap mt-2">
-              <p className="text-gray-500">{formattedDate}</p>
-              <div className="text-sky-500 font-bold flex items-center gap-1">
-                <p>{url ? url.host : link.url}</p>
-              </div>
-            </div>
-          </div>
-          <div className="hidden sm:group-hover/item:block duration-100 text-slate-500">
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className="w-7 h-7 slide-right-with-fade"
-            />
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}

components/PublicPage/PublicLinkCard.tsx

@@ -0,0 +1,96 @@
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Image from "next/image";
+import { Link as LinkType, Tag } from "@prisma/client";
+import isValidUrl from "@/lib/client/isValidUrl";
+import unescapeString from "@/lib/client/unescapeString";
+import { TagIncludingLinkCount } from "@/types/global";
+import Link from "next/link";
+
+interface LinksIncludingTags extends LinkType {
+  tags: TagIncludingLinkCount[];
+}
+
+type Props = {
+  link: LinksIncludingTags;
+  count: number;
+};
+
+export default function LinkCard({ link, count }: Props) {
+  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
+
+  const formattedDate = new Date(
+    link.createdAt as unknown as string
+  ).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  return (
+    <div className="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-lg p-3 flex items-start relative gap-3 group/item">
+      <div className="flex justify-between items-end gap-5 w-full h-full z-0">
+        <div className="flex flex-col justify-between w-full">
+          <div className="flex items-center gap-2">
+            <p className="text-2xl">
+              {url && (
+                <Image
+                  src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+                  width={30}
+                  height={30}
+                  alt=""
+                  className="select-none z-10 rounded-md shadow border-[1px] border-white bg-white float-left mr-2"
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              )}
+              {unescapeString(link.name || link.description)}
+            </p>
+          </div>
+
+          <div className="flex gap-3 items-center flex-wrap my-2">
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/public/collections/20?q=" + e.name}
+                  key={i}
+                  className="px-2 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}
+                </Link>
+              ))}
+            </div>
+          </div>
+          <div className="flex gap-1 items-center flex-wrap text-sm text-gray-500 dark:text-gray-300">
+            <p>{formattedDate}</p>
+            <p>·</p>
+            <Link
+              href={url ? url.href : link.url}
+              target="_blank"
+              className="hover:opacity-50 duration-100 truncate w-52 sm:w-fit"
+              title={url ? url.href : link.url}
+            >
+              {url ? url.host : link.url}
+            </Link>
+          </div>
+          <div className="w-full">
+            {unescapeString(link.description)}{" "}
+            <Link
+              href={`/public/links/${link.id}`}
+              className="flex gap-1 items-center flex-wrap text-sm text-gray-500 dark:text-gray-300 hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
+            >
+              <p>Read</p>
+              <FontAwesomeIcon
+                icon={faChevronRight}
+                className="w-3 h-3 mt-[0.15rem]"
+              />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/PublicPage/PublicSearchBar.tsx

@@ -0,0 +1,59 @@
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+
+type Props = {
+  placeHolder?: string;
+};
+
+export default function PublicSearchBar({ placeHolder }: Props) {
+  const router = useRouter();
+
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  useEffect(() => {
+    router.query.q
+      ? setSearchQuery(decodeURIComponent(router.query.q as string))
+      : setSearchQuery("");
+  }, [router.query.q]);
+
+  return (
+    <div className="flex items-center relative group">
+      <label
+        htmlFor="search-box"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-sky-500 dark:text-sky-500"
+      >
+        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-4 h-4" />
+      </label>
+
+      <input
+        id="search-box"
+        type="text"
+        placeholder={placeHolder}
+        value={searchQuery}
+        onChange={(e) => {
+          e.target.value.includes("%") &&
+            toast.error("The search query should not contain '%'.");
+          setSearchQuery(e.target.value.replace("%", ""));
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            if (!searchQuery) {
+              return router.push("/public/collections/" + router.query.id);
+            }
+
+            return router.push(
+              "/public/collections/" +
+                router.query.id +
+                "?q=" +
+                encodeURIComponent(searchQuery || "")
+            );
+          }
+        }}
+        className="border text-sm border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
+      />
+    </div>
+  );
+}

components/RadioButton.tsx

@@ -20,13 +20,15 @@ export default function RadioButton({ label, state, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faCircleCheck}
-        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-black dark:text-white rounded select-none">
+        {label}
+      </span>
     </label>
   );
 }

components/RequiredBadge.tsx

@@ -1,6 +1,9 @@
 export default function RequiredBadge() {
   return (
-    <span title="Required Field" className="text-sky-700 cursor-help">
+    <span
+      title="Required Field"
+      className="text-black dark:text-white cursor-help"
+    >
       {" "}
       *
     </span>

components/SearchBar.tsx

@@ -4,27 +4,20 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
-export default function Search() {
+export default function SearchBar() {
   const router = useRouter();
 
-  const routeQuery = router.query.query;
+  const routeQuery = router.query.q;
 
   const [searchQuery, setSearchQuery] = useState(
     routeQuery ? decodeURIComponent(routeQuery as string) : ""
   );
 
-  const [searchBox, setSearchBox] = useState(
-    router.pathname.startsWith("/search") || false
-  );
-
   return (
-    <div
-      className="flex items-center relative group"
-      onClick={() => setSearchBox(true)}
-    >
+    <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-700"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-500"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -41,10 +34,9 @@ export default function Search() {
         }}
         onKeyDown={(e) =>
           e.key === "Enter" &&
-          router.push("/search/" + encodeURIComponent(searchQuery))
+          router.push("/search?q=" + encodeURIComponent(searchQuery))
         }
-        autoFocus={searchBox}
-        className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none"
+        className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
       />
     </div>
   );

components/SettingsSidebar.tsx

@@ -0,0 +1,228 @@
+import useCollectionStore from "@/store/collections";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faPalette,
+  faBoxArchive,
+  faKey,
+  faLock,
+} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import {
+  faCircleQuestion,
+  faCreditCard,
+} from "@fortawesome/free-regular-svg-icons";
+import {
+  faGithub,
+  faMastodon,
+  faXTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+
+export default function SettingsSidebar({ className }: { className?: string }) {
+  const LINKWARDEN_VERSION = "v2.3.0";
+
+  const { collections } = useCollectionStore();
+
+  const router = useRouter();
+
+  const [active, setActive] = useState("");
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router, collections]);
+
+  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 || ""
+      }`}
+    >
+      <div className="flex flex-col gap-1">
+        <Link href="/settings/account">
+          <div
+            className={`${
+              active === `/settings/account`
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faUser}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Account
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/appearance">
+          <div
+            className={`${
+              active === `/settings/appearance`
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faPalette}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Appearance
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/archive">
+          <div
+            className={`${
+              active === `/settings/archive`
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faBoxArchive}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Archive
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/api">
+          <div
+            className={`${
+              active === `/settings/api` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faKey}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              API Keys
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/password">
+          <div
+            className={`${
+              active === `/settings/password`
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faLock}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Password
+            </p>
+          </div>
+        </Link>
+
+        {process.env.NEXT_PUBLIC_STRIPE ? (
+          <Link href="/settings/billing">
+            <div
+              className={`${
+                active === `/settings/billing`
+                  ? "bg-sky-500"
+                  : "hover:bg-slate-500"
+              } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            >
+              <FontAwesomeIcon
+                icon={faCreditCard}
+                className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              />
+
+              <p className="text-black dark:text-white truncate w-full pr-7">
+                Billing
+              </p>
+            </div>
+          </Link>
+        ) : undefined}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <Link
+          href={`https://github.com/linkwarden/linkwarden/releases`}
+          target="_blank"
+          className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
+        >
+          Linkwarden {LINKWARDEN_VERSION}
+        </Link>
+        <Link href="https://docs.linkwarden.app" target="_blank">
+          <div
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faCircleQuestion as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Help
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
+          <div
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faGithub as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              GitHub
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
+          <div
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faXTwitter as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Twitter
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://fosstodon.org/@linkwarden" target="_blank">
+          <div
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faMastodon as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Mastodon
+            </p>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/Sidebar.tsx

@@ -6,13 +6,14 @@ import {
   faChartSimple,
   faChevronDown,
   faLink,
+  faGlobe,
+  faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
-import Image from "next/image";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -51,54 +52,73 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 h-full w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
+        className || ""
+      }`}
     >
-      <div className="flex justify-center gap-2 mt-2">
-        <Link
-          href="/dashboard"
-          className={`${
-            active === "/dashboard"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
-          />
-          <p className="text-sky-700 text-xs font-semibold">Dashboard</p>
+      <div className="flex flex-col gap-2 mt-2">
+        <Link href={`/dashboard`}>
+          <div
+            className={`${
+              active === `/dashboard` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faChartSimple}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Dashboard
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/links"
-          className={`${
-            active === "/links"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
-          />
-          <p className="text-sky-700 text-xs font-semibold">
-            <span className="hidden xl:inline-block">All</span> Links
-          </p>
+        <Link href={`/links`}>
+          <div
+            className={`${
+              active === `/links` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faLink}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Links
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/collections"
-          className={`${
-            active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
-          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
-          />
-          <p className="text-sky-700 text-xs font-semibold">
-            <span className="hidden xl:inline-block">All</span> Collections
-          </p>
+        <Link href={`/collections`}>
+          <div
+            className={`${
+              active === `/collections` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faFolder}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Collections
+            </p>
+          </div>
+        </Link>
+
+        <Link href={`/links/pinned`}>
+          <div
+            className={`${
+              active === `/links/pinned` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Pinned Links
+            </p>
+          </div>
         </Link>
       </div>
 
@@ -107,7 +127,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setCollectionDisclosure(!collectionDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-gray-300 mt-5"
         >
           <p>Collections</p>
 
@@ -136,19 +156,29 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
                           icon={faFolder}
                           className="w-6 h-6 drop-shadow"
                           style={{ color: e.color }}
                         />
-
-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full">
                           {e.name}
                         </p>
+
+                        {e.isPublic ? (
+                          <FontAwesomeIcon
+                            icon={faGlobe}
+                            title="This collection is being shared publicly."
+                            className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
+                          />
+                        ) : undefined}
+                        <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
+                          {e._count?.links}
+                        </div>
                       </div>
                     </Link>
                   );
@@ -157,7 +187,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -170,7 +200,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setTagDisclosure(!tagDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-gray-300 mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -196,18 +226,21 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}
-                          className="w-4 h-4 text-sky-500 mt-1"
+                          className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
                         />
 
-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full pr-7">
                           {e.name}
                         </p>
+                        <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
+                          {e._count?.links}
+                        </div>
                       </div>
                     </Link>
                   );
@@ -216,7 +249,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>

components/SortDropdown.tsx

@@ -21,9 +21,11 @@ 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 shadow-md bg-gray-50 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-sky-900 text-center font-semibold">Sort by</p>
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
+        Sort by
+      </p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"

components/SubmitButton.tsx

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

components/TextInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEventHandler, KeyboardEventHandler } from "react";
+
+type Props = {
+  autoFocus?: boolean;
+  value?: string;
+  type?: string;
+  placeholder?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  className?: string;
+};
+
+export default function TextInput({
+  autoFocus,
+  value,
+  type,
+  placeholder,
+  onChange,
+  onKeyDown,
+  className,
+}: Props) {
+  return (
+    <input
+      autoFocus={autoFocus}
+      type={type ? type : "text"}
+      placeholder={placeholder}
+      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 || ""
+      }`}
+    />
+  );
+}

components/ToggleDarkMode.tsx

@@ -0,0 +1,31 @@
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+type Props = {
+  className?: string;
+};
+
+export default function ToggleDarkMode({ className }: Props) {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  return (
+    <div
+      className={`cursor-pointer flex select-none border border-sky-600 items-center justify-center dark:bg-neutral-900 bg-white hover:border-sky-500 group duration-100 rounded-full text-white w-10 h-10 ${className}`}
+      onClick={handleToggle}
+    >
+      <FontAwesomeIcon
+        icon={theme === "dark" ? faSun : faMoon}
+        className="w-1/2 h-1/2 text-sky-600 group-hover:text-sky-500"
+      />
+    </div>
+  );
+}

docker-compose.yml

@@ -0,0 +1,20 @@
+version: "3.5"
+services:
+  postgres:
+    image: postgres:16-alpine
+    env_file: .env
+    restart: always
+    volumes:
+      - ./pgdata:/var/lib/postgresql/data
+  linkwarden:
+    env_file: .env
+    environment:
+      - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/postgres
+    restart: always
+    image: ghcr.io/linkwarden/linkwarden:latest
+    ports:
+      - 3000:3000
+    volumes:
+      - ./data:/data/data
+    depends_on:
+      - postgres

hooks/useDetectPageBottom.tsx

@@ -5,21 +5,22 @@ const useDetectPageBottom = () => {
 
   useEffect(() => {
     const handleScroll = () => {
-      const offsetHeight = document.documentElement.offsetHeight;
-      const innerHeight = window.innerHeight;
-      const scrollTop = document.documentElement.scrollTop;
+      const totalHeight = document.documentElement.scrollHeight;
+      const scrolledHeight = window.scrollY + window.innerHeight;
 
-      const hasReachedBottom = offsetHeight - (innerHeight + scrollTop) <= 100;
-
-      setReachedBottom(hasReachedBottom);
+      if (scrolledHeight >= totalHeight) {
+        setReachedBottom(true);
+      }
     };
 
     window.addEventListener("scroll", handleScroll);
 
-    return () => window.removeEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
   }, []);
 
-  return reachedBottom;
+  return { reachedBottom, setReachedBottom };
 };
 
 export default useDetectPageBottom;

hooks/useInitialData.tsx

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

hooks/useLinks.tsx

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

hooks/useRedirect.tsx

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

hooks/useWindowDimensions.tsx

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

layouts/AuthRedirect.tsx

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

layouts/CenteredForm.tsx

@@ -1,4 +1,6 @@
+import { useTheme } from "next-themes";
 import Image from "next/image";
+import Link from "next/link";
 import React, { ReactNode } from "react";
 
 interface Props {
@@ -7,24 +9,49 @@ 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-2">
-      <div className="m-auto flex flex-col gap-2">
-        <Image
-          src="/linkwarden.png"
-          width={518}
-          height={145}
-          alt="Linkwarden"
-          className="h-12 w-fit mx-auto"
-        />
+    <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 ? (
+          <Image
+            src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`}
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : undefined}
+        {/* {theme === "dark" ? (
+          <Image
+            src="/linkwarden_dark.png"
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : (
+          <Image
+            src="/linkwarden_light.png"
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        )} */}
         {text ? (
-          <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black px-2 text-center">
+          <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold text-black dark:text-white px-2 text-center">
             {text}
           </p>
         ) : undefined}
         {children}
-        <p className="text-center text-xs text-gray-500">
-          © {new Date().getFullYear()} Linkwarden. All rights reserved.
+        <p className="text-center text-xs text-gray-500 mb-5 dark:text-gray-400">
+          © {new Date().getFullYear()}{" "}
+          <Link href="https://linkwarden.app" className="font-semibold">
+            Linkwarden
+          </Link>
+          . All rights reserved.
         </p>
       </div>
     </div>

layouts/LinkLayout.tsx

@@ -0,0 +1,207 @@
+import LinkSidebar from "@/components/LinkSidebar";
+import { ReactNode, useEffect, useState } from "react";
+import ModalManagement from "@/components/ModalManagement";
+import useModalStore from "@/store/modals";
+import { useRouter } from "next/router";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import {
+  faPen,
+  faBoxesStacked,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
+import useLinkStore from "@/store/links";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useSession } from "next-auth/react";
+import useCollectionStore from "@/store/collections";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function LinkLayout({ children }: Props) {
+  const { modal } = useModalStore();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
+
+  const [sidebar, setSidebar] = useState(false);
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };
+
+  const session = useSession();
+  const userId = session.data?.user.id;
+
+  const { setModal } = useModalStore();
+
+  const { links, removeLink } = useLinkStore();
+  const { collections } = useCollectionStore();
+
+  const [linkCollection, setLinkCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    if (link)
+      setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
+  }, [link, collections]);
+
+  return (
+    <>
+      <ModalManagement />
+
+      <div className="flex mx-auto">
+        {/* <div className="hidden lg:block fixed left-5 h-screen">
+          <LinkSidebar />
+        </div> */}
+
+        <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
+          <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
+            {/* <div
+              onClick={toggleSidebar}
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+            </div> */}
+
+            <div
+              onClick={() => {
+                if (router.pathname.startsWith("/public")) {
+                  router.push(
+                    `/public/collections/${
+                      linkCollection?.id || link?.collection.id
+                    }`
+                  );
+                } else {
+                  router.push(`/dashboard`);
+                }
+              }}
+              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
+              Back{" "}
+              <span className="hidden sm:inline-block">
+                to{" "}
+                <span className="capitalize">
+                  {router.pathname.startsWith("/public")
+                    ? linkCollection?.name || link?.collection?.name
+                    : "Dashboard"}
+                </span>
+              </span>
+            </div>
+
+            <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>
+
+          {children}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+              <ClickAwayHandler
+                className="h-full"
+                onClickOutside={toggleSidebar}
+              >
+                <div className="slide-right h-full shadow-lg">
+                  <LinkSidebar onClick={() => setSidebar(false)} />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}

layouts/MainLayout.tsx

@@ -1,23 +1,16 @@
 import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode, useEffect } from "react";
-import { useSession } from "next-auth/react";
-import Loader from "../components/Loader";
-import useRedirect from "@/hooks/useRedirect";
-import { useRouter } from "next/router";
+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;
 }
 
 export default function MainLayout({ children }: Props) {
-  const { status, data } = useSession();
-  const router = useRouter();
-  const redirect = useRedirect();
-  const routeExists = router.route === "/_error" ? false : true;
-
   const { modal } = useModalStore();
 
   useEffect(() => {
@@ -26,24 +19,53 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
-  if (status === "authenticated" && !redirect && routeExists)
-    return (
-      <>
-        <ModalManagement />
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
 
-        <div className="flex">
-          <div className="hidden lg:block">
-            <Sidebar className="fixed top-0" />
-          </div>
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
 
-          <div className="w-full lg:ml-64 xl:ml-80">
-            <Navbar />
-            {children}
-          </div>
+  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 ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
         </div>
-      </>
-    );
-  else if ((status === "unauthenticated" && !redirect) || !routeExists)
-    return <>{children}</>;
-  else return <></>;
+
+        <div
+          className={`w-full flex flex-col min-h-${
+            showAnnouncement ? "full" : "screen"
+          } lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
+        >
+          <Navbar />
+          {children}
+        </div>
+      </div>
+    </>
+  );
 }

layouts/SettingsLayout.tsx

@@ -0,0 +1,87 @@
+import SettingsSidebar from "@/components/SettingsSidebar";
+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 SettingsLayout({ children }: Props) {
+  const { modal } = useModalStore();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
+
+  const [sidebar, setSidebar] = useState(false);
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };
+
+  return (
+    <>
+      <ModalManagement />
+
+      <div className="flex max-w-screen-md mx-auto">
+        <div className="hidden lg:block fixed h-screen">
+          <SettingsSidebar />
+        </div>
+
+        <div className="w-full min-h-screen p-5 lg:ml-64">
+          <div className="gap-2 inline-flex mr-3">
+            <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>
+
+            <Link
+              href="/dashboard"
+              className="inline-flex w-fit 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={faChevronLeft} className="w-5 h-5" />
+            </Link>
+          </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">
+                  <SettingsSidebar />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}

lib/api/archive.ts

@@ -1,79 +1,151 @@
-import { Page, chromium, devices } from "playwright";
+import { chromium, devices } from "playwright";
 import { prisma } from "@/lib/api/db";
 import createFile from "@/lib/api/storage/createFile";
+import sendToWayback from "./sendToWayback";
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
+import DOMPurify from "dompurify";
 
 export default async function archive(
+  linkId: number,
   url: string,
-  collectionId: number,
-  linkId: number
+  userId: number
 ) {
-  const browser = await chromium.launch();
-  const context = await browser.newContext(devices["Desktop Chrome"]);
-  const page = await context.newPage();
+  const user = await prisma.user.findUnique({ where: { id: userId } });
 
-  try {
-    await page.goto(url, { waitUntil: "domcontentloaded" });
+  const targetLink = await prisma.link.update({
+    where: { id: linkId },
+    data: {
+      screenshotPath: user?.archiveAsScreenshot ? "pending" : null,
+      pdfPath: user?.archiveAsPDF ? "pending" : null,
+      readabilityPath: "pending",
+      lastPreserved: new Date().toISOString(),
+    },
+  });
 
-    await autoScroll(page);
+  // Archive.org
 
-    const linkExists = await prisma.link.findUnique({
-      where: {
-        id: linkId,
-      },
-    });
+  if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
-    if (linkExists) {
-      const pdf = await page.pdf({
-        width: "1366px",
-        height: "1931px",
-        printBackground: true,
-        margin: { top: "15px", bottom: "15px" },
-      });
-      const screenshot = await page.screenshot({
-        fullPage: true,
+  if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
+    const browser = await chromium.launch();
+    const context = await browser.newContext(devices["Desktop Chrome"]);
+    const page = await context.newPage();
+
+    try {
+      await page.goto(url, { waitUntil: "domcontentloaded" });
+
+      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();
+
+      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`,
       });
 
-      createFile({
-        data: screenshot,
-        filePath: `archives/${collectionId}/${linkId}.png`,
+      await prisma.link.update({
+        where: { id: linkId },
+        data: {
+          readabilityPath: `archives/${targetLink.collectionId}/${linkId}_readability.json`,
+          textContent: articleText,
+        },
       });
 
-      createFile({
-        data: pdf,
-        filePath: `archives/${collectionId}/${linkId}.pdf`,
+      // 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`,
+          });
+        }
+
+        if (user.archiveAsPDF) {
+          const pdf = await page.pdf({
+            width: "1366px",
+            height: "1931px",
+            printBackground: true,
+            margin: { top: "15px", bottom: "15px" },
+          });
+
+          await createFile({
+            data: pdf,
+            filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
+          });
+        }
+
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: user.archiveAsScreenshot
+              ? `archives/${linkExists.collectionId}/${linkId}.png`
+              : null,
+            pdfPath: user.archiveAsPDF
+              ? `archives/${linkExists.collectionId}/${linkId}.pdf`
+              : null,
+          },
+        });
+      } else if (faulty) {
+        await prisma.link.update({
+          where: { id: linkId },
+          data: {
+            screenshotPath: null,
+            pdfPath: null,
+          },
+        });
+      }
+    } catch (err) {
+      console.log(err);
+      throw err;
+    } finally {
+      await browser.close();
     }
-
-    await browser.close();
-  } catch (err) {
-    console.log(err);
-    await browser.close();
   }
 }
 
-const autoScroll = async (page: Page) => {
-  await page.evaluate(async () => {
-    const timeoutPromise = new Promise<void>((_, reject) => {
-      setTimeout(() => {
-        reject(new Error("Auto scroll took too long (more than 20 seconds)."));
-      }, 20000);
-    });
-
-    const scrollingPromise = new Promise<void>((resolve) => {
-      let totalHeight = 0;
-      let distance = 100;
-      let scrollDown = setInterval(() => {
-        let scrollHeight = document.body.scrollHeight;
-        window.scrollBy(0, distance);
-        totalHeight += distance;
-        if (totalHeight >= scrollHeight) {
-          clearInterval(scrollDown);
-          window.scroll(0, 0);
-          resolve();
-        }
-      }, 100);
-    });
-
-    await Promise.race([scrollingPromise, timeoutPromise]);
+const autoScroll = async (AUTOSCROLL_TIMEOUT: number) => {
+  const timeoutPromise = new Promise<void>((_, reject) => {
+    setTimeout(() => {
+      reject(new Error(`Webpage was too long to be archived.`));
+    }, AUTOSCROLL_TIMEOUT * 1000);
   });
+
+  const scrollingPromise = new Promise<void>((resolve) => {
+    let totalHeight = 0;
+    let distance = 100;
+    let scrollDown = setInterval(() => {
+      let scrollHeight = document.body.scrollHeight;
+      window.scrollBy(0, distance);
+      totalHeight += distance;
+      if (totalHeight >= scrollHeight) {
+        clearInterval(scrollDown);
+        window.scroll(0, 0);
+        resolve();
+      }
+    }, 100);
+  });
+
+  await Promise.race([scrollingPromise, timeoutPromise]);
 };

lib/api/checkSubscription.ts

@@ -1,54 +0,0 @@
-import Stripe from "stripe";
-
-export default async function checkSubscription(
-  stripeSecretKey: string,
-  email: string,
-  priceId: 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?.some(
-            (subscriptionItem) => subscriptionItem?.plan?.id === priceId
-          ) && isNotCanceledOrHasTime
-        );
-      }
-    );
-
-    return (
-      customer.email?.toLowerCase() === email.toLowerCase() &&
-      hasValidSubscription
-    );
-  });
-
-  return {
-    isSubscriber,
-    subscriptionCanceledAt,
-  };
-}

lib/api/checkSubscriptionByEmail.ts

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

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

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

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

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

lib/api/controllers/collections/getCollections.ts

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

lib/api/controllers/collections/postCollection.ts

@@ -40,14 +40,6 @@ export default async function postCollection(
       name: collection.name.trim(),
       description: collection.description,
       color: collection.color,
-      members: {
-        create: collection.members.map((e) => ({
-          user: { connect: { id: e.user.id } },
-          canCreate: e.canCreate,
-          canUpdate: e.canUpdate,
-          canDelete: e.canDelete,
-        })),
-      },
     },
     include: {
       _count: {

lib/api/controllers/dashboard/getDashboardData.ts

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

lib/api/controllers/links/deleteLink.ts

@@ -1,40 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
-import getPermission from "@/lib/api/getPermission";
-import removeFile from "@/lib/api/storage/removeFile";
-
-export default async function deleteLink(
-  link: LinkIncludingShortenedCollectionAndTags,
-  userId: number
-) {
-  if (!link || !link.collectionId)
-    return { response: "Please choose a valid link.", status: 401 };
-
-  const collectionIsAccessible = (await getPermission(
-    userId,
-    link.collectionId
-  )) as
-    | (Collection & {
-        members: UsersAndCollections[];
-      })
-    | null;
-
-  const memberHasAccess = collectionIsAccessible?.members.some(
-    (e: UsersAndCollections) => e.userId === userId && e.canDelete
-  );
-
-  if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
-    return { response: "Collection is not accessible.", status: 401 };
-
-  const deleteLink: Link = await prisma.link.delete({
-    where: {
-      id: link.id,
-    },
-  });
-
-  removeFile({ filePath: `archives/${link.collectionId}/${link.id}.pdf` });
-  removeFile({ filePath: `archives/${link.collectionId}/${link.id}.png` });
-
-  return { response: deleteLink, status: 200 };
-}

lib/api/controllers/links/getLinks.ts

@@ -1,135 +1,139 @@
 import { prisma } from "@/lib/api/db";
 import { LinkRequestQuery, Sort } from "@/types/global";
 
-export default async function getLink(userId: number, body: string) {
-  const query: LinkRequestQuery = JSON.parse(decodeURIComponent(body));
-  console.log(query);
+export default async function getLink(userId: number, query: LinkRequestQuery) {
+  const POSTGRES_IS_ENABLED = process.env.DATABASE_URL.startsWith("postgresql");
 
-  // Sorting logic
   let order: any;
-  if (query.sort === Sort.DateNewestFirst)
-    order = {
-      createdAt: "desc",
-    };
-  else if (query.sort === Sort.DateOldestFirst)
-    order = {
-      createdAt: "asc",
-    };
-  else if (query.sort === Sort.NameAZ)
-    order = {
-      name: "asc",
-    };
-  else if (query.sort === Sort.NameZA)
-    order = {
-      name: "desc",
-    };
-  else if (query.sort === Sort.DescriptionAZ)
-    order = {
-      name: "asc",
-    };
-  else if (query.sort === Sort.DescriptionZA)
-    order = {
-      name: "desc",
-    };
+  if (query.sort === Sort.DateNewestFirst) order = { createdAt: "desc" };
+  else if (query.sort === Sort.DateOldestFirst) order = { createdAt: "asc" };
+  else if (query.sort === Sort.NameAZ) order = { name: "asc" };
+  else if (query.sort === Sort.NameZA) order = { name: "desc" };
+  else if (query.sort === Sort.DescriptionAZ) order = { description: "asc" };
+  else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
+
+  const searchConditions = [];
+
+  if (query.searchQueryString) {
+    if (query.searchByName) {
+      searchConditions.push({
+        name: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchByUrl) {
+      searchConditions.push({
+        url: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchByDescription) {
+      searchConditions.push({
+        description: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchByTextContent) {
+      searchConditions.push({
+        textContent: {
+          contains: query.searchQueryString,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchByTags) {
+      searchConditions.push({
+        tags: {
+          some: {
+            name: {
+              contains: query.searchQueryString,
+              mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+            },
+            OR: [
+              { ownerId: userId },
+              {
+                links: {
+                  some: {
+                    collection: {
+                      members: {
+                        some: { userId },
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      });
+    }
+  }
+
+  const tagCondition = [];
+
+  if (query.tagId) {
+    tagCondition.push({
+      tags: {
+        some: {
+          id: query.tagId,
+        },
+      },
+    });
+  }
+
+  const collectionCondition = [];
+
+  if (query.collectionId) {
+    collectionCondition.push({
+      collection: {
+        id: query.collectionId,
+      },
+    });
+  }
 
   const links = await prisma.link.findMany({
     take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
     skip: query.cursor ? 1 : undefined,
-    cursor: query.cursor
-      ? {
-          id: query.cursor,
-        }
-      : undefined,
+    cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {
-      collection: {
-        id: query.collectionId ? query.collectionId : undefined, // If collectionId was defined, filter by collection
-        OR: [
-          {
-            ownerId: userId,
-          },
-          {
-            members: {
-              some: {
-                userId,
+      AND: [
+        {
+          collection: {
+            OR: [
+              { ownerId: userId },
+              {
+                members: {
+                  some: { userId },
+                },
               },
-            },
-          },
-        ],
-      },
-      [query.searchQuery ? "OR" : "AND"]: [
-        {
-          pinnedBy: query.pinnedOnly ? { some: { id: userId } } : undefined,
-        },
-        {
-          name: {
-            contains:
-              query.searchQuery && query.searchFilter?.name
-                ? query.searchQuery
-                : undefined,
-            mode: "insensitive",
+            ],
           },
         },
+        ...collectionCondition,
         {
-          url: {
-            contains:
-              query.searchQuery && query.searchFilter?.url
-                ? query.searchQuery
-                : undefined,
-            mode: "insensitive",
-          },
-        },
-        {
-          description: {
-            contains:
-              query.searchQuery && query.searchFilter?.description
-                ? query.searchQuery
-                : undefined,
-            mode: "insensitive",
-          },
-        },
-        {
-          tags:
-            query.searchQuery && !query.searchFilter?.tags
-              ? undefined
-              : {
-                  some: query.tagId
-                    ? {
-                        // If tagId was defined, filter by tag
-                        id: query.tagId,
-                        name:
-                          query.searchQuery && query.searchFilter?.tags
-                            ? {
-                                contains: query.searchQuery,
-                                mode: "insensitive",
-                              }
-                            : undefined,
-                        OR: [
-                          { ownerId: userId }, // Tags owned by the user
-                          {
-                            links: {
-                              some: {
-                                name: {
-                                  contains:
-                                    query.searchQuery &&
-                                    query.searchFilter?.tags
-                                      ? query.searchQuery
-                                      : undefined,
-                                  mode: "insensitive",
-                                },
-                                collection: {
-                                  members: {
-                                    some: {
-                                      userId, // Tags from collections where the user is a member
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                          },
-                        ],
-                      }
+          OR: [
+            ...tagCondition,
+            {
+              [query.searchQueryString ? "OR" : "AND"]: [
+                {
+                  pinnedBy: query.pinnedOnly
+                    ? { some: { id: userId } }
                     : undefined,
                 },
+                ...searchConditions,
+              ],
+            },
+          ],
         },
       ],
     },
@@ -141,9 +145,7 @@ export default async function getLink(userId: number, body: string) {
         select: { id: true },
       },
     },
-    orderBy: order || {
-      createdAt: "desc",
-    },
+    orderBy: order || { createdAt: "desc" },
   });
 
   return { response: links, status: 200 };

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

@@ -0,0 +1,35 @@
+import { prisma } from "@/lib/api/db";
+import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+import removeFile from "@/lib/api/storage/removeFile";
+
+export default async function deleteLink(userId: number, linkId: number) {
+  if (!linkId) return { response: "Please choose a valid link.", status: 401 };
+
+  const collectionIsAccessible = await getPermission({ userId, linkId });
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId && e.canDelete
+  );
+
+  if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+    return { response: "Collection is not accessible.", status: 401 };
+
+  const deleteLink: Link = await prisma.link.delete({
+    where: {
+      id: linkId,
+    },
+  });
+
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+  });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+  });
+  removeFile({
+    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+  });
+
+  return { response: deleteLink, status: 200 };
+}

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

@@ -0,0 +1,44 @@
+import { prisma } from "@/lib/api/db";
+import { Collection, 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 });
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId
+  );
+
+  const isCollectionOwner = collectionIsAccessible?.ownerId === userId;
+
+  if (collectionIsAccessible?.ownerId !== userId && !memberHasAccess)
+    return {
+      response: "Collection is not accessible.",
+      status: 401,
+    };
+  else {
+    const link = await prisma.link.findUnique({
+      where: {
+        id: linkId,
+      },
+      include: {
+        tags: true,
+        collection: true,
+        pinnedBy: isCollectionOwner
+          ? {
+              where: { id: userId },
+              select: { id: true },
+            }
+          : undefined,
+      },
+    });
+
+    return { response: link, status: 200 };
+  }
+}

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

@@ -0,0 +1,110 @@
+import { prisma } from "@/lib/api/db";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+import moveFile from "@/lib/api/storage/moveFile";
+
+export default async function updateLinkById(
+  userId: number,
+  linkId: number,
+  data: LinkIncludingShortenedCollectionAndTags
+) {
+  if (!data || !data.collection.id)
+    return {
+      response: "Please choose a valid link and collection.",
+      status: 401,
+    };
+
+  const collectionIsAccessible = await getPermission({ userId, linkId });
+
+  const memberHasAccess = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId && e.canUpdate
+  );
+
+  const isCollectionOwner =
+    collectionIsAccessible?.ownerId === data.collection.ownerId &&
+    data.collection.ownerId === userId;
+
+  const unauthorizedSwitchCollection =
+    !isCollectionOwner && collectionIsAccessible?.id !== data.collection.id;
+
+  // Makes sure collection members (non-owners) cannot move a link to/from a collection.
+  if (unauthorizedSwitchCollection)
+    return {
+      response: "You can't move a link to/from a collection you don't own.",
+      status: 401,
+    };
+  else if (collectionIsAccessible?.ownerId !== userId && !memberHasAccess)
+    return {
+      response: "Collection is not accessible.",
+      status: 401,
+    };
+  else {
+    const updatedLink = await prisma.link.update({
+      where: {
+        id: linkId,
+      },
+      data: {
+        name: data.name,
+        description: data.description,
+        collection: {
+          connect: {
+            id: data.collection.id,
+          },
+        },
+        tags: {
+          set: [],
+          connectOrCreate: data.tags.map((tag) => ({
+            where: {
+              name_ownerId: {
+                name: tag.name,
+                ownerId: data.collection.ownerId,
+              },
+            },
+            create: {
+              name: tag.name,
+              owner: {
+                connect: {
+                  id: data.collection.ownerId,
+                },
+              },
+            },
+          })),
+        },
+        pinnedBy:
+          data?.pinnedBy && data.pinnedBy[0]
+            ? { connect: { id: userId } }
+            : { disconnect: { id: userId } },
+      },
+      include: {
+        tags: true,
+        collection: true,
+        pinnedBy: isCollectionOwner
+          ? {
+              where: { id: userId },
+              select: { id: true },
+            }
+          : undefined,
+      },
+    });
+
+    if (collectionIsAccessible?.id !== data.collection.id) {
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+        `archives/${data.collection.id}/${linkId}.pdf`
+      );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+        `archives/${data.collection.id}/${linkId}.png`
+      );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+        `archives/${data.collection.id}/${linkId}_readability.json`
+      );
+    }
+
+    return { response: updatedLink, status: 200 };
+  }
+}

lib/api/controllers/links/postLink.ts

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import getTitle from "@/lib/api/getTitle";
 import archive from "@/lib/api/archive";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
 
@@ -20,21 +20,17 @@ export default async function postLink(
     };
   }
 
-  link.collection.name = link.collection.name.trim();
-
   if (!link.collection.name) {
-    link.collection.name = "Unnamed Collection";
+    link.collection.name = "Unorganized";
   }
 
+  link.collection.name = link.collection.name.trim();
+
   if (link.collection.id) {
-    const collectionIsAccessible = (await getPermission(
+    const collectionIsAccessible = await getPermission({
       userId,
-      link.collection.id
-    )) as
-      | (Collection & {
-          members: UsersAndCollections[];
-        })
-      | null;
+      collectionId: link.collection.id,
+    });
 
     const memberHasAccess = collectionIsAccessible?.members.some(
       (e: UsersAndCollections) => e.userId === userId && e.canCreate
@@ -51,11 +47,12 @@ export default async function postLink(
       ? link.description
       : await getTitle(link.url);
 
-  const newLink: Link = await prisma.link.create({
+  const newLink = await prisma.link.create({
     data: {
       url: link.url,
       name: link.name,
       description,
+      readabilityPath: "pending",
       collection: {
         connectOrCreate: {
           where: {
@@ -94,7 +91,7 @@ export default async function postLink(
 
   createFolder({ filePath: `archives/${newLink.collectionId}` });
 
-  archive(newLink.url, newLink.collectionId, newLink.id);
+  archive(newLink.id, newLink.url, userId);
 
   return { response: newLink, status: 200 };
 }

lib/api/controllers/links/updateLink.ts

@@ -1,103 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
-import getPermission from "@/lib/api/getPermission";
-
-export default async function updateLink(
-  link: LinkIncludingShortenedCollectionAndTags,
-  userId: number
-) {
-  if (!link || !link.collection.id)
-    return {
-      response: "Please choose a valid link and collection.",
-      status: 401,
-    };
-
-  const targetLink = (await getPermission(
-    userId,
-    link.collection.id,
-    link.id
-  )) as
-    | (Link & {
-        collection: Collection & {
-          members: UsersAndCollections[];
-        };
-      })
-    | null;
-
-  const memberHasAccess = targetLink?.collection.members.some(
-    (e: UsersAndCollections) => e.userId === userId && e.canUpdate
-  );
-
-  const isCollectionOwner =
-    targetLink?.collection.ownerId === link.collection.ownerId &&
-    link.collection.ownerId === userId &&
-    targetLink?.collection.ownerId === userId;
-
-  // Makes sure collection members (non-owners) cannot move a link to/from a collection.
-  if (!isCollectionOwner)
-    return {
-      response: "You can't move a link to/from a collection you don't own.",
-      status: 401,
-    };
-  else if (targetLink?.collection.ownerId !== userId && !memberHasAccess)
-    return {
-      response: "Collection is not accessible.",
-      status: 401,
-    };
-  else {
-    const updatedLink = await prisma.link.update({
-      where: {
-        id: link.id,
-      },
-      data: {
-        name: link.name,
-        description: link.description,
-        collection:
-          targetLink?.collection.ownerId === link.collection.ownerId &&
-          link.collection.ownerId === userId
-            ? {
-                connect: {
-                  id: link.collection.id,
-                },
-              }
-            : undefined,
-        tags: {
-          set: [],
-          connectOrCreate: link.tags.map((tag) => ({
-            where: {
-              name_ownerId: {
-                name: tag.name,
-                ownerId: link.collection.ownerId,
-              },
-            },
-            create: {
-              name: tag.name,
-              owner: {
-                connect: {
-                  id: link.collection.ownerId,
-                },
-              },
-            },
-          })),
-        },
-        pinnedBy:
-          link?.pinnedBy && link.pinnedBy[0]
-            ? { connect: { id: userId } }
-            : { disconnect: { id: userId } },
-      },
-      include: {
-        tags: true,
-        collection: true,
-        pinnedBy: isCollectionOwner
-          ? {
-              where: { id: userId },
-              select: { id: true },
-            }
-          : undefined,
-      },
-    });
-
-    return { response: updatedLink, status: 200 };
-  }
-}

lib/api/controllers/migration/exportData.ts

@@ -0,0 +1,37 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function exportData(userId: number) {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    include: {
+      collections: {
+        include: {
+          links: {
+            include: {
+              tags: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!user) return { response: "User not found.", status: 404 };
+
+  const { password, id, ...userData } = user;
+
+  function redactIds(obj: any) {
+    if (Array.isArray(obj)) {
+      obj.forEach((o) => redactIds(o));
+    } else if (obj !== null && typeof obj === "object") {
+      delete obj.id;
+      for (let key in obj) {
+        redactIds(obj[key]);
+      }
+    }
+  }
+
+  redactIds(userData);
+
+  return { response: userData, status: 200 };
+}

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -0,0 +1,103 @@
+import { prisma } from "@/lib/api/db";
+import { Backup } from "@/types/global";
+import createFolder from "@/lib/api/storage/createFolder";
+import { JSDOM } from "jsdom";
+
+export default async function importFromHTMLFile(
+  userId: number,
+  rawData: string
+) {
+  const dom = new JSDOM(rawData);
+  const document = dom.window.document;
+
+  const folders = document.querySelectorAll("H3");
+
+  await prisma
+    .$transaction(
+      async () => {
+        // @ts-ignore
+        for (const folder of folders) {
+          const findCollection = await prisma.user.findUnique({
+            where: {
+              id: userId,
+            },
+            select: {
+              collections: {
+                where: {
+                  name: folder.textContent.trim(),
+                },
+              },
+            },
+          });
+
+          const checkIfCollectionExists = findCollection?.collections[0];
+
+          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,
+              },
+            });
+
+            createFolder({ filePath: `archives/${newCollection.id}` });
+
+            collectionId = newCollection.id;
+          }
+
+          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,
+                                    },
+                                  },
+                                },
+                              }
+                            : undefined
+                        ),
+                    }
+                  : undefined,
+                description: bookmark.getAttribute("DESCRIPTION")
+                  ? bookmark.getAttribute("DESCRIPTION")
+                  : "",
+                collectionId: collectionId,
+                createdAt: new Date(),
+              },
+            });
+          }
+        }
+      },
+      { timeout: 30000 }
+    )
+    .catch((err) => console.log(err));
+
+  return { response: "Success.", status: 200 };
+}

lib/api/controllers/migration/importFromLinkwarden.ts

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

lib/api/controllers/public/collections/getPublicCollection.ts

@@ -0,0 +1,32 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getPublicCollection(id: number) {
+  const collection = await prisma.collection.findFirst({
+    where: {
+      id,
+      isPublic: true,
+    },
+    include: {
+      members: {
+        include: {
+          user: {
+            select: {
+              username: true,
+              name: true,
+              image: true,
+            },
+          },
+        },
+      },
+      _count: {
+        select: { links: true },
+      },
+    },
+  });
+
+  if (collection) {
+    return { response: collection, status: 200 };
+  } else {
+    return { response: "Collection not found.", status: 400 };
+  }
+}

lib/api/controllers/public/getCollection.ts

@@ -1,45 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import { PublicLinkRequestQuery } from "@/types/global";
-
-export default async function getCollection(body: string) {
-  const query: PublicLinkRequestQuery = JSON.parse(decodeURIComponent(body));
-  console.log(query);
-
-  let data;
-
-  const collection = await prisma.collection.findFirst({
-    where: {
-      id: query.collectionId,
-      isPublic: true,
-    },
-  });
-
-  if (collection) {
-    const links = await prisma.link.findMany({
-      take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
-      skip: query.cursor ? 1 : undefined,
-      cursor: query.cursor
-        ? {
-            id: query.cursor,
-          }
-        : undefined,
-      where: {
-        collection: {
-          id: query.collectionId,
-        },
-      },
-      include: {
-        tags: true,
-      },
-      orderBy: {
-        createdAt: "desc",
-      },
-    });
-
-    data = { ...collection, links: [...links] };
-
-    return { response: data, status: 200 };
-  } else {
-    return { response: "Collection not found...", status: 400 };
-  }
-}