minor change

.env.sample

@@ -15,24 +15,12 @@ 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=
-NEXT_PUBLIC_DEMO=
-NEXT_PUBLIC_DEMO_USERNAME=
-NEXT_PUBLIC_DEMO_PASSWORD=
-NEXT_PUBLIC_ADMIN=
-NEXT_PUBLIC_MAX_FILE_BUFFER=
-MONOLITH_MAX_BUFFER=
-MONOLITH_CUSTOM_OPTIONS=
-PDF_MAX_BUFFER=
-SCREENSHOT_MAX_BUFFER=
-READABILITY_MAX_BUFFER=
-PREVIEW_MAX_BUFFER=
-IMPORT_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -46,7 +34,6 @@ SPACES_FORCE_PATH_STYLE=
 NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
-BASE_URL=
 
 # Proxy settings
 PROXY=
@@ -58,9 +45,9 @@ PROXY_BYPASS=
 PDF_MARGIN_TOP=
 PDF_MARGIN_BOTTOM=
 
-#################
+#
-# SSO Providers #
+# SSO Providers
-#################
+#
 
 # 42 School
 NEXT_PUBLIC_FORTYTWO_ENABLED=
@@ -88,12 +75,6 @@ AUTH0_ISSUER=
 AUTH0_CLIENT_SECRET=
 AUTH0_CLIENT_ID=
 
-# Authelia
-NEXT_PUBLIC_AUTHELIA_ENABLED=""
-AUTHELIA_CLIENT_ID=""
-AUTHELIA_CLIENT_SECRET=""
-AUTHELIA_WELLKNOWN_URL=""
-
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
 AUTHENTIK_CUSTOM_NAME=
@@ -101,25 +82,12 @@ AUTHENTIK_ISSUER=
 AUTHENTIK_CLIENT_ID=
 AUTHENTIK_CLIENT_SECRET=
 
-# Azure AD B2C
-NEXT_PUBLIC_AZURE_AD_B2C_ENABLED=
-AZURE_AD_B2C_TENANT_NAME=
-AZURE_AD_B2C_CLIENT_ID=
-AZURE_AD_B2C_CLIENT_SECRET=
-AZURE_AD_B2C_PRIMARY_USER_FLOW=
-
-# Azure AD
-NEXT_PUBLIC_AZURE_AD_ENABLED=
-AZURE_AD_CLIENT_ID=
-AZURE_AD_CLIENT_SECRET=
-AZURE_AD_TENANT_ID=
-
 # Battle.net
 NEXT_PUBLIC_BATTLENET_ENABLED=
 BATTLENET_CUSTOM_NAME=
 BATTLENET_CLIENT_ID=
 BATTLENET_CLIENT_SECRET=
-BATTLENET_ISSUER=
+BATLLENET_ISSUER=
 
 # Box
 NEXT_PUBLIC_BOX_ENABLED=
@@ -208,8 +176,8 @@ FUSIONAUTH_TENANT_ID=
 # GitHub
 NEXT_PUBLIC_GITHUB_ENABLED=
 GITHUB_CUSTOM_NAME=
-GITHUB_ID=
+GITHUB_CLIENT_ID=
-GITHUB_SECRET=
+GITHUB_CLIENT_SECRET=
 
 # GitLab
 NEXT_PUBLIC_GITLAB_ENABLED=

.github/workflows/playwright-tests.yml

