hotfix

update version number

.devcontainer/devcontainer.json

@@ -1,22 +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",
+  "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": {},
+  // 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 '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",
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+  // Configure tool-specific properties.
+  // "customizations": {},
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	"remoteUser": "root"
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  "remoteUser": "root"
 }

.env.sample

@@ -1,25 +1,392 @@
 NEXTAUTH_SECRET=very_sensitive_secret
+NEXTAUTH_URL=http://localhost:3000/api/v1/auth
+
+# Manual installation database settings
 DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
-NEXTAUTH_URL=http://localhost:3000
+
+# Docker installation database settings
+POSTGRES_PASSWORD=super_secret_password
 
 # Additional Optional Settings
-
 PAGINATION_TAKE_COUNT=
 STORAGE_FOLDER=
 AUTOSCROLL_TIMEOUT=
 NEXT_PUBLIC_DISABLE_REGISTRATION=
+NEXT_PUBLIC_CREDENTIALS_ENABLED=
+DISABLE_NEW_SSO_USERS=
 RE_ARCHIVE_LIMIT=
+NEXT_PUBLIC_MAX_FILE_SIZE=
+MAX_LINKS_PER_USER=
+ARCHIVE_TAKE_COUNT=
+BROWSER_TIMEOUT=
+IGNORE_UNAUTHORIZED_CA=
+IGNORE_HTTPS_ERRORS=
+IGNORE_URL_SIZE_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=
 
-# Docker postgres settings
-POSTGRES_PASSWORD=
+# Proxy settings
+PROXY=
+PROXY_USERNAME=
+PROXY_PASSWORD=
+PROXY_BYPASS=
+
+# PDF archive settings
+PDF_MARGIN_TOP=
+PDF_MARGIN_BOTTOM=
+
+#
+# SSO Providers
+#
+
+# 42 School
+NEXT_PUBLIC_FORTYTWO_ENABLED=
+FORTYTWO_CUSTOM_NAME=
+FORTYTWO_CLIENT_ID=
+FORTYTWO_CLIENT_SECRET=
+
+# Apple
+NEXT_PUBLIC_APPLE_ENABLED=
+APPLE_CUSTOM_NAME=
+APPLE_ID=
+APPLE_SECRET=
+
+# Atlassian
+NEXT_PUBLIC_ATLASSIAN_ENABLED=
+ATLASSIAN_CUSTOM_NAME=
+ATLASSIAN_CLIENT_ID=
+ATLASSIAN_CLIENT_SECRET=
+ATLASSIAN_SCOPE=
+
+# Auth0
+NEXT_PUBLIC_AUTH0_ENABLED=
+AUTH0_CUSTOM_NAME=
+AUTH0_ISSUER=
+AUTH0_CLIENT_SECRET=
+AUTH0_CLIENT_ID=
+
+# Authentik
+NEXT_PUBLIC_AUTHENTIK_ENABLED=
+AUTHENTIK_CUSTOM_NAME=
+AUTHENTIK_ISSUER=
+AUTHENTIK_CLIENT_ID=
+AUTHENTIK_CLIENT_SECRET=
+
+# Battle.net
+NEXT_PUBLIC_BATTLENET_ENABLED=
+BATTLENET_CUSTOM_NAME=
+BATTLENET_CLIENT_ID=
+BATTLENET_CLIENT_SECRET=
+BATLLENET_ISSUER=
+
+# Box
+NEXT_PUBLIC_BOX_ENABLED=
+BOX_CUSTOM_NAME=
+BOX_CLIENT_ID=
+BOX_CLIENT_SECRET=
+
+# Bungie
+NEXT_PUBLIC_BUNGIE_ENABLED=
+BUNGIE_CUSTOM_NAME=
+BUNGIE_CLIENT_ID=
+BUNGIE_CLIENT_SECRET=
+BUNGIE_API_KEY=
+
+# Cognito
+NEXT_PUBLIC_COGNITO_ENABLED=
+COGNITO_CUSTOM_NAME=
+COGNITO_CLIENT_ID=
+COGNITO_CLIENT_SECRET=
+COGNITO_ISSUER=
+
+# Coinbase
+NEXT_PUBLIC_COINBASE_ENABLED=
+COINBASE_CUSTOM_NAME=
+COINBASE_CLIENT_ID=
+COINBASE_CLIENT_SECRET=
+
+# Discord
+NEXT_PUBLIC_DISCORD_ENABLED=
+DISCORD_CUSTOM_NAME=
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+
+# Dropbox
+NEXT_PUBLIC_DROPBOX_ENABLED=
+DROPBOX_CUSTOM_NAME=
+DROPBOX_CLIENT_ID=
+DROPBOX_CLIENT_SECRET=
+
+# DuendeIndentityServer6
+NEXT_PUBLIC_DUENDE_IDS6_ENABLED=
+DUENDE_IDS6_CUSTOM_NAME=
+DUENDE_IDS6_CLIENT_ID=
+DUENDE_IDS6_CLIENT_SECRET=
+DUENDE_IDS6_ISSUER=
+
+# EVE Online
+NEXT_PUBLIC_EVEONLINE_ENABLED=
+EVEONLINE_CUSTOM_NAME=
+EVEONLINE_CLIENT_ID=
+EVEONLINE_CLIENT_SECRET=
+
+# Facebook
+NEXT_PUBLIC_FACEBOOK_ENABLED=
+FACEBOOK_CUSTOM_NAME=
+FACEBOOK_CLIENT_ID=
+FACEBOOK_CLIENT_SECRET=
+
+# FACEIT
+NEXT_PUBLIC_FACEIT_ENABLED=
+FACEIT_CUSTOM_NAME=
+FACEIT_CLIENT_ID=
+FACEIT_CLIENT_SECRET=
+
+# Foursquare
+NEXT_PUBLIC_FOURSQUARE_ENABLED=
+FOURSQUARE_CUSTOM_NAME=
+FOURSQUARE_CLIENT_ID=
+FOURSQUARE_CLIENT_SECRET=
+FOURSQUARE_APIVERSION=
+
+# Freshbooks
+NEXT_PUBLIC_FRESHBOOKS_ENABLED=
+FRESHBOOKS_CUSTOM_NAME=
+FRESHBOOKS_CLIENT_ID=
+FRESHBOOKS_CLIENT_SECRET=
+
+# FusionAuth
+NEXT_PUBLIC_FUSIONAUTH_ENABLED=
+FUSIONAUTH_CUSTOM_NAME=
+FUSIONAUTH_CLIENT_ID=
+FUSIONAUTH_CLIENT_SECRET=
+FUSIONAUTH_ISSUER=
+FUSIONAUTH_TENANT_ID=
+
+# GitHub
+NEXT_PUBLIC_GITHUB_ENABLED=
+GITHUB_CUSTOM_NAME=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+# GitLab
+NEXT_PUBLIC_GITLAB_ENABLED=
+GITLAB_CUSTOM_NAME=
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+
+# Google
+NEXT_PUBLIC_GOOGLE_ENABLED=
+GOOGLE_CUSTOM_NAME=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# HubSpot
+NEXT_PUBLIC_HUBSPOT_ENABLED=
+HUBSPOT_CUSTOM_NAME=
+HUBSPOT_CLIENT_ID=
+HUBSPOT_CLIENT_SECRET=
+
+# IdentityServer4
+NEXT_PUBLIC_IDS4_ENABLED=
+IDS4_CUSTOM_NAME=
+IDS4_CLIENT_ID=
+IDS4_CLIENT_SECRET=
+IDS4_ISSUER=
+
+# Kakao
+NEXT_PUBLIC_KAKAO_ENABLED=
+KAKAO_CUSTOM_NAME=
+KAKAO_CLIENT_ID=
+KAKAO_CLIENT_SECRET=
+
+# Keycloak
+NEXT_PUBLIC_KEYCLOAK_ENABLED=
+KEYCLOAK_CUSTOM_NAME=
+KEYCLOAK_ISSUER=
+KEYCLOAK_CLIENT_ID=
+KEYCLOAK_CLIENT_SECRET=
+
+# LINE
+NEXT_PUBLIC_LINE_ENABLED=
+LINE_CUSTOM_NAME=
+LINE_CLIENT_ID=
+LINE_CLIENT_SECRET=
+
+# LinkedIn
+NEXT_PUBLIC_LINKEDIN_ENABLED=
+LINKEDIN_CUSTOM_NAME=
+LINKEDIN_CLIENT_ID=
+LINKEDIN_CLIENT_SECRET=
+
+# Mailchimp
+NEXT_PUBLIC_MAILCHIMP_ENABLED=
+MAILCHIMP_CUSTOM_NAME=
+MAILCHIMP_CLIENT_ID=
+MAILCHIMP_CLIENT_SECRET=
+
+# Mail.ru
+NEXT_PUBLIC_MAILRU_ENABLED=
+MAILRU_CUSTOM_NAME=
+MAILRU_CLIENT_ID=
+MAILRU_CLIENT_SECRET=
+
+# Naver
+NEXT_PUBLIC_NAVER_ENABLED=
+NAVER_CUSTOM_NAME=
+NAVER_CLIENT_ID=
+NAVER_CLIENT_SECRET=
+
+# Netlify
+NEXT_PUBLIC_NETLIFY_ENABLED=
+NETLIFY_CUSTOM_NAME=
+NETLIFY_CLIENT_ID=
+NETLIFY_CLIENT_SECRET=
+
+# Okta
+NEXT_PUBLIC_OKTA_ENABLED=
+OKTA_CUSTOM_NAME=
+OKTA_CLIENT_ID=
+OKTA_CLIENT_SECRET=
+OKTA_ISSUER=
+
+# OneLogin
+NEXT_PUBLIC_ONELOGIN_ENABLED=
+ONELOGIN_CUSTOM_NAME=
+ONELOGIN_CLIENT_ID=
+ONELOGIN_CLIENT_SECRET=
+ONELOGIN_ISSUER=
+
+# Osso
+NEXT_PUBLIC_OSSO_ENABLED=
+OSSO_CUSTOM_NAME=
+OSSO_CLIENT_ID=
+OSSO_CLIENT_SECRET=
+OSSO_ISSUER=
+
+# osu!
+NEXT_PUBLIC_OSU_ENABLED=
+OSU_CUSTOM_NAME=
+OSU_CLIENT_ID=
+OSU_CLIENT_SECRET=
+
+# Patreon
+NEXT_PUBLIC_PATREON_ENABLED=
+PATREON_CUSTOM_NAME=
+PATREON_CLIENT_ID=
+PATREON_CLIENT_SECRET=
+
+# Pinterest
+NEXT_PUBLIC_PINTEREST_ENABLED=
+PINTEREST_CUSTOM_NAME=
+PINTEREST_CLIENT_ID=
+PINTEREST_CLIENT_SECRET=
+
+# Pipedrive
+NEXT_PUBLIC_PIPEDRIVE_ENABLED=
+PIPEDRIVE_CUSTOM_NAME=
+PIPEDRIVE_CLIENT_ID=
+PIPEDRIVE_CLIENT_SECRET=
+
+# Reddit
+NEXT_PUBLIC_REDDIT_ENABLED=
+REDDIT_CUSTOM_NAME=
+REDDIT_CLIENT_ID=
+REDDIT_CLIENT_SECRET=
+
+# Salesforce
+NEXT_PUBLIC_SALESFORCE_ENABLED=
+SALESFORCE_CUSTOM_NAME=
+SALESFORCE_CLIENT_ID=
+SALESFORCE_CLIENT_SECRET=
+
+# Slack
+NEXT_PUBLIC_SLACK_ENABLED=
+SLACK_CUSTOM_NAME=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+# Spotify
+NEXT_PUBLIC_SPOTIFY_ENABLED=
+SPOTIFY_CUSTOM_NAME=
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+
+# Strava
+NEXT_PUBLIC_STRAVA_ENABLED=
+STRAVA_CUSTOM_NAME=
+STRAVA_CLIENT_ID=
+STRAVA_CLIENT_SECRET=
+
+# Todoist
+NEXT_PUBLIC_TODOIST_ENABLED=
+TODOIST_CUSTOM_NAME=
+TODOIST_CLIENT_ID=
+TODOIST_CLIENT_SECRET=
+
+# Twitch
+NEXT_PUBLIC_TWITCH_ENABLED=
+TWITCH_CUSTOM_NAME=
+TWITCH_CLIENT_ID=
+TWITCH_CLIENT_SECRET=
+
+# United Effects
+NEXT_PUBLIC_UNITED_EFFECTS_ENABLED=
+UNITED_EFFECTS_CUSTOM_NAME=
+UNITED_EFFECTS_CLIENT_ID=
+UNITED_EFFECTS_CLIENT_SECRET=
+UNITED_EFFECTS_ISSUER=
+
+# VK
+NEXT_PUBLIC_VK_ENABLED=
+VK_CUSTOM_NAME=
+VK_CLIENT_ID=
+VK_CLIENT_SECRET=
+
+# Wikimedia
+NEXT_PUBLIC_WIKIMEDIA_ENABLED=
+WIKIMEDIA_CUSTOM_NAME=
+WIKIMEDIA_CLIENT_ID=
+WIKIMEDIA_CLIENT_SECRET=
+
+# Wordpress.com
+NEXT_PUBLIC_WORDPRESS_ENABLED=
+WORDPRESS_CUSTOM_NAME=
+WORDPRESS_CLIENT_ID=
+WORDPRESS_CLIENT_SECRET=
+
+# Yandex
+NEXT_PUBLIC_YANDEX_ENABLED=
+YANDEX_CUSTOM_NAME=
+YANDEX_CLIENT_ID=
+YANDEX_CLIENT_SECRET=
+
+# Zitadel
+NEXT_PUBLIC_ZITADEL_ENABLED=
+ZITADEL_CUSTOM_NAME=
+ZITADEL_CLIENT_ID=
+ZITADEL_CLIENT_SECRET=
+ZITADEL_ISSUER=
+
+# Zoho
+NEXT_PUBLIC_ZOHO_ENABLED=
+ZOHO_CUSTOM_NAME=
+ZOHO_CLIENT_ID=
+ZOHO_CLIENT_SECRET=
+
+# Zoom
+NEXT_PUBLIC_ZOOM_ENABLED=
+ZOOM_CUSTOM_NAME=
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off"
   }
 }

.github/SECURITY.md

@@ -1,17 +1,19 @@
-# Security Policy
+# Security
 
-## Supported Versions
+The Linkwarden team and community take security bugs in Linkwarden seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
 
-| Version | Supported |
-| ------- | --------- |
-| 1.x.x   | ✅        |
+# Reporting Security Issues
 
-## Reporting a Vulnerability
+**Please do not report security vulnerabilities through public GitHub issues.**
 