@@ -1,143 +0,0 @@
-name: Linkwarden Playwright Tests
-
-on:
-  push:
-    branches:
-      - main
-      - qacomet/**
-  pull_request:
-  workflow_dispatch:
-
-env:
-  PGHOST: localhost
-  PGPORT: 5432
-  PGUSER: postgres
-  PGPASSWORD: password
-  PGDATABASE: postgres
-
-  TEST_POSTGRES_USER: test_linkwarden_user
-  TEST_POSTGRES_PASSWORD: password
-  TEST_POSTGRES_DATABASE: test_linkwarden_db
-  TEST_POSTGRES_DATABASE_TEMPLATE: test_linkwarden_db_template
-  TEST_POSTGRES_HOST: localhost
-  TEST_POSTGREST_PORT: 5432
-  PRODUCTION_POSTGRES_DATABASE: linkwarden_db
-
-  NEXTAUTH_SECRET: very_sensitive_secret
-  NEXTAUTH_URL: http://localhost:3000/api/v1/auth
-
-  # Manual installation database settings
-  DATABASE_URL: postgresql://test_linkwarden_user:password@localhost:5432/test_linkwarden_db
-
-  # Docker installation database settings
-  POSTGRES_PASSWORD: password
-
-  TEST_USERNAME: test-user
-  TEST_PASSWORD: password
-
-jobs:
-  playwright-test-runner:
-    strategy:
-      matrix:
-        test_case: ['@login']
-    timeout-minutes: 20
-    runs-on:
-      - ubuntu-22.04
-    services:
-      postgres:
-        image: postgres:16-alpine
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: password
-          POSTGRES_DB: postgres
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18"
-          cache: 'yarn'
-
-      - name: Initialize PostgreSQL
-        run: |
-          echo "Initializing Databases"
-          psql -h localhost -U postgres -d postgres -c "CREATE USER ${{ env.TEST_POSTGRES_USER }} WITH PASSWORD '${{ env.TEST_POSTGRES_PASSWORD }}';"
-          psql -h localhost -U postgres -d postgres -c "CREATE DATABASE ${{ env.TEST_POSTGRES_DATABASE }} OWNER ${{ env.TEST_POSTGRES_USER }};"
-
-      - name: Install packages
-        run: yarn install -y
-
-      - name: Cache playwright dependencies
-        uses: awalsh128/cache-apt-pkgs-action@latest
-        with:
-          packages: |
-            ffmpeg fonts-freefont-ttf fonts-ipafont-gothic fonts-tlwg-loma-otf
-            fonts-unifont fonts-wqy-zenhei gstreamer1.0-libav gstreamer1.0-plugins-bad
-            gstreamer1.0-plugins-base gstreamer1.0-plugins-good libaa1 libass9
-            libasyncns0 libavc1394-0 libavcodec58 libavdevice58 libavfilter7
-            libavformat58 libavutil56 libbluray2 libbs2b0 libcaca0 libcdio-cdda2
-            libcdio-paranoia2 libcdio19 libcdparanoia0 libchromaprint1 libcodec2-1.0
-            libdc1394-25 libdca0 libdecor-0-0 libdv4 libdvdnav4 libdvdread8 libegl-mesa0
-            libegl1 libevdev2 libevent-2.1-7 libfaad2 libffi7 libflac8 libflite1
-            libfluidsynth3 libfreeaptx0 libgles2 libgme0 libgsm1 libgssdp-1.2-0
-            libgstreamer-gl1.0-0 libgstreamer-plugins-bad1.0-0
-            libgstreamer-plugins-base1.0-0 libgstreamer-plugins-good1.0-0 libgupnp-1.2-1
-            libgupnp-igd-1.0-4 libharfbuzz-icu0 libhyphen0 libiec61883-0
-            libinstpatch-1.0-2 libjack-jackd2-0 libkate1 libldacbt-enc2 liblilv-0-0
-            libltc11 libmanette-0.2-0 libmfx1 libmjpegutils-2.1-0 libmodplug1
-            libmp3lame0 libmpcdec6 libmpeg2encpp-2.1-0 libmpg123-0 libmplex2-2.1-0
-            libmysofa1 libnice10 libnotify4 libopenal-data libopenal1 libopengl0
-            libopenh264-6 libopenmpt0 libopenni2-0 libopus0 liborc-0.4-0
-            libpocketsphinx3 libpostproc55 libpulse0 libqrencode4 libraw1394-11
-            librubberband2 libsamplerate0 libsbc1 libsdl2-2.0-0 libserd-0-0 libshine3
-            libshout3 libsndfile1 libsndio7.0 libsord-0-0 libsoundtouch1 libsoup-3.0-0
-            libsoup-3.0-common libsoxr0 libspandsp2 libspeex1 libsphinxbase3
-            libsratom-0-0 libsrt1.4-gnutls libsrtp2-1 libssh-gcrypt-4 libswresample3
-            libswscale5 libtag1v5 libtag1v5-vanilla libtheora0 libtwolame0 libudfread0
-            libv4l-0 libv4lconvert0 libva-drm2 libva-x11-2 libva2 libvdpau1
-            libvidstab1.1 libvisual-0.4-0 libvo-aacenc0 libvo-amrwbenc0 libvorbisenc2
-            libvpx7 libwavpack1 libwebrtc-audio-processing1 libwildmidi2 libwoff1
-            libx264-163 libxcb-shape0 libxv1 libxvidcore4 libzbar0 libzimg2
-            libzvbi-common libzvbi0 libzxingcore1 ocl-icd-libopencl1 timgm6mb-soundfont
-            xfonts-cyrillic xfonts-encodings xfonts-scalable xfonts-utils
-
-      - name: Cache playwright browsers
-        id: cache-playwright
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-playwright-
-
-      - name: Install playwright
-        if: steps.cache-playwright.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
-
-      - name: Setup project
-        run: |
-          yarn prisma generate
-          yarn build
-          yarn prisma migrate deploy
-
-      - name: Start linkwarden server and worker
-        run: yarn start &
-
-      - name: Run Tests
-        run: npx playwright test --grep ${{ matrix.test_case }}
-
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: test-results
-          retention-days: 30

.gitignore

@@ -42,15 +42,9 @@ prisma/dev.db
 # tests
 /tests
 /test-results/
-/blob-report/
 /playwright-report/
 /playwright/.cache/
-/playwright/.auth/
 
 # docker
 pgdata
-certificates
+certificates
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

.prettierignore

@@ -1,6 +1,6 @@
 node_modules
 .next
-/public
+public
 
 *.lock
 *.log

.vscode/settings.json

@@ -1,6 +1 @@
-{
+{}
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
-}

ARCHITECTURE.md

@@ -1,45 +0,0 @@
-# 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

@@ -8,33 +8,16 @@ WORKDIR /data
 
 COPY ./package.json ./yarn.lock ./playwright.config.ts ./
 
+# Increase timeout to pass github actions arm64 build
 RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn yarn install --network-timeout 10000000
 
-RUN apt-get update
-
-RUN apt-get install -y \
-    build-essential \
-    curl \
-    libssl-dev \
-    pkg-config
-
-RUN apt-get update
-
-RUN curl https://sh.rustup.rs -sSf | bash -s -- -y
-
-ENV PATH="/root/.cargo/bin:${PATH}"
-
-RUN cargo install monolith
-
 RUN npx playwright install-deps && \
     apt-get clean && \
     yarn cache clean
 
-RUN yarn playwright install
-
 COPY . .
 
 RUN yarn prisma generate && \
     yarn build
 
-CMD yarn prisma migrate deploy && yarn start
+CMD yarn prisma migrate deploy && yarn start

README.md

@@ -57,7 +57,7 @@ We've forked the old version from the current repository into [this repo](https:
 
 ## Features
 
-- 📸 Auto capture a screenshot, PDF, single html file, and readable view of each webpage.
+- 📸 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, sub-collection, name, description and multiple tags.
 - 👥 Collaborate on gathering links in a collection.

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/Announcement.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link";
-import React, { MouseEventHandler } from "react";
-import { Trans } from "next-i18next";
-
-type Props = {
-  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
-};
-
-export default function Announcement({ toggleAnnouncementBar }: Props) {
-  const announcementId = localStorage.getItem("announcementId");
-
-  return (
-    <div className="fixed mx-auto bottom-20 sm:bottom-10 w-full pointer-events-none p-5 z-30">
-      <div className="mx-auto pointer-events-auto p-2 flex justify-between gap-2 items-center border border-primary shadow-xl rounded-xl bg-base-300 backdrop-blur-sm bg-opacity-80 max-w-md">
-        <i className="bi-stars text-2xl text-yellow-600 dark:text-yellow-500"></i>
-        <p className="w-4/5 text-center text-sm sm:text-base">
-          <Trans
-            i18nKey="new_version_announcement"
-            values={{ version: announcementId }}
-            components={[
-              <Link
-                href={`https://blog.linkwarden.app/releases/${announcementId}`}
-                target="_blank"
-                className="underline"
-                key={0}
-              />,
-            ]}
-          />
-        </p>
-        <button
-          onClick={toggleAnnouncementBar}
-          className="btn btn-ghost btn-square btn-sm"
-        >
-          <i className="bi-x text-xl"></i>
-        </button>
-      </div>
-    </div>
-  );
-}

components/AnnouncementBar.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+
+type Props = {
+  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
+};
+
+export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+  return (
+    <div className="fixed w-full z-20 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.5"
+            target="_blank"
+            className="underline hover:opacity-50 duration-100"
+          >
+            Linkwarden v2.5
+          </Link>
+          ! 🥳️
+        </div>
+
+        <button
+          className="fixed right-3 hover:opacity-50 duration-100"
+          onClick={toggleAnnouncementBar}
+        >
+          <i className="bi-x text-neutral text-2xl"></i>
+        </button>
+      </div>
+    </div>
+  );
+}

components/ClickAwayHandler.tsx

@@ -8,38 +8,19 @@ type Props = {
   onMount?: (rect: DOMRect) => void;
 };
 
-function getZIndex(element: HTMLElement): number {
-  let zIndex = 0;
-  while (element) {
-    const zIndexStyle = window
-      .getComputedStyle(element)
-      .getPropertyValue("z-index");
-    const numericZIndex = Number(zIndexStyle);
-    if (zIndexStyle !== "auto" && !isNaN(numericZIndex)) {
-      zIndex = numericZIndex;
-      break;
-    }
-    element = element.parentElement as HTMLElement;
-  }
-  return zIndex;
-}
-
 function useOutsideAlerter(
   ref: RefObject<HTMLElement>,
   onClickOutside: Function
 ) {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    function handleClickOutside(event: Event) {
-      const clickedElement = event.target as HTMLElement;
+      if (
-      if (ref.current && !ref.current.contains(clickedElement)) {
+        ref.current &&
-        const refZIndex = getZIndex(ref.current);
+        !ref.current.contains(event.target as HTMLInputElement)
-        const clickedZIndex = getZIndex(clickedElement);
+      ) {
-        if (clickedZIndex <= refZIndex) {
+        onClickOutside(event);
-          onClickOutside(event);
-        }
       }
     }
-
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);

components/CollectionCard.tsx

@@ -10,7 +10,6 @@ import EditCollectionModal from "./ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -18,7 +17,6 @@ type Props = {
 };
 
 export default function CollectionCard({ collection, className }: Props) {
-  const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
   const { account } = useAccountStore();
 
@@ -39,7 +37,6 @@ export default function CollectionCard({ collection, className }: Props) {
     username: "",
     image: "",
     archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
     archiveAsPDF: undefined as unknown as boolean,
   });
 
@@ -55,7 +52,6 @@ export default function CollectionCard({ collection, className }: Props) {
           username: account.username as string,
           image: account.image as string,
           archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsMonolith as boolean,
           archiveAsPDF: account.archiveAsPDF as boolean,
         });
       }
@@ -80,8 +76,8 @@ export default function CollectionCard({ collection, className }: Props) {
         >
           <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
-          {permissions === true && (
+          {permissions === true ? (
             <li>
               <div
                 role="button"
@@ -91,10 +87,10 @@ export default function CollectionCard({ collection, className }: Props) {
                   setEditCollectionModal(true);
                 }}
               >
-                {t("edit_collection_info")}
+                Edit Collection Info
               </div>
             </li>
-          )}
+          ) : undefined}
           <li>
             <div
               role="button"
@@ -104,9 +100,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 setEditCollectionSharingModal(true);
               }}
             >
-              {permissions === true
+              {permissions === true ? "Share and Collaborate" : "View Team"}
-                ? t("share_and_collaborate")
-                : t("view_team")}
             </div>
           </li>
           <li>
@@ -118,9 +112,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 setDeleteCollectionModal(true);
               }}
             >
-              {permissions === true
+              {permissions === true ? "Delete Collection" : "Leave Collection"}
-                ? t("delete_collection")
-                : t("leave_collection")}
             </div>
           </li>
         </ul>

components/CollectionListing.tsx

@@ -16,14 +16,12 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
 import toast from "react-hot-toast";
-import { useTranslation } from "next-i18next";
 
 interface ExtendedTreeItem extends TreeItem {
   data: Collection;
 }
 
 const CollectionListing = () => {
-  const { t } = useTranslation();
   const { collections, updateCollection } = useCollectionStore();
   const { account, updateAccount } = useAccountStore();
 
@@ -143,7 +141,9 @@ const CollectionListing = () => {
       (destinationCollection?.ownerId !== account.id &&
         destination.parentId !== "root")
     ) {
-      return toast.error(t("cant_change_collection_you_dont_own"));
+      return toast.error(
+        "You can't make change to a collection you don't own."
+      );
     }
 
     setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
@@ -201,11 +201,7 @@ const CollectionListing = () => {
   };
 
   if (!tree) {
-    return (
+    return <></>;
-      <p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
-        {t("you_have_no_collections")}
-      </p>
-    );
   } else
     return (
       <Tree

components/DashboardItem.tsx

@@ -9,12 +9,12 @@ export default function dashboardItem({
 }) {
   return (
     <div className="flex items-center">
-      <div className="w-[4rem] aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
+      <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-3xl drop-shadow`}></i>
+        <i className={`${icon} text-primary text-4xl drop-shadow`}></i>
       </div>
       <div className="ml-4 flex flex-col justify-center">
         <p className="text-neutral text-xs tracking-wider">{name}</p>
-        <p className="font-thin text-5xl text-primary mt-0.5">{value}</p>
+        <p className="font-thin text-6xl text-primary mt-0.5">{value}</p>
       </div>
     </div>
   );

components/FilterSearchDropdown.tsx

@@ -1,6 +1,5 @@
 import { dropdownTriggerer } from "@/lib/client/utils";
 import React from "react";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   setSearchFilter: Function;
@@ -17,8 +16,6 @@ export default function FilterSearchDropdown({
   setSearchFilter,
   searchFilter,
 }: Props) {
-  const { t } = useTranslation();
-
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div
@@ -41,11 +38,11 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.name}
-              onChange={() =>
+              onChange={() => {
-                setSearchFilter({ ...searchFilter, name: !searchFilter.name })
+                setSearchFilter({ ...searchFilter, name: !searchFilter.name });
-              }
+              }}
             />
-            <span className="label-text">{t("name")}</span>
+            <span className="label-text">Name</span>
           </label>
         </li>
         <li>
@@ -59,11 +56,11 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.url}
-              onChange={() =>
+              onChange={() => {
-                setSearchFilter({ ...searchFilter, url: !searchFilter.url })
+                setSearchFilter({ ...searchFilter, url: !searchFilter.url });
-              }
+              }}
             />
-            <span className="label-text">{t("link")}</span>
+            <span className="label-text">Link</span>
           </label>
         </li>
         <li>
@@ -77,14 +74,14 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.description}
-              onChange={() =>
+              onChange={() => {
                 setSearchFilter({
                   ...searchFilter,
                   description: !searchFilter.description,
-                })
+                });
-              }
+              }}
             />
-            <span className="label-text">{t("description")}</span>
+            <span className="label-text">Description</span>
           </label>
         </li>
         <li>
@@ -98,11 +95,14 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.tags}
-              onChange={() =>
+              onChange={() => {
-                setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
+                setSearchFilter({
-              }
+                  ...searchFilter,
+                  tags: !searchFilter.tags,
+                });
+              }}
             />
-            <span className="label-text">{t("tags")}</span>
+            <span className="label-text">Tags</span>
           </label>
         </li>
         <li>
@@ -116,17 +116,16 @@ export default function FilterSearchDropdown({
               name="search-filter-checkbox"
               className="checkbox checkbox-primary"
               checked={searchFilter.textContent}
-              onChange={() =>
+              onChange={() => {
                 setSearchFilter({
                   ...searchFilter,
                   textContent: !searchFilter.textContent,
-                })
+                });
-              }
+              }}
             />
-            <span className="label-text">{t("full_content")}</span>
+            <span className="label-text">Full Content</span>
-            <div className="ml-auto badge badge-sm badge-neutral">
+
-              {t("slower")}
+            <div className="ml-auto badge badge-sm badge-neutral">Slower</div>
-            </div>
           </label>
         </li>
       </ul>

components/InstallApp.tsx

@@ -1,54 +0,0 @@
-import { isPWA } from "@/lib/client/utils";
-import React, { useState } from "react";
-import { Trans } from "next-i18next";
-
-type Props = {};
-
-const InstallApp = (props: Props) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return isOpen && !isPWA() ? (
-    <div className="absolute left-0 right-0 bottom-10 w-full p-5">
-      <div className="mx-auto w-fit p-2 flex justify-between gap-2 items-center border border-neutral-content rounded-xl bg-base-300 backdrop-blur-md bg-opacity-80 max-w-md">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="w-8 h-8"
-          viewBox="0 0 50 50"
-        >
-          <path
-            fill="currentColor"
-            d="M30.3 13.7L25 8.4l-5.3 5.3l-1.4-1.4L25 5.6l6.7 6.7z"
-          />
-          <path fill="currentColor" d="M24 7h2v21h-2z" />
-          <path
-            fill="currentColor"
-            d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3"
-          />
-        </svg>
-        <p className="w-4/5 text-[0.92rem]">
-          <Trans
-            i18nKey="pwa_install_prompt"
-            components={[
-              <a
-                className="underline"
-                target="_blank"
-                href="https://docs.linkwarden.app/getting-started/pwa-installation"
-                key={0}
-              />,
-            ]}
-          />
-        </p>
-        <button
-          onClick={() => setIsOpen(false)}
-          className="btn btn-ghost btn-square btn-sm"
-        >
-          <i className="bi-x text-xl"></i>
-        </button>
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-};
-
-export default InstallApp;

components/LinkListOptions.tsx

@@ -1,206 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import FilterSearchDropdown from "./FilterSearchDropdown";
-import SortDropdown from "./SortDropdown";
-import ViewDropdown from "./ViewDropdown";
-import { TFunction } from "i18next";
-import BulkDeleteLinksModal from "./ModalContent/BulkDeleteLinksModal";
-import BulkEditLinksModal from "./ModalContent/BulkEditLinksModal";
-import toast from "react-hot-toast";
-import useCollectivePermissions from "@/hooks/useCollectivePermissions";
-import { useRouter } from "next/router";
-import useLinkStore from "@/store/links";
-import { Sort } from "@/types/global";
-
-type Props = {
-  children: React.ReactNode;
-  t: TFunction<"translation", undefined>;
-  viewMode: string;
-  setViewMode: Dispatch<SetStateAction<string>>;
-  searchFilter?: {
-    name: boolean;
-    url: boolean;
-    description: boolean;
-    tags: boolean;
-    textContent: boolean;
-  };
-  setSearchFilter?: (filter: {
-    name: boolean;
-    url: boolean;
-    description: boolean;
-    tags: boolean;
-    textContent: boolean;
-  }) => void;
-  sortBy: Sort;
-  setSortBy: Dispatch<SetStateAction<Sort>>;
-  editMode?: boolean;
-  setEditMode?: (mode: boolean) => void;
-};
-
-const LinkListOptions = ({
-  children,
-  t,
-  viewMode,
-  setViewMode,
-  searchFilter,
-  setSearchFilter,
-  sortBy,
-  setSortBy,
-  editMode,
-  setEditMode,
-}: Props) => {
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
-    useLinkStore();
-
-  const router = useRouter();
-
-  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
-  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
-
-  useEffect(() => {
-    if (editMode && setEditMode) return setEditMode(false);
-  }, [router]);
-
-  const collectivePermissions = useCollectivePermissions(
-    selectedLinks.map((link) => link.collectionId as number)
-  );
-
-  const handleSelectAll = () => {
-    if (selectedLinks.length === links.length) {
-      setSelectedLinks([]);
-    } else {
-      setSelectedLinks(links.map((link) => link));
-    }
-  };
-
-  const bulkDeleteLinks = async () => {
-    const load = toast.loading(t("deleting_selections"));
-
-    const response = await deleteLinksById(
-      selectedLinks.map((link) => link.id as number)
-    );
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(
-        selectedLinks.length === 1
-          ? t("link_deleted")
-          : t("links_deleted", { count: selectedLinks.length })
-      );
-    } else {
-      toast.error(response.data as string);
-    }
-  };
-
-  return (
-    <>
-      <div className="flex justify-between items-center">
-        {children}
-
-        <div className="flex gap-3 items-center justify-end">
-          <div className="flex gap-2 items-center mt-2">
-            {links.length > 0 && editMode !== undefined && setEditMode && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
-            {searchFilter && setSearchFilter && (
-              <FilterSearchDropdown
-                searchFilter={searchFilter}
-                setSearchFilter={setSearchFilter}
-              />
-            )}
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
-        </div>
-      </div>
-
-      {editMode && links.length > 0 && (
-        <div className="w-full flex justify-between items-center min-h-[32px]">
-          {links.length > 0 && (
-            <div className="flex gap-3 ml-3">
-              <input
-                type="checkbox"
-                className="checkbox checkbox-primary"
-                onChange={() => handleSelectAll()}
-                checked={
-                  selectedLinks.length === links.length && links.length > 0
-                }
-              />
-              {selectedLinks.length > 0 ? (
-                <span>
-                  {selectedLinks.length === 1
-                    ? t("link_selected")
-                    : t("links_selected", { count: selectedLinks.length })}
-                </span>
-              ) : (
-                <span>{t("nothing_selected")}</span>
-              )}
-            </div>
-          )}
-          <div className="flex gap-3">
-            <button
-              onClick={() => setBulkEditLinksModal(true)}
-              className="btn btn-sm btn-accent text-white w-fit ml-auto"
-              disabled={
-                selectedLinks.length === 0 ||
-                !(
-                  collectivePermissions === true ||
-                  collectivePermissions?.canUpdate
-                )
-              }
-            >
-              {t("edit")}
-            </button>
-            <button
-              onClick={(e) => {
-                (document?.activeElement as HTMLElement)?.blur();
-                e.shiftKey ? bulkDeleteLinks() : setBulkDeleteLinksModal(true);
-              }}
-              className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
-              disabled={
-                selectedLinks.length === 0 ||
-                !(
-                  collectivePermissions === true ||
-                  collectivePermissions?.canDelete
-                )
-              }
-            >
-              {t("delete")}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {bulkDeleteLinksModal && (
-        <BulkDeleteLinksModal
-          onClose={() => {
-            setBulkDeleteLinksModal(false);
-          }}
-        />
-      )}
-
-      {bulkEditLinksModal && (
-        <BulkEditLinksModal
-          onClose={() => {
-            setBulkEditLinksModal(false);
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default LinkListOptions;

components/LinkViews/Layouts/CardView.tsx

@@ -13,7 +13,7 @@ export default function CardView({
   isLoading?: boolean;
 }) {
   return (
-    <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
+    <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

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/MasonryView.tsx

@@ -1,58 +0,0 @@
-import LinkMasonry from "@/components/LinkViews/LinkMasonry";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { GridLoader } from "react-spinners";
-import Masonry from "react-masonry-css";
-import resolveConfig from "tailwindcss/resolveConfig";
-import tailwindConfig from "../../../tailwind.config.js";
-import { useMemo } from "react";
-
-export default function MasonryView({
-  links,
-  editMode,
-  isLoading,
-}: {
-  links: LinkIncludingShortenedCollectionAndTags[];
-  editMode?: boolean;
-  isLoading?: boolean;
-}) {
-  const fullConfig = resolveConfig(tailwindConfig as any);
-
-  const breakpointColumnsObj = useMemo(() => {
-    return {
-      default: 5,
-      1900: 4,
-      1500: 3,
-      880: 2,
-      550: 1,
-    };
-  }, []);
-
-  return (
-    <Masonry
-      breakpointCols={breakpointColumnsObj}
-      columnClassName="flex flex-col gap-5 !w-full"
-      className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5"
-    >
-      {links.map((e, i) => {
-        return (
-          <LinkMasonry
-            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"
-        />
-      )}
-    </Masonry>
-  );
-}

components/LinkViews/LinkCard.tsx

@@ -19,8 +19,6 @@ import { generateLinkHref } from "@/lib/client/generateLinkHref";
 import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
-import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -31,9 +29,6 @@ type Props = {
 };
 
 export default function LinkCard({ link, flipDropdown, editMode }: Props) {
-  const { t } = useTranslation();
-
-  const viewMode = localStorage.getItem("viewMode") || "card";
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
 
@@ -58,9 +53,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   let shortendURL;
 
   try {
-    if (link.url) {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
-      shortendURL = new URL(link.url).host.toLowerCase();
-    }
   } catch (error) {
     console.log(error);
   }
@@ -116,6 +109,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
     editMode &&
     (permissions === true || permissions?.canCreate || permissions?.canDelete);
 
+  // window.open ('www.yourdomain.com', '_ blank');
   return (
     <div
       ref={ref}
@@ -124,101 +118,101 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
         selectable
           ? handleCheckboxClick(link)
           : editMode
-            ? toast.error(t("link_selection_error"))
+            ? toast.error(
+                "You don't have permission to edit or delete this item."
+              )
             : undefined
       }
     >
       <div
-        className="rounded-2xl cursor-pointer h-full flex flex-col justify-between"
+        className="rounded-2xl cursor-pointer"
         onClick={() =>
           !editMode && window.open(generateLinkHref(link, account), "_blank")
         }
       >
-        <div>
+        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          <div className="relative rounded-t-2xl h-40 overflow-hidden">
+          {previewAvailable(link) ? (
-            {previewAvailable(link) ? (
+            <Image
-              <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-                src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+              width={1280}
-                width={1280}
+              height={720}
-                height={720}
+              alt=""
-                alt=""
+              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-                className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              style={{ filter: "blur(2px)" }}
-                style={
+              draggable="false"
-                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
+              onError={(e) => {
-                }
+                const target = e.target as HTMLElement;
-                draggable="false"
+                target.style.display = "none";
-                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>
-              />
+          ) : (
-            ) : link.preview === "unavailable" ? (
+            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-              <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+          )}
-            ) : (
+          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-              <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+            <LinkIcon link={link} />
-            )}
-            {link.type !== "image" && (
-              <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 border-t border-neutral-content h-[1px]" />
         </div>
 
-        <div className="flex flex-col justify-between h-full">
+        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-          <div className="p-3 flex flex-col gap-2">
-            <p className="truncate w-full pr-9 text-primary text-sm">
-              {unescapeString(link.name)}
-            </p>
 
-            <LinkTypeBadge link={link} />
+        <div className="p-3 mt-1">
-          </div>
+          <p className="truncate w-full pr-8 text-primary">
-
+            {unescapeString(link.name || link.description) || link.url}
-          <div>
+          </p>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
-
+          <Link
-            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
+            href={link.url || ""}
-              <div className="cursor-pointer truncate">
+            target="_blank"
-                {collection && (
+            title={link.url || ""}
-                  <LinkCollection link={link} collection={collection} />
+            onClick={(e) => {
-                )}
+              e.stopPropagation();
-              </div>
+            }}
-              <LinkDate link={link} />
+            className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
-            </div>
+          >
+            <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-[0.9rem] fade-in overflow-y-auto">
+        <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">
+          <p className="text-neutral text-lg font-semibold">Description</p>
-            {t("description")}
-          </p>
 
-          <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
+          <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">
-                {t("no_description")}
+                No description provided.
               </span>
             )}
           </p>
-          {link.tags && link.tags[0] && (
+          {link.tags[0] && (
             <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
+              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
-                {t("tags")}
-              </p>
 
-              <hr className="divider my-2 border-t border-neutral-content h-[1px]" />
+              <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">

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -11,7 +11,6 @@ import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -19,7 +18,6 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
-  alignToTop?: boolean;
   flipDropdown?: boolean;
 };
 
@@ -28,11 +26,8 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
-  alignToTop,
   flipDropdown,
 }: Props) {
-  const { t } = useTranslation();
-
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -46,7 +41,7 @@ export default function LinkActions({
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
 
-    const load = toast.loading(t("applying"));
+    const load = toast.loading("Applying...");
 
     const response = await updateLink({
       ...link,
@@ -55,33 +50,26 @@ export default function LinkActions({
 
     toast.dismiss(load);
 
-    if (response.ok) {
+    response.ok &&
-      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
+      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
-    } else {
-      toast.error(response.data as string);
-    }
   };
 
   const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
+    const load = toast.loading("Deleting...");
 
     const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
-    if (response.ok) {
+    response.ok && toast.success(`Link Deleted.`);
-      toast.success(t("deleted"));
-    } else {
-      toast.error(response.data as string);
-    }
   };
 
   return (
     <>
       <div
-        className={`dropdown dropdown-left absolute ${
+        className={`dropdown dropdown-left dropdown-end absolute ${
           position || "top-3 right-3"
-        } ${alignToTop ? "" : "dropdown-end"} z-20`}
+        } z-20`}
       >
         <div
           tabIndex={0}
@@ -91,11 +79,7 @@ export default function LinkActions({
         >
           <i title="More" className="bi-three-dots text-xl" />
         </div>
-        <ul
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
-            alignToTop ? "" : "translate-y-10"
-          }`}
-        >
           <li>
             <div
               role="button"
@@ -106,8 +90,8 @@ export default function LinkActions({
               }}
             >
               {link?.pinnedBy && link.pinnedBy[0]
-                ? t("unpin")
+                ? "Unpin"
-                : t("pin_to_dashboard")}
+                : "Pin to Dashboard"}
             </div>
           </li>
           {linkInfo !== undefined && toggleShowInfo ? (
@@ -120,7 +104,7 @@ export default function LinkActions({
                   toggleShowInfo();
                 }}
               >
-                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
+                {!linkInfo ? "Show" : "Hide"} Link Details
               </div>
             </li>
           ) : undefined}
@@ -134,24 +118,22 @@ export default function LinkActions({
                   setEditLinkModal(true);
                 }}
               >
-                {t("edit_link")}
+                Edit Link
               </div>
             </li>
           ) : undefined}
-          {link.type === "url" && (
+          <li>
-            <li>
+            <div
-              <div
+              role="button"
-                role="button"
+              tabIndex={0}
-                tabIndex={0}
+              onClick={() => {
-                onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
-                  (document?.activeElement as HTMLElement)?.blur();
+                setPreservedFormatsModal(true);
-                  setPreservedFormatsModal(true);
+              }}
-                }}
+            >
-              >
+              Preserved Formats
-                {t("preserved_formats")}
+            </div>
-              </div>
+          </li>
-            </li>
-          )}
           {permissions === true || permissions?.canDelete ? (
             <li>
               <div
@@ -162,7 +144,7 @@ export default function LinkActions({
                   e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
                 }}
               >
-                {t("delete")}
+                Delete
               </div>
             </li>
           ) : undefined}

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -6,16 +6,17 @@ export default function LinkDate({
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
-  const formattedDate = new Date(
+  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    (link.importDate || link.createdAt) as string
+    "en-US",
-  ).toLocaleString("en-US", {
+    {
-    year: "numeric",
+      year: "numeric",
-    month: "short",
+      month: "short",
-    day: "numeric",
+      day: "numeric",
-  });
+    }
+  );
 
   return (
-    <div className="flex items-center gap-1 text-neutral min-w-fit">
+    <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

@@ -5,99 +5,44 @@ import React from "react";
 
 export default function LinkIcon({
   link,
-  className,
+  width,
-  size,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
-  className?: string;
+  width?: string;
-  size?: "small" | "medium";
 }) {
-  let iconClasses: string =
-    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
-    (className || "");
-
-  let dimension;
-
-  switch (size) {
-    case "small":
-      dimension = " w-8 h-8";
-      break;
-    case "medium":
-      dimension = " w-12 h-12";
-      break;
-    default:
-      size = "medium";
-      dimension = " w-12 h-12";
-      break;
-  }
-
   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.type === "url" && url ? (
+      {link.url && url && showFavicon ? (
-        showFavicon ? (
+        <Image
-          <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          width={64}
-            width={64}
+          height={64}
-            height={64}
+          alt=""
-            alt=""
+          className={iconClasses}
-            className={iconClasses + dimension}
+          draggable="false"
-            draggable="false"
+          onError={() => {
-            onError={() => {
+            setShowFavicon(false);
-              setShowFavicon(false);
+          }}
-            }}
+        />
-          />
+      ) : showFavicon === false ? (
-        ) : (
+        <div className={iconClasses}>
-          <LinkPlaceholderIcon
+          <i className="bi-link-45deg text-4xl text-black"></i>
-            iconClasses={iconClasses + dimension}
+        </div>
-            size={size}
-            icon="bi-link-45deg"
-          />
-        )
       ) : link.type === "pdf" ? (
-        <LinkPlaceholderIcon
+        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
-          iconClasses={iconClasses + dimension}
-          size={size}
-          icon="bi-file-earmark-pdf"
-        />
       ) : link.type === "image" ? (
-        <LinkPlaceholderIcon
+        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
-          iconClasses={iconClasses + dimension}
+      ) : undefined}
-          size={size}
-          icon="bi-file-earmark-image"
-        />
-      ) : // : link.type === "monolith" ? (
-      //   <LinkPlaceholderIcon
-      //     iconClasses={iconClasses + dimension}
-      //     size={size}
-      //     icon="bi-filetype-html"
-      //   />
-      // )
-      undefined}
     </>
   );
 }
-
-const LinkPlaceholderIcon = ({
-  iconClasses,
-  size,
-  icon,
-}: {
-  iconClasses: string;
-  size?: "small" | "medium";
-  icon: string;
-}) => {
-  return (
-    <div
-      className={`${
-        size === "small" ? "text-2xl" : "text-4xl"
-      } text-black aspect-square ${iconClasses}`}
-    >
-      <i className={`${icon} m-auto`}></i>
-    </div>
-  );
-};

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -1,36 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import Link from "next/link";
-import React from "react";
-
-export default function LinkTypeBadge({
-  link,
-}: {
-  link: LinkIncludingShortenedCollectionAndTags;
-}) {
-  let shortendURL;
-
-  if (link.type === "url" && link.url) {
-    try {
-      shortendURL = new URL(link.url).host.toLowerCase();
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  return link.url && shortendURL ? (
-    <Link
-      href={link.url || ""}
-      target="_blank"
-      title={link.url || ""}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
-    >
-      <i className="bi-link-45deg text-lg leading-none"></i>
-      <p className="text-xs truncate">{shortendURL}</p>
-    </Link>
-  ) : (
-    <div className="badge badge-primary badge-sm select-none">{link.type}</div>
-  );
-}

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

@@ -10,13 +10,12 @@ 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";
-import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -31,8 +30,6 @@ export default function LinkCardCompact({
   flipDropdown,
   editMode,
 }: Props) {
-  const { t } = useTranslation();
-
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();
@@ -59,6 +56,14 @@ export default function LinkCardCompact({
     }
   };
 
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(
       collections.find(
@@ -93,12 +98,14 @@ export default function LinkCardCompact({
       <div
         className={`${selectedStyle} border relative items-center flex ${
           !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg w-full`}
+        } duration-200 rounded-lg`}
         onClick={() =>
           selectable
             ? handleCheckboxClick(link)
             : editMode
-              ? toast.error(t("link_selection_error"))
+              ? toast.error(
+                  "You don't have permission to edit or delete this item."
+                )
               : undefined
         }
       >
@@ -117,32 +124,43 @@ export default function LinkCardCompact({
             />
           )} */}
         <div
-          className="flex items-center cursor-pointer w-full"
+          className="flex items-center cursor-pointer"
           onClick={() =>
             !editMode && window.open(generateLinkHref(link, account), "_blank")
           }
         >
           <div className="shrink-0">
-            <LinkIcon link={link} className="w-12 h-12 text-4xl" />
+            <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">
-              {link.name ? (
+              {unescapeString(link.name || link.description) || link.url}
-                unescapeString(link.name)
-              ) : (
-                <div className="mt-2">
-                  <LinkTypeBadge link={link} />
-                </div>
-              )}
             </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 text-neutral flex-wrap">
+              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
                 {collection ? (
                   <LinkCollection link={link} collection={collection} />
                 ) : undefined}