-First off, we really appreciate the time you spent!
+Instead, please use the GitHub Security Advisory ["Report a Vulnerability"](https://github.com/linkwarden/linkwarden/security/advisories/new) tab.
 
-If you found a vulnerability, these are the ways you can reach us:
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message:
+[security@linkwarden.app](mailto:security@linkwarden.app)
 
-Email: [security@linkwarden.app](mailto:security@linkwarden.app)
 
-Or you can directly DM me via Twitter: [@daniel31x13](https://twitter.com/Daniel31X13).
+After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
+
+# Preferred Languages
+
+We prefer all communications to be in English.

.gitignore

@@ -46,4 +46,5 @@ prisma/dev.db
 /playwright/.cache/
 
 # docker
-pgdata
+pgdata
+certificates

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+public
+
+*.lock
+*.log
+
+.github
+
+data
+pgdata

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2
+}

.vscode/settings.json

@@ -0,0 +1 @@
+{}

ARCHITECTURE.md

@@ -0,0 +1,45 @@
+# Architecture
+
+This is a summary of the architecture of Linkwarden. It's intended as a primer for collaborators to get a high-level understanding of the project.
+
+When you start Linkwarden, there are mainly two components that run:
+
+- The NextJS app, This is the main app and it's responsible for serving the frontend and handling the API routes.
+- [The Background Worker](https://github.com/linkwarden/linkwarden/blob/main/scripts/worker.ts), This is a separate `ts-node` process that runs in the background and is responsible for archiving links.
+
+## Main Tech Stack
+
+- [NextJS](https://github.com/vercel/next.js)
+- [TypeScript](https://github.com/microsoft/TypeScript)
+- [Tailwind](https://github.com/tailwindlabs/tailwindcss)
+- [DaisyUI](https://github.com/saadeghi/daisyui)
+- [Prisma](https://github.com/prisma/prisma)
+- [Playwright](https://github.com/microsoft/playwright)
+- [Zustand](https://github.com/pmndrs/zustand)
+
+## Folder Structure
+
+Here's a summary of the main files and folders in the project:
+
+```
+linkwarden
+├── components         # React components
+├── hooks              # React reusable hooks
+├── layouts            # Layouts for pages
+├── lib
+│   ├── api            # Server-side functions (controllers, etc.)
+│   ├── client         # Client-side functions
+│   └── shared         # Shared functions between client and server
+├── pages              # Pages and API routes
+├── prisma             # Prisma schema and migrations
+├── scripts
+│   ├── migration      # Scripts for breaking changes
+│   └── worker.ts      # Background worker for archiving links
+├── store              # Zustand stores
+├── styles             # Styles
+└── types              # TypeScript types
+```
+
+## Versioning
+
+We use semantic versioning for the project. You can track the changes from the [Releases](https://github.com/linkwarden/linkwarden/releases).

Dockerfile

@@ -9,7 +9,7 @@ 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 --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn yarn install --network-timeout 10000000
 
 RUN npx playwright install-deps && \
     apt-get clean && \

README.md

@@ -2,36 +2,56 @@
   <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 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">
+<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat" alt="Discord"></a>
+<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a>
+
+<img alt="GitHub commits since latest release" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/latest/dev?style=for-the-badge&label=COMMITS%20SINCE%20LATEST%20RELEASE">
 
 </div>
 
 <div align='center'>
 
-[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) | [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>
 
 ## Intro & motivation
 
-**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, organize and archive webpages.** The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://www.howtogeek.com/786227/what-is-link-rot-and-how-does-it-threaten-the-web/)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
+**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, organize and archive webpages.**
+
+The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://www.howtogeek.com/786227/what-is-link-rot-and-how-does-it-threaten-the-web/)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
 
 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" />
-
-> **Note**
+> [!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.jpg" width="23%" />
+
+<img src="./assets/list_view.jpg" width="23%" />
+
+<img src="./assets/all_collections.jpg" width="23%" />
+
+<img src="./assets/manage_team.jpg" width="23%" />
+
+<img src="./assets/readable_view.jpg" width="23%" />
+
+<img src="./assets/preserved_formats.jpg" width="23%" />
+
+<img src="./assets/public_page.jpg" width="23%" />
+
+<img src="./assets/light_dashboard.jpg" width="23%" />
+</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 that you don't use the old version because it is no longer maintained and has far fewer features. However, if you still want to check it out, we've forked the old version from the current repository into [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>
 
@@ -39,17 +59,36 @@ We highly recommend that you don't use the old version because it is no longer m
 
 - 📸 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.
+- 📂 Organize links by collection, sub-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.
+- 🎛️ 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.
+- ⬇️ Import and export your bookmarks.
+- 🔐 SSO integration. (Enterprise and Self-hosted users only)
+- 📦 Installable Progressive Web App (PWA).
+- 🍎 iOS Shortcut to save links to Linkwarden.
+- 🔑 API keys.
+- ✅ Bulk actions.
+- ✨ And so many more features!
+
+## Like what we're doing? Give us a Star ⭐
+
+![Star Us](https://raw.githubusercontent.com/linkwarden/linkwarden/main/assets/star_repo.gif)
+
+## We're building our Community 🌐
+
+Join and follow us in the following platforms to stay up to date about the most recent features and for support:
+
+<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat" alt="Discord"></a>
+
+<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a>
+
+<a href="https://fosstodon.org/@linkwarden"><img src="https://img.shields.io/mastodon/follow/110748840237143200?domain=https%3A%2F%2Ffosstodon.org" alt="Mastodon"></a>
 
 ## Suggestions
 
@@ -63,32 +102,14 @@ Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/p
 
 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
-- TypeScript
-- Tailwind
-- Prisma
-- Zustand
-
 ## 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 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 and the main tech stack.
 
 ## 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
-
-<div align="center">
-<img src="./assets/collections.png" height="150" />
-
-<img src="./assets/collaborators.png" height="150" />
-
-<img src="./assets/link_details.png" height="150" />
-</div>
-
 ## Support ❤
 
 Other than using our official [Cloud](https://linkwarden.app/#pricing) offering, any [donations](https://opencollective.com/linkwarden) are highly appreciated as well!
@@ -100,3 +121,9 @@ Here are the other ways to support/cheer this project:
 - Referring Linkwarden to a friend.
 
 If you did any of the above, Thanksss! Otherwise thanks.
+
+## Thanks to All the Contributors 💪
+
+Huge thanks to these guys for spending their time helping Linkwarden grow. They rock! ⚡️
+
+<img src="https://contributors-img.web.app/image?repo=linkwarden/linkwarden" alt="Contributors"/>

components/AccentSubmitButton.tsx

@@ -0,0 +1,29 @@
+type Props = {
+  onClick?: Function;
+  label: string;
+  loading?: boolean;
+  className?: string;
+  type?: "button" | "submit" | "reset" | undefined;
+};
+
+export default function AccentSubmitButton({
+  onClick,
+  label,
+  loading,
+  className,
+  type,
+}: Props) {
+  return (
+    <button
+      type={type ? type : undefined}
+      className={`border primary-btn-gradient select-none duration-200 bg-black border-[oklch(var(--p))] hover:border-[#0070b5] rounded-lg text-center px-4 py-2 text-white active:scale-95 tracking-wider w-fit flex justify-center items-center gap-2 ${
+        className || ""
+      }`}
+      onClick={() => {
+        if (loading !== undefined && !loading && onClick) onClick();
+      }}
+    >
+      <p className="font-bold">{label}</p>
+    </button>
+  );
+}

components/AnnouncementBar.tsx

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

components/Checkbox.tsx

@@ -1,5 +1,3 @@
-import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEventHandler } from "react";
 
 type Props = {
@@ -12,23 +10,17 @@ type Props = {
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
     <label
-      className={`cursor-pointer flex items-center gap-2 ${className || ""}`}
+      className={`label cursor-pointer flex gap-2 justify-start ${
+        className || ""
+      }`}
     >
       <input
         type="checkbox"
         checked={state}
         onChange={onClick}
-        className="peer sr-only"
+        className="checkbox checkbox-primary"
       />
-      <FontAwesomeIcon
-        icon={faSquareCheck}
-        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-500 dark:text-sky-500 peer-checked:hidden block"
-      />
-      <span className="rounded select-none">{label}</span>
+      <span className="label-text">{label}</span>
     </label>
   );
 }

components/CollectionCard.tsx

@@ -1,31 +1,24 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import Dropdown from "./Dropdown";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 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";
+import useLocalSettingsStore from "@/store/localSettings";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import useAccountStore from "@/store/account";
+import EditCollectionModal from "./ModalContent/EditCollectionModal";
+import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
+import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 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 { settings } = useLocalSettingsStore();
+  const { account } = useAccountStore();
 
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
@@ -36,144 +29,190 @@ export default function CollectionCard({ collection, className }: Props) {
     }
   );
 
-  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
-
   const permissions = usePermissions(collection.id as number);
 
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (collection && collection.ownerId !== account.id) {
+        const owner = await getPublicUserData(collection.ownerId as number);
+        setCollectionOwner(owner);
+      } else if (collection && collection.ownerId === account.id) {
+        setCollectionOwner({
+          id: account.id as number,
+          name: account.name,
+          username: account.username as string,
+          image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [collection]);
+
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [editCollectionSharingModal, setEditCollectionSharingModal] =
+    useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
   return (
-    <>
+    <div className="relative">
+      <div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-20">
+        <div
+          tabIndex={0}
+          role="button"
+          onMouseDown={dropdownTriggerer}
+          className="btn btn-ghost btn-sm btn-square text-neutral"
+        >
+          <i className="bi-three-dots text-xl" title="More"></i>
+        </div>
+        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+          {permissions === true ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setEditCollectionModal(true);
+                }}
+              >
+                Edit Collection Info
+              </div>
+            </li>
+          ) : undefined}
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                setEditCollectionSharingModal(true);
+              }}
+            >
+              {permissions === true ? "Share and Collaborate" : "View Team"}
+            </div>
+          </li>
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                setDeleteCollectionModal(true);
+              }}
+            >
+              {permissions === true ? "Delete Collection" : "Leave Collection"}
+            </div>
+          </li>
+        </ul>
+      </div>
       <div
+        className="flex items-center absolute bottom-3 left-3 z-10 btn px-2 btn-ghost rounded-full"
+        onClick={() => setEditCollectionSharingModal(true)}
+      >
+        {collectionOwner.id ? (
+          <ProfilePhoto
+            src={collectionOwner.image || undefined}
+            name={collectionOwner.name}
+          />
+        ) : undefined}
+        {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}
+                name={e.user.name}
+                className="-ml-3"
+              />
+            );
+          })
+          .slice(0, 3)}
+        {collection.members.length - 3 > 0 ? (
+          <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+            <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+              <span>+{collection.members.length - 3}</span>
+            </div>
+          </div>
+        ) : null}
+      </div>
+      <Link
+        href={`/collections/${collection.id}`}
         style={{
           backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
-            theme === "dark" ? "#262626" : "#f3f4f6"
-          } 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+            settings.theme === "dark" ? "oklch(var(--b2))" : "oklch(var(--b2))"
+          } 50%, ${
+            settings.theme === "dark" ? "oklch(var(--b2))" : "oklch(var(--b2))"
+          } 100%)`,
         }}
-        className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
-          className || ""
-        }`}
+        className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content"
       >
-        <div
-          onClick={(e) => setExpandDropdown({ x: e.clientX, y: e.clientY })}
-          id={"expand-dropdown" + collection.id}
-          className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
-        >
-          <FontAwesomeIcon
-            icon={faEllipsis}
-            id={"expand-dropdown" + collection.id}
-            className="w-5 h-5 text-gray-500 dark:text-gray-300"
-          />
-        </div>
-        <Link
-          href={`/collections/${collection.id}`}
-          className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
-        >
-          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
-            {collection.name}
-          </p>
-          <div className="flex justify-between items-center">
-            <div className="flex items-center w-full">
-              {collection.members
-                .sort((a, b) => (a.userId as number) - (b.userId as number))
-                .map((e, i) => {
-                  return (
-                    <ProfilePhoto
-                      key={i}
-                      src={e.user.image ? e.user.image : undefined}
-                      className="-mr-3 border-[3px]"
-                    />
-                  );
-                })
-                .slice(0, 4)}
-              {collection.members.length - 4 > 0 ? (
-                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
-                  +{collection.members.length - 4}
-                </div>
-              ) : null}
-            </div>
-            <div className="text-right w-40">
-              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+        <div className="card-body flex flex-col justify-between min-h-[12rem]">
+          <div className="flex justify-between">
+            <p className="card-title break-words line-clamp-2 w-full">
+              {collection.name}
+            </p>
+            <div className="w-8 h-8 ml-10"></div>
+          </div>
+
+          <div className="flex justify-end items-center">
+            <div className="text-right">
+              <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
-                  <FontAwesomeIcon
-                    icon={faGlobe}
+                  <i
+                    className="bi-globe2 drop-shadow text-neutral"
                     title="This collection is being shared publicly."
-                    className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
-                  />
+                  ></i>
                 ) : undefined}
-                <FontAwesomeIcon
-                  icon={faLink}
-                  className="w-5 h-5 text-gray-500 dark:text-gray-300"
-                />
+                <i
+                  className="bi-link-45deg text-lg text-neutral"
+                  title="This collection is being shared publicly."
+                ></i>
                 {collection._count && collection._count.links}
               </div>
-              <div className="flex items-center justify-end gap-1 text-gray-500 dark:text-gray-300">
-                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-                <p className="font-bold text-xs">{formattedDate}</p>
+              <div className="flex items-center justify-end gap-1 text-neutral">
+                <p className="font-bold text-xs flex gap-1 items-center">
+                  <i
+                    className="bi-calendar3 text-neutral"
+                    title="This collection is being shared publicly."
+                  ></i>
+                  {formattedDate}
+                </p>
               </div>
             </div>
           </div>
-        </Link>
-      </div>
-      {expandDropdown ? (
-        <Dropdown
-          points={{ x: expandDropdown.x, y: expandDropdown.y }}
-          items={[
-            permissions === true
-              ? {
-                  name: "Edit Collection Info",
-                  onClick: () => {
-                    collection &&
-                      setModal({
-                        modal: "COLLECTION",
-                        state: true,
-                        method: "UPDATE",
-                        isOwner: permissions === true,
-                        active: collection,
-                      });
-                    setExpandDropdown(false);
-                  },
-                }
-              : undefined,
-            {
-              name: permissions === true ? "Share/Collaborate" : "View Team",
-              onClick: () => {
-                collection &&
-                  setModal({
-                    modal: "COLLECTION",
-                    state: true,
-                    method: "UPDATE",
-                    isOwner: permissions === true,
-                    active: collection,
-                    defaultIndex: permissions === true ? 1 : 0,
-                  });
-                setExpandDropdown(false);
-              },
-            },
-
-            {
-              name:
-                permissions === true ? "Delete Collection" : "Leave Collection",
-              onClick: () => {
-                collection &&
-                  setModal({
-                    modal: "COLLECTION",
-                    state: true,
-                    method: "UPDATE",
-                    isOwner: permissions === true,
-                    active: collection,
-                    defaultIndex: permissions === true ? 2 : 1,
-                  });
-                setExpandDropdown(false);
-              },
-            },
-          ]}
-          onClickOutside={(e: Event) => {
-            const target = e.target as HTMLInputElement;
-            if (target.id !== "expand-dropdown" + collection.id)
-              setExpandDropdown(false);
-          }}
-          className="w-fit"
+        </div>
+      </Link>
+      {editCollectionModal ? (
+        <EditCollectionModal
+          onClose={() => setEditCollectionModal(false)}
+          activeCollection={collection}
         />
-      ) : null}
-    </>
+      ) : undefined}
+      {editCollectionSharingModal ? (
+        <EditCollectionSharingModal
+          onClose={() => setEditCollectionSharingModal(false)}
+          activeCollection={collection}
+        />
+      ) : undefined}
+      {deleteCollectionModal ? (
+        <DeleteCollectionModal
+          onClose={() => setDeleteCollectionModal(false)}
+          activeCollection={collection}
+        />
+      ) : undefined}
+    </div>
   );
 }

components/CollectionListing.tsx

@@ -0,0 +1,365 @@
+import React, { useEffect, useMemo, useState } from "react";
+import Tree, {
+  mutateTree,
+  moveItemOnTree,
+  RenderItemParams,
+  TreeItem,
+  TreeData,
+  ItemId,
+  TreeSourcePosition,
+  TreeDestinationPosition,
+} from "@atlaskit/tree";
+import useCollectionStore from "@/store/collections";
+import { Collection } from "@prisma/client";
+import Link from "next/link";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import { useRouter } from "next/router";
+import useAccountStore from "@/store/account";
+import toast from "react-hot-toast";
+
+interface ExtendedTreeItem extends TreeItem {
+  data: Collection;
+}
+
+const CollectionListing = () => {
+  const { collections, updateCollection } = useCollectionStore();
+  const { account, updateAccount } = useAccountStore();
+
+  const router = useRouter();
+  const currentPath = router.asPath;
+
+  const initialTree = useMemo(() => {
+    if (collections.length > 0) {
+      return buildTreeFromCollections(
+        collections,
+        router,
+        account.collectionOrder
+      );
+    }
+    return undefined;
+  }, [collections, router]);
+
+  const [tree, setTree] = useState(initialTree);
+
+  useEffect(() => {
+    setTree(initialTree);
+  }, [initialTree]);
+
+  useEffect(() => {
+    if (account.username) {
+      if (
+        (!account.collectionOrder || account.collectionOrder.length === 0) &&
+        collections.length > 0
+      )
+        updateAccount({
+          ...account,
+          collectionOrder: collections
+            .filter(
+              (e) =>
+                e.parentId === null ||
+                !collections.find((i) => i.id === e.parentId)
+            ) // Filter out collections with non-null parentId
+            .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
+        });
+      else {
+        const newCollectionOrder: number[] = [
+          ...(account.collectionOrder || []),
+        ];
+
+        // Start with collections that are in both account.collectionOrder and collections
+        const existingCollectionIds = collections.map((c) => c.id as number);
+        const filteredCollectionOrder = account.collectionOrder.filter((id) =>
+          existingCollectionIds.includes(id)
+        );
+
+        // Add new collections that are not in account.collectionOrder and meet the specific conditions
+        collections.forEach((collection) => {
+          if (
+            !filteredCollectionOrder.includes(collection.id as number) &&
+            (!collection.parentId || collection.ownerId === account.id)
+          ) {
+            filteredCollectionOrder.push(collection.id as number);
+          }
+        });
+
+        // check if the newCollectionOrder is the same as the old one
+        if (
+          JSON.stringify(newCollectionOrder) !==
+          JSON.stringify(account.collectionOrder)
+        ) {
+          updateAccount({
+            ...account,
+            collectionOrder: newCollectionOrder,
+          });
+        }
+      }
+    }
+  }, [collections]);
+
+  const onExpand = (movedCollectionId: ItemId) => {
+    setTree((currentTree) =>
+      mutateTree(currentTree!, movedCollectionId, { isExpanded: true })
+    );
+  };
+
+  const onCollapse = (movedCollectionId: ItemId) => {
+    setTree((currentTree) =>
+      mutateTree(currentTree as TreeData, movedCollectionId, {
+        isExpanded: false,
+      })
+    );
+  };
+
+  const onDragEnd = async (
+    source: TreeSourcePosition,
+    destination: TreeDestinationPosition | undefined
+  ) => {
+    if (!destination || !tree) {
+      return;
+    }
+
+    if (
+      source.index === destination.index &&
+      source.parentId === destination.parentId
+    ) {
+      return;
+    }
+
+    const movedCollectionId = Number(
+      tree.items[source.parentId].children[source.index]
+    );
+
+    const movedCollection = collections.find((c) => c.id === movedCollectionId);
+
+    const destinationCollection = collections.find(
+      (c) => c.id === Number(destination.parentId)
+    );
+
+    if (
+      (movedCollection?.ownerId !== account.id &&
+        destination.parentId !== source.parentId) ||
+      (destinationCollection?.ownerId !== account.id &&
+        destination.parentId !== "root")
+    ) {
+      return toast.error(
+        "You can't make change to a collection you don't own."
+      );
+    }
+
+    setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
+
+    const updatedCollectionOrder = [...account.collectionOrder];
+
+    if (source.parentId !== destination.parentId) {
+      await updateCollection({
+        ...movedCollection,
+        parentId:
+          destination.parentId && destination.parentId !== "root"
+            ? Number(destination.parentId)
+            : destination.parentId === "root"
+              ? "root"
+              : null,
+      } as any);
+    }
+
+    if (
+      destination.index !== undefined &&
+      destination.parentId === source.parentId &&
+      source.parentId === "root"
+    ) {
+      updatedCollectionOrder.includes(movedCollectionId) &&
+        updatedCollectionOrder.splice(source.index, 1);
+
+      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
+
+      await updateAccount({
+        ...account,
+        collectionOrder: updatedCollectionOrder,
+      });
+    } else if (
+      destination.index !== undefined &&
+      destination.parentId === "root"
+    ) {
+      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
+
+      await updateAccount({
+        ...account,
+        collectionOrder: updatedCollectionOrder,
+      });
+    } else if (
+      source.parentId === "root" &&
+      destination.parentId &&
+      destination.parentId !== "root"
+    ) {
+      updatedCollectionOrder.splice(source.index, 1);
+
+      await updateAccount({
+        ...account,
+        collectionOrder: updatedCollectionOrder,
+      });
+    }
+  };
+
+  if (!tree) {
+    return <></>;
+  } else
+    return (
+      <Tree
+        tree={tree}
+        renderItem={(itemProps) => renderItem({ ...itemProps }, currentPath)}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        onDragEnd={onDragEnd}
+        isDragEnabled
+        isNestingEnabled
+      />
+    );
+};
+
+export default CollectionListing;
+
+const renderItem = (
+  { item, onExpand, onCollapse, provided }: RenderItemParams,
+  currentPath: string
+) => {
+  const collection = item.data;
+
+  return (
+    <div ref={provided.innerRef} {...provided.draggableProps} className="mb-1">
+      <div
+        className={`${
+          currentPath === `/collections/${collection.id}`
+            ? "bg-primary/20 is-active"
+            : "hover:bg-neutral/20"
+        } duration-100 flex gap-1 items-center pr-2 pl-1 rounded-md`}
+      >
+        {Icon(item as ExtendedTreeItem, onExpand, onCollapse)}
+
+        <Link
+          href={`/collections/${collection.id}`}
+          className="w-full"
+          {...provided.dragHandleProps}
+        >
+          <div
+            className={`py-1 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <i
+              className="bi-folder-fill text-2xl drop-shadow"
+              style={{ color: collection.color }}
+            ></i>
+            <p className="truncate w-full">{collection.name}</p>
+
+            {collection.isPublic ? (
+              <i
+                className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
+                title="This collection is being shared publicly."
+              ></i>
+            ) : undefined}
+            <div className="drop-shadow text-neutral text-xs">
+              {collection._count?.links}
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+const Icon = (
+  item: ExtendedTreeItem,
+  onExpand: (id: ItemId) => void,
+  onCollapse: (id: ItemId) => void
+) => {
+  if (item.children && item.children.length > 0) {
+    return item.isExpanded ? (
+      <button onClick={() => onCollapse(item.id)}>
+        <div className="bi-caret-down-fill opacity-50 hover:opacity-100 duration-200"></div>
+      </button>
+    ) : (
+      <button onClick={() => onExpand(item.id)}>
+        <div className="bi-caret-right-fill opacity-40 hover:opacity-100 duration-200"></div>
+      </button>
+    );
+  }
+  // return <span>&bull;</span>;
+  return <div></div>;
+};
+
+const buildTreeFromCollections = (
+  collections: CollectionIncludingMembersAndLinkCount[],
+  router: ReturnType<typeof useRouter>,
+  order?: number[]
+): TreeData => {
+  if (order) {
+    collections.sort((a: any, b: any) => {
+      return order.indexOf(a.id) - order.indexOf(b.id);
+    });
+  }
+
+  const items: { [key: string]: ExtendedTreeItem } = collections.reduce(
+    (acc: any, collection) => {
+      acc[collection.id as number] = {
+        id: collection.id,
+        children: [],
+        hasChildren: false,
+        isExpanded: false,
+        data: {
+          id: collection.id,
+          parentId: collection.parentId,
+          name: collection.name,
+          description: collection.description,
+          color: collection.color,
+          isPublic: collection.isPublic,
+          ownerId: collection.ownerId,
+          createdAt: collection.createdAt,
+          updatedAt: collection.updatedAt,
+          _count: {
+            links: collection._count?.links,
+          },
+        },
+      };
+      return acc;
+    },
+    {}
+  );
+
+  const activeCollectionId = Number(router.asPath.split("/collections/")[1]);
+
+  if (activeCollectionId) {
+    for (const item in items) {
+      const collection = items[item];
+      if (Number(item) === activeCollectionId && collection.data.parentId) {
+        // get all the parents of the active collection recursively until root and set isExpanded to true
+        let parentId = collection.data.parentId || null;
+        while (parentId && items[parentId]) {
+          items[parentId].isExpanded = true;
+          parentId = items[parentId].data.parentId;
+        }
+      }
+    }
+  }
+
+  collections.forEach((collection) => {
+    const parentId = collection.parentId;
+    if (parentId && items[parentId] && collection.id) {
+      items[parentId].children.push(collection.id);
+      items[parentId].hasChildren = true;
+    }
+  });
+
+  const rootId = "root";
+  items[rootId] = {
+    id: rootId,
+    children: (collections
+      .filter(
+        (c) =>
+          c.parentId === null || !collections.find((i) => i.id === c.parentId)
+      )
+      .map((c) => c.id) || "") as unknown as string[],
+    hasChildren: true,
+    isExpanded: true,
+    data: { name: "Root" } as Collection,
+  };
+
+  return { rootId, items };
+};

components/DashboardItem.tsx

@@ -1,28 +1,20 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-type Props = {
+export default function dashboardItem({
+  name,
+  value,
+  icon,
+}: {
   name: string;
   value: number;
-  icon: IconProp;
-};
-
-export default function dashboardItem({ name, value, icon }: Props) {
+  icon: string;
+}) {
   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 className="flex items-center">
+      <div className="w-[4.7rem] aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
+        <i className={`${icon} text-primary text-4xl drop-shadow`}></i>
       </div>
-      <div className="flex flex-col justify-center">
-        <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
-          {name}
-        </p>
-        <p className="font-thin text-6xl text-sky-500 dark:text-sky-500">
-          {value}
-        </p>
+      <div className="ml-4 flex flex-col justify-center">
+        <p className="text-neutral text-xs tracking-wider">{name}</p>
+        <p className="font-thin text-6xl text-primary mt-0.5">{value}</p>
       </div>
     </div>
   );

components/Dropdown.tsx

@@ -78,13 +78,13 @@ export default function Dropdown({
       onClickOutside={onClickOutside}
       className={`${
         className || ""
-      } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+      } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (
           <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
+              <p className="select-none">{e.name}</p>
             </div>
           </div>
         );

components/FilterSearchDropdown.tsx

@@ -1,9 +1,7 @@
-import React, { SetStateAction } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
-import Checkbox from "./Checkbox";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import React from "react";
 
 type Props = {
-  setFilterDropdown: (value: SetStateAction<boolean>) => void;
   setSearchFilter: Function;
   searchFilter: {
     name: boolean;
@@ -15,64 +13,122 @@ type Props = {
 };
 
 export default function FilterSearchDropdown({
-  setFilterDropdown,
   setSearchFilter,
   searchFilter,
 }: Props) {
   return (
-    <ClickAwayHandler
-      onClickOutside={(e: Event) => {
-        const target = e.target as HTMLInputElement;
-        if (target.id !== "filter-dropdown") setFilterDropdown(false);
-      }}
-      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-black dark:text-white text-center font-semibold">
-        Filter by
-      </p>
-      <div className="flex flex-col gap-2">
-        <Checkbox
-          label="Name"
-          state={searchFilter.name}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, name: !searchFilter.name })
-          }
-        />
-        <Checkbox
-          label="Link"
-          state={searchFilter.url}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, url: !searchFilter.url })
-          }
-        />
-        <Checkbox
-          label="Description"
-          state={searchFilter.description}
-          onClick={() =>
-            setSearchFilter({
-              ...searchFilter,
-              description: !searchFilter.description,
-            })
-          }
-        />
-        <Checkbox
-          label="Text Content"
-          state={searchFilter.textContent}
-          onClick={() =>
-            setSearchFilter({
-              ...searchFilter,
-              textContent: !searchFilter.textContent,
-            })
-          }
-        />
-        <Checkbox
-          label="Tags"
-          state={searchFilter.tags}
-          onClick={() =>
-            setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
-          }
-        />
+    <div className="dropdown dropdown-bottom dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-sm btn-square btn-ghost"
+      >
+        <i className="bi-funnel text-neutral text-2xl"></i>
       </div>
-    </ClickAwayHandler>
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.name}
+              onChange={() => {
+                setSearchFilter({ ...searchFilter, name: !searchFilter.name });
+              }}
+            />
+            <span className="label-text">Name</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.url}
+              onChange={() => {
+                setSearchFilter({ ...searchFilter, url: !searchFilter.url });
+              }}
+            />
+            <span className="label-text">Link</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.description}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  description: !searchFilter.description,
+                });
+              }}
+            />
+            <span className="label-text">Description</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.tags}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  tags: !searchFilter.tags,
+                });
+              }}
+            />
+            <span className="label-text">Tags</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-between"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.textContent}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  textContent: !searchFilter.textContent,
+                });
+              }}
+            />
+            <span className="label-text">Full Content</span>
+
+            <div className="ml-auto badge badge-sm badge-neutral">Slower</div>
+          </label>
+        </li>
+      </ul>
+    </div>
   );
 }

components/InputSelect/CollectionSelection.tsx

@@ -1,21 +1,29 @@
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Select from "react-select";
 import { styles } from "./styles";
 import { Options } from "./types";
+import CreatableSelect from "react-select/creatable";
+import Select from "react-select";
 
 type Props = {
   onChange: any;
-  defaultValue:
+  showDefaultValue?: boolean;
+  defaultValue?:
     | {
         label: string;
         value?: number;
       }
     | undefined;
+  creatable?: boolean;
 };
 