-                {link.name && <LinkTypeBadge link={link} />}
+                {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>
@@ -157,12 +175,7 @@ export default function LinkCardCompact({
           // linkInfo={showInfo}
         />
       </div>
-      <div
+      <div className="divider my-0 last:hidden h-[1px]"></div>
-        className="last:hidden rounded-none"
-        style={{
-          borderTop: "1px solid var(--fallback-bc,oklch(var(--bc)/0.1))",
-        }}
-      ></div>
     </>
   );
 }

components/LinkViews/LinkMasonry.tsx

@@ -1,271 +0,0 @@
-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";
-import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
-import { useTranslation } from "next-i18next";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  count: number;
-  className?: string;
-  flipDropdown?: boolean;
-  editMode?: boolean;
-};
-
-export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
-  const { t } = useTranslation();
-
-  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 {
-    if (link.url) {
-      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);
-
-  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(t("link_selection_error"))
-            : undefined
-      }
-    >
-      <div
-        className="rounded-2xl cursor-pointer"
-        onClick={() =>
-          !editMode && window.open(generateLinkHref(link, account), "_blank")
-        }
-      >
-        <div className="relative rounded-t-2xl 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={
-                link.type !== "image" ? { filter: "blur(1px)" } : undefined
-              }
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? null : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          {link.type !== "image" && (
-            <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>
-
-        {link.preview !== "unavailable" && (
-          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-        )}
-
-        <div className="p-3 flex flex-col gap-2">
-          <p className="hyphens-auto w-full pr-9 text-primary text-sm">
-            {unescapeString(link.name)}
-          </p>
-
-          <LinkTypeBadge link={link} />
-
-          {link.description && (
-            <p className="hyphens-auto text-sm">
-              {unescapeString(link.description)}
-            </p>
-          )}
-
-          {link.tags && link.tags[0] && (
-            <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>
-
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
-          {collection && <LinkCollection link={link} collection={collection} />}
-          <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">
-            {t("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">
-                {t("no_description")}
-              </span>
-            )}
-          </p>
-          {link.tags && link.tags[0] && (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">
-                {t("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={
-          link.preview !== "unavailable"
-            ? "top-[10.75rem] right-3"
-            : "top-[.75rem] right-3"
-        }
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
-        flipDropdown={flipDropdown}
-      />
-    </div>
-  );
-}

components/Loader.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div>
+      <p>Loading...</p>
+    </div>
+  );
+}

components/MobileNavigation.tsx

@@ -1,16 +1,14 @@
-import { dropdownTriggerer, isIphone, isPWA } from "@/lib/client/utils";
+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";
-import { useTranslation } from "next-i18next";
 
 type Props = {};
 
 export default function MobileNavigation({}: Props) {
-  const { t } = useTranslation();
   const [newLinkModal, setNewLinkModal] = useState(false);
   const [newCollectionModal, setNewCollectionModal] = useState(false);
   const [uploadFileModal, setUploadFileModal] = useState(false);
@@ -22,7 +20,7 @@ export default function MobileNavigation({}: Props) {
       >
         <div
           className={`w-full flex bg-base-100 ${
-            isIphone() && isPWA() ? "pb-5" : ""
+            isIphone() ? "pb-5" : ""
           } border-solid border-t-neutral-content border-t`}
         >
           <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />
@@ -51,21 +49,21 @@ export default function MobileNavigation({}: Props) {
                   tabIndex={0}
                   role="button"
                 >
-                  {t("new_link")}
+                  New Link
-                </div>
-              </li>
-              <li>
-                <div
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    setUploadFileModal(true);
-                  }}
-                  tabIndex={0}
-                  role="button"
-                >
-                  {t("upload_file")}
                 </div>
               </li>
+              {/* <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setUploadFileModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Upload File
+              </div>
+            </li> */}
               <li>
                 <div
                   onClick={() => {
@@ -75,7 +73,7 @@ export default function MobileNavigation({}: Props) {
                   tabIndex={0}
                   role="button"
                 >
-                  {t("new_collection")}
+                  New Collection
                 </div>
               </li>
             </ul>

components/Modal.tsx

@@ -6,15 +6,9 @@ type Props = {
   toggleModal: Function;
   children: ReactNode;
   className?: string;
-  dismissible?: boolean;
 };
 
-export default function Modal({
+export default function Modal({ toggleModal, className, children }: Props) {
-  toggleModal,
-  className,
-  children,
-  dismissible = true,
-}: Props) {
   const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
 
   useEffect(() => {
@@ -32,23 +26,14 @@ export default function Modal({
     return (
       <Drawer.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
+        onClose={() => setTimeout(() => toggleModal(), 100)}
-        dismissible={dismissible}
       >
         <Drawer.Portal>
           <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-          <ClickAwayHandler
+          <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
-            onClickOutside={() => dismissible && 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">
-            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
+                <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
-              <div
-                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
-                data-testid="mobile-modal-container"
-              >
-                <div
-                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
-                  data-testid="mobile-modal-slider"
-                />
 
                 {children}
               </div>
@@ -59,31 +44,20 @@ export default function Modal({
     );
   } else {
     return (
-      <div
+      <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">
-        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"
-        data-testid="modal-outer"
-      >
         <ClickAwayHandler
-          onClickOutside={() => dismissible && toggleModal()}
+          onClickOutside={toggleModal}
           className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
             className || ""
           }`}
         >
-          <div
+          <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">
-            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
-            data-testid="modal-container"
+              onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-          >
+              className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
-            {dismissible && (
+            >
-              <div
+              <i className="bi-x text-neutral text-2xl"></i>
-                onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+            </div>
-                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"
-                  data-testid="close-modal-button"
-                ></i>
-              </div>
-            )}
             {children}
           </div>
         </ClickAwayHandler>

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -2,19 +2,20 @@ import React from "react";
 import useLinkStore from "@/store/links";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import Button from "../ui/Button";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function BulkDeleteLinksModal({ onClose }: Props) {
-  const { t } = useTranslation();
   const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
 
   const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
 
     const response = await deleteLinksById(
       selectedLinks.map((link) => link.id as number)
@@ -23,7 +24,12 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success(t("deleted"));
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }`
+      );
+
       setSelectedLinks([]);
       onClose();
     } else toast.error(response.data as string);
@@ -32,33 +38,37 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">
-        {selectedLinks.length === 1
+        Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
-          ? t("delete_link")
-          : t("delete_links", { count: selectedLinks.length })}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <p>
+        {selectedLinks.length > 1 ? (
-          {selectedLinks.length === 1
+          <p>Are you sure you want to delete {selectedLinks.length} links?</p>
-            ? t("link_deletion_confirmation_message")
+        ) : (
-            : t("links_deletion_confirmation_message", {
+          <p>Are you sure you want to delete this link?</p>
-                count: selectedLinks.length,
+        )}
-              })}
-        </p>
 
         <div role="alert" className="alert alert-warning">
           <i className="bi-exclamation-triangle text-xl" />
-          <span>{t("warning_irreversible")}</span>
+          <span>
+            <b>Warning:</b> This action is irreversible!
+          </span>
         </div>
 
-        <p>{t("shift_key_tip")}</p>
+        <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" intent="destructive" onClick={deleteLink}>
+        <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" />
-          {t("delete")}
+          Delete
-        </Button>
+        </button>
       </div>
     </Modal>
   );

components/ModalContent/BulkEditLinksModal.tsx

@@ -5,14 +5,12 @@ import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function BulkEditLinksModal({ onClose }: Props) {
-  const { t } = useTranslation();
   const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
   const [removePreviousTags, setRemovePreviousTags] = useState(false);
@@ -22,6 +20,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
 
   const setCollection = (e: any) => {
     const collectionId = e?.value || null;
+    console.log(updatedValues);
     setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
   };
 
@@ -34,7 +33,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
-      const load = toast.loading(t("updating"));
+      const load = toast.loading("Updating...");
 
       const response = await updateLinks(
         selectedLinks,
@@ -45,7 +44,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(t("updated"));
+        toast.success(`Updated!`);
         setSelectedLinks([]);
         onClose();
       } else toast.error(response.data as string);
@@ -58,15 +57,13 @@ export default function BulkEditLinksModal({ onClose }: Props) {
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">
-        {selectedLinks.length === 1
+        Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
-          ? t("edit_link")
-          : t("edit_links", { count: selectedLinks.length })}
       </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">{t("move_to_collection")}</p>
+            <p className="mb-2">Move to Collection</p>
             <CollectionSelection
               showDefaultValue={false}
               onChange={setCollection}
@@ -75,7 +72,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">{t("add_tags")}</p>
+            <p className="mb-2">Add Tags</p>
             <TagSelection onChange={setTags} />
           </div>
         </div>
@@ -87,7 +84,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
               checked={removePreviousTags}
               onChange={(e) => setRemovePreviousTags(e.target.checked)}
             />
-            {t("remove_previous_tags")}
+            Remove previous tags
           </label>
         </div>
       </div>
@@ -97,7 +94,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          {t("save_changes")}
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/DeleteCollectionModal.tsx

@@ -6,8 +6,6 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
-import Button from "../ui/Button";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -18,40 +16,42 @@ export default function DeleteCollectionModal({
   onClose,
   activeCollection,
 }: Props) {
-  const { t } = useTranslation();
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { removeCollection } = useCollectionStore();
-  const router = useRouter();
-  const [inputField, setInputField] = useState("");
-  const permissions = usePermissions(collection.id as number);
 
   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 && collection.name !== inputField) return;
+    if (permissions === true) if (collection.name !== inputField) return null;
+
     if (!submitLoader) {
       setSubmitLoader(true);
       if (!collection) return null;
 
       setSubmitLoader(true);
 
-      const load = toast.loading(t("deleting_collection"));
+      const load = toast.loading("Deleting...");
 
-      let response = await removeCollection(collection.id as number);
+      let response;
+
+      response = await removeCollection(collection.id as any);
 
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(t("deleted"));
+        toast.success(`Deleted.`);
         onClose();
         router.push("/collections");
-      } else {
+      } else toast.error(response.data as string);
-        toast.error(response.data as string);
-      }
 
       setSubmitLoader(false);
     }
@@ -60,7 +60,7 @@ export default function DeleteCollectionModal({
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">
-        {permissions === true ? t("delete_collection") : t("leave_collection")}
+        {permissions === true ? "Delete" : "Leave"} Collection
       </p>
 
       <div className="divider mb-3 mt-1"></div>
@@ -68,37 +68,48 @@ export default function DeleteCollectionModal({
       <div className="flex flex-col gap-3">
         {permissions === true ? (
           <>
-            <p>{t("confirm_deletion_prompt", { name: collection.name })}</p>
+            <div className="flex flex-col gap-3">
-            <TextInput
+              <p>
-              value={inputField}
+                To confirm, type &quot;
-              onChange={(e) => setInputField(e.target.value)}
+                <span className="font-bold">{collection.name}</span>
-              placeholder={t("type_name_placeholder", {
+                &quot; in the box below:
-                name: collection.name,
+              </p>
-              })}
+
-              className="w-3/4 mx-auto"
+              <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>{t("warning")}: </b>
+                <b>Warning:</b> Deleting this collection will permanently erase
-                {t("deletion_warning")}
+                all its contents, and it will become inaccessible to everyone,
+                including members with previous access.
               </span>
             </div>
           </>
         ) : (
-          <p>{t("leave_prompt")}</p>
+          <p>Click the button below to leave the current collection.</p>
         )}
 
-        <Button
+        <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}
-          intent="destructive"
-          className="ml-auto"
         >
           <i className="bi-trash text-xl"></i>
-          {permissions === true ? t("delete") : t("leave")}
+          {permissions === true ? "Delete" : "Leave"} Collection
-        </Button>
+        </button>
       </div>
     </Modal>
   );

components/ModalContent/DeleteLinkModal.tsx

@@ -4,8 +4,6 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
-import Button from "../ui/Button";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -13,10 +11,11 @@ type Props = {
 };
 
 export default function DeleteLinkModal({ onClose, activeLink }: Props) {
-  const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
   const { removeLink } = useLinkStore();
+
   const router = useRouter();
 
   useEffect(() => {
@@ -24,17 +23,13 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   }, []);
 
   const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
+    const load = toast.loading("Deleting...");
 
     const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
-    if (response.ok) {
+    response.ok && toast.success(`Link Deleted.`);
-      toast.success(t("deleted"));
-    } else {
-      toast.error(response.data as string);
-    }
 
     if (router.pathname.startsWith("/links/[id]")) {
       router.push("/dashboard");
@@ -45,26 +40,32 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">{t("delete_link")}</p>
+      <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>{t("link_deletion_confirmation_message")}</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>{t("warning")}:</b> {t("irreversible_warning")}
+            <b>Warning:</b> This action is irreversible!
           </span>
         </div>
 
-        <p>{t("shift_key_tip")}</p>
+        <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" intent="destructive" onClick={deleteLink}>
+        <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" />
-          {t("delete")}
+          Delete
-        </Button>
+        </button>
       </div>
     </Modal>
   );

components/ModalContent/DeleteUserModal.tsx

@@ -1,55 +0,0 @@
-import toast from "react-hot-toast";
-import Modal from "../Modal";
-import useUserStore from "@/store/admin/users";
-import Button from "../ui/Button";
-import { useTranslation } from "next-i18next";
-
-type Props = {
-  onClose: Function;
-  userId: number;
-};
-
-export default function DeleteUserModal({ onClose, userId }: Props) {
-  const { t } = useTranslation();
-  const { removeUser } = useUserStore();
-
-  const deleteUser = async () => {
-    const load = toast.loading(t("deleting_user"));
-
-    const response = await removeUser(userId);
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("user_deleted"));
-    } else {
-      toast.error(response.data as string);
-    }
-
-    onClose();
-  };
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">{t("delete_user")}</p>
-
-      <div className="divider mb-3 mt-1"></div>
-
-      <div className="flex flex-col gap-3">
-        <p>{t("confirm_user_deletion")}</p>
-
-        <div role="alert" className="alert alert-warning">
-          <i className="bi-exclamation-triangle text-xl" />
-          <span>
-            <b>{t("warning")}:</b> {t("irreversible_action_warning")}
-          </span>
-        </div>
-
-        <Button className="ml-auto" intent="destructive" onClick={deleteUser}>
-          <i className="bi-trash text-xl" />
-          {t("delete_confirmation")}
-        </Button>
-      </div>
-    </Modal>
-  );
-}

components/ModalContent/EditCollectionModal.tsx

@@ -5,7 +5,6 @@ import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -16,7 +15,6 @@ export default function EditCollectionModal({
   onClose,
   activeCollection,
 }: Props) {
-  const { t } = useTranslation();
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
@@ -30,14 +28,16 @@ export default function EditCollectionModal({
 
       setSubmitLoader(true);
 
-      const load = toast.loading(t("updating_collection"));
+      const load = toast.loading("Updating...");
 
-      let response = await updateCollection(collection as any);
+      let response;
+
+      response = await updateCollection(collection as any);
 
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(t("updated"));
+        toast.success(`Updated!`);
         onClose();
       } else toast.error(response.data as string);
 
@@ -47,35 +47,29 @@ export default function EditCollectionModal({
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("edit_collection_info")}</p>
+      <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">{t("name")}</p>
+            <p className="mb-2">Name</p>
             <div className="flex flex-col gap-3">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
-                placeholder={t("collection_name_placeholder")}
+                placeholder="e.g. Example Collection"
                 onChange={(e) =>
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
               <div>
-                <p className="w-full mb-2">{t("color")}</p>
+                <p className="w-full mb-2">Color</p>
-                <div className="color-picker flex justify-between items-center">
+                <div className="color-picker flex justify-between">
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(color) =>
-                      setCollection({ ...collection, color })
-                    }
-                  />
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
-                      className="bi-folder-fill text-5xl"
+                      className="bi-folder-fill text-5xl drop-shadow"
                       style={{ color: collection.color }}
                     ></i>
                     <div
@@ -84,22 +78,29 @@ export default function EditCollectionModal({
                         setCollection({ ...collection, color: "#0ea5e9" })
                       }
                     >
-                      {t("reset")}
+                      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">{t("description")}</p>
+            <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={t("collection_description_placeholder")}
+              placeholder="The purpose of this Collection..."
               value={collection.description}
               onChange={(e) =>
-                setCollection({ ...collection, description: e.target.value })
+                setCollection({
+                  ...collection,
+                  description: e.target.value,
+                })
               }
             />
           </div>
@@ -109,7 +110,7 @@ export default function EditCollectionModal({
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          {t("save_changes")}
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -10,7 +10,6 @@ import ProfilePhoto from "../ProfilePhoto";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Modal from "../Modal";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -21,8 +20,6 @@ export default function EditCollectionSharingModal({
   onClose,
   activeCollection,
 }: Props) {
-  const { t } = useTranslation();
-
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
@@ -36,7 +33,7 @@ export default function EditCollectionSharingModal({
 
       setSubmitLoader(true);
 
-      const load = toast.loading(t("updating"));
+      const load = toast.loading("Updating...");
 
       let response;
 
@@ -45,7 +42,7 @@ export default function EditCollectionSharingModal({
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(t("updated"));
+        toast.success(`Updated!`);
         onClose();
       } else toast.error(response.data as string);
 
@@ -68,7 +65,6 @@ export default function EditCollectionSharingModal({
     username: "",
     image: "",
     archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
     archiveAsPDF: undefined as unknown as boolean,
   });
 
@@ -97,7 +93,7 @@ export default function EditCollectionSharingModal({
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">
-        {permissions === true ? t("share_and_collaborate") : t("team")}
+        {permissions === true ? "Share and Collaborate" : "Team"}
       </p>
 
       <div className="divider mb-3 mt-1"></div>
@@ -105,7 +101,7 @@ export default function EditCollectionSharingModal({
       <div className="flex flex-col gap-3">
         {permissions === true && (
           <div>
-            <p>{t("make_collection_public")}</p>
+            <p>Make Public</p>
 
             <label className="label cursor-pointer justify-start gap-2">
               <input
@@ -119,26 +115,25 @@ export default function EditCollectionSharingModal({
                 }
                 className="checkbox checkbox-primary"
               />
-              <span className="label-text">
+              <span className="label-text">Make this a public collection</span>
-                {t("make_collection_public_checkbox")}
-              </span>
             </label>
 
             <p className="text-neutral text-sm">
-              {t("make_collection_public_desc")}
+              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">{t("sharable_link_guide")}</p>
+            <p className="mb-2">Sharable Link (Click to copy)</p>
             <div
               onClick={() => {
                 try {
                   navigator.clipboard
                     .writeText(publicCollectionURL)
-                    .then(() => toast.success(t("copied")));
+                    .then(() => toast.success("Copied!"));
                 } catch (err) {
                   console.log(err);
                 }
@@ -154,13 +149,13 @@ export default function EditCollectionSharingModal({
 
         {permissions === true && (
           <>
-            <p>{t("members")}</p>
+            <p>Members</p>
 
             <div className="flex items-center gap-2">
               <TextInput
                 value={memberUsername || ""}
                 className="bg-base-200"
-                placeholder={t("members_username_placeholder")}
+                placeholder="Username (without the '@')"
                 onChange={(e) => setMemberUsername(e.target.value)}
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
@@ -168,8 +163,7 @@ export default function EditCollectionSharingModal({
                     account.username as string,
                     memberUsername || "",
                     collection,
-                    setMemberState,
+                    setMemberState
-                    t
                   )
                 }
               />
@@ -180,8 +174,7 @@ export default function EditCollectionSharingModal({
                     account.username as string,
                     memberUsername || "",
                     collection,
-                    setMemberState,
+                    setMemberState
-                    t
                   )
                 }
                 className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
@@ -221,7 +214,7 @@ export default function EditCollectionSharingModal({
                     </div>
                   </div>
                   <div>
-                    <p className="text-sm font-bold">{t("owner")}</p>
+                    <p className="text-sm font-bold">Owner</p>
                   </div>
                 </div>
               </div>
@@ -233,11 +226,11 @@ export default function EditCollectionSharingModal({
                 .map((e, i) => {
                   const roleLabel =
                     e.canCreate && e.canUpdate && e.canDelete
-                      ? t("admin")
+                      ? "Admin"
                       : e.canCreate && !e.canUpdate && !e.canDelete
-                        ? t("contributor")
+                        ? "Contributor"
                         : !e.canCreate && !e.canUpdate && !e.canDelete
-                          ? t("viewer")
+                          ? "Viewer"
                           : undefined;
 
                   return (
@@ -314,10 +307,8 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold">Viewer</p>
-                                          {t("viewer")}
+                                        <p>Read-only access</p>
-                                        </p>
-                                        <p>{t("viewer_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -359,10 +350,8 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold">Contributor</p>
-                                          {t("contributor")}
+                                        <p>Can view and create Links</p>
-                                        </p>
-                                        <p>{t("contributor_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -404,10 +393,8 @@ export default function EditCollectionSharingModal({
                                         }}
                                       />
                                       <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold">Admin</p>
-                                          {t("admin")}
+                                        <p>Full access to all Links</p>
-                                        </p>
-                                        <p>{t("admin_desc")}</p>
                                       </div>
                                     </label>
                                   </li>
@@ -424,7 +411,7 @@ export default function EditCollectionSharingModal({
                                 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={t("remove_member")}
+                                title="Remove Member"
                                 onClick={() => {
                                   const updatedMembers =
                                     collection.members.filter((member) => {
@@ -455,7 +442,7 @@ export default function EditCollectionSharingModal({
             className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
             onClick={submit}
           >
-            {t("save_changes")}
+            Save Changes
           </button>
         )}
       </div>

components/ModalContent/EditLinkModal.tsx

@@ -8,7 +8,6 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
 import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -16,13 +15,13 @@ type Props = {
 };
 
 export default function EditLinkModal({ onClose, activeLink }: Props) {
-  const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
-  let shortenedURL;
+  let shortendURL;
+
   try {
-    shortenedURL = new URL(link.url || "").host.toLowerCase();
+    shortendURL = new URL(link.url || "").host.toLowerCase();
   } catch (error) {
     console.log(error);
   }
@@ -32,6 +31,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
+
     setLink({
       ...link,
       collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
@@ -39,7 +39,10 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
   };
 
   const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => ({ name: e.label }));
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
     setLink({ ...link, tags: tagNames });
   };
 
@@ -50,25 +53,29 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-      const load = toast.loading(t("updating"));
+
-      let response = await updateLink(link);
+      let response;
+
+      const load = toast.loading("Updating...");
+
+      response = await updateLink(link);
+
       toast.dismiss(load);
 
       if (response.ok) {
-        toast.success(t("updated"));
+        toast.success(`Updated!`);
         onClose();
-      } else {
+      } else toast.error(response.data as string);
-        toast.error(response.data as string);
-      }
 
       setSubmitLoader(false);
+
       return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("edit_link")}</p>
+      <p className="text-xl font-thin">Edit Link</p>
 
       <div className="divider mb-3 mt-1"></div>
 
@@ -80,31 +87,42 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           target="_blank"
         >
           <i className="bi-link-45deg text-xl" />
-          <p>{shortenedURL}</p>
+          <p>{shortendURL}</p>
         </Link>
       ) : undefined}
 
       <div className="w-full">
-        <p className="mb-2">{t("name")}</p>
+        <p className="mb-2">Name</p>
         <TextInput
           value={link.name}
           onChange={(e) => setLink({ ...link, name: e.target.value })}
-          placeholder={t("placeholder_example_link")}
+          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">{t("collection")}</p>
+            <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" }
+                        value: link.collection.id,
+                        label: link.collection.name,
+                      }
+                    : {
+                        value: null as unknown as number,
+                        label: "Unorganized",
+                      }
                 }
                 creatable={false}
               />
@@ -112,24 +130,23 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">{t("tags")}</p>
+            <p className="mb-2">Tags</p>
             <TagSelection
               onChange={setTags}
-              defaultValue={link.tags.map((e) => ({
+              defaultValue={link.tags.map((e) => {
-                label: e.name,
+                return { label: e.name, value: e.id };
-                value: e.id,
+              })}
-              }))}
             />
           </div>
 
           <div className="sm:col-span-2">
-            <p className="mb-2">{t("description")}</p>
+            <p className="mb-2">Description</p>
             <textarea
               value={unescapeString(link.description) as string}
               onChange={(e) =>
                 setLink({ ...link, description: e.target.value })
               }
-              placeholder={t("link_description_placeholder")}
+              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>
@@ -141,7 +158,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          {t("save_changes")}
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/EmailChangeVerificationModal.tsx

@@ -1,74 +0,0 @@
-import React, { useState } from "react";
-import TextInput from "@/components/TextInput";
-import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
-
-type Props = {
-  onClose: Function;
-  onSubmit: Function;
-  oldEmail: string;
-  newEmail: string;
-};
-
-export default function EmailChangeVerificationModal({
-  onClose,
-  onSubmit,
-  oldEmail,
-  newEmail,
-}: Props) {
-  const { t } = useTranslation();
-  const [password, setPassword] = useState("");
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("confirm_password")}</p>
-
-      <div className="divider mb-3 mt-1"></div>
-
-      <div className="flex flex-col gap-5">
-        <p>
-          {t("password_change_warning")}
-          {process.env.NEXT_PUBLIC_STRIPE === "true" && t("stripe_update_note")}
-        </p>
-
-        <p>
-          {t("sso_will_be_removed_warning", {
-            service:
-              process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" ? "Google" : "",
-          })}
-        </p>
-
-        <div>
-          <p>{t("old_email")}</p>
-          <p className="text-neutral">{oldEmail}</p>
-        </div>
-
-        <div>
-          <p>{t("new_email")}</p>
-          <p className="text-neutral">{newEmail}</p>
-        </div>
-
-        <div className="w-full">
-          <p className="mb-2">{t("password")}</p>
-          <TextInput
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="••••••••••••••"
-            className="bg-base-200"
-            type="password"
-            autoFocus
-          />
-        </div>
-
-        <div className="flex justify-end items-center">
-          <button
-            className="btn btn-accent dark:border-violet-400 text-white"
-            onClick={() => onSubmit(password)}
-          >
-            {t("confirm")}
-          </button>
-        </div>
-      </div>
-    </Modal>
-  );
-}

components/ModalContent/NewCollectionModal.tsx

@@ -8,7 +8,6 @@ import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useAccountStore from "@/store/account";
 import { useSession } from "next-auth/react";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
@@ -16,7 +15,6 @@ type Props = {
 };
 
 export default function NewCollectionModal({ onClose, parent }: Props) {
-  const { t } = useTranslation();
   const initial = {
     parentId: parent?.id,
     name: "",
@@ -41,14 +39,15 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     setSubmitLoader(true);
 
-    const load = toast.loading(t("creating"));
+    const load = toast.loading("Creating...");
 
     let response = await addCollection(collection as any);
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success(t("created_success"));
+      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();
       }
@@ -61,13 +60,11 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
     <Modal toggleModal={onClose}>
       {parent?.id ? (
         <>
-          <p className="text-xl font-thin">{t("new_sub_collection")}</p>
+          <p className="text-xl font-thin">New Sub-Collection</p>
-          <p className="capitalize text-sm">
+          <p className="capitalize text-sm">For {parent.name}</p>
-            {t("for_collection", { name: parent.name })}
-          </p>
         </>
       ) : (
-        <p className="text-xl font-thin">{t("create_new_collection")}</p>
+        <p className="text-xl font-thin">Create a New Collection</p>
       )}
 
       <div className="divider mb-3 mt-1"></div>
@@ -75,25 +72,19 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
       <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">{t("name")}</p>
+            <p className="mb-2">Name</p>
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-3">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
-                placeholder={t("collection_name_placeholder")}
+                placeholder="e.g. Example Collection"
                 onChange={(e) =>
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
               <div>
-                <p className="w-full mb-2">{t("color")}</p>
+                <p className="w-full mb-2">Color</p>
-                <div className="color-picker flex justify-between items-center">
+                <div className="color-picker flex justify-between">
-                  <HexColorPicker
-                    color={collection.color}
-                    onChange={(color) =>
-                      setCollection({ ...collection, color })
-                    }
-                  />
                   <div className="flex flex-col gap-2 items-center w-32">
                     <i
                       className={"bi-folder-fill text-5xl"}
@@ -105,22 +96,29 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
                         setCollection({ ...collection, color: "#0ea5e9" })
                       }
                     >
-                      {t("reset")}
+                      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">{t("description")}</p>
+            <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={t("collection_description_placeholder")}
+              placeholder="The purpose of this Collection..."
               value={collection.description}
               onChange={(e) =>
-                setCollection({ ...collection, description: e.target.value })
+                setCollection({
+                  ...collection,
+                  description: e.target.value,
+                })
               }
             />
           </div>
@@ -130,7 +128,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          {t("create_collection_button")}
+          Create Collection
         </button>
       </div>
     </Modal>

components/ModalContent/NewLinkModal.tsx

@@ -11,15 +11,14 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function NewLinkModal({ onClose }: Props) {
-  const { t } = useTranslation();
   const { data } = useSession();
+
   const initial = {
     name: "",
     url: "",
@@ -30,7 +29,6 @@ export default function NewLinkModal({ onClose }: Props) {
     image: "",
     pdf: "",
     readable: "",
-    monolith: "",
     textContent: "",
     collection: {
       name: "",
@@ -40,14 +38,18 @@ export default function NewLinkModal({ onClose }: Props) {
 
   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 },
@@ -55,7 +57,10 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => ({ name: e.label }));
+    const tagNames = e.map((e: any) => {
+      return { name: e.label };
+    });
+
     setLink({ ...link, tags: tagNames });
   };
 
@@ -64,6 +69,7 @@ export default function NewLinkModal({ onClose }: Props) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
+
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -80,42 +86,53 @@ export default function NewLinkModal({ onClose }: Props) {
     } else
       setLink({
         ...initial,
-        collection: { name: "Unorganized", ownerId: data?.user.id as number },
+        collection: {
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
       });
   }, []);
 
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-      const load = toast.loading(t("creating_link"));
+
-      const response = await addLink(link);
+      let response;
+
+      const load = toast.loading("Creating...");
+
+      response = await addLink(link);
+
       toast.dismiss(load);
+
       if (response.ok) {
-        toast.success(t("link_created"));
+        toast.success(`Created!`);
         onClose();
-      } else {
+      } else toast.error(response.data as string);
-        toast.error(response.data as string);
-      }
       setSubmitLoader(false);
+
+      return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("create_new_link")}</p>
+      <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">{t("link")}</p>
+          <p className="mb-2">Link</p>
           <TextInput
             value={link.url || ""}
             onChange={(e) => setLink({ ...link, url: e.target.value })}
-            placeholder={t("link_url_placeholder")}
+            placeholder="e.g. http://example.com/"
             className="bg-base-200"
           />
         </div>
         <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">{t("collection")}</p>
+          <p className="mb-2">Collection</p>
           {link.collection.name ? (
             <CollectionSelection
               onChange={setCollection}
@@ -127,37 +144,40 @@ export default function NewLinkModal({ onClose }: Props) {
           ) : 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">{t("name")}</p>
+                <p className="mb-2">Name</p>
                 <TextInput
                   value={link.name}
                   onChange={(e) => setLink({ ...link, name: e.target.value })}
-                  placeholder={t("link_name_placeholder")}
+                  placeholder="e.g. Example Link"
                   className="bg-base-200"
                 />
               </div>
+
               <div>
-                <p className="mb-2">{t("tags")}</p>
+                <p className="mb-2">Tags</p>
                 <TagSelection
                   onChange={setTags}
-                  defaultValue={link.tags.map((e) => ({
+                  defaultValue={link.tags.map((e) => {
-                    label: e.name,
+                    return { label: e.name, value: e.id };
-                    value: e.id,
+                  })}
-                  }))}
                 />
               </div>
+
               <div className="sm:col-span-2">
-                <p className="mb-2">{t("description")}</p>
+                <p className="mb-2">Description</p>
                 <textarea
                   value={unescapeString(link.description) as string}
                   onChange={(e) =>
                     setLink({ ...link, description: e.target.value })
                   }
-                  placeholder={t("link_description_placeholder")}
+                  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>
@@ -165,19 +185,27 @@ export default function NewLinkModal({ onClose }: Props) {
           </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>{optionsExpanded ? t("hide_options") : t("more_options")}</p>
+          <p className="font-normal">
-          <i className={`bi-chevron-${optionsExpanded ? "up" : "down"}`}></i>
+            {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}
         >
-          {t("create_link")}
+          Create Link
         </button>
       </div>
     </Modal>

components/ModalContent/NewTokenModal.tsx

@@ -5,16 +5,14 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 import useTokenStore from "@/store/tokens";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import Button from "../ui/Button";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function NewTokenModal({ onClose }: Props) {
-  const { t } = useTranslation();
   const [newToken, setNewToken] = useState("");
+
   const { addToken } = useTokenStore();
 
   const initial = {
@@ -23,19 +21,21 @@ export default function NewTokenModal({ onClose }: Props) {
   };
 
   const [token, setToken] = useState(initial as any);
+
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-      const load = toast.loading(t("creating_token"));
+
+      const load = toast.loading("Creating...");
 
       const { ok, data } = await addToken(token);
 
       toast.dismiss(load);
 
       if (ok) {
-        toast.success(t("token_created"));
+        toast.success(`Created!`);
         setNewToken((data as any).secretKey);
       } else toast.error(data as string);
 
@@ -43,27 +43,15 @@ export default function NewTokenModal({ onClose }: Props) {
     }
   };
 
-  const getLabel = (expiry: TokenExpiry) => {
-    switch (expiry) {
-      case TokenExpiry.sevenDays:
-        return t("7_days");
-      case TokenExpiry.oneMonth:
-        return t("30_days");
-      case TokenExpiry.twoMonths:
-        return t("60_days");
-      case TokenExpiry.threeMonths:
-        return t("90_days");
-      case TokenExpiry.never:
-        return t("no_expiration");
-    }
-  };
-
   return (
     <Modal toggleModal={onClose}>
       {newToken ? (
         <div className="flex flex-col justify-center space-y-4">
-          <p className="text-xl font-thin">{t("access_token_created")}</p>
+          <p className="text-xl font-thin">Access Token Created</p>
-          <p>{t("token_creation_notice")}</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}
@@ -73,44 +61,47 @@ export default function NewTokenModal({ onClose }: Props) {
           <button
             onClick={() => {
               navigator.clipboard.writeText(newToken);
-              toast.success(t("copied_to_clipboard"));
+              toast.success("Copied to clipboard!");
             }}
             className="btn btn-primary w-fit mx-auto"
           >
-            {t("copy_to_clipboard")}
+            Copy to Clipboard
           </button>
         </div>
       ) : (
         <>
-          <p className="text-xl font-thin">{t("create_access_token")}</p>
+          <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">{t("name")}</p>
+              <p className="mb-2">Name</p>
 
               <TextInput
                 value={token.name}
                 onChange={(e) => setToken({ ...token, name: e.target.value })}
-                placeholder={t("token_name_placeholder")}
+                placeholder="e.g. For the iOS shortcut"
                 className="bg-base-200"
               />
             </div>
 
             <div className="w-full sm:w-fit">
-              <p className="mb-2">{t("expires_in")}</p>
+              <p className="mb-2">Expires in</p>
 
               <div className="dropdown dropdown-bottom dropdown-end w-full">
-                <Button
+                <div
                   tabIndex={0}
                   role="button"
-                  intent="secondary"
                   onMouseDown={dropdownTriggerer}
-                  className="whitespace-nowrap w-32"
+                  className="btn btn-outline w-full sm:w-36 flex items-center btn-sm h-10"
                 >
-                  {getLabel(token.expires)}
+                  {token.expires === TokenExpiry.sevenDays && "7 Days"}
-                </Button>
+                  {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
@@ -131,7 +122,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("7_days")}</span>
+                      <span className="label-text">7 Days</span>
                     </label>
                   </li>
                   <li>
@@ -150,7 +141,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.oneMonth });
                         }}
                       />
-                      <span className="label-text">{t("30_days")}</span>
+                      <span className="label-text">30 Days</span>
                     </label>
                   </li>
                   <li>
@@ -172,7 +163,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("60_days")}</span>
+                      <span className="label-text">60 Days</span>
                     </label>
                   </li>
                   <li>
@@ -194,7 +185,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           });
                         }}
                       />
-                      <span className="label-text">{t("90_days")}</span>
+                      <span className="label-text">90 Days</span>
                     </label>
                   </li>
                   <li>
@@ -213,7 +204,7 @@ export default function NewTokenModal({ onClose }: Props) {
                           setToken({ ...token, expires: TokenExpiry.never });
                         }}
                       />
-                      <span className="label-text">{t("no_expiration")}</span>
+                      <span className="label-text">No Expiration</span>
                     </label>
                   </li>
                 </ul>
@@ -226,7 +217,7 @@ export default function NewTokenModal({ onClose }: Props) {
               className="btn btn-accent dark:border-violet-400 text-white"
               onClick={submit}
             >
-              {t("create_token")}
+              Create Access Token
             </button>
           </div>
         </>

components/ModalContent/NewUserModal.tsx

@@ -1,148 +0,0 @@
-import toast from "react-hot-toast";
-import Modal from "../Modal";
-import useUserStore from "@/store/admin/users";
-import TextInput from "../TextInput";
-import { FormEvent, useState } from "react";
-import { useTranslation, Trans } from "next-i18next";
-
-type Props = {
-  onClose: Function;
-};
-
-type FormData = {
-  name: string;
-  username?: string;
-  email?: string;
-  password: string;
-};
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
-
-export default function NewUserModal({ onClose }: Props) {
-  const { t } = useTranslation();
-  const { addUser } = useUserStore();
-  const [form, setForm] = useState<FormData>({
-    name: "",
-    username: "",
-    email: emailEnabled ? "" : undefined,
-    password: "",
-  });
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  async function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    if (!submitLoader) {
-      const checkFields = () => {
-        if (emailEnabled) {
-          return form.name !== "" && form.email !== "" && form.password !== "";
-        } else {
-          return (
-            form.name !== "" && form.username !== "" && form.password !== ""
-          );
-        }
-      };
-
-      if (checkFields()) {
-        if (form.password.length < 8)
-          return toast.error(t("password_length_error"));
-
-        setSubmitLoader(true);
-
-        const load = toast.loading(t("creating_account"));
-
-        const response = await addUser(form);
-
-        toast.dismiss(load);
-        setSubmitLoader(false);
-
-        if (response.ok) {
-          toast.success(t("user_created"));
-          onClose();
-        } else {
-          toast.error(response.data as string);
-        }
-      } else {
-        toast.error(t("fill_all_fields_error"));
-      }
-    }
-  }
-
-  return (
-    <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("create_new_user")}</p>
-
-      <div className="divider mb-3 mt-1"></div>
-
-      <form onSubmit={submit}>
-        <div className="grid sm:grid-cols-2 gap-3">
-          <div>
-            <p className="mb-2">{t("display_name")}</p>
-            <TextInput
-              placeholder={t("placeholder_johnny")}
-              className="bg-base-200"
-              onChange={(e) => setForm({ ...form, name: e.target.value })}
-              value={form.name}
-            />
-          </div>
-
-          {emailEnabled ? (
-            <div>
-              <p className="mb-2">{t("email")}</p>
-              <TextInput
-                placeholder={t("placeholder_email")}
-                className="bg-base-200"
-                onChange={(e) => setForm({ ...form, email: e.target.value })}
-                value={form.email}
-              />
-            </div>
-          ) : undefined}
-
-          <div>
-            <p className="mb-2">
-              {t("username")}{" "}
-              {emailEnabled && (
-                <span className="text-xs text-neutral">{t("optional")}</span>
-              )}
-            </p>
-            <TextInput
-              placeholder={t("placeholder_john")}
-              className="bg-base-200"
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-              value={form.username}
-            />
-          </div>
-
-          <div>
-            <p className="mb-2">{t("password")}</p>
-            <TextInput
-              placeholder="••••••••••••••"
-              className="bg-base-200"
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-              value={form.password}
-            />
-          </div>
-        </div>
-
-        <div role="note" className="alert alert-note mt-5">
-          <i className="bi-exclamation-triangle text-xl" />
-          <span>
-            <Trans
-              i18nKey="password_change_note"
-              components={[<b key={0} />]}
-            />
-          </span>
-        </div>
-
-        <div className="flex justify-between items-center mt-5">
-          <button
-            className="btn btn-accent dark:border-violet-400 text-white ml-auto"
-            type="submit"
-          >
-            {t("create_user")}
-          </button>
-        </div>
-      </form>
-    </Modal>
-  );
-}

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import {
-  LinkIncludingShortenedCollectionAndTags,
   ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
@@ -12,14 +12,11 @@ import { useSession } from "next-auth/react";
 import {
   pdfAvailable,
   readabilityAvailable,
-  monolithAvailable,
   screenshotAvailable,
 } from "@/lib/shared/getArchiveValidity";
 import PreservedFormatRow from "@/components/PreserverdFormatRow";
 import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
-import { useTranslation } from "next-i18next";
-import { BeatLoader } from "react-spinners";
 
 type Props = {
   onClose: Function;
@@ -27,12 +24,14 @@ type Props = {
 };
 
 export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
-  const { t } = useTranslation();
   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;
@@ -43,7 +42,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     username: "",
     image: "",
     archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsMonolith: undefined as unknown as boolean,
     archiveAsPDF: undefined as unknown as boolean,
   });
 
@@ -61,7 +59,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
           username: account.username as string,
           image: account.image as string,
           archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
           archiveAsPDF: account.archiveAsPDF as boolean,
         });
       }
@@ -76,9 +73,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
       (collectionOwner.archiveAsScreenshot === true
         ? link.pdf && link.pdf !== "pending"
         : true) &&
-      (collectionOwner.archiveAsMonolith === true
-        ? link.monolith && link.monolith !== "pending"
-        : true) &&
       (collectionOwner.archiveAsPDF === true
         ? link.pdf && link.pdf !== "pending"
         : true) &&
@@ -87,15 +81,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     );
   };
 
-  const atLeastOneFormatAvailable = () => {
-    return (
-      screenshotAvailable(link) ||
-      pdfAvailable(link) ||
-      readabilityAvailable(link) ||
-      monolithAvailable(link)
-    );
-  };
-
   useEffect(() => {
     (async () => {
       const data = await getLink(link.id as number, isPublic);
@@ -124,16 +109,17 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
         clearInterval(interval);
       }
     };
-  }, [link?.monolith]);
+  }, [link?.image, link?.pdf, link?.readable]);
 
   const updateArchive = async () => {
-    const load = toast.loading(t("sending_request"));
+    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) {
@@ -141,89 +127,76 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
       setLink(
         (newLink as any).response as LinkIncludingShortenedCollectionAndTags
       );
-      toast.success(t("link_being_archived"));
+      toast.success(`Link is being archived...`);
     } else toast.error(data.response);
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">{t("preserved_formats")}</p>
+      <p className="text-xl font-thin">Preserved Formats</p>
+
       <div className="divider mb-2 mt-1"></div>
-      {screenshotAvailable(link) ||
+
-      pdfAvailable(link) ||
+      {isReady() &&
-      readabilityAvailable(link) ||
+      (screenshotAvailable(link) ||
-      monolithAvailable(link) ? (
+        pdfAvailable(link) ||
-        <p className="mb-3">{t("available_formats")}</p>
+        readabilityAvailable(link)) ? (
+        <p className="mb-3">
+          The following formats are available for this link:
+        </p>
       ) : (
         ""
       )}
 
       <div className={`flex flex-col gap-3`}>
-        {monolithAvailable(link) ? (
+        {isReady() ? (
-          <PreservedFormatRow
+          <>
-            name={t("webpage")}
+            {screenshotAvailable(link) ? (
-            icon={"bi-filetype-html"}
+              <PreservedFormatRow
-            format={ArchivedFormat.monolith}
+                name={"Screenshot"}
-            activeLink={link}
+                icon={"bi-file-earmark-image"}
-            downloadable={true}
+                format={
-          />
+                  link?.image?.endsWith("png")
-        ) : undefined}
+                    ? ArchivedFormat.png
+                    : ArchivedFormat.jpeg
+                }
+                activeLink={link}
+                downloadable={true}
+              />
+            ) : undefined}
 
-        {screenshotAvailable(link) ? (
+            {pdfAvailable(link) ? (
-          <PreservedFormatRow
+              <PreservedFormatRow
-            name={t("screenshot")}
+                name={"PDF"}
-            icon={"bi-file-earmark-image"}
+                icon={"bi-file-earmark-pdf"}
-            format={
+                format={ArchivedFormat.pdf}
-              link?.image?.endsWith("png")
+                activeLink={link}
-                ? ArchivedFormat.png
+                downloadable={true}
-                : ArchivedFormat.jpeg
+              />
-            }
+            ) : undefined}
-            activeLink={link}
-            downloadable={true}
-          />
-        ) : undefined}
 
-        {pdfAvailable(link) ? (
+            {readabilityAvailable(link) ? (
-          <PreservedFormatRow
+              <PreservedFormatRow
-            name={t("pdf")}
+                name={"Readable"}
-            icon={"bi-file-earmark-pdf"}
+                icon={"bi-file-earmark-text"}
-            format={ArchivedFormat.pdf}
+                format={ArchivedFormat.readability}
-            activeLink={link}
+                activeLink={link}
-            downloadable={true}
+              />
-          />
+            ) : undefined}
-        ) : undefined}
+          </>
-
+        ) : (
-        {readabilityAvailable(link) ? (
+          <div
-          <PreservedFormatRow
+            className={`w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200`}
-            name={t("readable")}
+          >
-            icon={"bi-file-earmark-text"}
+            <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
-            format={ArchivedFormat.readability}
+            <p className="text-center text-2xl">
-            activeLink={link}
+              Link preservation is in the queue
-          />
+            </p>
-        ) : undefined}
+            <p className="text-center text-lg">
-
+              Please check back later to see the result
-        {!isReady() && !atLeastOneFormatAvailable() ? (
+            </p>
-          <div className={`w-full h-full flex flex-col justify-center p-10`}>
-            <BeatLoader
-              color="oklch(var(--p))"
-              className="mx-auto mb-3"
-              size={30}
-            />
-
-            <p className="text-center text-2xl">{t("preservation_in_queue")}</p>
-            <p className="text-center text-lg">{t("check_back_later")}</p>
           </div>
-        ) : !isReady() && atLeastOneFormatAvailable() ? (
+        )}
-          <div className={`w-full h-full flex flex-col justify-center p-5`}>
-            <BeatLoader
-              color="oklch(var(--p))"
-              className="mx-auto mb-3"
-              size={20}
-            />
-            <p className="text-center">{t("there_are_more_formats")}</p>
-            <p className="text-center text-sm">{t("check_back_later")}</p>
-          </div>
-        ) : undefined}
 
         <div
           className={`flex flex-col sm:flex-row gap-3 items-center justify-center ${
@@ -236,21 +209,23 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
               ""
             )}`}
             target="_blank"
-            className="text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
+            className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm`}
           >
-            <p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
+            <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 && (
+          {link?.collection.ownerId === session.data?.user.id ? (
-            <div className="btn btn-outline" onClick={updateArchive}>
+            <div className={`btn btn-outline`} onClick={() => updateArchive()}>
               <div>
-                <p>{t("refresh_preserved_formats")}</p>
+                <p>Refresh Preserved Formats</p>
                 <p className="text-xs">
-                  {t("this_deletes_current_preservations")}
+                  This deletes the current preservations
                 </p>
               </div>
             </div>
-          )}
+          ) : undefined}
         </div>
       </div>
     </Modal>

components/ModalContent/RevokeTokenModal.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import useTokenStore from "@/store/tokens";
+import useLinkStore from "@/store/links";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import Button from "../ui/Button";
+import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
 import { AccessToken } from "@prisma/client";
+import useTokenStore from "@/store/tokens";
 
 type Props = {
   onClose: Function;
@@ -12,44 +12,50 @@ type Props = {
 };
 
 export default function DeleteTokenModal({ onClose, activeToken }: Props) {
-  const { t } = useTranslation();
   const [token, setToken] = useState<AccessToken>(activeToken);
 
   const { revokeToken } = useTokenStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const router = useRouter();
 
   useEffect(() => {
     setToken(activeToken);
-  }, [activeToken]);
+  }, []);
 
   const deleteLink = async () => {
-    const load = toast.loading(t("deleting"));
+    console.log(token);
+    const load = toast.loading("Deleting...");
 
     const response = await revokeToken(token.id as number);
 
     toast.dismiss(load);
 
-    if (response.ok) {
+    response.ok && toast.success(`Token Revoked.`);
-      toast.success(t("token_revoked"));
-    } else {
-      toast.error(response.data as string);
-    }
 
     onClose();
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin text-red-500">{t("revoke_token")}</p>
+      <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>{t("revoke_confirmation")}</p>
+        <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" intent="destructive" onClick={deleteLink}>
+        <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" />
-          {t("revoke")}
+          Revoke
-        </Button>
+        </button>
       </div>
     </Modal>
   );

components/ModalContent/UploadFileModal.tsx

@@ -6,21 +6,19 @@ import unescapeString from "@/lib/client/unescapeString";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
 import {
-  LinkIncludingShortenedCollectionAndTags,
   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";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function UploadFileModal({ onClose }: Props) {
-  const { t } = useTranslation();
   const { data } = useSession();
 
   const initial = {
@@ -33,7 +31,6 @@ export default function UploadFileModal({ onClose }: Props) {
     image: "",
     pdf: "",
     readable: "",
-    monolith: "",
     textContent: "",
     collection: {
       name: "",
@@ -43,11 +40,14 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
+
   const [file, setFile] = useState<File>();
 
-  const { uploadFile } = useLinkStore();
+  const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
+
   const [optionsExpanded, setOptionsExpanded] = useState(false);
+
   const router = useRouter();
   const { collections } = useCollectionStore();
 
@@ -74,6 +74,7 @@ export default function UploadFileModal({ onClose }: Props) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
+
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -90,14 +91,17 @@ export default function UploadFileModal({ onClose }: Props) {
     } else
       setLink({
         ...initial,
-        collection: { name: "Unorganized", ownerId: data?.user.id as number },
+        collection: {
+          name: "Unorganized",
+          ownerId: data?.user.id as number,
+        },
       });
-  }, [router, collections]);
+  }, []);
 
   const submit = async () => {
     if (!submitLoader && file) {
       let fileType: ArchivedFormat | null = null;
-      let linkType: "url" | "image" | "monolith" | "pdf" | null = null;
+      let linkType: "url" | "image" | "pdf" | null = null;
 
       if (file?.type === "image/jpg" || file.type === "image/jpeg") {
         fileType = ArchivedFormat.jpeg;
@@ -109,54 +113,70 @@ export default function UploadFileModal({ onClose }: Props) {
         fileType = ArchivedFormat.pdf;
         linkType = "pdf";
       }
-      // else if (file.type === "text/html") {
-      //   fileType = ArchivedFormat.monolith;
-      //   linkType = "monolith";
-      // }
 
-      setSubmitLoader(true);
+      if (fileType !== null && linkType !== null) {
-      const load = toast.loading(t("creating"));
+        setSubmitLoader(true);
 
-      const response = await uploadFile(link, file);
+        let response;
 
-      toast.dismiss(load);
+        const load = toast.loading("Creating...");
-      if (response.ok) {
+
-        toast.success(t("created_success"));
+        response = await addLink({
-        onClose();
+          ...link,
-      } else {
+          type: linkType,
-        toast.error(response.data as string);
+          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;
       }
-
-      setSubmitLoader(false);
-      return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
       <div className="flex gap-2 items-start">
-        <p className="text-xl font-thin">{t("upload_file")}</p>
+        <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">{t("file")}</p>
+          <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,.html"
+              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">
-            {t("file_types", {
+            PDF, PNG, JPG (Up to {process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30}
-              size: process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10,
+            MB)
-            })}
           </p>
         </div>
         <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">{t("collection")}</p>
+          <p className="mb-2">Collection</p>
           {link.collection.name ? (
             <CollectionSelection
               onChange={setCollection}
@@ -170,34 +190,36 @@ export default function UploadFileModal({ onClose }: Props) {
       </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">{t("name")}</p>
+              <p className="mb-2">Name</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
-                placeholder={t("example_link")}
+                placeholder="e.g. Example Link"
                 className="bg-base-200"
               />
             </div>
+
             <div>
-              <p className="mb-2">{t("tags")}</p>
+              <p className="mb-2">Tags</p>
               <TagSelection
                 onChange={setTags}
-                defaultValue={link.tags.map((e) => ({
+                defaultValue={link.tags.map((e) => {
-                  label: e.name,
+                  return { label: e.name, value: e.id };
-                  value: e.id,
+                })}
-                }))}
               />
             </div>
+
             <div className="sm:col-span-2">
-              <p className="mb-2">{t("description")}</p>
+              <p className="mb-2">Description</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>
                   setLink({ ...link, description: e.target.value })
                 }
-                placeholder={t("description_placeholder")}
+                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>
@@ -209,15 +231,14 @@ export default function UploadFileModal({ onClose }: Props) {
           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>
+          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
-            {optionsExpanded ? t("hide") : t("more")} {t("options")}
-          </p>
         </div>
+
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          {t("upload_file")}
+          Create Link
         </button>
       </div>
     </Modal>

components/Navbar.tsx

@@ -1,26 +1,40 @@
+import { signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import SearchBar from "@/components/SearchBar";
+import useAccountStore from "@/store/account";
+import ProfilePhoto from "@/components/ProfilePhoto";
 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";
-import ProfileDropdown from "./ProfileDropdown";
-import { useTranslation } from "next-i18next";
 
 export default function Navbar() {
-  const { t } = useTranslation();
+  const { settings, updateSettings } = useLocalSettingsStore();
+
+  const { account } = useAccountStore();
+
   const router = useRouter();
 
   const [sidebar, setSidebar] = useState(false);
 
   const { width } = useWindowDimensions();
 
+  const handleToggle = () => {
+    if (settings.theme === "dark") {
+      updateSettings({ theme: "light" });
+    } else {
+      updateSettings({ theme: "dark" });
+    }
+  };
+
   useEffect(() => {
     setSidebar(false);
     document.body.style.overflow = "auto";
@@ -51,7 +65,7 @@ export default function Navbar() {
         <ToggleDarkMode className="hidden sm:inline-grid" />
 
         <div className="dropdown dropdown-end sm:inline-block hidden">
-          <div className="tooltip tooltip-bottom" data-tip={t("create_new")}>
+          <div className="tooltip tooltip-bottom" data-tip="Create New...">
             <div
               tabIndex={0}
               role="button"
@@ -76,10 +90,10 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                {t("new_link")}
+                New Link
               </div>
             </li>
-            <li>
+            {/* <li>
               <div
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
@@ -88,9 +102,9 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                {t("upload_file")}
+                Upload File
               </div>
-            </li>
+            </li> */}
             <li>
               <div
                 onClick={() => {
@@ -100,13 +114,61 @@ export default function Navbar() {
                 tabIndex={0}
                 role="button"
               >
-                {t("new_collection")}
+                New Collection
               </div>
             </li>
           </ul>
         </div>
 
-        <ProfileDropdown />
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className="btn btn-circle btn-ghost"
+          >
+            <ProfilePhoto
+              src={account.image ? account.image : undefined}
+              priority={true}
+            />
+          </div>
+          <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"
+              >
+                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 />

components/NoLinksFound.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   text?: string;
 };
 
 export default function NoLinksFound({ text }: Props) {
-  const { t } = useTranslation();
   const [newLinkModal, setNewLinkModal] = useState(false);
 
   return (
@@ -25,7 +23,9 @@ export default function NoLinksFound({ text }: Props) {
       <p className="text-center text-xl sm:text-2xl">
         {text || "You haven't created any Links Here"}
       </p>
-      <p className="text-center text-sm sm:text-base">{t("start_journey")}</p>
+      <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={() => {
@@ -35,7 +35,7 @@ export default function NoLinksFound({ text }: Props) {
         >
           <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">
-            {t("create_new_link")}
+            Create New Link
           </span>
         </div>
       </div>

components/PageHeader.tsx

@@ -12,7 +12,7 @@ export default function PageHeader({
   return (
     <div className="flex items-center gap-3">
       <i
-        className={`${icon} text-primary sm:text-3xl text-2xl drop-shadow`}
+        className={`${icon} text-primary text-3xl sm:text-4xl drop-shadow`}
       ></i>
       <div>
         <p className="text-3xl capitalize font-thin">{title}</p>

components/PreserverdFormatRow.tsx

@@ -61,7 +61,7 @@ export default function PreservedFormatRow({
         clearInterval(interval);
       }
     };
-  }, [link?.image, link?.pdf, link?.readable, link?.monolith]);
+  }, [link?.image, link?.pdf, link?.readable]);
 
   const handleDownload = () => {
     const path = `/api/v1/archives/${link?.id}?format=${format}`;
@@ -69,15 +69,10 @@ export default function PreservedFormatRow({
       .then((response) => {
         if (response.ok) {
           // Create a temporary link and click it to trigger the download
-          const anchorElement = document.createElement("a");
+          const link = document.createElement("a");
-          anchorElement.href = path;
+          link.href = path;
-          anchorElement.download =
+          link.download = format === ArchivedFormat.pdf ? "PDF" : "Screenshot";
-            format === ArchivedFormat.monolith
+          link.click();
-              ? "Webpage"
-              : format === ArchivedFormat.pdf
-                ? "PDF"
-                : "Screenshot";
-          anchorElement.click();
         } else {
           console.error("Failed to download file");
         }

components/ProfileDropdown.tsx

@@ -1,90 +0,0 @@
-import useLocalSettingsStore from "@/store/localSettings";
-import { dropdownTriggerer } from "@/lib/client/utils";
-import ProfilePhoto from "./ProfilePhoto";
-import useAccountStore from "@/store/account";
-import Link from "next/link";
-import { signOut } from "next-auth/react";
-import { useTranslation } from "next-i18next";
-
-export default function ProfileDropdown() {
-  const { t } = useTranslation();
-  const { settings, updateSettings } = useLocalSettingsStore();
-  const { account } = useAccountStore();
-
-  const isAdmin = account.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1);
-
-  const handleToggle = () => {
-    const newTheme = settings.theme === "dark" ? "light" : "dark";
-    updateSettings({ theme: newTheme });
-  };
-
-  return (
-    <div className="dropdown dropdown-end">
-      <div
-        tabIndex={0}
-        role="button"
-        onMouseDown={dropdownTriggerer}
-        className="btn btn-circle btn-ghost"
-      >
-        <ProfilePhoto
-          src={account.image ? account.image : undefined}
-          priority={true}
-        />
-      </div>
-      <ul
-        className={`dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box ${
-          isAdmin ? "w-48" : "w-40"
-        } mt-1`}
-      >
-        <li>
-          <Link
-            href="/settings/account"
-            onClick={() => (document?.activeElement as HTMLElement)?.blur()}
-            tabIndex={0}
-            role="button"
-          >
-            {t("settings")}
-          </Link>
-        </li>
-        <li className="block sm:hidden">
-          <div
-            onClick={() => {
-              (document?.activeElement as HTMLElement)?.blur();
-              handleToggle();
-            }}
-            tabIndex={0}
-            role="button"
-          >
-            {t("switch_to", {
-              theme: settings.theme === "light" ? t("dark") : t("light"),
-            })}
-          </div>
-        </li>
-        {isAdmin ? (
-          <li>
-            <Link
-              href="/admin"
-              onClick={() => (document?.activeElement as HTMLElement)?.blur()}
-              tabIndex={0}
-              role="button"
-            >
-              {t("server_administration")}
-            </Link>
-          </li>
-        ) : null}
-        <li>
-          <div
-            onClick={() => {
-              (document?.activeElement as HTMLElement)?.blur();
-              signOut();
-            }}
-            tabIndex={0}
-            role="button"
-          >
-            {t("logout")}
-          </div>
-        </li>
-      </ul>
-    </div>
-  );
-}

components/ProfilePhoto.tsx

@@ -19,7 +19,7 @@ export default function ProfilePhoto({
   const [image, setImage] = useState("");
 
   useEffect(() => {
-    if (src && !src?.includes("base64") && !src.startsWith("http"))
+    if (src && !src?.includes("base64"))
       setImage(`/api/v1/${src.replace("uploads/", "").replace(".jpg", "")}`);
     else if (!src) setImage("");
     else {

components/RadioButton.tsx

@@ -16,6 +16,14 @@ export default function RadioButton({ label, state, onClick }: Props) {
         checked={state}
         onChange={onClick}
       />
+      {/*<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

@@ -4,7 +4,6 @@ import isValidUrl from "@/lib/shared/isValidUrl";
 import useLinkStore from "@/store/links";
 import {
   ArchivedFormat,
-  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import ColorThief, { RGBColor } from "colorthief";
@@ -12,10 +11,7 @@ import DOMPurify from "dompurify";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
-import LinkActions from "./LinkViews/LinkComponents/LinkActions";
-import useCollectionStore from "@/store/collections";
-import { useTranslation } from "next-i18next";
 
 type LinkContent = {
   title: string;
@@ -34,25 +30,15 @@ type Props = {
 };
 
 export default function ReadableView({ link }: Props) {
-  const { t } = useTranslation();
   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 { getLink } = useLinkStore();
+  const { links, getLink } = useLinkStore();
-  const { collections } = useCollectionStore();
-
-  const collection = useMemo(() => {
-    return collections.find(
-      (e) => e.id === link.collection.id
-    ) as CollectionIncludingMembersAndLinkCount;
-  }, [collections, link]);
 
   useEffect(() => {
     const fetchLinkContent = async () => {
@@ -68,8 +54,6 @@ export default function ReadableView({ link }: Props) {
     };
 
     fetchLinkContent();
-
-    setDate(link.importDate || link.createdAt);
   }, [link]);
 
   useEffect(() => {
@@ -81,11 +65,9 @@ export default function ReadableView({ link }: Props) {
       (link?.image === "pending" ||
         link?.pdf === "pending" ||
         link?.readable === "pending" ||
-        link?.monolith === "pending" ||
         !link?.image ||
         !link?.pdf ||
-        !link?.readable ||
+        !link?.readable)
-        !link?.monolith)
     ) {
       interval = setInterval(() => getLink(link.id as number), 5000);
     } else {
@@ -99,7 +81,7 @@ export default function ReadableView({ link }: Props) {
         clearInterval(interval);
       }
     };
-  }, [link?.image, link?.pdf, link?.readable, link?.monolith]);
+  }, [link?.image, link?.pdf, link?.readable]);
 
   const rgbToHex = (r: number, g: number, b: number): string =>
     "#" +
@@ -142,10 +124,10 @@ export default function ReadableView({ link }: Props) {
   }, [colorPalette]);
 
   return (
-    <div className={`flex flex-col max-w-screen-md h-full mx-auto p-5`}>
+    <div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
       <div
         id="link-banner"
-        className="link-banner relative bg-opacity-10 border-neutral-content p-3 border mb-3"
+        className="link-banner bg-opacity-10 border-neutral-content p-3 border mb-3"
       >
         <div id="link-banner-inner" className="link-banner-inner"></div>
 
@@ -178,7 +160,7 @@ export default function ReadableView({ link }: Props) {
               />
             )}
             <div className="flex flex-col">
-              <p className="text-xl pr-10">
+              <p className="text-xl">
                 {unescapeString(
                   link?.name || link?.description || link?.url || ""
                 )}
@@ -216,7 +198,7 @@ export default function ReadableView({ link }: Props) {
                 {link?.collection.name}
               </p>
             </Link>
-            {link?.tags?.map((e, i) => (
+            {link?.tags.map((e, i) => (
               <Link key={i} href={`/tags/${e.id}`} className="z-10">
                 <p
                   title={e.name}
@@ -229,8 +211,8 @@ export default function ReadableView({ link }: Props) {
           </div>
 
           <p className="min-w-fit text-sm text-neutral">
-            {date
+            {link?.createdAt
-              ? new Date(date).toLocaleString("en-US", {
+              ? new Date(link?.createdAt).toLocaleString("en-US", {
                   year: "numeric",
                   month: "long",
                   day: "numeric",
@@ -240,13 +222,6 @@ export default function ReadableView({ link }: Props) {
 
           {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
         </div>
-
-        <LinkActions
-          link={link}
-          collection={collection}
-          position="top-3 right-3"
-          alignToTop
-        />
       </div>
 
       <div className="flex flex-col gap-5 h-full">
@@ -275,9 +250,11 @@ export default function ReadableView({ link }: Props) {
               <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">
-              {t("link_preservation_in_queue")}
+              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>
-            <p className="text-center text-lg mt-2">{t("check_back_later")}</p>
           </div>
         )}
       </div>

components/SettingsSidebar.tsx

@@ -1,18 +1,20 @@
+import useCollectionStore from "@/store/collections";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import { useTranslation } from "next-i18next";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const { t } = useTranslation();
+  const LINKWARDEN_VERSION = "v2.5.1";
-  const LINKWARDEN_VERSION = process.env.version;
+
+  const { collections } = useCollectionStore();
 
   const router = useRouter();
+
   const [active, setActive] = useState("");
 
   useEffect(() => {
     setActive(router.asPath);
-  }, [router]);
+  }, [router, collections]);
 
   return (
     <div
@@ -24,69 +26,71 @@ export default function SettingsSidebar({ className }: { className?: string }) {
         <Link href="/settings/account">
           <div
             className={`${
-              active === "/settings/account"
+              active === `/settings/account`
                 ? "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`}
           >
             <i className="bi-person text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">{t("account")}</p>
+
+            <p className="truncate w-full pr-7">Account</p>
           </div>
         </Link>
 
         <Link href="/settings/preference">
           <div
             className={`${
-              active === "/settings/preference"
+              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`}
           >
             <i className="bi-sliders text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">{t("preference")}</p>
+
+            <p className="truncate w-full pr-7">Preference</p>
           </div>
         </Link>
 
         <Link href="/settings/access-tokens">
           <div
             className={`${
-              active === "/settings/access-tokens"
+              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`}
           >
             <i className="bi-key text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">{t("access_tokens")}</p>
+            <p className="truncate w-full pr-7">Access Tokens</p>
           </div>
         </Link>
 
         <Link href="/settings/password">
           <div
             className={`${
-              active === "/settings/password"
+              active === `/settings/password`
                 ? "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`}
           >
             <i className="bi-lock text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">{t("password")}</p>
+            <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
 
-        {process.env.NEXT_PUBLIC_STRIPE && (
+        {process.env.NEXT_PUBLIC_STRIPE ? (
           <Link href="/settings/billing">
             <div
               className={`${
-                active === "/settings/billing"
+                active === `/settings/billing`
                   ? "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`}
             >
               <i className="bi-credit-card text-primary text-xl"></i>
-              <p className="truncate w-full pr-7">{t("billing")}</p>
+              <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
-        )}
+        ) : undefined}
       </div>
 
       <div className="flex flex-col gap-1">
@@ -95,38 +99,42 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           target="_blank"
           className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
         >
-          {t("linkwarden_version", { version: LINKWARDEN_VERSION })}
+          Linkwarden {LINKWARDEN_VERSION}
         </Link>
         <Link href="https://docs.linkwarden.app" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-question-circle text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">{t("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-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-github text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">{t("github")}</p>
+            <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
+
         <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-twitter-x text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">{t("twitter")}</p>
+            <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
+
         <Link href="https://fosstodon.org/@linkwarden" target="_blank">
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-mastodon text-primary text-xl"></i>
-            <p className="truncate w-full pr-7">{t("mastodon")}</p>
+            <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>
       </div>

components/Sidebar.tsx

@@ -6,10 +6,8 @@ import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
 import CollectionListing from "@/components/CollectionListing";
-import { useTranslation } from "next-i18next";
 
 export default function Sidebar({ className }: { className?: string }) {
-  const { t } = useTranslation();
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
     const storedValue = localStorage.getItem("tagDisclosure");
     return storedValue ? storedValue === "true" : true;
@@ -52,25 +50,25 @@ export default function Sidebar({ className }: { className?: string }) {
     >
       <div className="grid grid-cols-2 gap-2">
         <SidebarHighlightLink
-          title={t("dashboard")}
+          title={"Dashboard"}
           href={`/dashboard`}
           icon={"bi-house"}
           active={active === `/dashboard`}
         />
         <SidebarHighlightLink
-          title={t("pinned")}
+          title={"Pinned"}
           href={`/links/pinned`}
           icon={"bi-pin-angle"}
           active={active === `/links/pinned`}
         />
         <SidebarHighlightLink
-          title={t("all_links")}
+          title={"All Links"}
           href={`/links`}
           icon={"bi-link-45deg"}
           active={active === `/links`}
         />
         <SidebarHighlightLink
-          title={t("all_collections")}
+          title={"All Collections"}
           href={`/collections`}
           icon={"bi-folder"}
           active={active === `/collections`}
@@ -84,7 +82,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">{t("collections")}</p>
+          <p className="text-sm">Collections</p>
           <i
             className={`bi-chevron-down ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
@@ -111,7 +109,7 @@ export default function Sidebar({ className }: { className?: string }) {
           }}
           className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p className="text-sm">{t("tags")}</p>
+          <p className="text-sm">Tags</p>
           <i
             className={`bi-chevron-down  ${
               tagDisclosure ? "rotate-reverse" : "rotate"
@@ -154,7 +152,7 @@ export default function Sidebar({ className }: { className?: string }) {
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
                 <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
-                  {t("you_have_no_tags")}
+                  You Have No Tags...
                 </p>
               </div>
             )}

components/SortDropdown.tsx

@@ -1,15 +1,13 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { Sort } from "@/types/global";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import { TFunction } from "i18next";
 
 type Props = {
   sortBy: Sort;
   setSort: Dispatch<SetStateAction<Sort>>;
-  t: TFunction<"translation", undefined>;
 };
 
-export default function SortDropdown({ sortBy, setSort, t }: Props) {
+export default function SortDropdown({ sortBy, setSort }: Props) {
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div
@@ -31,10 +29,13 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               type="radio"
               name="sort-radio"
               className="radio checked:bg-primary"
+              value="Date (Newest First)"
               checked={sortBy === Sort.DateNewestFirst}
-              onChange={() => setSort(Sort.DateNewestFirst)}
+              onChange={() => {
+                setSort(Sort.DateNewestFirst);
+              }}
             />
-            <span className="label-text">{t("date_newest_first")}</span>
+            <span className="label-text">Date (Newest First)</span>
           </label>
         </li>
         <li>
@@ -47,10 +48,11 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               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">{t("date_oldest_first")}</span>
+            <span className="label-text">Date (Oldest First)</span>
           </label>
         </li>
         <li>
@@ -63,10 +65,11 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               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">{t("name_az")}</span>
+            <span className="label-text">Name (A-Z)</span>
           </label>
         </li>
         <li>
@@ -79,10 +82,11 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               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">{t("name_za")}</span>
+            <span className="label-text">Name (Z-A)</span>
           </label>
         </li>
         <li>
@@ -95,10 +99,11 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               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">{t("description_az")}</span>
+            <span className="label-text">Description (A-Z)</span>
           </label>
         </li>
         <li>
@@ -111,10 +116,11 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
               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">{t("description_za")}</span>
+            <span className="label-text">Description (Z-A)</span>
           </label>
         </li>
       </ul>

components/TextInput.tsx

@@ -9,7 +9,6 @@ type Props = {
   onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
   className?: string;
   spellCheck?: boolean;
-  "data-testid"?: string;
 };
 
 export default function TextInput({
@@ -21,11 +20,9 @@ export default function TextInput({
   onKeyDown,
   className,
   spellCheck,
-  "data-testid": dataTestId,
 }: Props) {
   return (
     <input
-      data-testid={dataTestId}
       spellCheck={spellCheck}
       autoFocus={autoFocus}
       type={type ? type : "text"}

components/ToggleDarkMode.tsx

@@ -1,13 +1,11 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import { useEffect, useState } from "react";
-import { useTranslation } from "next-i18next";
 
 type Props = {
   className?: string;
 };
 
 export default function ToggleDarkMode({ className }: Props) {
-  const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
 
   const [theme, setTheme] = useState(localStorage.getItem("theme"));
@@ -23,9 +21,7 @@ export default function ToggleDarkMode({ className }: Props) {
   return (
     <div
       className="tooltip tooltip-bottom"
-      data-tip={t("switch_to", {
+      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
-        theme: settings.theme === "light" ? "Dark" : "Light",
-      })}
     >
       <label
         className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}

components/UserListing.tsx

@@ -1,87 +0,0 @@
-import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
-import { User as U } from "@prisma/client";
-import { TFunction } from "i18next";
-
-interface User extends U {
-  subscriptions: {
-    active: boolean;
-  };
-}
-
-type UserModal = {
-  isOpen: boolean;
-  userId: number | null;
-};
-
-const UserListing = (
-  users: User[],
-  deleteUserModal: UserModal,
-  setDeleteUserModal: Function,
-  t: TFunction<"translation", undefined>
-) => {
-  return (
-    <div className="overflow-x-auto whitespace-nowrap w-full">
-      <table className="table w-full">
-        <thead>
-          <tr>
-            <th></th>
-            <th>{t("username")}</th>
-            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-              <th>{t("email")}</th>
-            )}
-            {process.env.NEXT_PUBLIC_STRIPE === "true" && (
-              <th>{t("subscribed")}</th>
-            )}
-            <th>{t("created_at")}</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((user, index) => (
-            <tr
-              key={index}
-              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
-            >
-              <td className="text-primary">{index + 1}</td>
-              <td>
-                {user.username ? user.username : <b>{t("not_available")}</b>}
-              </td>
-              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
-                <td>{user.email}</td>
-              )}
-              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
-                <td>
-                  {user.subscriptions?.active ? (
-                    <i className="bi bi-check text-green-500"></i>
-                  ) : (
-                    <i className="bi bi-x text-red-500"></i>
-                  )}
-                </td>
-              )}
-              <td>{new Date(user.createdAt).toLocaleString()}</td>
-              <td className="relative">
-                <button
-                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
-                  onClick={() =>
-                    setDeleteUserModal({ isOpen: true, userId: user.id })
-                  }
-                >
-                  <i className="bi bi-trash"></i>
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {deleteUserModal.isOpen && deleteUserModal.userId ? (
-        <DeleteUserModal
-          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
-          userId={deleteUserModal.userId}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-export default UserListing;

components/ViewDropdown.tsx

@@ -35,17 +35,6 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
         <i className="bi-grid w-4 h-4 text-neutral"></i>
       </button>
 
-      <button
-        onClick={(e) => onChangeViewMode(e, ViewMode.Masonry)}
-        className={`btn btn-square btn-sm btn-ghost ${
-          viewMode == ViewMode.Masonry
-            ? "bg-primary/20 hover:bg-primary/20"
-            : "hover:bg-neutral/20"
-        }`}
-      >
-        <i className="bi bi-columns-gap w-4 h-4 text-neutral"></i>
-      </button>
-
       <button
         onClick={(e) => onChangeViewMode(e, ViewMode.List)}
         className={`btn btn-square btn-sm btn-ghost ${

components/ui/Button.tsx

@@ -1,62 +0,0 @@
-import { cn } from "@/lib/client/utils";
-
-import { cva, type VariantProps } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "select-none relative duration-200 rounded-lg text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      intent: {
-        accent:
-          "bg-accent text-white hover:bg-accent/80 border border-violet-400",
-        primary: "bg-primary text-primary-content hover:bg-primary/80",
-        secondary:
-          "bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30",
-        destructive:
-          "bg-error text-white hover:bg-error/80 border border-neutral/60",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-content",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        small: "h-7 px-2",
-        medium: "h-10 px-4 py-2",
-        large: "h-12 px-7 py-2",
-        full: "px-4 py-2 w-full",
-        icon: "h-10 w-10",
-      },
-      loading: {
-        true: "cursor-wait",
-      },
-    },
-    defaultVariants: {
-      intent: "primary",
-      size: "medium",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-const Button: React.FC<ButtonProps> = ({
-  className,
-  intent,
-  size,
-  children,
-  disabled,
-  loading = false,
-  ...props
-}) => (
-  <button
-    className={cn(buttonVariants({ intent, size, className }))}
-    disabled={loading || disabled}
-    {...props}
-  >
-    {children}
-  </button>
-);
-
-export default Button;

e2e/.env.example

@@ -1,2 +0,0 @@
-TEST_USERNAME=test
-TEST_PASSWORD=password

e2e/data/user.ts

@@ -1,20 +0,0 @@
-import axios, { AxiosError } from "axios"
-
-axios.defaults.baseURL = "http://localhost:3000"
-
-export async function seedUser (username?: string, password?: string, name?: string) {
-  try {
-    return await axios.post("/api/v1/users", {
-      username: username || "test",
-      password: password || "password",
-      name: name || "Test User",
-    })
-  } catch (e: any) {
-    if (e instanceof AxiosError) {
-      if (e.response?.status === 400) {
-        return
-      }
-    }
-    throw e
-  }
-}

e2e/fixtures/base/dashboard-page.ts

@@ -1,10 +0,0 @@
-import { Locator, Page } from "playwright";
-import { BasePage } from "./page";
-
-export class DashboardPage extends BasePage {
-  container: Locator;
-  constructor(page: Page) {
-    super(page);
-    this.container = this.page.getByTestId("dashboard-wrapper");
-  }
-}

e2e/fixtures/base/modal.ts

@@ -1,45 +0,0 @@
-import { Locator, Page } from "@playwright/test";
-
-export class BaseModal {
-  page: Page;
-  container: Locator;
-  mobileContainer: Locator;
-  closeModalButton: Locator;
-  mobileModalSlider: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.container = page.getByTestId("modal-container");
-    this.mobileContainer = page.getByTestId("mobile-modal-container");
-    this.closeModalButton = this.container.getByTestId("close-modal-button");
-    this.mobileModalSlider = this.mobileContainer.getByTestId(
-      "mobile-modal-slider"
-    );
-  }
-
-  async close() {
-    if (await this.container.isVisible()) {
-      await this.closeModalButton.click();
-    }
-    if (await this.mobileContainer.isVisible()) {
-      const box = await this.mobileModalSlider.boundingBox();
-      if (!box) {
-        return;
-      }
-      const pageHeight = await this.page.evaluate(() => window.innerHeight);
-      const startX = box.x + box.width / 2;
-      const startY = box.y + box.height / 2;
-      await this.page.mouse.move(startX, startY);
-      await this.page.mouse.down();
-      await this.page.mouse.move(startX, startY + pageHeight / 2);
-      await this.page.mouse.up();
-    }
-  }
-
-  async isOpen() {
-    return (
-      (await this.container.isVisible()) ||
-      (await this.mobileContainer.isVisible())
-    );
-  }
-}

e2e/fixtures/base/page.ts

@@ -1,20 +0,0 @@
-import { Locator, Page } from "@playwright/test";
-
-export class BasePage {
-  page: Page;
-  toastMessage: Locator;
-
-  constructor(page: Page) {
-    this.page = page;
-    this.toastMessage = this.page.getByTestId("toast-message-container");
-  }
-
-  async getLatestToast() {
-    const toast = this.toastMessage.first();
-    return {
-      locator: toast,
-      closeButton: toast.getByTestId("close-toast-button"),
-      message: toast.getByTestId("toast-message"),
-    };
-  }
-}

e2e/fixtures/index.ts

@@ -1,27 +0,0 @@
-import { test as baseTest } from "@playwright/test";
-import { LoginPage } from "./login-page";
-import { RegistrationPage } from "./registration-page";
-import { DashboardPage } from "./base/dashboard-page";
-
-export const test = baseTest.extend<{
-  dashboardPage: DashboardPage;
-  loginPage: LoginPage;
-  registrationPage: RegistrationPage;
-}>({
-  page: async ({ page }, use) => {
-    await page.goto("/");
-    use(page);
-  },
-  dashboardPage: async ({ page }, use) => {
-    const dashboardPage = new DashboardPage(page);
-    await use(dashboardPage);
-  },
-  loginPage: async ({ page }, use) => {
-    const loginPage = new LoginPage(page);
-    await use(loginPage);
-  },
-  registrationPage: async ({ page }, use) => {
-    const registrationPage = new RegistrationPage(page);
-    await use(registrationPage);
-  },
-});

e2e/fixtures/login-page.ts

@@ -1,27 +0,0 @@
-import { Locator, Page } from "@playwright/test";
-import { BasePage } from "./base/page";
-
-export class LoginPage extends BasePage {
-  submitLoginButton: Locator;
-  loginForm: Locator;
-  registerLink: Locator;
-  passwordInput: Locator;
-  usernameInput: Locator;
-
-  constructor(page: Page) {
-    super(page);
-
-    this.submitLoginButton = page.getByTestId("submit-login-button");
-
-    this.loginForm = page.getByTestId("login-form");
-
-    this.registerLink = page.getByTestId("register-link");
-
-    this.passwordInput = page.getByTestId("password-input");
-    this.usernameInput = page.getByTestId("username-input");
-  }
-
-  async goto() {
-    await this.page.goto("/login");
-  }
-}

e2e/fixtures/registration-page.ts

@@ -1,28 +0,0 @@
-import { Locator, Page } from "@playwright/test";
-import { BasePage } from "./base/page";
-
-export class RegistrationPage extends BasePage {
-  registerButton: Locator;
-  registrationForm: Locator;
-
-  loginLink: Locator;
-
-  displayNameInput: Locator;
-  passwordConfirmInput: Locator;
-  passwordInput: Locator;
-  usernameInput: Locator;
-
-  constructor(page: Page) {
-    super(page);
-
-    this.registerButton = page.getByTestId("register-button");
-    this.registrationForm = page.getByTestId("registration-form");
-
-    this.loginLink = page.getByTestId("login-link");
-
-    this.displayNameInput = page.getByTestId("display-name-input");
-    this.passwordConfirmInput = page.getByTestId("password-confirm-input");
-    this.passwordInput = page.getByTestId("password-input");
-    this.usernameInput = page.getByTestId("username-input");
-  }
-}

e2e/index.ts

@@ -1,2 +0,0 @@
-export { test } from "./fixtures";
-export { expect } from "@playwright/test";

e2e/tests/global/setup.dashboard.ts

@@ -1,19 +0,0 @@
-import { seedUser } from "@/e2e/data/user";
-import { test as setup } from "../../index";
-import { STORAGE_STATE } from "../../../playwright.config";
-
-setup("Setup the default user", async ({ page, dashboardPage, loginPage }) => {
-  const username = process.env["TEST_USERNAME"] || "";
-  const password = process.env["TEST_PASSWORD"] || "";
-  await seedUser(username, password);
-
-  await loginPage.goto();
-  await loginPage.usernameInput.fill(username);
-  await loginPage.passwordInput.fill(password);
-  await loginPage.submitLoginButton.click();
-  await dashboardPage.container.waitFor({ state: "visible" });
-
-  await page.context().storageState({
-    path: STORAGE_STATE,
-  });
-});

e2e/tests/global/setup.public.ts

@@ -1,8 +0,0 @@
-import { seedUser } from "@/e2e/data/user";
-import { test as setup } from "../../index";
-
-setup("Setup the default user", async () => {
-  const username = process.env["TEST_USERNAME"] || "";
-  const password = process.env["TEST_PASSWORD"] || "";
-  await seedUser(username, password);
-});

e2e/tests/public/login.spec.ts

@@ -1,50 +0,0 @@
-import { expect, test } from "../../index";
-
-test.describe(
-  "Login test suite",
-  {
-    tag: "@login",
-  },
-  async () => {
-    test("Logging in without credentials displays an error", async ({
-      loginPage,
-    }) => {
-      await loginPage.submitLoginButton.click();
-      const toast = await loginPage.getLatestToast();
-      await expect(toast.locator).toBeVisible();
-      await expect(toast.locator).toHaveAttribute("data-type", "error");
-    });
-
-    test("Logging in with an erroneous password displays an error", async ({
-      loginPage,
-    }) => {
-      await loginPage.usernameInput.fill(process.env["TEST_USERNAME"] || "");
-      await loginPage.passwordInput.fill("NOT_MY_PASSWORD_DNE_ERROR");
-      await loginPage.submitLoginButton.click();
-      const toast = await loginPage.getLatestToast();
-      await expect(toast.locator).toBeVisible();
-      await expect(toast.locator).toHaveAttribute("data-type", "error");
-    });
-
-    test("Logging in without valid credentials displays an error", async ({
-      loginPage,
-    }) => {
-      await loginPage.submitLoginButton.click();
-      const toast = await loginPage.getLatestToast();
-      await expect(toast.locator).toBeVisible();
-      await expect(toast.locator).toHaveAttribute("data-type", "error");
-    });
-
-    test("Logging in with a valid username and password works as expected", async ({
-      page,
-      loginPage,
-      dashboardPage,
-    }) => {
-      await loginPage.usernameInput.fill(process.env["TEST_USERNAME"] || "");
-      await loginPage.passwordInput.fill(process.env["TEST_PASSWORD"] || "");
-      await loginPage.submitLoginButton.click();
-      await expect(loginPage.loginForm).not.toBeVisible();
-      await expect(dashboardPage.container).toBeVisible();
-    });
-  }
-);

hooks/useInitialData.tsx

@@ -29,6 +29,4 @@ export default function useInitialData() {
       // setLinks();
     }
   }, [account]);
-
-  return status;
 }

layouts/AuthRedirect.tsx

@@ -1,6 +1,8 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
-import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import Loader from "../components/Loader";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import useInitialData from "@/hooks/useInitialData";
 import useAccountStore from "@/store/account";
 
@@ -8,70 +10,75 @@ interface Props {
   children: ReactNode;
 }
 
-const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
-
 export default function AuthRedirect({ children }: Props) {
   const router = useRouter();
-  const { status } = useSession();
+  const { status, data } = useSession();
-  const [shouldRenderChildren, setShouldRenderChildren] = useState(false);
+  const [redirect, setRedirect] = useState(true);
   const { account } = useAccountStore();
 
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+  const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
+
   useInitialData();
 
   useEffect(() => {
-    const isLoggedIn = status === "authenticated";
+    if (!router.pathname.startsWith("/public")) {
-    const isUnauthenticated = status === "unauthenticated";
+      if (
-    const isPublicPage = router.pathname.startsWith("/public");
+        status === "authenticated" &&
-    const hasInactiveSubscription =
+        account.id &&
-      account.id && !account.subscription?.active && stripeEnabled;
+        !account.subscription?.active &&
-
+        stripeEnabled
-    // There are better ways of doing this... but this one works for now
-    const routes = [
-      { path: "/login", isProtected: false },
-      { path: "/register", isProtected: false },
-      { path: "/confirmation", isProtected: false },
-      { path: "/forgot", isProtected: false },
-      { path: "/auth/reset-password", isProtected: false },
-      { path: "/", isProtected: false },
-      { path: "/subscribe", isProtected: true },
-      { path: "/dashboard", isProtected: true },
-      { path: "/settings", isProtected: true },
-      { path: "/collections", isProtected: true },
-      { path: "/links", isProtected: true },
-      { path: "/tags", isProtected: true },
-      { path: "/preserved", isProtected: true },
-      { path: "/admin", isProtected: true },
-      { path: "/search", isProtected: true },
-    ];
-
-    if (isPublicPage) {
-      setShouldRenderChildren(true);
-    } else {
-      if (isLoggedIn && hasInactiveSubscription) {
-        redirectTo("/subscribe");
-      } else if (
-        isLoggedIn &&
-        !routes.some((e) => router.pathname.startsWith(e.path) && e.isProtected)
       ) {
-        redirectTo("/dashboard");
+        router.push("/subscribe").then(() => {
-      } else if (
+          setRedirect(false);
-        isUnauthenticated &&
+        });
-        routes.some((e) => router.pathname.startsWith(e.path) && e.isProtected)
-      ) {
-        redirectTo("/login");
-      } else {
-        setShouldRenderChildren(true);
       }
+      // Redirect to "/choose-username" if user is authenticated and is either a subscriber OR subscription is undefiend, and doesn't have a username
+      else if (
+        emailEnabled &&
+        status === "authenticated" &&
+        account.subscription?.active &&
+        stripeEnabled &&
+        account.id &&
+        !account.username
+      ) {
+        router.push("/choose-username").then(() => {
+          setRedirect(false);
+        });
+      } else if (
+        status === "authenticated" &&
+        account.id &&
+        (router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/subscribe" ||
+          router.pathname === "/choose-username" ||
+          router.pathname === "/forgot" ||
+          router.pathname === "/")
+      ) {
+        router.push("/dashboard").then(() => {
+          setRedirect(false);
+        });
+      } else if (
+        status === "unauthenticated" &&
+        !(
+          router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/forgot"
+        )
+      ) {
+        router.push("/login").then(() => {
+          setRedirect(false);
+        });
+      } else if (status === "loading") setRedirect(true);
+      else setRedirect(false);
+    } else {
+      setRedirect(false);
     }
   }, [status, account, router.pathname]);
 
-  function redirectTo(destination: string) {
+  if (status !== "loading" && !redirect) return <>{children}</>;
-    router.push(destination).then(() => setShouldRenderChildren(true));
+  else return <></>;
-  }
+  // return <>{children}</>;
-
-  if (status !== "loading" && shouldRenderChildren) {
-    return <>{children}</>;
-  } else {
-    return <></>;
-  }
 }

layouts/CenteredForm.tsx

@@ -1,27 +1,18 @@
 import useLocalSettingsStore from "@/store/localSettings";
 import Image from "next/image";
 import Link from "next/link";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
-import { Trans } from "next-i18next";
 
 interface Props {
   text?: string;
   children: ReactNode;
-  "data-testid"?: string;
 }
 
-export default function CenteredForm({
+export default function CenteredForm({ text, children }: Props) {
-  text,
-  children,
-  "data-testid": dataTestId,
-}: Props) {
   const { settings } = useLocalSettingsStore();
 
   return (
-    <div
+    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
-      className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5"
-      data-testid={dataTestId}
-    >
       <div className="m-auto flex flex-col gap-2 w-full">
         {settings.theme ? (
           <Image
@@ -41,13 +32,11 @@ export default function CenteredForm({
         ) : undefined}
         {children}
         <p className="text-center text-xs text-neutral mb-5">
-          <Trans
+          © {new Date().getFullYear()}{" "}
-            values={{ date: new Date().getFullYear() }}
+          <Link href="https://linkwarden.app" className="font-semibold">
-            i18nKey="all_rights_reserved"
+            Linkwarden
-            components={[
+          </Link>
-              <Link href="https://linkwarden.app" className="font-semibold" />,
+          . All rights reserved.
-            ]}
-          />
         </p>
       </div>
     </div>

layouts/MainLayout.tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/Navbar";
-import Announcement from "@/components/Announcement";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
 import { ReactNode, useEffect, useState } from "react";
 import getLatestVersion from "@/lib/client/getLatestVersion";
@@ -33,20 +33,27 @@ export default function MainLayout({ children }: Props) {
   };
 
   return (
-    <div className="flex" data-testid="dashboard-wrapper">
+    <>
       {showAnnouncement ? (
-        <Announcement toggleAnnouncementBar={toggleAnnouncementBar} />
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
       ) : undefined}
-      <div className="hidden lg:block">
-        <Sidebar className={`fixed top-0`} />
-      </div>
 
-      <div
+      <div className="flex">
-        className={`w-full sm:pb-0 pb-20 flex flex-col min-h-screen lg:ml-80`}
+        <div className="hidden lg:block">
-      >
+          <Sidebar
-        <Navbar />
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
-        {children}
+          />
+        </div>
+
+        <div
+          className={`w-full sm:pb-0 pb-20 flex flex-col min-h-${
+            showAnnouncement ? "full" : "screen"
+          } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
+        >
+          <Navbar />
+          {children}
+        </div>
       </div>
-    </div>
+    </>
   );
 }

lib/api/archiveHandler.ts

@@ -1,16 +1,15 @@
 import { LaunchOptions, chromium, devices } from "playwright";
 import { prisma } from "./db";
-import sendToWayback from "./preservationScheme/sendToWayback";
+import createFile from "./storage/createFile";
+import sendToWayback from "./sendToWayback";
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
+import DOMPurify from "dompurify";
 import { Collection, Link, User } from "@prisma/client";
-import fetchHeaders from "./fetchHeaders";
+import validateUrlSize from "./validateUrlSize";
+import removeFile from "./storage/removeFile";
+import Jimp from "jimp";
 import createFolder from "./storage/createFolder";
-import { removeFiles } from "./manageLinkFiles";
-import handleMonolith from "./preservationScheme/handleMonolith";
-import handleReadablility from "./preservationScheme/handleReadablility";
-import handleArchivePreview from "./preservationScheme/handleArchivePreview";
-import handleScreenshotAndPdf from "./preservationScheme/handleScreenshotAndPdf";
-import imageHandler from "./preservationScheme/imageHandler";
-import pdfHandler from "./preservationScheme/pdfHandler";
 
 type LinksAndCollectionAndOwner = Link & {
   collection: Collection & {
@@ -21,18 +20,6 @@ type LinksAndCollectionAndOwner = Link & {
 const BROWSER_TIMEOUT = Number(process.env.BROWSER_TIMEOUT) || 5;
 
 export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
-  const timeoutPromise = new Promise((_, reject) => {
-    setTimeout(
-      () =>
-        reject(
-          new Error(
-            `Browser has been open for more than ${BROWSER_TIMEOUT} minutes.`
-          )
-        ),
-      BROWSER_TIMEOUT * 60000
-    );
-  });
-
   // allow user to configure a proxy
   let browserOptions: LaunchOptions = {};
   if (process.env.PROXY) {
@@ -52,22 +39,29 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
 
   const page = await context.newPage();
 
-  createFolder({
+  const timeoutPromise = new Promise((_, reject) => {
-    filePath: `archives/preview/${link.collectionId}`,
+    setTimeout(
-  });
+      () =>
-
+        reject(
-  createFolder({
+          new Error(
-    filePath: `archives/${link.collectionId}`,
+            `Browser has been open for more than ${BROWSER_TIMEOUT} minutes.`
+          )
+        ),
+      BROWSER_TIMEOUT * 60000
+    );
   });
 
   try {
     await Promise.race([
       (async () => {
-        const user = link.collection?.owner;
+        const validatedUrl = link.url
+          ? await validateUrlSize(link.url)
+          : undefined;
 
-        const header = link.url ? await fetchHeaders(link.url) : undefined;
+        if (validatedUrl === null)
+          throw "Something went wrong while retrieving the file size.";
 
-        const contentType = header?.get("content-type");
+        const contentType = validatedUrl?.get("content-type");
         let linkType = "url";
         let imageExtension = "png";
 
@@ -79,22 +73,23 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
           else if (contentType.includes("image/png")) imageExtension = "png";
         }
 
-        await prisma.link.update({
+        const user = link.collection?.owner;
+
+        // send to archive.org
+        if (user.archiveAsWaybackMachine && link.url) sendToWayback(link.url);
+
+        const targetLink = await prisma.link.update({
           where: { id: link.id },
           data: {
             type: linkType,
             image:
               user.archiveAsScreenshot && !link.image?.startsWith("archive")
                 ? "pending"
-                : undefined,
+                : "unavailable",
             pdf:
               user.archiveAsPDF && !link.pdf?.startsWith("archive")
                 ? "pending"
-                : undefined,
+                : "unavailable",
-            monolith:
-              user.archiveAsMonolith && !link.monolith?.startsWith("archive")
-                ? "pending"
-                : undefined,
             readable: !link.readable?.startsWith("archive")
               ? "pending"
               : undefined,
@@ -105,9 +100,6 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
           },
         });
 
-        // send to archive.org
-        if (user.archiveAsWaybackMachine && link.url) sendToWayback(link.url);
-
         if (linkType === "image" && !link.image?.startsWith("archive")) {
           await imageHandler(link, imageExtension); // archive image (jpeg/png)
           return;
@@ -121,37 +113,183 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
 
           const content = await page.content();
 
-          // Preview
+          // TODO single file
-          if (
+          // const session = await page.context().newCDPSession(page);
-            !link.preview?.startsWith("archives") &&
+          // const doc = await session.send("Page.captureSnapshot", {
-            !link.preview?.startsWith("unavailable")
+          //   format: "mhtml",
-          )
+          // });
-            await handleArchivePreview(link, page);
+          // const saveDocLocally = (doc: any) => {
+          //   console.log(doc);
+          //   return createFile({
+          //     data: doc,
+          //     filePath: `archives/${targetLink.collectionId}/${link.id}.mhtml`,
+          //   });
+          // };
+          // saveDocLocally(doc.data);
 
           // Readability
+          const window = new JSDOM("").window;
+          const purify = DOMPurify(window);
+          const cleanedUpContent = purify.sanitize(content);
+          const dom = new JSDOM(cleanedUpContent, { url: link.url || "" });
+          const article = new Readability(dom.window.document).parse();
+          const articleText = article?.textContent
+            .replace(/ +(?= )/g, "") // strip out multiple spaces
+            .replace(/(\r\n|\n|\r)/gm, " "); // strip out line breaks
           if (
-            !link.readable?.startsWith("archives") &&
+            articleText &&
-            !link.readable?.startsWith("unavailable")
+            articleText !== "" &&
-          )
+            !link.readable?.startsWith("archive")
-            await handleReadablility(content, link);
+          ) {
+            await createFile({
+              data: JSON.stringify(article),
+              filePath: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
+            });
+
+            await prisma.link.update({
+              where: { id: link.id },
+              data: {
+                readable: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
+                textContent: articleText,
+              },
+            });
+          }
+
+          // Preview
+
+          const ogImageUrl = await page.evaluate(() => {
+            const metaTag = document.querySelector('meta[property="og:image"]');
+            return metaTag ? (metaTag as any).content : null;
+          });
+
+          createFolder({
+            filePath: `archives/preview/${link.collectionId}`,
+          });
+
+          if (ogImageUrl) {
+            console.log("Found og:image URL:", ogImageUrl);
+
+            // Download the image
+            const imageResponse = await page.goto(ogImageUrl);
+
+            // Check if imageResponse is not null
+            if (imageResponse && !link.preview?.startsWith("archive")) {
+              const buffer = await imageResponse.body();
+
+              // Check if buffer is not null
+              if (buffer) {
+                // Load the image using Jimp
+                Jimp.read(buffer, async (err, image) => {
+                  if (image && !err) {
+                    image?.resize(1280, Jimp.AUTO).quality(20);
+                    const processedBuffer = await image?.getBufferAsync(
+                      Jimp.MIME_JPEG
+                    );
+
+                    createFile({
+                      data: processedBuffer,
+                      filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                    }).then(() => {
+                      return prisma.link.update({
+                        where: { id: link.id },
+                        data: {
+                          preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                        },
+                      });
+                    });
+                  }
+                }).catch((err) => {
+                  console.error("Error processing the image:", err);
+                });
+              } else {
+                console.log("No image data found.");
+              }
+            }
+
+            await page.goBack();
+          } else if (!link.preview?.startsWith("archive")) {
+            console.log("No og:image found");
+            await page
+              .screenshot({ type: "jpeg", quality: 20 })
+              .then((screenshot) => {
+                return createFile({
+                  data: screenshot,
+                  filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                });
+              })
+              .then(() => {
+                return prisma.link.update({
+                  where: { id: link.id },
+                  data: {
+                    preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                  },
+                });
+              });
+          }
 
           // Screenshot/PDF
-          if (
+          await page.evaluate(
-            (!link.image?.startsWith("archives") &&
+            autoScroll,
-              !link.image?.startsWith("unavailable")) ||
+            Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-            (!link.pdf?.startsWith("archives") &&
+          );
-              !link.pdf?.startsWith("unavailable"))
-          )
-            await handleScreenshotAndPdf(link, page, user);
 
-          // Monolith
+          // Check if the user hasn't deleted the link by the time we're done scrolling
-          if (
+          const linkExists = await prisma.link.findUnique({
-            !link.monolith?.startsWith("archive") &&
+            where: { id: link.id },
-            !link.monolith?.startsWith("unavailable") &&
+          });
-            user.archiveAsMonolith &&
+          if (linkExists) {
-            link.url
+            const processingPromises = [];
-          )
+
-            await handleMonolith(link, content);
+            if (
+              user.archiveAsScreenshot &&
+              !link.image?.startsWith("archive")
+            ) {
+              processingPromises.push(
+                page.screenshot({ fullPage: true }).then((screenshot) => {
+                  return createFile({
+                    data: screenshot,
+                    filePath: `archives/${linkExists.collectionId}/${link.id}.png`,
+                  });
+                })
+              );
+            }
+
+            // apply administrator's defined pdf margins or default to 15px
+            const margins = {
+              top: process.env.PDF_MARGIN_TOP || "15px",
+              bottom: process.env.PDF_MARGIN_BOTTOM || "15px",
+            };
+
+            if (user.archiveAsPDF && !link.pdf?.startsWith("archive")) {
+              processingPromises.push(
+                page
+                  .pdf({
+                    width: "1366px",
+                    height: "1931px",
+                    printBackground: true,
+                    margin: margins,
+                  })
+                  .then((pdf) => {
+                    return createFile({
+                      data: pdf,
+                      filePath: `archives/${linkExists.collectionId}/${link.id}.pdf`,
+                    });
+                  })
+              );
+            }
+            await Promise.allSettled(processingPromises);
+            await prisma.link.update({
+              where: { id: link.id },
+              data: {
+                image: user.archiveAsScreenshot
+                  ? `archives/${linkExists.collectionId}/${link.id}.png`
+                  : undefined,
+                pdf: user.archiveAsPDF
+                  ? `archives/${linkExists.collectionId}/${link.id}.pdf`
+                  : undefined,
+              },
+            });
+          }
         }
       })(),
       timeoutPromise,
@@ -176,9 +314,6 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
           image: !finalLink.image?.startsWith("archives")
             ? "unavailable"
             : undefined,
-          monolith: !finalLink.monolith?.startsWith("archives")
-            ? "unavailable"
-            : undefined,
           pdf: !finalLink.pdf?.startsWith("archives")
             ? "unavailable"
             : undefined,
@@ -188,9 +323,89 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
         },
       });
     else {
-      await removeFiles(link.id, link.collectionId);
+      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.png` });
+      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.pdf` });
+      removeFile({
+        filePath: `archives/${link.collectionId}/${link.id}_readability.json`,
+      });
+      removeFile({
+        filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+      });
     }
 
     await browser.close();
   }
 }
+
+const autoScroll = async (AUTOSCROLL_TIMEOUT: number) => {
+  const timeoutPromise = new Promise<void>((_, reject) => {
+    setTimeout(() => {
+      reject(new Error(`Webpage was too long to be archived.`));
+    }, AUTOSCROLL_TIMEOUT * 1000);
+  });
+
+  const scrollingPromise = new Promise<void>((resolve) => {
+    let totalHeight = 0;
+    let distance = 100;
+    let scrollDown = setInterval(() => {
+      let scrollHeight = document.body.scrollHeight;
+      window.scrollBy(0, distance);
+      totalHeight += distance;
+      if (totalHeight >= scrollHeight) {
+        clearInterval(scrollDown);
+        window.scroll(0, 0);
+        resolve();
+      }
+    }, 100);
+  });
+
+  await Promise.race([scrollingPromise, timeoutPromise]);
+};
+
+const imageHandler = async ({ url, id }: Link, extension: string) => {
+  const image = await fetch(url as string).then((res) => res.blob());
+
+  const buffer = Buffer.from(await image.arrayBuffer());
+
+  const linkExists = await prisma.link.findUnique({
+    where: { id },
+  });
+
+  if (linkExists) {
+    await createFile({
+      data: buffer,
+      filePath: `archives/${linkExists.collectionId}/${id}.${extension}`,
+    });
+
+    await prisma.link.update({
+      where: { id },
+      data: {
+        image: `archives/${linkExists.collectionId}/${id}.${extension}`,
+      },
+    });
+  }
+};
+
+const pdfHandler = async ({ url, id }: Link) => {
+  const pdf = await fetch(url as string).then((res) => res.blob());
+
+  const buffer = Buffer.from(await pdf.arrayBuffer());
+
+  const linkExists = await prisma.link.findUnique({
+    where: { id },
+  });
+
+  if (linkExists) {
+    await createFile({
+      data: buffer,
+      filePath: `archives/${linkExists.collectionId}/${id}.pdf`,
+    });
+
+    await prisma.link.update({
+      where: { id },
+      data: {
+        pdf: `archives/${linkExists.collectionId}/${id}.pdf`,
+      },
+    });
+  }
+};

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

@@ -1,6 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import getPermission from "@/lib/api/getPermission";
-import { UsersAndCollections } from "@prisma/client";
+import { Collection, UsersAndCollections } from "@prisma/client";
 import removeFolder from "@/lib/api/storage/removeFolder";
 
 export default async function deleteCollection(
@@ -58,7 +58,6 @@ export default async function deleteCollection(
     });
 
     await removeFolder({ filePath: `archives/${collectionId}` });
-    await removeFolder({ filePath: `archives/preview/${collectionId}` });
 
     await removeFromOrders(userId, collectionId);
 
@@ -101,7 +100,6 @@ async function deleteSubCollections(collectionId: number) {
     });
 
     await removeFolder({ filePath: `archives/${subCollection.id}` });
-    await removeFolder({ filePath: `archives/preview/${subCollection.id}` });
   }
 }
 

lib/api/controllers/dashboard/getDashboardData.ts

@@ -14,7 +14,7 @@ export default async function getDashboardData(
   else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 8,
     where: {
       AND: [
         {
@@ -46,7 +46,7 @@ export default async function getDashboardData(
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
-    take: 10,
+    take: 8,
     where: {
       collection: {
         OR: [

lib/api/controllers/dashboard/getDashboardDataV2.ts

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

lib/api/controllers/links/bulk/deleteLinksById.ts

@@ -1,7 +1,7 @@
 import { prisma } from "@/lib/api/db";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import { removeFiles } from "@/lib/api/manageLinkFiles";
+import removeFile from "@/lib/api/storage/removeFile";
 
 export default async function deleteLinksById(
   userId: number,
@@ -43,7 +43,15 @@ export default async function deleteLinksById(
     const linkId = linkIds[i];
     const collectionIsAccessible = collectionIsAccessibleArray[i];
 
-    if (collectionIsAccessible) removeFiles(linkId, collectionIsAccessible.id);
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+    });
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+    });
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+    });
   }
 
   return { response: deletedLinks, status: 200 };

lib/api/controllers/links/getLinks.ts

@@ -2,8 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkRequestQuery, Sort } from "@/types/global";
 
 export default async function getLink(userId: number, query: LinkRequestQuery) {
-  const POSTGRES_IS_ENABLED =
+  const POSTGRES_IS_ENABLED = process.env.DATABASE_URL.startsWith("postgresql");
-    process.env.DATABASE_URL?.startsWith("postgresql");
 
   let order: any;
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
@@ -103,7 +102,7 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
   }
 
   const links = await prisma.link.findMany({
-    take: Number(process.env.PAGINATION_TAKE_COUNT) || 50,
+    take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
     skip: query.cursor ? 1 : undefined,
     cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {

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

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

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

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import { moveFiles } from "@/lib/api/manageLinkFiles";
+import moveFile from "@/lib/api/storage/moveFile";
 
 export default async function updateLinkById(
   userId: number,
@@ -48,7 +48,7 @@ export default async function updateLinkById(
       },
     });
 
-    // return { response: updatedLink, status: 200 };
+    return { response: updatedLink, status: 200 };
   }
 
   const targetCollectionIsAccessible = await getPermission({
@@ -60,6 +60,9 @@ export default async function updateLinkById(
     (e: UsersAndCollections) => e.userId === userId && e.canUpdate
   );
 
+  const targetCollectionsAccessible =
+    targetCollectionIsAccessible?.ownerId === userId;
+
   const targetCollectionMatchesData = data.collection.id
     ? data.collection.id === targetCollectionIsAccessible?.id
     : true && data.collection.name
@@ -68,7 +71,12 @@ export default async function updateLinkById(
         ? data.collection.ownerId === targetCollectionIsAccessible?.ownerId
         : true;
 
-  if (!targetCollectionMatchesData)
+  if (!targetCollectionsAccessible)
+    return {
+      response: "Target collection is not accessible.",
+      status: 401,
+    };
+  else if (!targetCollectionMatchesData)
     return {
       response: "Target collection does not match the data.",
       status: 401,
@@ -138,7 +146,20 @@ export default async function updateLinkById(
     });
 
     if (collectionIsAccessible?.id !== data.collection.id) {
-      await moveFiles(linkId, collectionIsAccessible?.id, data.collection.id);
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+        `archives/${data.collection.id}/${linkId}.pdf`
+      );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+        `archives/${data.collection.id}/${linkId}.png`
+      );
+
+      await moveFile(
+        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+        `archives/${data.collection.id}/${linkId}_readability.json`
+      );
     }
 
     return { response: updatedLink, status: 200 };

lib/api/controllers/links/postLink.ts

@@ -1,8 +1,10 @@
 import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import fetchTitleAndHeaders from "@/lib/shared/fetchTitleAndHeaders";
+import getTitle from "@/lib/shared/getTitle";
+import { UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
-import setLinkCollection from "../../setLinkCollection";
+import validateUrlSize from "../../validateUrlSize";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
 
@@ -10,22 +12,102 @@ export default async function postLink(
   link: LinkIncludingShortenedCollectionAndTags,
   userId: number
 ) {
-  if (link.url || link.type === "url") {
+  try {
-    try {
+    new URL(link.url || "");
-      new URL(link.url || "");
+  } catch (error) {
-    } catch (error) {
+    return {
-      return {
+      response:
-        response:
+        "Please enter a valid Address for the Link. (It should start with http/https)",
-          "Please enter a valid Address for the Link. (It should start with http/https)",
+      status: 400,
-        status: 400,
+    };
-      };
-    }
   }
 
-  const linkCollection = await setLinkCollection(link, userId);
+  if (!link.collection.id && link.collection.name) {
+    link.collection.name = link.collection.name.trim();
 
-  if (!linkCollection)
+    // find the collection with the name and the user's id
-    return { response: "Collection is not accessible.", status: 400 };
+    const findCollection = await prisma.collection.findFirst({
+      where: {
+        name: link.collection.name,
+        ownerId: userId,
+        parentId: link.collection.parentId,
+      },
+    });
+
+    if (findCollection) {
+      const collectionIsAccessible = await getPermission({
+        userId,
+        collectionId: findCollection.id,
+      });
+
+      const memberHasAccess = collectionIsAccessible?.members.some(
+        (e: UsersAndCollections) => e.userId === userId && e.canCreate
+      );
+
+      if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+        return { response: "Collection is not accessible.", status: 401 };
+
+      link.collection.id = findCollection.id;
+    } else {
+      const collection = await prisma.collection.create({
+        data: {
+          name: link.collection.name,
+          ownerId: userId,
+        },
+      });
+
+      link.collection.id = collection.id;
+
+      await prisma.user.update({
+        where: {
+          id: userId,
+        },
+        data: {
+          collectionOrder: {
+            push: link.collection.id,
+          },
+        },
+      });
+    }
+  } else if (link.collection.id) {
+    const collectionIsAccessible = await getPermission({
+      userId,
+      collectionId: link.collection.id,
+    });
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canCreate
+    );
+
+    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+      return { response: "Collection is not accessible.", status: 401 };
+  } else if (!link.collection.id) {
+    link.collection.name = "Unorganized";
+    link.collection.parentId = null;
+
+    // find the collection with the name "Unorganized" and the user's id
+    const unorganizedCollection = await prisma.collection.findFirst({
+      where: {
+        name: "Unorganized",
+        ownerId: userId,
+      },
+    });
+
+    link.collection.id = unorganizedCollection?.id;
+
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        collectionOrder: {
+          push: link.collection.id,
+        },
+      },
+    });
+  } else {
+    return { response: "Uncaught error.", status: 500 };
+  }
 
   const user = await prisma.user.findUnique({
     where: {
@@ -34,14 +116,9 @@ export default async function postLink(
   });
 
   if (user?.preventDuplicateLinks) {
-    const url = link.url?.trim().replace(/\/+$/, ""); // trim and remove trailing slashes from the URL
-    const hasWwwPrefix = url?.includes(`://www.`);
-    const urlWithoutWww = hasWwwPrefix ? url?.replace(`://www.`, "://") : url;
-    const urlWithWww = hasWwwPrefix ? url : url?.replace("://", `://www.`);
-
     const existingLink = await prisma.link.findFirst({
       where: {
-        OR: [{ url: urlWithWww }, { url: urlWithoutWww }],
+        url: link.url?.trim(),
         collection: {
           ownerId: userId,
         },
@@ -58,23 +135,29 @@ export default async function postLink(
   const numberOfLinksTheUserHas = await prisma.link.count({
     where: {
       collection: {
-        ownerId: linkCollection.ownerId,
+        ownerId: userId,
       },
     },
   });
 
-  if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
+  if (numberOfLinksTheUserHas + 1 > MAX_LINKS_PER_USER)
     return {
-      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 
-  const { title, headers } = await fetchTitleAndHeaders(link.url || "");
+  link.collection.name = link.collection.name.trim();
 
-  const name =
+  const description =
-    link.name && link.name !== "" ? link.name : link.url ? title : "";
+    link.description && link.description !== ""
+      ? link.description
+      : link.url
+        ? await getTitle(link.url)
+        : undefined;
 
-  const contentType = headers?.get("content-type");
+  const validatedUrl = link.url ? await validateUrlSize(link.url) : undefined;
+
+  const contentType = validatedUrl?.get("content-type");
   let linkType = "url";
   let imageExtension = "png";
 
@@ -88,13 +171,13 @@ export default async function postLink(
 
   const newLink = await prisma.link.create({
     data: {
-      url: link.url?.trim().replace(/\/+$/, "") || null,
+      url: link.url?.trim(),
-      name,
+      name: link.name,
-      description: link.description,
+      description,
       type: linkType,
       collection: {
         connect: {
-          id: linkCollection.id,
+          id: link.collection.id,
         },
       },
       tags: {
@@ -102,14 +185,14 @@ export default async function postLink(
           where: {
             name_ownerId: {
               name: tag.name.trim(),
-              ownerId: linkCollection.ownerId,
+              ownerId: link.collection.ownerId,
             },
           },
           create: {
             name: tag.name.trim(),
             owner: {
               connect: {
-                id: linkCollection.ownerId,
+                id: link.collection.ownerId,
               },
             },
           },

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -2,7 +2,6 @@ import { prisma } from "@/lib/api/db";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
 import { parse, Node, Element, TextNode } from "himalaya";
-import { writeFileSync } from "fs";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
 
@@ -31,15 +30,13 @@ export default async function importFromHTMLFile(
 
   if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
     return {
-      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 
   const jsonData = parse(document.documentElement.outerHTML);
 
-  const processedArray = processNodes(jsonData);
+  for (const item of jsonData) {
-
-  for (const item of processedArray) {
     console.log(item);
     await processBookmarks(userId, item as Element);
   }
@@ -63,21 +60,11 @@ async function processBookmarks(
         ) as Element;
 
         if (collectionName) {
-          const collectionNameContent = (collectionName.children[0] as TextNode)?.content;
+          collectionId = await createCollection(
-          if (collectionNameContent) {
+            userId,
-            collectionId = await createCollection(
+            (collectionName.children[0] as TextNode).content,
-              userId,
+            parentCollectionId
-              collectionNameContent,
+          );
-              parentCollectionId
-            );
-          } else {
-            // Handle the case when the collection name is empty
-            collectionId = await createCollection(
-              userId,
-              "Untitled Collection",
-              parentCollectionId
-            );
-          }
         }
         await processBookmarks(
           userId,
@@ -87,9 +74,7 @@ async function processBookmarks(
       } else if (item.type === "element" && item.tagName === "a") {
         // process link
 
-        const linkUrl = item?.attributes.find(
+        const linkUrl = item?.attributes.find((e) => e.key === "href")?.value;
-          (e) => e.key.toLowerCase() === "href"
-        )?.value;
         const linkName = (
           item?.children.find((e) => e.type === "text") as TextNode
         )?.content;
@@ -97,33 +82,14 @@ async function processBookmarks(
           .find((e) => e.key === "tags")
           ?.value.split(",");
 
-        // set date if available
-        const linkDateValue = item?.attributes.find(
-          (e) => e.key.toLowerCase() === "add_date"
-        )?.value;
-
-        const linkDate = linkDateValue
-          ? new Date(Number(linkDateValue) * 1000)
-          : undefined;
-
-        let linkDesc =
-          (
-            (
-              item?.children?.find(
-                (e) => e.type === "element" && e.tagName === "dd"
-              ) as Element
-            )?.children[0] as TextNode
-          )?.content || "";
-
         if (linkUrl && parentCollectionId) {
           await createLink(
             userId,
             linkUrl,
             parentCollectionId,
             linkName,
-            linkDesc,
+            "",
-            linkTags,
+            linkTags
-            linkDate
           );
         } else if (linkUrl) {
           // create a collection named "Imported Bookmarks" and add the link to it
@@ -134,9 +100,8 @@ async function processBookmarks(
             linkUrl,
             collectionId,
             linkName,
-            linkDesc,
+            "",
-            linkTags,
+            linkTags
-            linkDate
           );
         }
 
@@ -195,8 +160,7 @@ const createLink = async (
   collectionId: number,
   name?: string,
   description?: string,
-  tags?: string[],
+  tags?: string[]
-  importDate?: Date
 ) => {
   await prisma.link.create({
     data: {
@@ -229,49 +193,6 @@ const createLink = async (
               }),
             }
           : undefined,
-      importDate: importDate || undefined,
     },
   });
 };
-
-function processNodes(nodes: Node[]) {
-  const findAndProcessDL = (node: Node) => {
-    if (node.type === "element" && node.tagName === "dl") {
-      processDLChildren(node);
-    } else if (
-      node.type === "element" &&
-      node.children &&
-      node.children.length
-    ) {
-      node.children.forEach((child) => findAndProcessDL(child));
-    }
-  };
-
-  const processDLChildren = (dlNode: Element) => {
-    dlNode.children.forEach((child, i) => {
-      if (child.type === "element" && child.tagName === "dt") {
-        const nextSibling = dlNode.children[i + 1];
-        if (
-          nextSibling &&
-          nextSibling.type === "element" &&
-          nextSibling.tagName === "dd"
-        ) {
-          const aElement = child.children.find(
-            (el) => el.type === "element" && el.tagName === "a"
-          );
-          if (aElement && aElement.type === "element") {
-            // Add the 'dd' element as a child of the 'a' element
-            aElement.children.push(nextSibling);
-            // Remove the 'dd' from the parent 'dl' to avoid duplicate processing
-            dlNode.children.splice(i + 1, 1);
-            // Adjust the loop counter due to the removal
-          }
-        }
-      }
-    });
-  };
-
-  nodes.forEach(findAndProcessDL);
-  return nodes;
-}
-

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -26,7 +26,7 @@ export default async function importFromLinkwarden(
 
   if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
     return {
-      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 
@@ -54,7 +54,7 @@ export default async function importFromLinkwarden(
 
           // Import Links
           for (const link of e.links) {
-            await prisma.link.create({
+            const newLink = await prisma.link.create({
               data: {
                 url: link.url,
                 name: link.name,

lib/api/controllers/migration/importFromWallabag.ts

@@ -1,115 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import { Backup } from "@/types/global";
-import createFolder from "@/lib/api/storage/createFolder";
-
-const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
-
-type WallabagBackup = {
-  is_archived: number;
-  is_starred: number;
-  tags: String[];
-  is_public: boolean;
-  id: number;
-  title: string;
-  url: string;
-  content: string;
-  created_at: Date;
-  updated_at: Date;
-  published_by: string[];
-  starred_at: Date;
-  annotations: any[];
-  mimetype: string;
-  language: string;
-  reading_time: number;
-  domain_name: string;
-  preview_picture: string;
-  http_status: string;
-  headers: Record<string, string>;
-}[];
-
-export default async function importFromWallabag(
-  userId: number,
-  rawData: string
-) {
-  const data: WallabagBackup = JSON.parse(rawData);
-
-  const backup = data.filter((e) => e.url);
-
-  let totalImports = backup.length;
-
-  const numberOfLinksTheUserHas = await prisma.link.count({
-    where: {
-      collection: {
-        ownerId: userId,
-      },
-    },
-  });
-
-  if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
-    return {
-      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
-      status: 400,
-    };
-
-  await prisma
-    .$transaction(
-      async () => {
-        const newCollection = await prisma.collection.create({
-          data: {
-            owner: {
-              connect: {
-                id: userId,
-              },
-            },
-            name: "Imports",
-          },
-        });
-
-        createFolder({ filePath: `archives/${newCollection.id}` });
-
-        for (const link of backup) {
-          await prisma.link.create({
-            data: {
-              pinnedBy: link.is_starred
-                ? { connect: { id: userId } }
-                : undefined,
-              url: link.url,
-              name: link.title || "",
-              textContent: link.content || "",
-              importDate: link.created_at || null,
-              collection: {
-                connect: {
-                  id: newCollection.id,
-                },
-              },
-              tags:
-                link.tags && link.tags[0]
-                  ? {
-                      connectOrCreate: link.tags.map((tag) => ({
-                        where: {
-                          name_ownerId: {
-                            name: tag.trim(),
-                            ownerId: userId,
-                          },
-                        },
-                        create: {
-                          name: tag.trim(),
-                          owner: {
-                            connect: {
-                              id: userId,
-                            },
-                          },
-                        },
-                      })),
-                    }
-                  : undefined,
-            },
-          });
-        }
-      },
-      { timeout: 30000 }
-    )
-    .catch((err) => console.log(err));
-
-  return { response: "Success.", status: 200 };
-}

lib/api/controllers/public/links/getPublicLinksUnderCollection.ts

@@ -4,8 +4,7 @@ import { LinkRequestQuery, Sort } from "@/types/global";
 export default async function getLink(
   query: Omit<LinkRequestQuery, "tagId" | "pinnedOnly">
 ) {
-  const POSTGRES_IS_ENABLED =
+  const POSTGRES_IS_ENABLED = process.env.DATABASE_URL.startsWith("postgresql");
-    process.env.DATABASE_URL?.startsWith("postgresql");
 
   let order: any;
   if (query.sort === Sort.DateNewestFirst) order = { id: "desc" };
@@ -69,7 +68,7 @@ export default async function getLink(
   }
 
   const links = await prisma.link.findMany({
-    take: Number(process.env.PAGINATION_TAKE_COUNT) || 50,
+    take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
     skip: query.cursor ? 1 : undefined,
     cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {

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

@@ -75,7 +75,6 @@ export default async function getPublicUser(
     username: lessSensitiveInfo.username,
     image: lessSensitiveInfo.image,
     archiveAsScreenshot: lessSensitiveInfo.archiveAsScreenshot,
-    archiveAsMonolith: lessSensitiveInfo.archiveAsMonolith,
     archiveAsPDF: lessSensitiveInfo.archiveAsPDF,
   };
 

lib/api/controllers/session/createSession.ts

@@ -1,48 +0,0 @@
-import { prisma } from "@/lib/api/db";
-import crypto from "crypto";
-import { decode, encode } from "next-auth/jwt";
-
-export default async function createSession(
-  userId: number,
-  sessionName?: string
-) {
-  const now = Date.now();
-  const expiryDate = new Date();
-  const oneDayInSeconds = 86400;
-
-  expiryDate.setDate(expiryDate.getDate() + 73000); // 200 years (not really never)
-  const expiryDateSecond = 73050 * oneDayInSeconds;
-
-  const token = await encode({
-    token: {
-      id: userId,
-      iat: now / 1000,
-      exp: (expiryDate as any) / 1000,
-      jti: crypto.randomUUID(),
-    },
-    maxAge: expiryDateSecond || 604800,
-    secret: process.env.NEXTAUTH_SECRET as string,
-  });
-
-  const tokenBody = await decode({
-    token,
-    secret: process.env.NEXTAUTH_SECRET as string,
-  });
-
-  const createToken = await prisma.accessToken.create({
-    data: {
-      name: sessionName || "Unknown Device",
-      userId,
-      token: tokenBody?.jti as string,
-      isSession: true,
-      expires: expiryDate,
-    },
-  });
-
-  return {
-    response: {
-      token,
-    },
-    status: 200,
-  };
-}

lib/api/controllers/tokens/getTokens.ts

@@ -9,7 +9,6 @@ export default async function getToken(userId: number) {
     select: {
       id: true,
       name: true,
-      isSession: true,
       expires: true,
       createdAt: true,
     },

lib/api/controllers/tokens/postToken.ts

@@ -65,12 +65,12 @@ export default async function postToken(
       jti: crypto.randomUUID(),
     },
     maxAge: expiryDateSecond || 604800,
-    secret: process.env.NEXTAUTH_SECRET as string,
+    secret: process.env.NEXTAUTH_SECRET,
   });
 
   const tokenBody = await decode({
     token,
-    secret: process.env.NEXTAUTH_SECRET as string,
+    secret: process.env.NEXTAUTH_SECRET,
   });
 
   const createToken = await prisma.accessToken.create({

lib/api/controllers/users/getUsers.ts

@@ -1,21 +0,0 @@
-import { prisma } from "@/lib/api/db";
-
-export default async function getUsers() {
-  // Get all users
-  const users = await prisma.user.findMany({
-    select: {
-      id: true,
-      username: true,
-      email: true,
-      emailVerified: true,
-      subscriptions: {
-        select: {
-          active: true,
-        },
-      },
-      createdAt: true,
-    },
-  });
-
-  return { response: users, status: 200 };
-}