-export default function CollectionSelection({ onChange, defaultValue }: Props) {
+export default function CollectionSelection({
+  onChange,
+  defaultValue,
+  showDefaultValue = true,
+  creatable = true,
+}: Props) {
   const { collections } = useCollectionStore();
   const router = useRouter();
 
@@ -36,22 +44,87 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
 
   useEffect(() => {
     const formatedCollections = collections.map((e) => {
-      return { value: e.id, label: e.name, ownerId: e.ownerId };
+      return {
+        value: e.id,
+        label: e.name,
+        ownerId: e.ownerId,
+        count: e._count,
+        parentId: e.parentId,
+      };
     });
 
     setOptions(formatedCollections);
   }, [collections]);
 
-  return (
-    <Select
-      isClearable
-      className="react-select-container"
-      classNamePrefix="react-select"
-      onChange={onChange}
-      options={options}
-      styles={styles}
-      defaultValue={defaultValue}
-      // menuPosition="fixed"
-    />
-  );
+  const getParentNames = (parentId: number): string[] => {
+    const parentNames = [];
+    const parent = collections.find((e) => e.id === parentId);
+
+    if (parent) {
+      parentNames.push(parent.name);
+      if (parent.parentId) {
+        parentNames.push(...getParentNames(parent.parentId));
+      }
+    }
+
+    // Have the top level parent at beginning
+    return parentNames.reverse();
+  };
+
+  const customOption = ({ data, innerProps }: any) => {
+    return (
+      <div
+        {...innerProps}
+        className="px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-neutral-content cursor-pointer"
+      >
+        <div className="flex w-full justify-between items-center">
+          <span>{data.label}</span>
+          <span className="text-sm text-neutral">{data.count?.links}</span>
+        </div>
+        <div className="text-xs text-gray-600 dark:text-gray-300">
+          {getParentNames(data?.parentId).length > 0 ? (
+            <>
+              {getParentNames(data.parentId).join(" > ")} {">"} {data.label}
+            </>
+          ) : (
+            data.label
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  if (creatable) {
+    return (
+      <CreatableSelect
+        isClearable={false}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        onChange={onChange}
+        options={options}
+        styles={styles}
+        defaultValue={showDefaultValue ? defaultValue : null}
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
+      />
+    );
+  } else {
+    return (
+      <Select
+        isClearable={false}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        onChange={onChange}
+        options={options}
+        styles={styles}
+        defaultValue={showDefaultValue ? defaultValue : null}
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
+      />
+    );
+  }
 }

components/InputSelect/TagSelection.tsx

@@ -27,7 +27,7 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
 
   return (
     <CreatableSelect
-      isClearable
+      isClearable={false}
       className="react-select-container"
       classNamePrefix="react-select"
       onChange={onChange}

components/InputSelect/styles.ts

@@ -8,20 +8,27 @@ export const styles: StylesConfig = {
     ...styles,
     fontFamily: font,
     cursor: "pointer",
-    backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
+    backgroundColor: state.isSelected ? "oklch(var(--p))" : "inherit",
     "&:hover": {
-      backgroundColor: state.isSelected ? "#0ea5e9" : "#e2e8f0",
+      backgroundColor: state.isSelected
+        ? "oklch(var(--p))"
+        : "oklch(var(--nc))",
     },
     transition: "all 50ms",
   }),
-  control: (styles) => ({
+  control: (styles, state) => ({
     ...styles,
     fontFamily: font,
-    border: "none",
+    borderRadius: "0.375rem",
+    border: state.isFocused
+      ? "1px solid oklch(var(--p))"
+      : "1px solid oklch(var(--nc))",
+    boxShadow: "none",
+    minHeight: "2.6rem",
   }),
-  container: (styles) => ({
+  container: (styles, state) => ({
     ...styles,
-    border: "1px solid #e0f2fe",
+    height: "full",
     borderRadius: "0.375rem",
     lineHeight: "1.25rem",
     // "@media screen and (min-width: 1024px)": {
@@ -58,4 +65,5 @@ export const styles: StylesConfig = {
       backgroundColor: "#38bdf8",
     },
   }),
+  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 };

components/LinkCard.tsx

@@ -1,280 +0,0 @@
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import {
-  faFolder,
-  faEllipsis,
-  faLink,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import Dropdown from "./Dropdown";
-import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
-import useAccountStore from "@/store/account";
-import useModalStore from "@/store/modals";
-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;
-  count: number;
-  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<DropdownTrigger>(false);
-
-  const { collections } = useCollectionStore();
-
-  const { links } = useLinkStore();
-
-  const { account } = useAccountStore();
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url).host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  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, links]);
-
-  const { removeLink, updateLink, getLink } = useLinkStore();
-
-  const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
-
-    const load = toast.loading("Applying...");
-
-    setExpandDropdown(false);
-
-    const response = await updateLink({
-      ...link,
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
-    });
-
-    toast.dismiss(load);
-
-    response.ok &&
-      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.id as number);
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-    setExpandDropdown(false);
-  };
-
-  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
-
-  const formattedDate = new Date(link.createdAt as string).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 || ""
-        }`}
-      >
-        {(permissions === true ||
-          permissions?.canUpdate ||
-          permissions?.canDelete) && (
-          <div
-            onClick={(e) => {
-              setExpandDropdown({ x: e.clientX, y: e.clientY });
-            }}
-            id={"expand-dropdown" + link.id}
-            className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              title="More"
-              className="w-5 h-5"
-              id={"expand-dropdown" + link.id}
-            />
-          </div>
-        )}
-
-        <div
-          onClick={() => router.push("/links/" + link.id)}
-          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
-        >
-          {url && account.displayLinkIcons && (
-            <Image
-              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-              width={64}
-              height={64}
-              alt=""
-              className={`${
-                account.blurredFavicons ? "blur-sm " : ""
-              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          )}
-
-          <div className="flex justify-between gap-5 w-full h-full z-0">
-            <div className="flex flex-col justify-between w-full">
-              <div className="flex items-baseline gap-1">
-                <p className="text-sm text-gray-500 dark:text-gray-300">
-                  {count + 1}
-                </p>
-                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                  {unescapeString(link.name || link.description)}
-                </p>
-              </div>
-              <Link
-                href={`/collections/${link.collection.id}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
-              >
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="w-4 h-4 mt-1 drop-shadow"
-                  style={{ color: collection?.color }}
-                />
-                <p className="text-black dark:text-white truncate capitalize w-full">
-                  {collection?.name}
-                </p>
-              </Link>
-              <Link
-                href={link.url}
-                target="_blank"
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
-              >
-                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-                <p className="truncate w-full">{shortendURL}</p>
-              </Link>
-              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
-                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-                <p>{formattedDate}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {expandDropdown ? (
-        <Dropdown
-          points={{ x: expandDropdown.x, y: expandDropdown.y }}
-          items={[
-            permissions === true
-              ? {
-                  name:
-                    link?.pinnedBy && link.pinnedBy[0]
-                      ? "Unpin"
-                      : "Pin to Dashboard",
-                  onClick: pinLink,
-                }
-              : undefined,
-            permissions === true || permissions?.canUpdate
-              ? {
-                  name: "Edit",
-                  onClick: () => {
-                    setModal({
-                      modal: "LINK",
-                      state: true,
-                      method: "UPDATE",
-                      active: link,
-                    });
-                    setExpandDropdown(false);
-                  },
-                }
-              : undefined,
-            permissions === true
-              ? {
-                  name: "Refresh Formats",
-                  onClick: updateArchive,
-                }
-              : undefined,
-            permissions === true || permissions?.canDelete
-              ? {
-                  name: "Delete",
-                  onClick: deleteLink,
-                }
-              : undefined,
-          ]}
-          onClickOutside={(e: Event) => {
-            const target = e.target as HTMLInputElement;
-            if (target.id !== "expand-dropdown" + link.id)
-              setExpandDropdown(false);
-          }}
-          className="w-40"
-        />
-      ) : null}
-    </>
-  );
-}

components/LinkPreview.tsx

@@ -1,112 +0,0 @@
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Image from "next/image";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/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

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

components/LinkViews/Layouts/CardView.tsx

@@ -0,0 +1,39 @@
+import LinkCard from "@/components/LinkViews/LinkCard";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { link } from "fs";
+import { GridLoader } from "react-spinners";
+
+export default function CardView({
+  links,
+  editMode,
+  isLoading,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+}) {
+  return (
+    <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+      {links.map((e, i) => {
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
+    </div>
+  );
+}

components/LinkViews/Layouts/GridView.tsx

@@ -0,0 +1,16 @@
+import LinkGrid from "@/components/LinkViews/LinkGrid";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function GridView({
+  links,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+  return (
+    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+      {links.map((e, i) => {
+        return <LinkGrid link={e} count={i} key={i} />;
+      })}
+    </div>
+  );
+}

components/LinkViews/Layouts/ListView.tsx

@@ -0,0 +1,38 @@
+import LinkList from "@/components/LinkViews/LinkList";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { GridLoader } from "react-spinners";
+
+export default function ListView({
+  links,
+  editMode,
+  isLoading,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+}) {
+  return (
+    <div className="flex gap-1 flex-col">
+      {links.map((e, i) => {
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
+    </div>
+  );
+}

components/LinkViews/LinkCard.tsx

@@ -0,0 +1,248 @@
+import {
+  ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useRef, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
+import Link from "next/link";
+import LinkIcon from "./LinkComponents/LinkIcon";
+import useOnScreen from "@/hooks/useOnScreen";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+  flipDropdown?: boolean;
+  editMode?: boolean;
+};
+
+export default function LinkCard({ link, flipDropdown, editMode }: Props) {
+  const { collections } = useCollectionStore();
+  const { account } = useAccountStore();
+
+  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  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, links]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useOnScreen(ref);
+  const permissions = usePermissions(collection?.id as number);
+
+  useEffect(() => {
+    let interval: any;
+
+    if (
+      isVisible &&
+      !link.preview?.startsWith("archives") &&
+      link.preview !== "unavailable"
+    ) {
+      interval = setInterval(async () => {
+        getLink(link.id as number);
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isVisible, link.preview]);
+
+  const [showInfo, setShowInfo] = useState(false);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  // window.open ('www.yourdomain.com', '_ blank');
+  return (
+    <div
+      ref={ref}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      onClick={() =>
+        selectable
+          ? handleCheckboxClick(link)
+          : editMode
+            ? toast.error(
+                "You don't have permission to edit or delete this item."
+              )
+            : undefined
+      }
+    >
+      <div
+        className="rounded-2xl cursor-pointer"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, account), "_blank")
+        }
+      >
+        <div className="relative rounded-t-2xl h-40 overflow-hidden">
+          {previewAvailable(link) ? (
+            <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+              width={1280}
+              height={720}
+              alt=""
+              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              style={{ filter: "blur(2px)" }}
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : link.preview === "unavailable" ? (
+            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+          ) : (
+            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+          )}
+          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+            <LinkIcon link={link} />
+          </div>
+        </div>
+
+        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+
+        <div className="p-3 mt-1">
+          <p className="truncate w-full pr-8 text-primary">
+            {unescapeString(link.name || link.description) || link.url}
+          </p>
+
+          <Link
+            href={link.url || ""}
+            target="_blank"
+            title={link.url || ""}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+          >
+            <i className="bi-link-45deg text-lg mt-[0.10rem] leading-none"></i>
+            <p className="text-sm truncate">{shortendURL}</p>
+          </Link>
+        </div>
+
+        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+        <div className="flex justify-between text-xs text-neutral px-3 pb-1">
+          <div className="cursor-pointer w-fit">
+            {collection && (
+              <LinkCollection link={link} collection={collection} />
+            )}
+          </div>
+          <LinkDate link={link} />
+        </div>
+      </div>
+
+      {showInfo && (
+        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
+          <div
+            onClick={() => setShowInfo(!showInfo)}
+            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
+          >
+            <i className="bi-x text-neutral text-2xl"></i>
+          </div>
+          <p className="text-neutral text-lg font-semibold">Description</p>
+
+          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+          <p>
+            {link.description ? (
+              unescapeString(link.description)
+            ) : (
+              <span className="text-neutral text-sm">
+                No description provided.
+              </span>
+            )}
+          </p>
+          {link.tags[0] && (
+            <>
+              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+
+              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                <div className="flex gap-1 items-center flex-wrap">
+                  {link.tags.map((e, i) => (
+                    <Link
+                      href={"/tags/" + e.id}
+                      key={i}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                    >
+                      #{e.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <LinkActions
+        link={link}
+        collection={collection}
+        position="top-[10.75rem] right-3"
+        toggleShowInfo={() => setShowInfo(!showInfo)}
+        linkInfo={showInfo}
+        flipDropdown={flipDropdown}
+      />
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import usePermissions from "@/hooks/usePermissions";
+import EditLinkModal from "@/components/ModalContent/EditLinkModal";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
+import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import useLinkStore from "@/store/links";
+import { toast } from "react-hot-toast";
+import useAccountStore from "@/store/account";
+import { dropdownTriggerer } from "@/lib/client/utils";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+  position?: string;
+  toggleShowInfo?: () => void;
+  linkInfo?: boolean;
+  flipDropdown?: boolean;
+};
+
+export default function LinkActions({
+  link,
+  toggleShowInfo,
+  position,
+  linkInfo,
+  flipDropdown,
+}: Props) {
+  const permissions = usePermissions(link.collection.id as number);
+
+  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
+
+  const { account } = useAccountStore();
+
+  const { removeLink, updateLink } = useLinkStore();
+
+  const pinLink = async () => {
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateLink({
+      ...link,
+      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
+    });
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+  };
+
+  const deleteLink = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeLink(link.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Link Deleted.`);
+  };
+
+  return (
+    <>
+      <div
+        className={`dropdown dropdown-left dropdown-end absolute ${
+          position || "top-3 right-3"
+        } z-20`}
+      >
+        <div
+          tabIndex={0}
+          role="button"
+          onMouseDown={dropdownTriggerer}
+          className="btn btn-ghost btn-sm btn-square text-neutral"
+        >
+          <i title="More" className="bi-three-dots text-xl" />
+        </div>
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                pinLink();
+              }}
+            >
+              {link?.pinnedBy && link.pinnedBy[0]
+                ? "Unpin"
+                : "Pin to Dashboard"}
+            </div>
+          </li>
+          {linkInfo !== undefined && toggleShowInfo ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  toggleShowInfo();
+                }}
+              >
+                {!linkInfo ? "Show" : "Hide"} Link Details
+              </div>
+            </li>
+          ) : undefined}
+          {permissions === true || permissions?.canUpdate ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setEditLinkModal(true);
+                }}
+              >
+                Edit Link
+              </div>
+            </li>
+          ) : undefined}
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                setPreservedFormatsModal(true);
+              }}
+            >
+              Preserved Formats
+            </div>
+          </li>
+          {permissions === true || permissions?.canDelete ? (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                }}
+              >
+                Delete
+              </div>
+            </li>
+          ) : undefined}
+        </ul>
+      </div>
+
+      {editLinkModal ? (
+        <EditLinkModal
+          onClose={() => setEditLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {deleteLinkModal ? (
+        <DeleteLinkModal
+          onClose={() => setDeleteLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {/* {expandedLink ? (
+                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
+              ) : undefined} */}
+    </>
+  );
+}

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -0,0 +1,34 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+
+export default function LinkCollection({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const router = useRouter();
+
+  return (
+    <Link
+      href={`/collections/${link.collection.id}`}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
+      title={collection?.name}
+    >
+      <i
+        className="bi-folder-fill text-lg drop-shadow"
+        style={{ color: collection?.color }}
+      ></i>
+      <p className="truncate capitalize">{collection?.name}</p>
+    </Link>
+  );
+}

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -0,0 +1,23 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import React from "react";
+
+export default function LinkDate({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const formattedDate = new Date(
+    (link.importDate || link.createdAt) as string
+  ).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  return (
+    <div className="flex items-center gap-1 text-neutral">
+      <i className="bi-calendar3 text-lg"></i>
+      <p>{formattedDate}</p>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkGroupedIconURL.tsx

@@ -0,0 +1,53 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Image from "next/image";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
+import Link from "next/link";
+
+export default function LinkGroupedIconURL({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const url =
+    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
+
+  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  return (
+    <Link href={link.url || ""} target="_blank">
+      <div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
+        {link.url && url && showFavicon ? (
+          <Image
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+            width={64}
+            height={64}
+            alt=""
+            className="w-5 h-5 rounded"
+            draggable="false"
+            onError={() => {
+              setShowFavicon(false);
+            }}
+          />
+        ) : showFavicon === false ? (
+          <i className="bi-link-45deg text-xl leading-none text-black"></i>
+        ) : link.type === "pdf" ? (
+          <i className={`bi-file-earmark-pdf`}></i>
+        ) : link.type === "image" ? (
+          <i className={`bi-file-earmark-image`}></i>
+        ) : undefined}
+        <p className="truncate bg-white text-black mr-1">
+          <p className="text-sm">{shortendURL}</p>
+        </p>
+      </div>
+    </Link>
+  );
+}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -0,0 +1,48 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Image from "next/image";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
+
+export default function LinkIcon({
+  link,
+  width,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  width?: string;
+}) {
+  const url =
+    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
+
+  const iconClasses: string =
+    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" +
+    " " +
+    (width || "w-12");
+
+  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
+
+  return (
+    <>
+      {link.url && url && showFavicon ? (
+        <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          width={64}
+          height={64}
+          alt=""
+          className={iconClasses}
+          draggable="false"
+          onError={() => {
+            setShowFavicon(false);
+          }}
+        />
+      ) : showFavicon === false ? (
+        <div className={iconClasses}>
+          <i className="bi-link-45deg text-4xl text-black"></i>
+        </div>
+      ) : link.type === "pdf" ? (
+        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
+      ) : link.type === "image" ? (
+        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
+      ) : undefined}
+    </>
+  );
+}

components/LinkViews/LinkGrid.tsx

@@ -0,0 +1,111 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+import Link from "next/link";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkGrid({ link }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  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, links]);
+
+  return (
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative p-3">
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="cursor-pointer"
+      >
+        <LinkIcon link={link} width="w-12 mb-3" />
+        <p className="truncate w-full">
+          {unescapeString(link.name || link.description) || link.url}
+        </p>
+
+        <div className="mt-1 flex flex-col text-xs text-neutral">
+          <div className="flex items-center gap-2">
+            <LinkCollection link={link} collection={collection} />
+            &middot;
+            {link.url ? (
+              <div
+                onClick={(e) => {
+                  e.preventDefault();
+                  window.open(link.url || "", "_blank");
+                }}
+                className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+              >
+                <p className="truncate">{shortendURL}</p>
+              </div>
+            ) : (
+              <div className="badge badge-primary badge-sm my-1">
+                {link.type}
+              </div>
+            )}
+          </div>
+          <LinkDate link={link} />
+        </div>
+        <p className="truncate">{unescapeString(link.description)}</p>
+        {link.tags[0] ? (
+          <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/tags/" + e.id}
+                  key={i}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+
+      <LinkActions
+        toggleShowInfo={() => {}}
+        linkInfo={false}
+        link={link}
+        collection={collection}
+      />
+    </div>
+  );
+}

components/LinkViews/LinkList.tsx

@@ -0,0 +1,181 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+import Link from "next/link";
+import { isPWA } from "@/lib/client/utils";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+  flipDropdown?: boolean;
+  editMode?: boolean;
+};
+
+export default function LinkCardCompact({
+  link,
+  flipDropdown,
+  editMode,
+}: Props) {
+  const { collections } = useCollectionStore();
+  const { account } = useAccountStore();
+  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    const linkIndex = selectedLinks.findIndex(
+      (selectedLink) => selectedLink.id === link.id
+    );
+
+    if (linkIndex !== -1) {
+      const updatedLinks = [...selectedLinks];
+      updatedLinks.splice(linkIndex, 1);
+      setSelectedLinks(updatedLinks);
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  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, links]);
+
+  const permissions = usePermissions(collection?.id as number);
+
+  const [showInfo, setShowInfo] = useState(false);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border border-primary bg-base-300"
+    : "border-transparent";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  return (
+    <>
+      <div
+        className={`${selectedStyle} border relative items-center flex ${
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+        } duration-200 rounded-lg`}
+        onClick={() =>
+          selectable
+            ? handleCheckboxClick(link)
+            : editMode
+              ? toast.error(
+                  "You don't have permission to edit or delete this item."
+                )
+              : undefined
+        }
+      >
+        {/* {showCheckbox &&
+          editMode &&
+          (permissions === true ||
+            permissions?.canCreate ||
+            permissions?.canDelete) && (
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary my-auto mr-2"
+              checked={selectedLinks.some(
+                (selectedLink) => selectedLink.id === link.id
+              )}
+              onChange={() => handleCheckboxClick(link)}
+            />
+          )} */}
+        <div
+          className="flex items-center cursor-pointer"
+          onClick={() =>
+            !editMode && window.open(generateLinkHref(link, account), "_blank")
+          }
+        >
+          <div className="shrink-0">
+            <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
+          </div>
+
+          <div className="w-[calc(100%-56px)] ml-2">
+            <p className="line-clamp-1 mr-8 text-primary select-none">
+              {unescapeString(link.name || link.description) || link.url}
+            </p>
+
+            <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
+                {collection ? (
+                  <LinkCollection link={link} collection={collection} />
+                ) : undefined}
+                {link.url ? (
+                  <Link
+                    href={link.url || ""}
+                    target="_blank"
+                    title={link.url || ""}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+                  >
+                    <i className="bi-link-45deg text-lg mt-[0.1rem] leading-none"></i>
+                    <p className="text-sm truncate">{shortendURL}</p>
+                  </Link>
+                ) : (
+                  <div className="badge badge-primary badge-sm my-1 select-none">
+                    {link.type}
+                  </div>
+                )}
+                <LinkDate link={link} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <LinkActions
+          link={link}
+          collection={collection}
+          position="top-3 right-3"
+          flipDropdown={flipDropdown}
+          // toggleShowInfo={() => setShowInfo(!showInfo)}
+          // linkInfo={showInfo}
+        />
+      </div>
+      <div className="divider my-0 last:hidden h-[1px]"></div>
+    </>
+  );
+}

components/MobileNavigation.tsx

@@ -0,0 +1,96 @@
+import { dropdownTriggerer, isIphone } from "@/lib/client/utils";
+import React from "react";
+import { useState } from "react";
+import NewLinkModal from "./ModalContent/NewLinkModal";
+import NewCollectionModal from "./ModalContent/NewCollectionModal";
+import UploadFileModal from "./ModalContent/UploadFileModal";
+import MobileNavigationButton from "./MobileNavigationButton";
+
+type Props = {};
+
+export default function MobileNavigation({}: Props) {
+  const [newLinkModal, setNewLinkModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
+  const [uploadFileModal, setUploadFileModal] = useState(false);
+
+  return (
+    <>
+      <div
+        className={`fixed bottom-0 left-0 right-0 z-30 duration-200 sm:hidden`}
+      >
+        <div
+          className={`w-full flex bg-base-100 ${
+            isIphone() ? "pb-5" : ""
+          } border-solid border-t-neutral-content border-t`}
+        >
+          <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />
+          <MobileNavigationButton
+            href={`/links/pinned`}
+            icon={"bi-pin-angle"}
+          />
+          <div className="dropdown dropdown-top -mt-4">
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={dropdownTriggerer}
+              className={`flex items-center btn btn-accent dark:border-violet-400 text-white btn-circle w-20 h-20 px-2 relative`}
+            >
+              <span>
+                <i className="bi-plus text-5xl pointer-events-none"></i>
+              </span>
+            </div>
+            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewLinkModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Link
+                </div>
+              </li>
+              {/* <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setUploadFileModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Upload File
+              </div>
+            </li> */}
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewCollectionModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Collection
+                </div>
+              </li>
+            </ul>
+          </div>
+          <MobileNavigationButton href={`/links`} icon={"bi-link-45deg"} />
+          <MobileNavigationButton href={`/collections`} icon={"bi-folder"} />
+        </div>
+      </div>
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
+      {uploadFileModal ? (
+        <UploadFileModal onClose={() => setUploadFileModal(false)} />
+      ) : undefined}
+    </>
+  );
+}

components/MobileNavigationButton.tsx

@@ -0,0 +1,45 @@
+import { isPWA } from "@/lib/client/utils";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function MobileNavigationButton({
+  href,
+  icon,
+}: {
+  href: string;
+  icon: string;
+}) {
+  const router = useRouter();
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    setActive(href === router.asPath);
+  }, [router]);
+
+  return (
+    <Link
+      href={href}
+      className="w-full active:scale-[80%] duration-200 select-none"
+      draggable="false"
+      style={{ WebkitTouchCallout: "none" }}
+      onContextMenu={(e) => {
+        if (isPWA()) {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        } else return null;
+      }}
+    >
+      <div
+        className={`py-2 cursor-pointer gap-2 w-full rounded-full capitalize flex items-center justify-center`}
+      >
+        <i
+          className={`${icon} text-primary text-3xl drop-shadow duration-200 rounded-full w-14 h-14 text-center pt-[0.65rem] ${
+            active || false ? "bg-primary/20" : ""
+          }`}
+        ></i>
+      </div>
+    </Link>
+  );
+}

components/Modal.tsx

@@ -0,0 +1,67 @@
+import React, { MouseEventHandler, ReactNode, useEffect } from "react";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { Drawer } from "vaul";
+
+type Props = {
+  toggleModal: Function;
+  children: ReactNode;
+  className?: string;
+};
+
+export default function Modal({ toggleModal, className, children }: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+
+  useEffect(() => {
+    if (window.innerWidth >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (window.innerWidth < 640) {
+    return (
+      <Drawer.Root
+        open={drawerIsOpen}
+        onClose={() => setTimeout(() => toggleModal(), 100)}
+      >
+        <Drawer.Portal>
+          <Drawer.Overlay className="fixed inset-0 bg-black/40" />
+          <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+              <div className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto">
+                <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
+
+                {children}
+              </div>
+            </Drawer.Content>
+          </ClickAwayHandler>
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
+  } else {
+    return (
+      <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-40">
+        <ClickAwayHandler
+          onClickOutside={toggleModal}
+          className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
+            className || ""
+          }`}
+        >
+          <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible">
+            <div
+              onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+              className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+            >
+              <i className="bi-x text-neutral text-2xl"></i>
+            </div>
+            {children}
+          </div>
+        </ClickAwayHandler>
+      </div>
+    );
+  }
+}

components/Modal/Collection/CollectionInfo.tsx

@@ -1,123 +0,0 @@
-import { Dispatch, SetStateAction, useState } from "react";
-import {
-  faFolder,
-  faPenToSquare,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import SubmitButton from "@/components/SubmitButton";
-import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleCollectionModal: Function;
-  setCollection: Dispatch<
-    SetStateAction<CollectionIncludingMembersAndLinkCount>
-  >;
-  collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
-};
-
-export default function CollectionInfo({
-  toggleCollectionModal,
-  setCollection,
-  collection,
-  method,
-}: Props) {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { updateCollection, addCollection } = useCollectionStore();
-
-  const submit = async () => {
-    if (!collection) return null;
-
-    setSubmitLoader(true);
-
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    let response;
-
-    if (method === "CREATE") response = await addCollection(collection);
-    else response = await updateCollection(collection);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(
-        `Collection ${method === "UPDATE" ? "Saved!" : "Created!"}`
-      );
-      toggleCollectionModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <div className="flex flex-col sm:flex-row gap-3">
-        <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Name</p>
-          <div className="flex flex-col gap-3">
-            <TextInput
-              value={collection.name}
-              placeholder="e.g. Example Collection"
-              onChange={(e) =>
-                setCollection({ ...collection, name: e.target.value })
-              }
-            />
-            <div className="color-picker flex justify-between">
-              <div className="flex flex-col justify-between items-center w-32">
-                <p className="w-full text-black dark:text-white mb-2">Color</p>
-                <div style={{ color: collection.color }}>
-                  <FontAwesomeIcon
-                    icon={faFolder}
-                    className="w-12 h-12 drop-shadow"
-                  />
-                </div>
-                <div
-                  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" })
-                  }
-                >
-                  Reset
-                </div>
-              </div>
-              <HexColorPicker
-                color={collection.color}
-                onChange={(e) => setCollection({ ...collection, color: e })}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Description</p>
-          <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
-            placeholder="The purpose of this Collection..."
-            value={collection.description}
-            onChange={(e) =>
-              setCollection({
-                ...collection,
-                description: e.target.value,
-              })
-            }
-          />
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/Collection/DeleteCollection.tsx

@@ -1,124 +0,0 @@
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleDeleteCollectionModal: Function;
-  collection: CollectionIncludingMembersAndLinkCount;
-};
-
-export default function DeleteCollection({
-  toggleDeleteCollectionModal,
-  collection,
-}: Props) {
-  const [inputField, setInputField] = useState("");
-
-  const { removeCollection } = useCollectionStore();
-
-  const router = useRouter();
-
-  const submit = async () => {
-    if (permissions === true) if (collection.name !== inputField) return null;
-
-    const load = toast.loading("Deleting...");
-
-    const response = await removeCollection(collection.id as number);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Collection Deleted.");
-      toggleDeleteCollectionModal();
-      router.push("/collections");
-    }
-  };
-
-  const permissions = usePermissions(collection.id as number);
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      {permissions === true ? (
-        <>
-          <p className="text-red-500 font-bold text-center">Warning!</p>
-
-          <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-black dark:text-white">
-              <p>
-                Please note that deleting the collection will permanently remove
-                all its contents, including the following:
-              </p>
-              <div className="p-3">
-                <li className="list-inside">
-                  Links: All links within the collection will be permanently
-                  deleted.
-                </li>
-                <li className="list-inside">
-                  Tags: All tags associated with the collection will be removed.
-                </li>
-                <li className="list-inside">
-                  Screenshots/PDFs: Any screenshots or PDFs attached to links
-                  within this collection will be permanently deleted.
-                </li>
-                <li className="list-inside">
-                  Members: Any members who have been granted access to the
-                  collection will lose their permissions and no longer be able
-                  to view or interact with the content.
-                </li>
-              </div>
-              <p>
-                Please double-check that you have backed up any essential data
-                and have informed the relevant members about this action.
-              </p>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <p className="text-black dark:text-white text-center">
-              To confirm, type &quot;
-              <span className="font-bold">{collection.name}</span>
-              &quot; in the box below:
-            </p>
-
-            <TextInput
-              autoFocus={true}
-              value={inputField}
-              onChange={(e) => setInputField(e.target.value)}
-              placeholder={`Type "${collection.name}" Here.`}
-              className="w-3/4 mx-auto"
-            />
-          </div>
-        </>
-      ) : (
-        <p className="text-black dark:text-white">
-          Click the button below to leave the current collection.
-        </p>
-      )}
-
-      <div
-        className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
-          permissions === true
-            ? inputField === collection.name
-              ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-              : "cursor-not-allowed bg-red-300 dark:bg-red-900"
-            : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-        }`}
-        onClick={submit}
-      >
-        <FontAwesomeIcon
-          icon={permissions === true ? faTrashCan : faRightFromBracket}
-          className="h-5"
-        />
-        {permissions === true ? "Delete" : "Leave"} Collection
-      </div>
-    </div>
-  );
-}

components/Modal/Collection/TeamManagement.tsx

@@ -1,441 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faCrown,
-  faPenToSquare,
-  faPlus,
-  faUserPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
-import addMemberToCollection from "@/lib/client/addMemberToCollection";
-import Checkbox from "../../Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import ProfilePhoto from "@/components/ProfilePhoto";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import getPublicUserData from "@/lib/client/getPublicUserData";
-import TextInput from "@/components/TextInput";
-import useAccountStore from "@/store/account";
-
-type Props = {
-  toggleCollectionModal: Function;
-  setCollection: Dispatch<
-    SetStateAction<CollectionIncludingMembersAndLinkCount>
-  >;
-  collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
-};
-
-export default function TeamManagement({
-  toggleCollectionModal,
-  setCollection,
-  collection,
-  method,
-}: Props) {
-  const { account } = useAccountStore();
-  const permissions = usePermissions(collection.id as number);
-
-  const currentURL = new URL(document.URL);
-
-  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
-
-  const [memberUsername, setMemberUsername] = useState("");
-
-  const [collectionOwner, setCollectionOwner] = useState({
-    id: null,
-    name: "",
-    username: "",
-    image: "",
-  });
-
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
-  const { addCollection, updateCollection } = useCollectionStore();
-
-  const setMemberState = (newMember: Member) => {
-    if (!collection) return null;
-
-    setCollection({
-      ...collection,
-      members: [...collection.members, newMember],
-    });
-
-    setMemberUsername("");
-  };
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const submit = async () => {
-    if (!collection) return null;
-
-    setSubmitLoader(true);
-
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    let response;
-
-    if (method === "CREATE") response = await addCollection(collection);
-    else response = await updateCollection(collection);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Collection Saved!");
-      toggleCollectionModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      {permissions === true && (
-        <>
-          <p className="text-black dark:text-white">Make Public</p>
-
-          <Checkbox
-            label="Make this a public collection."
-            state={collection.isPublic}
-            onClick={() =>
-              setCollection({ ...collection, isPublic: !collection.isPublic })
-            }
-          />
-
-          <p className="text-gray-500 dark:text-gray-300 text-sm">
-            This will let <b>Anyone</b> to view this collection.
-          </p>
-        </>
-      )}
-
-      {collection.isPublic ? (
-        <div>
-          <p className="text-black dark:text-white mb-2">
-            Public Link (Click to copy)
-          </p>
-          <div
-            onClick={() => {
-              try {
-                navigator.clipboard
-                  .writeText(publicCollectionURL)
-                  .then(() => toast.success("Copied!"));
-              } catch (err) {
-                console.log(err);
-              }
-            }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-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 className="mb-3 border border-sky-100 dark:border-neutral-700" />
-      )}
-
-      {permissions === true && (
-        <>
-          <p className="text-black dark:text-white">Member Management</p>
-
-          <div className="flex items-center gap-2">
-            <TextInput
-              value={memberUsername || ""}
-              placeholder="Username (without the '@')"
-              onChange={(e) => setMemberUsername(e.target.value)}
-              onKeyDown={(e) =>
-                e.key === "Enter" &&
-                addMemberToCollection(
-                  account.username as string,
-                  memberUsername || "",
-                  collection,
-                  setMemberState
-                )
-              }
-            />
-
-            <div
-              onClick={() =>
-                addMemberToCollection(
-                  account.username as string,
-                  memberUsername || "",
-                  collection,
-                  setMemberState
-                )
-              }
-              className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
-            >
-              <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
-            </div>
-          </div>
-        </>
-      )}
-
-      {collection?.members[0]?.user && (
-        <>
-          <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">
-            {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"
-                  >
-                    {permissions === true && (
-                      <FontAwesomeIcon
-                        icon={faClose}
-                        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(
-                            (member) => {
-                              return member.user.username !== e.user.username;
-                            }
-                          );
-                          setCollection({
-                            ...collection,
-                            members: updatedMembers,
-                          });
-                        }}
-                      />
-                    )}
-                    <div className="flex items-center gap-2">
-                      <ProfilePhoto
-                        src={e.user.image ? e.user.image : undefined}
-                        className="border-[3px]"
-                      />
-                      <div>
-                        <p className="text-sm font-bold 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 className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
-                      <div>
-                        <p
-                          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 dark:text-gray-300 mb-2">
-                            (Click to toggle.)
-                          </p>
-                        )}
-                      </div>
-
-                      {permissions !== true &&
-                      !e.canCreate &&
-                      !e.canUpdate &&
-                      !e.canDelete ? (
-                        <p className="text-sm text-gray-500 dark:text-gray-300">
-                          Has no permissions.
-                        </p>
-                      ) : (
-                        <div>
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canCreate"
-                              className="peer sr-only"
-                              checked={e.canCreate}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canCreate: !e.canCreate,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Create
-                            </span>
-                          </label>
-
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canUpdate"
-                              className="peer sr-only"
-                              checked={e.canUpdate}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canUpdate: !e.canUpdate,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Update
-                            </span>
-                          </label>
-
-                          <label
-                            className={
-                              permissions === true
-                                ? "cursor-pointer mr-1"
-                                : "mr-1"
-                            }
-                          >
-                            <input
-                              type="checkbox"
-                              id="canDelete"
-                              className="peer sr-only"
-                              checked={e.canDelete}
-                              onChange={() => {
-                                if (permissions === true) {
-                                  const updatedMembers = collection.members.map(
-                                    (member) => {
-                                      if (
-                                        member.user.username === e.user.username
-                                      ) {
-                                        return {
-                                          ...member,
-                                          canDelete: !e.canDelete,
-                                        };
-                                      }
-                                      return member;
-                                    }
-                                  );
-                                  setCollection({
-                                    ...collection,
-                                    members: updatedMembers,
-                                  });
-                                }
-                              }}
-                            />
-                            <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
-                                permissions === true
-                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
-                                  : ""
-                              } rounded p-1 select-none`}
-                            >
-                              Delete
-                            </span>
-                          </label>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-          </div>
-        </>
-      )}
-
-      <div
-        className="relative border px-2 rounded-md border-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={collectionOwner.image ? collectionOwner.image : undefined}
-            className="border-[3px]"
-          />
-          <div>
-            <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-black dark:text-white">
-                {collectionOwner.name}
-              </p>
-              <FontAwesomeIcon
-                icon={faCrown}
-                className="w-3 h-3 text-yellow-500"
-              />
-            </div>
-            <p className="text-gray-500 dark:text-gray-300">
-              @{collectionOwner.username}
-            </p>
-          </div>
-        </div>
-
-        <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>
-
-      {permissions === true && (
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
-          className="mx-auto mt-2"
-        />
-      )}
-    </div>
-  );
-}

components/Modal/Collection/index.tsx

@@ -1,122 +0,0 @@
-import { Tab } from "@headlessui/react";
-import CollectionInfo from "./CollectionInfo";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import TeamManagement from "./TeamManagement";
-import { useState } from "react";
-import DeleteCollection from "./DeleteCollection";
-
-type Props =
-  | {
-      toggleCollectionModal: Function;
-      activeCollection: CollectionIncludingMembersAndLinkCount;
-      method: "UPDATE";
-      isOwner: boolean;
-      className?: string;
-      defaultIndex?: number;
-    }
-  | {
-      toggleCollectionModal: Function;
-      activeCollection?: CollectionIncludingMembersAndLinkCount;
-      method: "CREATE";
-      isOwner: boolean;
-      className?: string;
-      defaultIndex?: number;
-    };
-
-export default function CollectionModal({
-  className,
-  defaultIndex,
-  toggleCollectionModal,
-  isOwner,
-  activeCollection,
-  method,
-}: Props) {
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      activeCollection || {
-        name: "",
-        description: "",
-        color: "#0ea5e9",
-        isPublic: false,
-        members: [],
-      }
-    );
-
-  return (
-    <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        {method === "CREATE" && (
-          <p className="text-xl text-black dark:text-white text-center">
-            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-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 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Share & Collaborate" : "View Team"}
-              </Tab>
-              <Tab
-                className={({ selected }) =>
-                  selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Delete Collection" : "Leave Collection"}
-              </Tab>
-            </>
-          )}
-        </Tab.List>
-        <Tab.Panels>
-          {(isOwner || method === "CREATE") && (
-            <Tab.Panel>
-              <CollectionInfo
-                toggleCollectionModal={toggleCollectionModal}
-                setCollection={setCollection}
-                collection={collection}
-                method={method}
-              />
-            </Tab.Panel>
-          )}
-
-          {method === "UPDATE" && (
-            <>
-              <Tab.Panel>
-                <TeamManagement
-                  toggleCollectionModal={toggleCollectionModal}
-                  setCollection={setCollection}
-                  collection={collection}
-                  method={method}
-                />
-              </Tab.Panel>
-              <Tab.Panel>
-                <DeleteCollection
-                  toggleDeleteCollectionModal={toggleCollectionModal}
-                  collection={collection}
-                />
-              </Tab.Panel>
-            </>
-          )}
-        </Tab.Panels>
-      </Tab.Group>
-    </div>
-  );
-}

components/Modal/Link/AddOrEditLink.tsx

@@ -1,271 +0,0 @@
-import React, { useEffect, useState } from "react";
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import useLinkStore from "@/store/links";
-import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
-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 =
-  | {
-      toggleLinkModal: Function;
-      method: "CREATE";
-      activeLink?: LinkIncludingShortenedCollectionAndTags;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "UPDATE";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-    };
-
-export default function AddOrEditLink({
-  toggleLinkModal,
-  method,
-  activeLink,
-}: Props) {
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [optionsExpanded, setOptionsExpanded] = useState(
-    method === "UPDATE" ? true : false
-  );
-
-  const { data } = useSession();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
-    activeLink || {
-      name: "",
-      url: "",
-      description: "",
-      tags: [],
-      screenshotPath: "",
-      pdfPath: "",
-      readabilityPath: "",
-      textContent: "",
-      collection: {
-        name: "",
-        ownerId: data?.user.id as number,
-      },
-    }
-  );
-
-  const { updateLink, addLink } = useLinkStore();
-
-  const router = useRouter();
-  const { collections } = useCollectionStore();
-
-  useEffect(() => {
-    if (method === "CREATE") {
-      if (router.query.id) {
-        const currentCollection = collections.find(
-          (e) => e.id == Number(router.query.id)
-        );
-
-        if (
-          currentCollection &&
-          currentCollection.ownerId &&
-          router.asPath.startsWith("/collections/")
-        )
-          setLink({
-            ...link,
-            collection: {
-              id: currentCollection.id,
-              name: currentCollection.name,
-              ownerId: currentCollection.ownerId,
-            },
-          });
-      } else
-        setLink({
-          ...link,
-          collection: {
-            // id: ,
-            name: "Unorganized",
-            ownerId: data?.user.id as number,
-          },
-        });
-    }
-  }, []);
-
-  const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
-      return { name: e.label };
-    });
-
-    setLink({ ...link, tags: tagNames });
-  };
-
-  const setCollection = (e: any) => {
-    if (e?.__isNew__) e.value = null;
-
-    setLink({
-      ...link,
-      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
-    });
-  };
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    let response;
-    const load = toast.loading(
-      method === "UPDATE" ? "Applying..." : "Creating..."
-    );
-
-    if (method === "UPDATE") response = await updateLink(link);
-    else response = await addLink(link);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(`Link ${method === "UPDATE" ? "Saved!" : "Created!"}`);
-      toggleLinkModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-
-    return response;
-  };
-
-  return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      {method === "UPDATE" ? (
-        <div
-          className="text-gray-500 dark:text-gray-300 break-all w-full flex gap-2"
-          title={link.url}
-        >
-          <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
-          <Link href={link.url} target="_blank" className="w-full">
-            {link.url}
-          </Link>
-        </div>
-      ) : null}
-
-      {method === "CREATE" ? (
-        <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
-          <div className="sm:col-span-3 col-span-5">
-            <p className="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>
-      ) : undefined}
-
-      {optionsExpanded ? (
-        <div>
-          {/* <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>
-
-        <SubmitButton
-          onClick={submit}
-          label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
-          loading={submitLoader}
-          className={`${method === "CREATE" ? "" : "mx-auto"}`}
-        />
-      </div>
-    </div>
-  );
-}

components/Modal/Link/PreservedFormats.tsx

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

components/Modal/Link/index.tsx

@@ -1,63 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import AddOrEditLink from "./AddOrEditLink";
-import PreservedFormats from "./PreservedFormats";
-
-type Props =
-  | {
-      toggleLinkModal: Function;
-      method: "CREATE";
-      activeLink?: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "UPDATE";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    }
-  | {
-      toggleLinkModal: Function;
-      method: "FORMATS";
-      activeLink: LinkIncludingShortenedCollectionAndTags;
-      className?: string;
-    };
-
-export default function LinkModal({
-  className,
-  toggleLinkModal,
-  activeLink,
-  method,
-}: Props) {
-  return (
-    <div className={className}>
-      {method === "CREATE" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Create a New Link
-          </p>
-          <AddOrEditLink toggleLinkModal={toggleLinkModal} method="CREATE" />
-        </>
-      ) : undefined}
-
-      {activeLink && method === "UPDATE" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">Edit Link</p>
-          <AddOrEditLink
-            toggleLinkModal={toggleLinkModal}
-            method="UPDATE"
-            activeLink={activeLink}
-          />
-        </>
-      ) : undefined}
-
-      {method === "FORMATS" ? (
-        <>
-          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
-            Preserved Formats
-          </p>
-          <PreservedFormats />
-        </>
-      ) : undefined}
-    </div>
-  );
-}

components/Modal/index.tsx

@@ -1,34 +0,0 @@
-import { MouseEventHandler, ReactNode } from "react";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-
-type Props = {
-  toggleModal: Function;
-  children: ReactNode;
-  className?: string;
-};
-
-export default function Modal({ toggleModal, className, children }: Props) {
-  return (
-    <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 || ""}`}
-      >
-        <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 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
-          >
-            <FontAwesomeIcon
-              icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500 dark:text-gray-300"
-            />
-          </div>
-          {children}
-        </div>
-      </ClickAwayHandler>
-    </div>
-  );
-}

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import useLinkStore from "@/store/links";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function BulkDeleteLinksModal({ onClose }: Props) {
+  const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+
+  const deleteLink = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }`
+      );
+
+      setSelectedLinks([]);
+      onClose();
+    } else toast.error(response.data as string);
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">
+        Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+      </p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        {selectedLinks.length > 1 ? (
+          <p>Are you sure you want to delete {selectedLinks.length} links?</p>
+        ) : (
+          <p>Are you sure you want to delete this link?</p>
+        )}
+
+        <div role="alert" className="alert alert-warning">
+          <i className="bi-exclamation-triangle text-xl" />
+          <span>
+            <b>Warning:</b> This action is irreversible!
+          </span>
+        </div>
+
+        <p>
+          Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
+          &apos;Delete&apos; to bypass this confirmation in the future.
+        </p>
+
+        <button
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+          onClick={deleteLink}
+        >
+          <i className="bi-trash text-xl" />
+          Delete
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/BulkEditLinksModal.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function BulkEditLinksModal({ onClose }: Props) {
+  const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const [removePreviousTags, setRemovePreviousTags] = useState(false);
+  const [updatedValues, setUpdatedValues] = useState<
+    Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
+  >({ tags: [] });
+
+  const setCollection = (e: any) => {
+    const collectionId = e?.value || null;
+    console.log(updatedValues);
+    setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
+  };
+
+  const setTags = (e: any) => {
+    const tags = e.map((tag: any) => ({ name: tag.label }));
+    setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
+  };
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Updating...");
+
+      const response = await updateLinks(
+        selectedLinks,
+        removePreviousTags,
+        updatedValues
+      );
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Updated!`);
+        setSelectedLinks([]);
+        onClose();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+      return response;
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">
+        Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+      </p>
+      <div className="divider mb-3 mt-1"></div>
+      <div className="mt-5">
+        <div className="grid sm:grid-cols-2 gap-3">
+          <div>
+            <p className="mb-2">Move to Collection</p>
+            <CollectionSelection
+              showDefaultValue={false}
+              onChange={setCollection}
+              creatable={false}
+            />
+          </div>
+
+          <div>
+            <p className="mb-2">Add Tags</p>
+            <TagSelection onChange={setTags} />
+          </div>
+        </div>
+        <div className="sm:ml-auto w-1/2 p-3">
+          <label className="flex items-center gap-2 ">
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary"
+              checked={removePreviousTags}
+              onChange={(e) => setRemovePreviousTags(e.target.checked)}
+            />
+            Remove previous tags
+          </label>
+        </div>
+      </div>
+
+      <div className="flex justify-end items-center mt-5">
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
+          Save Changes
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/DeleteCollectionModal.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "@/components/TextInput";
+import useCollectionStore from "@/store/collections";
+import toast from "react-hot-toast";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import { useRouter } from "next/router";
+import usePermissions from "@/hooks/usePermissions";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+  activeCollection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function DeleteCollectionModal({
+  onClose,
+  activeCollection,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
+  useEffect(() => {
+    setCollection(activeCollection);
+  }, []);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { removeCollection } = useCollectionStore();
+  const router = useRouter();
+  const [inputField, setInputField] = useState("");
+
+  const permissions = usePermissions(collection.id as number);
+
+  const submit = async () => {
+    if (permissions === true) if (collection.name !== inputField) return null;
+
+    if (!submitLoader) {
+      setSubmitLoader(true);
+      if (!collection) return null;
+
+      setSubmitLoader(true);
+
+      const load = toast.loading("Deleting...");
+
+      let response;
+
+      response = await removeCollection(collection.id as any);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Deleted.`);
+        onClose();
+        router.push("/collections");
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">
+        {permissions === true ? "Delete" : "Leave"} Collection
+      </p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        {permissions === true ? (
+          <>
+            <div className="flex flex-col gap-3">
+              <p>
+                To confirm, type &quot;
+                <span className="font-bold">{collection.name}</span>
+                &quot; in the box below:
+              </p>
+
+              <TextInput
+                value={inputField}
+                onChange={(e) => setInputField(e.target.value)}
+                placeholder={`Type "${collection.name}" Here.`}
+                className="w-3/4 mx-auto"
+              />
+            </div>
+
+            <div role="alert" className="alert alert-warning">
+              <i className="bi-exclamation-triangle text-xl"></i>
+              <span>
+                <b>Warning:</b> Deleting this collection will permanently erase
+                all its contents, and it will become inaccessible to everyone,
+                including members with previous access.
+              </span>
+            </div>
+          </>
+        ) : (
+          <p>Click the button below to leave the current collection.</p>
+        )}
+
+        <button
+          disabled={permissions === true && inputField !== collection.name}
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 ${
+            permissions === true
+              ? inputField === collection.name
+                ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
+                : "cursor-not-allowed bg-red-300 dark:bg-red-900"
+              : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
+          }`}
+          onClick={submit}
+        >
+          <i className="bi-trash text-xl"></i>
+          {permissions === true ? "Delete" : "Leave"} Collection
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/DeleteLinkModal.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import { useRouter } from "next/router";
+
+type Props = {
+  onClose: Function;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function DeleteLinkModal({ onClose, activeLink }: Props) {
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const { removeLink } = useLinkStore();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    setLink(activeLink);
+  }, []);
+
+  const deleteLink = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeLink(link.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Link Deleted.`);
+
+    if (router.pathname.startsWith("/links/[id]")) {
+      router.push("/dashboard");
+    }
+
+    onClose();
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">Delete Link</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>Are you sure you want to delete this Link?</p>
+
+        <div role="alert" className="alert alert-warning">
+          <i className="bi-exclamation-triangle text-xl" />
+          <span>
+            <b>Warning:</b> This action is irreversible!
+          </span>
+        </div>
+
+        <p>
+          Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
+          &apos;Delete&apos; to bypass this confirmation in the future.
+        </p>
+
+        <button
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+          onClick={deleteLink}
+        >
+          <i className="bi-trash text-xl" />
+          Delete
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/EditCollectionModal.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+import TextInput from "@/components/TextInput";
+import useCollectionStore from "@/store/collections";
+import toast from "react-hot-toast";
+import { HexColorPicker } from "react-colorful";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+  activeCollection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function EditCollectionModal({
+  onClose,
+  activeCollection,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { updateCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+      if (!collection) return null;
+
+      setSubmitLoader(true);
+
+      const load = toast.loading("Updating...");
+
+      let response;
+
+      response = await updateCollection(collection as any);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Updated!`);
+        onClose();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Edit Collection Info</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="w-full">
+            <p className="mb-2">Name</p>
+            <div className="flex flex-col gap-3">
+              <TextInput
+                className="bg-base-200"
+                value={collection.name}
+                placeholder="e.g. Example Collection"
+                onChange={(e) =>
+                  setCollection({ ...collection, name: e.target.value })
+                }
+              />
+              <div>
+                <p className="w-full mb-2">Color</p>
+                <div className="color-picker flex justify-between">
+                  <div className="flex flex-col gap-2 items-center w-32">
+                    <i
+                      className="bi-folder-fill text-5xl drop-shadow"
+                      style={{ color: collection.color }}
+                    ></i>
+                    <div
+                      className="btn btn-ghost btn-xs"
+                      onClick={() =>
+                        setCollection({ ...collection, color: "#0ea5e9" })
+                      }
+                    >
+                      Reset
+                    </div>
+                  </div>
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(e) => setCollection({ ...collection, color: e })}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <p className="mb-2">Description</p>
+            <textarea
+              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              placeholder="The purpose of this Collection..."
+              value={collection.description}
+              onChange={(e) =>
+                setCollection({
+                  ...collection,
+                  description: e.target.value,
+                })
+              }
+            />
+          </div>
+        </div>
+
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
+          onClick={submit}
+        >
+          Save Changes
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/EditCollectionSharingModal.tsx

@@ -0,0 +1,451 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "@/components/TextInput";
+import useCollectionStore from "@/store/collections";
+import toast from "react-hot-toast";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import ProfilePhoto from "../ProfilePhoto";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import Modal from "../Modal";
+import { dropdownTriggerer } from "@/lib/client/utils";
+
+type Props = {
+  onClose: Function;
+  activeCollection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function EditCollectionSharingModal({
+  onClose,
+  activeCollection,
+}: Props) {
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { updateCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+      if (!collection) return null;
+
+      setSubmitLoader(true);
+
+      const load = toast.loading("Updating...");
+
+      let response;
+
+      response = await updateCollection(collection as any);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Updated!`);
+        onClose();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  const { account } = useAccountStore();
+  const permissions = usePermissions(collection.id as number);
+
+  const currentURL = new URL(document.URL);
+
+  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
+
+  const [memberUsername, setMemberUsername] = useState("");
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+
+    setCollection(activeCollection);
+  }, []);
+
+  const setMemberState = (newMember: Member) => {
+    if (!collection) return null;
+
+    setCollection({
+      ...collection,
+      members: [...collection.members, newMember],
+    });
+
+    setMemberUsername("");
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">
+        {permissions === true ? "Share and Collaborate" : "Team"}
+      </p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        {permissions === true && (
+          <div>
+            <p>Make Public</p>
+
+            <label className="label cursor-pointer justify-start gap-2">
+              <input
+                type="checkbox"
+                checked={collection.isPublic}
+                onChange={() =>
+                  setCollection({
+                    ...collection,
+                    isPublic: !collection.isPublic,
+                  })
+                }
+                className="checkbox checkbox-primary"
+              />
+              <span className="label-text">Make this a public collection</span>
+            </label>
+
+            <p className="text-neutral text-sm">
+              This will let <b>Anyone</b> to view this collection and it&apos;s
+              users.
+            </p>
+          </div>
+        )}
+
+        {collection.isPublic ? (
+          <div className={permissions === true ? "pl-5" : ""}>
+            <p className="mb-2">Sharable Link (Click to copy)</p>
+            <div
+              onClick={() => {
+                try {
+                  navigator.clipboard
+                    .writeText(publicCollectionURL)
+                    .then(() => toast.success("Copied!"));
+                } catch (err) {
+                  console.log(err);
+                }
+              }}
+              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
+            >
+              {publicCollectionURL}
+            </div>
+          </div>
+        ) : null}
+
+        {permissions === true && <div className="divider my-3"></div>}
+
+        {permissions === true && (
+          <>
+            <p>Members</p>
+
+            <div className="flex items-center gap-2">
+              <TextInput
+                value={memberUsername || ""}
+                className="bg-base-200"
+                placeholder="Username (without the '@')"
+                onChange={(e) => setMemberUsername(e.target.value)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" &&
+                  addMemberToCollection(
+                    account.username as string,
+                    memberUsername || "",
+                    collection,
+                    setMemberState
+                  )
+                }
+              />
+
+              <div
+                onClick={() =>
+                  addMemberToCollection(
+                    account.username as string,
+                    memberUsername || "",
+                    collection,
+                    setMemberState
+                  )
+                }
+                className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
+              >
+                <i className="bi-person-add text-xl"></i>
+              </div>
+            </div>
+          </>
+        )}
+
+        {collection?.members[0]?.user && (
+          <>
+            <div className="flex flex-col divide-y divide-neutral-content border border-neutral-content rounded-xl bg-base-200">
+              <div
+                className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between"
+                title={`@${collectionOwner.username} is the owner of this collection`}
+              >
+                <div className={"flex items-center justify-between w-full"}>
+                  <div className={"flex items-center"}>
+                    <div className={"shrink-0"}>
+                      <ProfilePhoto
+                        src={
+                          collectionOwner.image
+                            ? collectionOwner.image
+                            : undefined
+                        }
+                        name={collectionOwner.name}
+                      />
+                    </div>
+                    <div className={"grow ml-2"}>
+                      <p className="text-sm font-semibold">
+                        {collectionOwner.name}
+                      </p>
+                      <p className="text-xs text-neutral">
+                        @{collectionOwner.username}
+                      </p>
+                    </div>
+                  </div>
+                  <div>
+                    <p className="text-sm font-bold">Owner</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="divider my-0 last:hidden h-[3px]"></div>
+
+              {collection.members
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
+                .map((e, i) => {
+                  const roleLabel =
+                    e.canCreate && e.canUpdate && e.canDelete
+                      ? "Admin"
+                      : e.canCreate && !e.canUpdate && !e.canDelete
+                        ? "Contributor"
+                        : !e.canCreate && !e.canUpdate && !e.canDelete
+                          ? "Viewer"
+                          : undefined;
+
+                  return (
+                    <React.Fragment key={i}>
+                      <div className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none">
+                        <div
+                          className={"flex items-center justify-between w-full"}
+                        >
+                          <div className={"flex items-center"}>
+                            <div className={"shrink-0"}>
+                              <ProfilePhoto
+                                src={e.user.image ? e.user.image : undefined}
+                                name={e.user.name}
+                              />
+                            </div>
+                            <div className={"grow ml-2"}>
+                              <p className="text-sm font-semibold">
+                                {e.user.name}
+                              </p>
+                              <p className="text-xs text-neutral">
+                                @{e.user.username}
+                              </p>
+                            </div>
+                          </div>
+
+                          <div className={"flex items-center gap-2"}>
+                            {permissions === true ? (
+                              <div className="dropdown dropdown-bottom dropdown-end">
+                                <div
+                                  tabIndex={0}
+                                  role="button"
+                                  onMouseDown={dropdownTriggerer}
+                                  className="btn btn-sm btn-primary font-normal"
+                                >
+                                  {roleLabel}
+                                  <i className="bi-chevron-down"></i>
+                                </div>
+                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          !e.canCreate &&
+                                          !e.canUpdate &&
+                                          !e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: false,
+                                            canUpdate: false,
+                                            canDelete: false,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Viewer</p>
+                                        <p>Read-only access</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          e.canCreate &&
+                                          !e.canUpdate &&
+                                          !e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: true,
+                                            canUpdate: false,
+                                            canDelete: false,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Contributor</p>
+                                        <p>Can view and create Links</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          e.canCreate &&
+                                          e.canUpdate &&
+                                          e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: true,
+                                            canUpdate: true,
+                                            canDelete: true,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Admin</p>
+                                        <p>Full access to all Links</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                </ul>
+                              </div>
+                            ) : (
+                              <p className="text-sm text-neutral">
+                                {roleLabel}
+                              </p>
+                            )}
+
+                            {permissions === true && (
+                              <i
+                                className={
+                                  "bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
+                                }
+                                title="Remove Member"
+                                onClick={() => {
+                                  const updatedMembers =
+                                    collection.members.filter((member) => {
+                                      return (
+                                        member.user.username !== e.user.username
+                                      );
+                                    });
+                                  setCollection({
+                                    ...collection,
+                                    members: updatedMembers,
+                                  });
+                                }}
+                              />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="divider my-0 last:hidden h-[3px]"></div>
+                    </React.Fragment>
+                  );
+                })}
+            </div>
+          </>
+        )}
+
+        {permissions === true && (
+          <button
+            className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
+            onClick={submit}
+          >
+            Save Changes
+          </button>
+        )}
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/EditLinkModal.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function EditLinkModal({ onClose, activeLink }: Props) {
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  const { updateLink } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
+    setLink({ ...link, tags: tagNames });
+  };
+
+  useEffect(() => {
+    setLink(activeLink);
+  }, []);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      let response;
+
+      const load = toast.loading("Updating...");
+
+      response = await updateLink(link);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Updated!`);
+        onClose();
+      } else toast.error(response.data as string);
+
+      setSubmitLoader(false);
+
+      return response;
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Edit Link</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      {link.url ? (
+        <Link
+          href={link.url}
+          className="truncate text-neutral flex gap-2 mb-5 w-fit max-w-full"
+          title={link.url}
+          target="_blank"
+        >
+          <i className="bi-link-45deg text-xl" />
+          <p>{shortendURL}</p>
+        </Link>
+      ) : undefined}
+
+      <div className="w-full">
+        <p className="mb-2">Name</p>
+        <TextInput
+          value={link.name}
+          onChange={(e) => setLink({ ...link, name: e.target.value })}
+          placeholder="e.g. Example Link"
+          className="bg-base-200"
+        />
+      </div>
+
+      <div className="mt-5">
+        {/* <hr className="mb-3 border border-neutral-content" /> */}
+        <div className="grid sm:grid-cols-2 gap-3">
+          <div>
+            <p className="mb-2">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",
+                      }
+                }
+                creatable={false}
+              />
+            ) : null}
+          </div>
+
+          <div>
+            <p className="mb-2">Tags</p>
+            <TagSelection
+              onChange={setTags}
+              defaultValue={link.tags.map((e) => {
+                return { label: e.name, value: e.id };
+              })}
+            />
+          </div>
+
+          <div className="sm:col-span-2">
+            <p className="mb-2">Description</p>
+            <textarea
+              value={unescapeString(link.description) as string}
+              onChange={(e) =>
+                setLink({ ...link, description: e.target.value })
+              }
+              placeholder="Will be auto generated if nothing is provided."
+              className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end items-center mt-5">
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
+          Save Changes
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/NewCollectionModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "@/components/TextInput";
+import useCollectionStore from "@/store/collections";
+import toast from "react-hot-toast";
+import { HexColorPicker } from "react-colorful";
+import { Collection } from "@prisma/client";
+import Modal from "../Modal";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import useAccountStore from "@/store/account";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  onClose: Function;
+  parent?: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function NewCollectionModal({ onClose, parent }: Props) {
+  const initial = {
+    parentId: parent?.id,
+    name: "",
+    description: "",
+    color: "#0ea5e9",
+  } as Partial<Collection>;
+
+  const [collection, setCollection] = useState<Partial<Collection>>(initial);
+  const { setAccount } = useAccountStore();
+  const { data } = useSession();
+
+  useEffect(() => {
+    setCollection(initial);
+  }, []);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { addCollection } = useCollectionStore();
+
+  const submit = async () => {
+    if (submitLoader) return;
+    if (!collection) return null;
+
+    setSubmitLoader(true);
+
+    const load = toast.loading("Creating...");
+
+    let response = await addCollection(collection as any);
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Created!");
+      if (response.data) {
+        // If the collection was created successfully, we need to get the new collection order
+        setAccount(data?.user.id as number);
+        onClose();
+      }
+    } else toast.error(response.data as string);
+
+    setSubmitLoader(false);
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      {parent?.id ? (
+        <>
+          <p className="text-xl font-thin">New Sub-Collection</p>
+          <p className="capitalize text-sm">For {parent.name}</p>
+        </>
+      ) : (
+        <p className="text-xl font-thin">Create a New Collection</p>
+      )}
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="w-full">
+            <p className="mb-2">Name</p>
+            <div className="flex flex-col gap-3">
+              <TextInput
+                className="bg-base-200"
+                value={collection.name}
+                placeholder="e.g. Example Collection"
+                onChange={(e) =>
+                  setCollection({ ...collection, name: e.target.value })
+                }
+              />
+              <div>
+                <p className="w-full mb-2">Color</p>
+                <div className="color-picker flex justify-between">
+                  <div className="flex flex-col gap-2 items-center w-32">
+                    <i
+                      className={"bi-folder-fill text-5xl"}
+                      style={{ color: collection.color }}
+                    ></i>
+                    <div
+                      className="btn btn-ghost btn-xs"
+                      onClick={() =>
+                        setCollection({ ...collection, color: "#0ea5e9" })
+                      }
+                    >
+                      Reset
+                    </div>
+                  </div>
+                  <HexColorPicker
+                    color={collection.color}
+                    onChange={(e) => setCollection({ ...collection, color: e })}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-full">
+            <p className="mb-2">Description</p>
+            <textarea
+              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              placeholder="The purpose of this Collection..."
+              value={collection.description}
+              onChange={(e) =>
+                setCollection({
+                  ...collection,
+                  description: e.target.value,
+                })
+              }
+            />
+          </div>
+        </div>
+
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
+          onClick={submit}
+        >
+          Create Collection
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/NewLinkModal.tsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function NewLinkModal({ onClose }: Props) {
+  const { data } = useSession();
+
+  const initial = {
+    name: "",
+    url: "",
+    description: "",
+    type: "url",
+    tags: [],
+    preview: "",
+    image: "",
+    pdf: "",
+    readable: "",
+    textContent: "",
+    collection: {
+      name: "",
+      ownerId: data?.user.id as number,
+    },
+  } as LinkIncludingShortenedCollectionAndTags;
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
+
+  const { addLink } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [optionsExpanded, setOptionsExpanded] = useState(false);
+
+  const router = useRouter();
+  const { collections } = useCollectionStore();
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
+    setLink({ ...link, tags: tagNames });
+  };
+
+  useEffect(() => {
+    if (router.query.id) {
+      const currentCollection = collections.find(
+        (e) => e.id == Number(router.query.id)
+      );
+
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
+        setLink({
+          ...initial,
+          collection: {
+            id: currentCollection.id,
+            name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
+          },
+        });
+    } else
+      setLink({
+        ...initial,
+        collection: {
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
+      });
+  }, []);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      let response;
+
+      const load = toast.loading("Creating...");
+
+      response = await addLink(link);
+
+      toast.dismiss(load);
+
+      if (response.ok) {
+        toast.success(`Created!`);
+        onClose();
+      } else toast.error(response.data as string);
+      setSubmitLoader(false);
+
+      return response;
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Create a New Link</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
+        <div className="sm:col-span-3 col-span-5">
+          <p className="mb-2">Link</p>
+          <TextInput
+            value={link.url || ""}
+            onChange={(e) => setLink({ ...link, url: e.target.value })}
+            placeholder="e.g. http://example.com/"
+            className="bg-base-200"
+          />
+        </div>
+        <div className="sm:col-span-2 col-span-5">
+          <p className="mb-2">Collection</p>
+          {link.collection.name ? (
+            <CollectionSelection
+              onChange={setCollection}
+              defaultValue={{
+                label: link.collection.name,
+                value: link.collection.id,
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+
+      <div className={"mt-2"}>
+        {optionsExpanded ? (
+          <div className="mt-5">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <p className="mb-2">Name</p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder="e.g. Example Link"
+                  className="bg-base-200"
+                />
+              </div>
+
+              <div>
+                <p className="mb-2">Tags</p>
+                <TagSelection
+                  onChange={setTags}
+                  defaultValue={link.tags.map((e) => {
+                    return { label: e.name, value: e.id };
+                  })}
+                />
+              </div>
+
+              <div className="sm:col-span-2">
+                <p className="mb-2">Description</p>
+                <textarea
+                  value={unescapeString(link.description) as string}
+                  onChange={(e) =>
+                    setLink({ ...link, description: e.target.value })
+                  }
+                  placeholder="Will be auto generated if nothing is provided."
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+                />
+              </div>
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+
+      <div className="flex justify-between items-center mt-5">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+        >
+          <p className="font-normal">
+            {optionsExpanded ? "Hide" : "More"} Options
+          </p>
+          <i
+            className={`${
+              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+            }`}
+          ></i>
+        </div>
+
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
+          Create Link
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/NewTokenModal.tsx

@@ -0,0 +1,227 @@
+import React, { useState } from "react";
+import TextInput from "@/components/TextInput";
+import { TokenExpiry } from "@/types/global";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import useTokenStore from "@/store/tokens";
+import { dropdownTriggerer } from "@/lib/client/utils";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function NewTokenModal({ onClose }: Props) {
+  const [newToken, setNewToken] = useState("");
+
+  const { addToken } = useTokenStore();
+
+  const initial = {
+    name: "",
+    expires: 0 as TokenExpiry,
+  };
+
+  const [token, setToken] = useState(initial as any);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Creating...");
+
+      const { ok, data } = await addToken(token);
+
+      toast.dismiss(load);
+
+      if (ok) {
+        toast.success(`Created!`);
+        setNewToken((data as any).secretKey);
+      } else toast.error(data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      {newToken ? (
+        <div className="flex flex-col justify-center space-y-4">
+          <p className="text-xl font-thin">Access Token Created</p>
+          <p>
+            Your new token has been created. Please copy it and store it
+            somewhere safe. You will not be able to see it again.
+          </p>
+          <TextInput
+            spellCheck={false}
+            value={newToken}
+            onChange={() => {}}
+            className="w-full"
+          />
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(newToken);
+              toast.success("Copied to clipboard!");
+            }}
+            className="btn btn-primary w-fit mx-auto"
+          >
+            Copy to Clipboard
+          </button>
+        </div>
+      ) : (
+        <>
+          <p className="text-xl font-thin">Create an Access Token</p>
+
+          <div className="divider mb-3 mt-1"></div>
+
+          <div className="flex sm:flex-row flex-col gap-2 items-center">
+            <div className="w-full">
+              <p className="mb-2">Name</p>
+
+              <TextInput
+                value={token.name}
+                onChange={(e) => setToken({ ...token, name: e.target.value })}
+                placeholder="e.g. For the iOS shortcut"
+                className="bg-base-200"
+              />
+            </div>
+
+            <div className="w-full sm:w-fit">
+              <p className="mb-2">Expires in</p>
+
+              <div className="dropdown dropdown-bottom dropdown-end w-full">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  onMouseDown={dropdownTriggerer}
+                  className="btn btn-outline w-full sm:w-36 flex items-center btn-sm h-10"
+                >
+                  {token.expires === TokenExpiry.sevenDays && "7 Days"}
+                  {token.expires === TokenExpiry.oneMonth && "30 Days"}
+                  {token.expires === TokenExpiry.twoMonths && "60 Days"}
+                  {token.expires === TokenExpiry.threeMonths && "90 Days"}
+                  {token.expires === TokenExpiry.never && "No Expiration"}
+                </div>
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.sevenDays}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.sevenDays,
+                          });
+                        }}
+                      />
+                      <span className="label-text">7 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.oneMonth}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({ ...token, expires: TokenExpiry.oneMonth });
+                        }}
+                      />
+                      <span className="label-text">30 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.twoMonths}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.twoMonths,
+                          });
+                        }}
+                      />
+                      <span className="label-text">60 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.threeMonths}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.threeMonths,
+                          });
+                        }}
+                      />
+                      <span className="label-text">90 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.never}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({ ...token, expires: TokenExpiry.never });
+                        }}
+                      />
+                      <span className="label-text">No Expiration</span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end items-center mt-5">
+            <button
+              className="btn btn-accent dark:border-violet-400 text-white"
+              onClick={submit}
+            >
+              Create Access Token
+            </button>
+          </div>
+        </>
+      )}
+    </Modal>
+  );
+}

components/ModalContent/PreservedFormatsModal.tsx

@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import Modal from "../Modal";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  screenshotAvailable,
+} from "@/lib/shared/getArchiveValidity";
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import useAccountStore from "@/store/account";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+
+type Props = {
+  onClose: Function;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
+  const session = useSession();
+  const { getLink } = useLinkStore();
+
+  const { account } = useAccountStore();
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== account.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === account.id) {
+        setCollectionOwner({
+          id: account.id as number,
+          name: account.name,
+          username: account.username as string,
+          image: account.image as string,
+          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsPDF: account.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      const data = await getLink(link.id as number, isPublic);
+      setLink(
+        (data as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        const data = await getLink(link.id as number, isPublic);
+        setLink(
+          (data as any).response as LinkIncludingShortenedCollectionAndTags
+        );
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.image, link?.pdf, link?.readable]);
+
+  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) {
+      const newLink = await getLink(link?.id as number);
+      setLink(
+        (newLink as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+      toast.success(`Link is being archived...`);
+    } else toast.error(data.response);
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Preserved Formats</p>
+
+      <div className="divider mb-2 mt-1"></div>
+
+      {isReady() &&
+      (screenshotAvailable(link) ||
+        pdfAvailable(link) ||
+        readabilityAvailable(link)) ? (
+        <p className="mb-3">
+          The following formats are available for this link:
+        </p>
+      ) : (
+        ""
+      )}
+
+      <div className={`flex flex-col gap-3`}>
+        {isReady() ? (
+          <>
+            {screenshotAvailable(link) ? (
+              <PreservedFormatRow
+                name={"Screenshot"}
+                icon={"bi-file-earmark-image"}
+                format={
+                  link?.image?.endsWith("png")
+                    ? ArchivedFormat.png
+                    : ArchivedFormat.jpeg
+                }
+                activeLink={link}
+                downloadable={true}
+              />
+            ) : undefined}
+
+            {pdfAvailable(link) ? (
+              <PreservedFormatRow
+                name={"PDF"}
+                icon={"bi-file-earmark-pdf"}
+                format={ArchivedFormat.pdf}
+                activeLink={link}
+                downloadable={true}
+              />
+            ) : undefined}
+
+            {readabilityAvailable(link) ? (
+              <PreservedFormatRow
+                name={"Readable"}
+                icon={"bi-file-earmark-text"}
+                format={ArchivedFormat.readability}
+                activeLink={link}
+              />
+            ) : undefined}
+          </>
+        ) : (
+          <div
+            className={`w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200`}
+          >
+            <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
+            <p className="text-center text-2xl">
+              Link preservation is in the queue
+            </p>
+            <p className="text-center text-lg">
+              Please check back later to see the result
+            </p>
+          </div>
+        )}
+
+        <div
+          className={`flex flex-col sm:flex-row gap-3 items-center justify-center ${
+            isReady() ? "sm:mt " : ""
+          }`}
+        >
+          <Link
+            href={`https://web.archive.org/web/${link?.url?.replace(
+              /(^\w+:|^)\/\//,
+              ""
+            )}`}
+            target="_blank"
+            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm`}
+          >
+            <p className="whitespace-nowrap">
+              View latest snapshot on archive.org
+            </p>
+            <i className="bi-box-arrow-up-right" />
+          </Link>
+          {link?.collection.ownerId === session.data?.user.id ? (
+            <div className={`btn btn-outline`} onClick={() => updateArchive()}>
+              <div>
+                <p>Refresh Preserved Formats</p>
+                <p className="text-xs">
+                  This deletes the current preservations
+                </p>
+              </div>
+            </div>
+          ) : undefined}
+        </div>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/RevokeTokenModal.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import { useRouter } from "next/router";
+import { AccessToken } from "@prisma/client";
+import useTokenStore from "@/store/tokens";
+
+type Props = {
+  onClose: Function;
+  activeToken: AccessToken;
+};
+
+export default function DeleteTokenModal({ onClose, activeToken }: Props) {
+  const [token, setToken] = useState<AccessToken>(activeToken);
+
+  const { revokeToken } = useTokenStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    setToken(activeToken);
+  }, []);
+
+  const deleteLink = async () => {
+    console.log(token);
+    const load = toast.loading("Deleting...");
+
+    const response = await revokeToken(token.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Token Revoked.`);
+
+    onClose();
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">Revoke Token</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>
+          Are you sure you want to revoke this Access Token? Any apps or
+          services using this token will no longer be able to access Linkwarden
+          using it.
+        </p>
+
+        <button
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+          onClick={deleteLink}
+        >
+          <i className="bi-trash text-xl" />
+          Revoke
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/UploadFileModal.tsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from "react";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useCollectionStore from "@/store/collections";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function UploadFileModal({ onClose }: Props) {
+  const { data } = useSession();
+
+  const initial = {
+    name: "",
+    url: "",
+    description: "",
+    type: "url",
+    tags: [],
+    preview: "",
+    image: "",
+    pdf: "",
+    readable: "",
+    textContent: "",
+    collection: {
+      name: "",
+      ownerId: data?.user.id as number,
+    },
+  } as LinkIncludingShortenedCollectionAndTags;
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(initial);
+
+  const [file, setFile] = useState<File>();
+
+  const { addLink } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const [optionsExpanded, setOptionsExpanded] = useState(false);
+
+  const router = useRouter();
+  const { collections } = useCollectionStore();
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
+    setLink({ ...link, tags: tagNames });
+  };
+
+  useEffect(() => {
+    setOptionsExpanded(false);
+    if (router.query.id) {
+      const currentCollection = collections.find(
+        (e) => e.id == Number(router.query.id)
+      );
+
+      if (
+        currentCollection &&
+        currentCollection.ownerId &&
+        router.asPath.startsWith("/collections/")
+      )
+        setLink({
+          ...initial,
+          collection: {
+            id: currentCollection.id,
+            name: currentCollection.name,
+            ownerId: currentCollection.ownerId,
+          },
+        });
+    } else
+      setLink({
+        ...initial,
+        collection: {
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
+      });
+  }, []);
+
+  const submit = async () => {
+    if (!submitLoader && file) {
+      let fileType: ArchivedFormat | null = null;
+      let linkType: "url" | "image" | "pdf" | null = null;
+
+      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
+        fileType = ArchivedFormat.jpeg;
+        linkType = "image";
+      } else if (file.type === "image/png") {
+        fileType = ArchivedFormat.png;
+        linkType = "image";
+      } else if (file.type === "application/pdf") {
+        fileType = ArchivedFormat.pdf;
+        linkType = "pdf";
+      }
+
+      if (fileType !== null && linkType !== null) {
+        setSubmitLoader(true);
+
+        let response;
+
+        const load = toast.loading("Creating...");
+
+        response = await addLink({
+          ...link,
+          type: linkType,
+          name: link.name ? link.name : file.name.replace(/\.[^/.]+$/, ""),
+        });
+
+        toast.dismiss(load);
+
+        if (response.ok) {
+          const formBody = new FormData();
+          file && formBody.append("file", file);
+
+          await fetch(
+            `/api/v1/archives/${
+              (response.data as LinkIncludingShortenedCollectionAndTags).id
+            }?format=${fileType}`,
+            {
+              body: formBody,
+              method: "POST",
+            }
+          );
+          toast.success(`Created!`);
+          onClose();
+        } else toast.error(response.data as string);
+
+        setSubmitLoader(false);
+
+        return response;
+      }
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <div className="flex gap-2 items-start">
+        <p className="text-xl font-thin">Upload File</p>
+      </div>
+      <div className="divider mb-3 mt-1"></div>
+      <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
+        <div className="sm:col-span-3 col-span-5">
+          <p className="mb-2">File</p>
+          <label className="btn h-10 btn-sm w-full border border-neutral-content hover:border-neutral-content flex justify-between">
+            <input
+              type="file"
+              accept=".pdf,.png,.jpg,.jpeg"
+              className="cursor-pointer custom-file-input"
+              onChange={(e) => e.target.files && setFile(e.target.files[0])}
+            />
+          </label>
+          <p className="text-xs font-semibold mt-2">
+            PDF, PNG, JPG (Up to {process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30}
+            MB)
+          </p>
+        </div>
+        <div className="sm:col-span-2 col-span-5">
+          <p className="mb-2">Collection</p>
+          {link.collection.name ? (
+            <CollectionSelection
+              onChange={setCollection}
+              defaultValue={{
+                label: link.collection.name,
+                value: link.collection.id,
+              }}
+            />
+          ) : null}
+        </div>
+      </div>
+      {optionsExpanded ? (
+        <div className="mt-5">
+          {/* <hr className="mb-3 border border-neutral-content" /> */}
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <p className="mb-2">Name</p>
+              <TextInput
+                value={link.name}
+                onChange={(e) => setLink({ ...link, name: e.target.value })}
+                placeholder="e.g. Example Link"
+                className="bg-base-200"
+              />
+            </div>
+
+            <div>
+              <p className="mb-2">Tags</p>
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => {
+                  return { label: e.name, value: e.id };
+                })}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <p className="mb-2">Description</p>
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder="Will be auto generated if nothing is provided."
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              />
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+      <div className="flex justify-between items-center mt-5">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
+        >
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+        </div>
+
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
+          Create Link
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalManagement.tsx

@@ -1,49 +0,0 @@
-import useModalStore from "@/store/modals";
-import Modal from "./Modal";
-import LinkModal from "./Modal/Link";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import CollectionModal from "./Modal/Collection";
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-export default function ModalManagement() {
-  const { modal, setModal } = useModalStore();
-
-  const toggleModal = () => {
-    setModal(null);
-  };
-
-  const router = useRouter();
-  useEffect(() => {
-    toggleModal();
-  }, [router]);
-
-  if (modal && modal.modal === "LINK")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <LinkModal
-          toggleLinkModal={toggleModal}
-          method={modal.method}
-          activeLink={modal.active as LinkIncludingShortenedCollectionAndTags}
-        />
-      </Modal>
-    );
-  else if (modal && modal.modal === "COLLECTION")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <CollectionModal
-          toggleCollectionModal={toggleModal}
-          method={modal.method}
-          isOwner={modal.isOwner as boolean}
-          defaultIndex={modal.defaultIndex}
-          activeCollection={
-            modal.active as CollectionIncludingMembersAndLinkCount
-          }
-        />
-      </Modal>
-    );
-  else return <></>;
-}

components/Navbar.tsx

@@ -1,143 +1,196 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
-import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
-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";
+import useLocalSettingsStore from "@/store/localSettings";
+import NewLinkModal from "./ModalContent/NewLinkModal";
+import NewCollectionModal from "./ModalContent/NewCollectionModal";
+import Link from "next/link";
+import UploadFileModal from "./ModalContent/UploadFileModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import MobileNavigation from "./MobileNavigation";
 
 export default function Navbar() {
-  const { setModal } = useModalStore();
+  const { settings, updateSettings } = useLocalSettingsStore();
 
   const { account } = useAccountStore();
 
-  const [profileDropdown, setProfileDropdown] = useState(false);
-
   const router = useRouter();
 
-  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);
-  }, [router]);
-
-  const toggleSidebar = () => {
-    setSidebar(!sidebar);
+  const handleToggle = () => {
+    if (settings.theme === "dark") {
+      updateSettings({ theme: "light" });
+    } else {
+      updateSettings({ theme: "dark" });
+    }
   };
 
+  useEffect(() => {
+    setSidebar(false);
+    document.body.style.overflow = "auto";
+  }, [width, router]);
+
+  const toggleSidebar = () => {
+    setSidebar(false);
+    document.body.style.overflow = "auto";
+  };
+
+  const [newLinkModal, setNewLinkModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
+  const [uploadFileModal, setUploadFileModal] = useState(false);
+
   return (
-    <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 className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
       <div
-        onClick={toggleSidebar}
-        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"
+        onClick={() => {
+          setSidebar(true);
+          document.body.style.overflow = "hidden";
+        }}
+        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden sm:inline-flex"
       >
-        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+        <i className="bi-list text-2xl leading-none"></i>
       </div>
-      <Search />
+      <SearchBar />
       <div className="flex items-center gap-2">
-        <div
-          onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              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 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}
-            className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
-          />
-          <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
-            New Link
-          </span>
+        <ToggleDarkMode className="hidden sm:inline-grid" />
+
+        <div className="dropdown dropdown-end sm:inline-block hidden">
+          <div className="tooltip tooltip-bottom" data-tip="Create New...">
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={dropdownTriggerer}
+              className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
+            >
+              <span>
+                <i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
+              </span>
+              <span>
+                <i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
+              </span>
+            </div>
+          </div>
+          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+            <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setNewLinkModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                New Link
+              </div>
+            </li>
+            {/* <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setUploadFileModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Upload File
+              </div>
+            </li> */}
+            <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setNewCollectionModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                New Collection
+              </div>
+            </li>
+          </ul>
         </div>
-        <div className="relative">
+
+        <div className="dropdown dropdown-end">
           <div
-            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"
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className="btn btn-circle btn-ghost"
           >
             <ProfilePhoto
               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-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
-            >
-              {account.name}
-            </p>
           </div>
-          {profileDropdown ? (
-            <Dropdown
-              items={[
-                {
-                  name: "Settings",
-                  href: "/settings/account",
-                },
-                {
-                  name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
-                  onClick: () => {
-                    handleToggle();
-                    setProfileDropdown(!profileDropdown);
-                  },
-                },
-                {
-                  name: "Logout",
-                  onClick: () => {
-                    signOut();
-                    setProfileDropdown(!profileDropdown);
-                  },
-                },
-              ]}
-              onClickOutside={(e: Event) => {
-                const target = e.target as HTMLInputElement;
-                if (target.id !== "profile-dropdown") setProfileDropdown(false);
-              }}
-              className="absolute top-11 right-0 z-20 w-36"
-            />
-          ) : null}
-
-          {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}
+          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+            <li>
+              <Link
+                href="/settings/account"
+                onClick={() => (document?.activeElement as HTMLElement)?.blur()}
+                tabIndex={0}
+                role="button"
               >
-                <div className="slide-right h-full shadow-lg">
-                  <Sidebar />
-                </div>
-              </ClickAwayHandler>
-            </div>
-          ) : null}
+                Settings
+              </Link>
+            </li>
+            <li className="block sm:hidden">
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  handleToggle();
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Switch to {settings.theme === "light" ? "Dark" : "Light"}
+              </div>
+            </li>
+            <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  signOut();
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Logout
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
+
+      <MobileNavigation />
+
+      {sidebar ? (
+        <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-40">
+          <ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>
+            <div className="slide-right h-full shadow-lg">
+              <Sidebar />
+            </div>
+          </ClickAwayHandler>
+        </div>
+      ) : null}
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
+      {uploadFileModal ? (
+        <UploadFileModal onClose={() => setUploadFileModal(false)} />
+      ) : undefined}
     </div>
   );
 }

components/NoLinksFound.tsx

@@ -1,40 +1,47 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import useModalStore from "@/store/modals";
+import React, { useState } from "react";
+import NewLinkModal from "./ModalContent/NewLinkModal";
 
 type Props = {
   text?: string;
 };
 
 export default function NoLinksFound({ text }: Props) {
-  const { setModal } = useModalStore();
+  const [newLinkModal, setNewLinkModal] = useState(false);
 
   return (
-    <div className="w-full h-full flex flex-col justify-center p-10">
-      <p className="text-center text-2xl text-black dark:text-white">
+    <div className="w-full h-full flex flex-col justify-center p-3">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5 text-primary drop-shadow"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+      >
+        <path d="M9.752 6.193c.599.6 1.73.437 2.528-.362.798-.799.96-1.932.362-2.531-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532" />
+        <path d="M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9.42 9.42 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a9.556 9.556 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093.067.017.12.033.16.045.184.06.279.13.351.295l.029.073a3.475 3.475 0 0 1 .157.721c.055.485.051 1.178-.159 2.065Zm-4.828 7.475.04-.04-.107 1.081a1.536 1.536 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a8.548 8.548 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006ZM5.205 5c-.625.626-.94 1.351-1.004 2.09a8.497 8.497 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107-.04.039Zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a2.835 2.835 0 0 0-.045-.283 3.078 3.078 0 0 0-.3-.041Z" />
+        <path d="M7.009 12.139a7.632 7.632 0 0 1-1.804-1.352A7.568 7.568 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z" />
+      </svg>
+      <p className="text-center text-xl sm:text-2xl">
         {text || "You haven't created any Links Here"}
       </p>
-      <div className="text-center text-black dark:text-white w-full mt-4">
+      <p className="text-center text-sm sm:text-base">
+        Start your journey by creating a new Link!
+      </p>
+      <div className="text-center w-full mt-4">
         <div
           onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              method: "CREATE",
-            });
+            setNewLinkModal(true);
           }}
-          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"
+          className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
         >
-          <FontAwesomeIcon
-            icon={faPlus}
-            className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
-          />
+          <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>
         </div>
       </div>
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
     </div>
   );
 }

components/PageHeader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function PageHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description?: string;
+  icon: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <i
+        className={`${icon} text-primary text-3xl sm:text-4xl drop-shadow`}
+      ></i>
+      <div>
+        <p className="text-3xl capitalize font-thin">{title}</p>
+        <p className="text-xs sm:text-sm">{description}</p>
+      </div>
+    </div>
+  );
+}

components/PreserverdFormatRow.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  name: string;
+  icon: string;
+  format: ArchivedFormat;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+  downloadable?: boolean;
+};
+
+export default function PreservedFormatRow({
+  name,
+  icon,
+  format,
+  activeLink,
+  downloadable,
+}: Props) {
+  const session = useSession();
+  const { getLink } = useLinkStore();
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
+  useEffect(() => {
+    (async () => {
+      const data = await getLink(link.id as number, isPublic);
+      setLink(
+        (data as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+    })();
+
+    let interval: any;
+    if (link?.image === "pending" || link?.pdf === "pending") {
+      interval = setInterval(async () => {
+        const data = await getLink(link.id as number, isPublic);
+        setLink(
+          (data as any).response as LinkIncludingShortenedCollectionAndTags
+        );
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.image, link?.pdf, link?.readable]);
+
+  const handleDownload = () => {
+    const path = `/api/v1/archives/${link?.id}?format=${format}`;
+    fetch(path)
+      .then((response) => {
+        if (response.ok) {
+          // Create a temporary link and click it to trigger the download
+          const link = document.createElement("a");
+          link.href = path;
+          link.download = format === ArchivedFormat.pdf ? "PDF" : "Screenshot";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+      <div className="flex gap-2 items-center">
+        <div className="bg-primary text-primary-content p-2 rounded-l-md">
+          <i className={`${icon} text-2xl`} />
+        </div>
+        <p>{name}</p>
+      </div>
+
+      <div className="flex gap-1">
+        {downloadable || false ? (
+          <div
+            onClick={() => handleDownload()}
+            className="btn btn-sm btn-square"
+          >
+            <i className="bi-cloud-arrow-down text-xl text-neutral" />
+          </div>
+        ) : undefined}
+
+        <Link
+          href={`${
+            isPublic ? "/public" : ""
+          }/preserved/${link?.id}?format=${format}`}
+          target="_blank"
+          className="btn btn-sm btn-square"
+        >
+          <i className="bi-box-arrow-up-right text-xl text-neutral" />
+        </Link>
+      </div>
+    </div>
+  );
+}

components/ProfilePhoto.tsx

@@ -1,16 +1,21 @@
 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";
 
 type Props = {
   src?: string;
   className?: string;
-  emptyImage?: boolean;
   priority?: boolean;
+  name?: string;
+  large?: boolean;
 };
 
-export default function ProfilePhoto({ src, className, priority }: Props) {
+export default function ProfilePhoto({
+  src,
+  className,
+  priority,
+  name,
+  large,
+}: Props) {
   const [image, setImage] = useState("");
 
   useEffect(() => {
@@ -24,23 +29,36 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
 
   return !image ? (
     <div
-      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
-        className || ""
+      className={`avatar drop-shadow-md placeholder ${className || ""} ${
+        large ? "w-28 h-28" : "w-8 h-8"
       }`}
     >
-      <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
+      <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
+        {name ? (
+          <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
+        ) : (
+          <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
+        )}
+      </div>
     </div>
   ) : (
-    <Image
-      alt=""
-      src={image}
-      height={112}
-      width={112}
-      priority={priority}
-      draggable={false}
-      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+    <div
+      className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      }`}
-    />
+      } ${large ? "w-28 h-28" : "w-8 h-8"}`}
+    >
+      <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
+        <Image
+          alt=""
+          src={image}
+          height={112}
+          width={112}
+          priority={priority}
+          draggable={false}
+          onError={() => setImage("")}
+          className="aspect-square rounded-full"
+        />
+      </div>
+    </div>
   );
 }

components/PublicPage/LinkCard.tsx

@@ -1,100 +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";
-import unescapeString from "@/lib/client/unescapeString";
-
-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="border border-solid border-sky-100 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-xs text-gray-500">{count + 1}</p>
-              <p className="text-lg text-black">
-                {unescapeString(link.name || link.description)}
-              </p>
-            </div>
-
-            <p className="text-gray-500 text-sm font-medium">
-              {unescapeString(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-black 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-black 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/RadioButton.tsx

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

components/ReadableView.tsx

@@ -0,0 +1,267 @@
+import unescapeString from "@/lib/client/unescapeString";
+import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ColorThief, { RGBColor } from "colorthief";
+import DOMPurify from "dompurify";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+
+type LinkContent = {
+  title: string;
+  content: string;
+  textContent: string;
+  length: number;
+  excerpt: string;
+  byline: string;
+  dir: string;
+  siteName: string;
+  lang: string;
+};
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function ReadableView({ link }: Props) {
+  const [linkContent, setLinkContent] = useState<LinkContent>();
+  const [imageError, setImageError] = useState<boolean>(false);
+  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
+
+  const [date, setDate] = useState<Date | string>();
+
+  const colorThief = new ColorThief();
+
+  const router = useRouter();
+
+  const { links, getLink } = useLinkStore();
+
+  useEffect(() => {
+    const fetchLinkContent = async () => {
+      if (router.query.id && readabilityAvailable(link)) {
+        const response = await fetch(
+          `/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
+        );
+
+        const data = await response?.json();
+
+        setLinkContent(data);
+      }
+    };
+
+    fetchLinkContent();
+
+    setDate(link.importDate || link.createdAt);
+  }, [link]);
+
+  useEffect(() => {
+    if (link) getLink(link?.id as number);
+
+    let interval: any;
+    if (
+      link &&
+      (link?.image === "pending" ||
+        link?.pdf === "pending" ||
+        link?.readable === "pending" ||
+        !link?.image ||
+        !link?.pdf ||
+        !link?.readable)
+    ) {
+      interval = setInterval(() => getLink(link.id as number), 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.image, link?.pdf, link?.readable]);
+
+  const rgbToHex = (r: number, g: number, b: number): string =>
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("");
+
+  useEffect(() => {
+    const banner = document.getElementById("link-banner");
+    const bannerInner = document.getElementById("link-banner-inner");
+
+    if (colorPalette && banner && bannerInner) {
+      if (colorPalette[0] && colorPalette[1]) {
+        banner.style.background = `linear-gradient(to bottom, ${rgbToHex(
+          colorPalette[0][0],
+          colorPalette[0][1],
+          colorPalette[0][2]
+        )}20, ${rgbToHex(
+          colorPalette[1][0],
+          colorPalette[1][1],
+          colorPalette[1][2]
+        )}20)`;
+      }
+
+      if (colorPalette[2] && colorPalette[3]) {
+        bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
+          colorPalette[2][0],
+          colorPalette[2][1],
+          colorPalette[2][2]
+        )}30, ${rgbToHex(
+          colorPalette[3][0],
+          colorPalette[3][1],
+          colorPalette[3][2]
+        )})30`;
+      }
+    }
+  }, [colorPalette]);
+
+  return (
+    <div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
+      <div
+        id="link-banner"
+        className="link-banner bg-opacity-10 border-neutral-content p-3 border mb-3"
+      >
+        <div id="link-banner-inner" className="link-banner-inner"></div>
+
+        <div className={`flex flex-col gap-3 items-start`}>
+          <div className="flex gap-3 items-start">
+            {!imageError && link?.url && (
+              <Image
+                src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+                width={42}
+                height={42}
+                alt=""
+                id={"favicon-" + link.id}
+                className="bg-white shadow rounded-md p-1 select-none mt-1"
+                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">
+              <p className="text-xl">
+                {unescapeString(
+                  link?.name || link?.description || link?.url || ""
+                )}
+              </p>
+              {link?.url ? (
+                <Link
+                  href={link?.url || ""}
+                  title={link?.url}
+                  target="_blank"
+                  className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
+                >
+                  <i className="bi-link-45deg"></i>
+
+                  {isValidUrl(link?.url || "")
+                    ? new URL(link?.url as string).host
+                    : undefined}
+                </Link>
+              ) : undefined}
+            </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"
+            >
+              <i
+                className="bi-folder-fill drop-shadow text-2xl"
+                style={{ color: link?.collection.color }}
+              ></i>
+              <p
+                title={link?.collection.name}
+                className="text-lg truncate max-w-[12rem]"
+              >
+                {link?.collection.name}
+              </p>
+            </Link>
+            {link?.tags.map((e, i) => (
+              <Link key={i} href={`/tags/${e.id}`} className="z-10">
+                <p
+                  title={e.name}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </p>
+              </Link>
+            ))}
+          </div>
+
+          <p className="min-w-fit text-sm text-neutral">
+            {date
+              ? new Date(date).toLocaleString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })
+              : undefined}
+          </p>
+
+          {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-5 h-full">
+        {link?.readable?.startsWith("archives") ? (
+          <div
+            className="line-break px-1 reader-view"
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(linkContent?.content || "") || "",
+            }}
+          ></div>
+        ) : (
+          <div
+            className={`w-full h-full flex flex-col justify-center p-10 ${
+              link?.readable === "pending" || !link?.readable ? "skeleton" : ""
+            }`}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
+              viewBox="0 0 16 16"
+            >
+              <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
+              <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
+            </svg>
+            <p className="text-center text-2xl">
+              The Link preservation is currently in the queue
+            </p>
+            <p className="text-center text-lg mt-2">
+              Please check back later to see the result
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/RequiredBadge.tsx

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

components/Search.tsx

@@ -1,51 +0,0 @@
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
-import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
-
-export default function Search() {
-  const router = useRouter();
-
-  const routeQuery = router.query.query;
-
-  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)}
-    >
-      <label
-        htmlFor="search-box"
-        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>
-
-      <input
-        id="search-box"
-        type="text"
-        placeholder="Search for Links"
-        value={searchQuery}
-        onChange={(e) => {
-          e.target.value.includes("%") &&
-            toast.error("The search query should not contain '%'.");
-          setSearchQuery(e.target.value.replace("%", ""));
-        }}
-        onKeyDown={(e) =>
-          e.key === "Enter" &&
-          router.push("/search?q=" + encodeURIComponent(searchQuery))
-        }
-        autoFocus={searchBox}
-        className="border border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-neutral-800"
-      />
-    </div>
-  );
-}

components/SearchBar.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+
+type Props = {
+  placeholder?: string;
+};
+
+export default function SearchBar({ placeholder }: Props) {
+  const router = useRouter();
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  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 items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+      >
+        <i className="bi-search"></i>
+      </label>
+
+      <input
+        id="search-box"
+        type="text"
+        placeholder={placeholder || "Search for Links"}
+        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 (router.pathname.startsWith("/public")) {
+              if (!searchQuery) {
+                return router.push("/public/collections/" + router.query.id);
+              }
+
+              return router.push(
+                "/public/collections/" +
+                  router.query.id +
+                  "?q=" +
+                  encodeURIComponent(searchQuery || "")
+              );
+            } else {
+              return router.push(
+                "/search?q=" + encodeURIComponent(searchQuery)
+              );
+            }
+          }
+        }}
+        className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:focus:w-80 md:w-[15rem] md:max-w-full duration-200 outline-none"
+      />
+    </div>
+  );
+}

components/SettingsSidebar.tsx

@@ -1,26 +1,10 @@
 import useCollectionStore from "@/store/collections";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faUser,
-  faPalette,
-  faBoxArchive,
-  faKey,
-} 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";
+import React, { useEffect, useState } from "react";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.2.0";
+  const LINKWARDEN_VERSION = "v2.5.2";
 
   const { collections } = useCollectionStore();
 
@@ -34,7 +18,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+      className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
         className || ""
       }`}
     >
@@ -43,56 +27,40 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={faUser}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <i className="bi-person text-primary text-2xl"></i>
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Account
-            </p>
+            <p className="truncate w-full pr-7">Account</p>
           </div>
         </Link>
 
-        <Link href="/settings/appearance">
+        <Link href="/settings/preference">
           <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`}
+              active === `/settings/preference`
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={faPalette}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <i className="bi-sliders text-primary text-2xl"></i>
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Appearance
-            </p>
+            <p className="truncate w-full pr-7">Preference</p>
           </div>
         </Link>
 
-        <Link href="/settings/archive">
+        <Link href="/settings/access-tokens">
           <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`}
+              active === `/settings/access-tokens`
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={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>
+            <i className="bi-key text-primary text-2xl"></i>
+            <p className="truncate w-full pr-7">Access Tokens</p>
           </div>
         </Link>
 
@@ -100,18 +68,12 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={faKey}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
-
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Password
-            </p>
+            <i className="bi-lock text-primary text-2xl"></i>
+            <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
 
@@ -120,18 +82,12 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <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`}
+                  ? "bg-primary/20"
+                  : "hover:bg-neutral/20"
+              } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
-              <FontAwesomeIcon
-                icon={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>
+              <i className="bi-credit-card text-primary text-xl"></i>
+              <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
         ) : undefined}
@@ -139,69 +95,46 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
       <div className="flex flex-col gap-1">
         <Link
-          href={`https://github.com/linkwarden/linkwarden/releases/tag/${LINKWARDEN_VERSION}`}
+          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"
+          className="text-neutral 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`}
+            className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              icon={faCircleQuestion as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <i className="bi-question-circle text-primary text-xl"></i>
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Help
-            </p>
+            <p className="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`}
+            className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              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>
+            <i className="bi-github text-primary text-xl"></i>
+            <p className="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`}
+            className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              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>
+            <i className="bi-twitter-x text-primary text-xl"></i>
+            <p className="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`}
+            className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
-              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>
+            <i className="bi-mastodon text-primary text-xl"></i>
+            <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>
       </div>

components/Sidebar.tsx

@@ -1,19 +1,11 @@
 import useCollectionStore from "@/store/collections";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFolder,
-  faHashtag,
-  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 SidebarHighlightLink from "@/components/SidebarHighlightLink";
+import CollectionListing from "@/components/CollectionListing";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -30,11 +22,10 @@ export default function Sidebar({ className }: { className?: string }) {
 
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
+  const [active, setActive] = useState("");
 
   const router = useRouter();
 
-  const [active, setActive] = useState("");
-
   useEffect(() => {
     localStorage.setItem("tagDisclosure", tagDisclosure ? "true" : "false");
   }, [tagDisclosure]);
@@ -52,74 +43,36 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
+      id="sidebar"
+      className={`bg-base-200 h-full w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
         className || ""
       }`}
     >
-      <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`}>
-          <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`}>
-          <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 className="grid grid-cols-2 gap-2">
+        <SidebarHighlightLink
+          title={"Dashboard"}
+          href={`/dashboard`}
+          icon={"bi-house"}
+          active={active === `/dashboard`}
+        />
+        <SidebarHighlightLink
+          title={"Pinned"}
+          href={`/links/pinned`}
+          icon={"bi-pin-angle"}
+          active={active === `/links/pinned`}
+        />
+        <SidebarHighlightLink
+          title={"All Links"}
+          href={`/links`}
+          icon={"bi-link-45deg"}
+          active={active === `/links`}
+        />
+        <SidebarHighlightLink
+          title={"All Collections"}
+          href={`/collections`}
+          icon={"bi-folder"}
+          active={active === `/collections`}
+        />
       </div>
 
       <Disclosure defaultOpen={collectionDisclosure}>
@@ -127,16 +80,14 @@ 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 dark:text-gray-300 mt-5"
+          className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p>Collections</p>
-
-          <FontAwesomeIcon
-            icon={faChevronDown}
-            className={`w-3 h-3 ${
+          <p className="text-sm">Collections</p>
+          <i
+            className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
             }`}
-          />
+          ></i>
         </Disclosure.Button>
         <Transition
           enter="transition duration-100 ease-out"
@@ -146,49 +97,8 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveFrom="transform opacity-100 translate-y-0"
           leaveTo="transform opacity-0 -translate-y-3"
         >
-          <Disclosure.Panel className="flex flex-col gap-1">
-            {collections[0] ? (
-              collections
-                .sort((a, b) => a.name.localeCompare(b.name))
-                .map((e, i) => {
-                  return (
-                    <Link key={i} href={`/collections/${e.id}`}>
-                      <div
-                        className={`${
-                          active === `/collections/${e.id}`
-                            ? "bg-sky-500"
-                            : "hover:bg-slate-500"
-                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-                      >
-                        <FontAwesomeIcon
-                          icon={faFolder}
-                          className="w-6 h-6 drop-shadow"
-                          style={{ color: e.color }}
-                        />
-                        <p className="text-black dark:text-white truncate w-full">
-                          {e.name}
-                        </p>
-
-                        {e.isPublic ? (
-                          <FontAwesomeIcon
-                            icon={faGlobe}
-                            title="This collection is being shared publicly."
-                            className="w-4 h-4 drop-shadow text-gray-500 dark:text-gray-300"
-                          />
-                        ) : undefined}
-                      </div>
-                    </Link>
-                  );
-                })
-            ) : (
-              <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 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
-                  You Have No Collections...
-                </p>
-              </div>
-            )}
+          <Disclosure.Panel>
+            <CollectionListing />
           </Disclosure.Panel>
         </Transition>
       </Disclosure>
@@ -197,13 +107,14 @@ 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 dark:text-gray-300 mt-5"
+          className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p>Tags</p>
-          <FontAwesomeIcon
-            icon={faChevronDown}
-            className={`w-3 h-3 ${tagDisclosure ? "rotate-reverse" : "rotate"}`}
-          />
+          <p className="text-sm">Tags</p>
+          <i
+            className={`bi-chevron-down  ${
+              tagDisclosure ? "rotate-reverse" : "rotate"
+            }`}
+          ></i>
         </Disclosure.Button>
         <Transition
           enter="transition duration-100 ease-out"
@@ -223,18 +134,15 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "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`}
+                            ? "bg-primary/20"
+                            : "hover:bg-neutral/20"
+                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
-                        <FontAwesomeIcon
-                          icon={faHashtag}
-                          className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
-                        />
-
-                        <p className="text-black dark:text-white truncate w-full pr-7">
-                          {e.name}
-                        </p>
+                        <i className="bi-hash text-2xl text-primary drop-shadow"></i>
+                        <p className="truncate w-full pr-7">{e.name}</p>
+                        <div className="drop-shadow text-neutral text-xs">
+                          {e._count?.links}
+                        </div>
                       </div>
                     </Link>
                   );
@@ -243,7 +151,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 dark:text-gray-300 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>

components/SidebarHighlightLink.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+export default function SidebarHighlightLink({
+  title,
+  href,
+  icon,
+  active,
+}: {
+  title: string;
+  href: string;
+  icon: string;
+  active?: boolean;
+}) {
+  return (
+    <Link href={href}>
+      <div
+        className={`${
+          active || false
+            ? "bg-primary/20"
+            : "bg-neutral-content/20 hover:bg-neutral/20"
+        } duration-200 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
+      >
+        <div
+          className={
+            "w-10 h-10 inline-flex items-center justify-center bg-black/10 dark:bg-white/5 rounded-full"
+          }
+        >
+          <i className={`${icon} text-primary text-2xl drop-shadow`}></i>
+        </div>
+        <div className={"mt-1"}>
+          <p className="truncate w-full font-semibold text-sm">{title}</p>
+        </div>
+      </div>
+    </Link>
+  );
+}

components/SortDropdown.tsx

@@ -1,68 +1,129 @@
 import React, { Dispatch, SetStateAction } from "react";
-import ClickAwayHandler from "./ClickAwayHandler";
-import RadioButton from "./RadioButton";
 import { Sort } from "@/types/global";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 type Props = {
   sortBy: Sort;
   setSort: Dispatch<SetStateAction<Sort>>;
-
-  toggleSortDropdown: Function;
 };
 
-export default function SortDropdown({
-  sortBy,
-  toggleSortDropdown,
-  setSort,
-}: Props) {
+export default function SortDropdown({ sortBy, setSort }: Props) {
   return (
-    <ClickAwayHandler
-      onClickOutside={(e: Event) => {
-        const target = e.target as HTMLInputElement;
-        if (target.id !== "sort-dropdown") toggleSortDropdown();
-      }}
-      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
-    >
-      <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)"
-          state={sortBy === Sort.DateNewestFirst}
-          onClick={() => setSort(Sort.DateNewestFirst)}
-        />
-
-        <RadioButton
-          label="Date (Oldest First)"
-          state={sortBy === Sort.DateOldestFirst}
-          onClick={() => setSort(Sort.DateOldestFirst)}
-        />
-
-        <RadioButton
-          label="Name (A-Z)"
-          state={sortBy === Sort.NameAZ}
-          onClick={() => setSort(Sort.NameAZ)}
-        />
-
-        <RadioButton
-          label="Name (Z-A)"
-          state={sortBy === Sort.NameZA}
-          onClick={() => setSort(Sort.NameZA)}
-        />
-
-        <RadioButton
-          label="Description (A-Z)"
-          state={sortBy === Sort.DescriptionAZ}
-          onClick={() => setSort(Sort.DescriptionAZ)}
-        />
-
-        <RadioButton
-          label="Description (Z-A)"
-          state={sortBy === Sort.DescriptionZA}
-          onClick={() => setSort(Sort.DescriptionZA)}
-        />
+    <div className="dropdown dropdown-bottom dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-sm btn-square btn-ghost border-none"
+      >
+        <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>
-    </ClickAwayHandler>
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Date (Newest First)"
+              checked={sortBy === Sort.DateNewestFirst}
+              onChange={() => {
+                setSort(Sort.DateNewestFirst);
+              }}
+            />
+            <span className="label-text">Date (Newest First)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Date (Oldest First)"
+              checked={sortBy === Sort.DateOldestFirst}
+              onChange={() => setSort(Sort.DateOldestFirst)}
+            />
+            <span className="label-text">Date (Oldest First)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Name (A-Z)"
+              checked={sortBy === Sort.NameAZ}
+              onChange={() => setSort(Sort.NameAZ)}
+            />
+            <span className="label-text">Name (A-Z)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Name (Z-A)"
+              checked={sortBy === Sort.NameZA}
+              onChange={() => setSort(Sort.NameZA)}
+            />
+            <span className="label-text">Name (Z-A)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Description (A-Z)"
+              checked={sortBy === Sort.DescriptionAZ}
+              onChange={() => setSort(Sort.DescriptionAZ)}
+            />
+            <span className="label-text">Description (A-Z)</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-start"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="radio"
+              name="sort-radio"
+              className="radio checked:bg-primary"
+              value="Description (Z-A)"
+              checked={sortBy === Sort.DescriptionZA}
+              onChange={() => setSort(Sort.DescriptionZA)}
+            />
+            <span className="label-text">Description (Z-A)</span>
+          </label>
+        </li>
+      </ul>
+    </div>
   );
 }

components/SubmitButton.tsx

@@ -1,9 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 type Props = {
   onClick?: Function;
-  icon?: IconProp;
   label: string;
   loading: boolean;
   className?: string;
@@ -12,7 +8,6 @@ type Props = {
 
 export default function SubmitButton({
   onClick,
-  icon,
   label,
   loading,
   className,
@@ -21,17 +16,14 @@ export default function SubmitButton({
   return (
     <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={`btn btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2 ${
+        className || ""
+      }`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      <p>{label}</p>
     </button>
   );
 }

components/TextInput.tsx

@@ -8,6 +8,7 @@ type Props = {
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
   className?: string;
+  spellCheck?: boolean;
 };
 
 export default function TextInput({
@@ -18,16 +19,18 @@ export default function TextInput({
   onChange,
   onKeyDown,
   className,
+  spellCheck,
 }: Props) {
   return (
     <input
+      spellCheck={spellCheck}
       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={`w-full rounded-md p-2 border-neutral-content border-solid border outline-none focus:border-primary duration-100 ${
         className || ""
       }`}
     />

components/ToggleDarkMode.tsx

@@ -1,29 +1,40 @@
-import { useTheme } from "next-themes";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import useLocalSettingsStore from "@/store/localSettings";
+import { useEffect, useState } from "react";
 
-export default function ToggleDarkMode() {
-  const { theme, setTheme } = useTheme();
+type Props = {
+  className?: string;
+};
 
-  const handleToggle = () => {
-    if (theme === "dark") {
-      setTheme("light");
-    } else {
-      setTheme("dark");
-    }
+export default function ToggleDarkMode({ className }: Props) {
+  const { settings, updateSettings } = useLocalSettingsStore();
+
+  const [theme, setTheme] = useState(localStorage.getItem("theme"));
+
+  const handleToggle = (e: any) => {
+    setTheme(e.target.checked ? "dark" : "light");
   };
 
+  useEffect(() => {
+    updateSettings({ theme: theme as string });
+  }, [theme]);
+
   return (
     <div
-      className="flex gap-1 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
-      onClick={handleToggle}
+      className="tooltip tooltip-bottom"
+      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
     >
-      <div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 duration-100">
-        <FontAwesomeIcon
-          icon={theme === "dark" ? faSun : faMoon}
-          className="w-1/2 h-1/2"
+      <label
+        className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
+      >
+        <input
+          type="checkbox"
+          onChange={handleToggle}
+          className="theme-controller"
+          checked={localStorage.getItem("theme") === "light" ? false : true}
         />
-      </div>
+        <i className="bi-sun-fill text-xl swap-on"></i>
+        <i className="bi-moon-fill text-xl swap-off"></i>
+      </label>
     </div>
   );
 }

components/ViewDropdown.tsx

@@ -0,0 +1,61 @@
+import React, { Dispatch, SetStateAction, useEffect } from "react";
+import useLocalSettingsStore from "@/store/localSettings";
+
+import { ViewMode } from "@/types/global";
+
+type Props = {
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
+};
+
+export default function ViewDropdown({ viewMode, setViewMode }: Props) {
+  const { updateSettings } = useLocalSettingsStore();
+
+  const onChangeViewMode = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    viewMode: ViewMode
+  ) => {
+    setViewMode(viewMode);
+  };
+
+  useEffect(() => {
+    updateSettings({ viewMode: viewMode as ViewMode });
+  }, [viewMode]);
+
+  return (
+    <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
+      <button
+        onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.Card
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
+      >
+        <i className="bi-grid w-4 h-4 text-neutral"></i>
+      </button>
+
+      <button
+        onClick={(e) => onChangeViewMode(e, ViewMode.List)}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.List
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
+      >
+        <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
+      </button>
+
+      {/* <button
+        onClick={(e) => onChangeViewMode(e, ViewMode.Grid)}
+        className={`btn btn-square btn-sm btn-ghost ${
+          viewMode == ViewMode.Grid
+            ? "bg-primary/20 hover:bg-primary/20"
+            : "hover:bg-neutral/20"
+        }`}
+      >
+        <i className="bi-columns-gap w-4 h-4 text-neutral"></i>
+      </button> */}
+    </div>
+  );
+}

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3.5"
 services:
   postgres:
-    image: postgres
+    image: postgres:16-alpine
     env_file: .env
     restart: always
     volumes:
@@ -11,7 +11,8 @@ services:
     environment:
       - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/postgres
     restart: always
-    image: ghcr.io/linkwarden/linkwarden:latest
+    # build: . # uncomment this line to build from source
+    image: ghcr.io/linkwarden/linkwarden:latest # comment this line to build from source
     ports:
       - 3000:3000
     volumes:

hooks/useCollectivePermissions.ts

@@ -0,0 +1,34 @@
+import useAccountStore from "@/store/account";
+import useCollectionStore from "@/store/collections";
+import { Member } from "@/types/global";
+import { useEffect, useState } from "react";
+
+export default function useCollectivePermissions(collectionIds: number[]) {
+  const { collections } = useCollectionStore();
+
+  const { account } = useAccountStore();
+
+  const [permissions, setPermissions] = useState<Member | true>();
+  useEffect(() => {
+    for (const collectionId of collectionIds) {
+      const collection = collections.find((e) => e.id === collectionId);
+
+      if (collection) {
+        let getPermission: Member | undefined = collection.members.find(
+          (e) => e.userId === account.id
+        );
+
+        if (
+          getPermission?.canCreate === false &&
+          getPermission?.canUpdate === false &&
+          getPermission?.canDelete === false
+        )
+          getPermission = undefined;
+
+        setPermissions(account.id === collection.ownerId || getPermission);
+      }
+    }
+  }, [account, collections, collectionIds]);
+
+  return permissions;
+}

hooks/useInitialData.tsx

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagStore from "@/store/tags";
 import useAccountStore from "@/store/account";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export default function useInitialData() {
   const { status, data } = useSession();
@@ -10,10 +11,12 @@ export default function useInitialData() {
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
   const { account, setAccount } = useAccountStore();
+  const { setSettings } = useLocalSettingsStore();
 
-  // Get account info
   useEffect(() => {
+    setSettings();
     if (status === "authenticated") {
+      // Get account info
       setAccount(data?.user.id as number);
     }
   }, [status, data]);

hooks/useLinks.tsx

@@ -1,5 +1,5 @@
 import { LinkRequestQuery } from "@/types/global";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import useDetectPageBottom from "./useDetectPageBottom";
 import { useRouter } from "next/router";
 import useLinkStore from "@/store/links";
@@ -18,9 +18,12 @@ export default function useLinks(
     searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
-  const { links, setLinks, resetLinks } = useLinkStore();
+  const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } =
+    useLinkStore();
   const router = useRouter();
 
+  const [isLoading, setIsLoading] = useState(true);
+
   const { reachedBottom, setReachedBottom } = useDetectPageBottom();
 
   const getLinks = async (isInitialCall: boolean, cursor?: number) => {
@@ -50,22 +53,34 @@ export default function useLinks(
         .join("&");
     };
 
-    const queryString = buildQueryString(params);
+    let queryString = buildQueryString(params);
 
-    const response = await fetch(
-      `/api/v1/${
-        router.asPath === "/dashboard" ? "dashboard" : "links"
-      }?${queryString}`
-    );
+    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";
+
+    setIsLoading(true);
+
+    const response = await fetch(`${basePath}?${queryString}`);
 
     const data = await response.json();
 
+    setIsLoading(false);
+
     if (response.ok) setLinks(data.response, isInitialCall);
   };
 
   useEffect(() => {
+    // Save the selected links before resetting the links
+    // and then restore the selected links after resetting the links
+    const previouslySelected = selectedLinks;
     resetLinks();
 
+    setSelectedLinks(previouslySelected);
     getLinks(true);
   }, [
     router,
@@ -83,4 +98,6 @@ export default function useLinks(
 
     setReachedBottom(false);
   }, [reachedBottom]);
+
+  return { isLoading };
 }