bug fix

Added Italian translation for common.js and add language tag ‘it’ in next-i18next.config.js

.env.sample

@@ -15,14 +15,24 @@ 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=
-ADMINISTRATOR=
+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=
@@ -48,9 +58,9 @@ PROXY_BYPASS=
 PDF_MARGIN_TOP=
 PDF_MARGIN_BOTTOM=
 
-#
+#################
-# SSO Providers
+# SSO Providers #
-#
+#################
 
 # 42 School
 NEXT_PUBLIC_FORTYTWO_ENABLED=
@@ -84,7 +94,6 @@ AUTHELIA_CLIENT_ID=""
 AUTHELIA_CLIENT_SECRET=""
 AUTHELIA_WELLKNOWN_URL=""
 
-
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
 AUTHENTIK_CUSTOM_NAME=
@@ -92,12 +101,25 @@ 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=
-BATLLENET_ISSUER=
+BATTLENET_ISSUER=
 
 # Box
 NEXT_PUBLIC_BOX_ENABLED=
@@ -186,8 +208,8 @@ FUSIONAUTH_TENANT_ID=
 # GitHub
 NEXT_PUBLIC_GITHUB_ENABLED=
 GITHUB_CUSTOM_NAME=
-GITHUB_CLIENT_ID=
+GITHUB_ID=
-GITHUB_CLIENT_SECRET=
+GITHUB_SECRET=
 
 # GitLab
 NEXT_PUBLIC_GITLAB_ENABLED=

Dockerfile

@@ -8,13 +8,30 @@ 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 && \

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, and readable view of each webpage.
+- 📸 Auto capture a screenshot, PDF, single html file, 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/Announcement.tsx

@@ -10,8 +10,8 @@ export default function Announcement({ toggleAnnouncementBar }: Props) {
   const announcementId = localStorage.getItem("announcementId");
 
   return (
-    <div className="fixed left-0 right-0 bottom-20 sm:bottom-10 w-full p-5 z-30">
+    <div className="fixed mx-auto bottom-20 sm:bottom-10 w-full pointer-events-none p-5 z-30">
-      <div className="mx-auto w-full 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">
+      <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

components/CollectionCard.tsx

@@ -5,12 +5,12 @@ import ProfilePhoto from "./ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
-import useAccountStore from "@/store/account";
 import EditCollectionModal from "./ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -20,7 +20,7 @@ type Props = {
 export default function CollectionCard({ collection, className }: Props) {
   const { t } = useTranslation();
   const { settings } = useLocalSettingsStore();
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
@@ -39,22 +39,24 @@ 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,
   });
 
   useEffect(() => {
     const fetchOwner = async () => {
-      if (collection && collection.ownerId !== account.id) {
+      if (collection && collection.ownerId !== user.id) {
         const owner = await getPublicUserData(collection.ownerId as number);
         setCollectionOwner(owner);
-      } else if (collection && collection.ownerId === account.id) {
+      } else if (collection && collection.ownerId === user.id) {
         setCollectionOwner({
-          id: account.id as number,
+          id: user.id as number,
-          name: account.name,
+          name: user.name,
-          username: account.username as string,
+          username: user.username as string,
-          image: account.image as string,
+          image: user.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          archiveAsMonolith: user.archiveAsMonolith as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };

components/CollectionListing.tsx

@@ -9,14 +9,14 @@ import Tree, {
   TreeSourcePosition,
   TreeDestinationPosition,
 } from "@atlaskit/tree";
-import useCollectionStore from "@/store/collections";
 import { Collection } from "@prisma/client";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
-import useAccountStore from "@/store/account";
 import toast from "react-hot-toast";
 import { useTranslation } from "next-i18next";
+import { useCollections, useUpdateCollection } from "@/hooks/store/collections";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
 
 interface ExtendedTreeItem extends TreeItem {
   data: Collection;
@@ -24,53 +24,57 @@ interface ExtendedTreeItem extends TreeItem {
 
 const CollectionListing = () => {
   const { t } = useTranslation();
-  const { collections, updateCollection } = useCollectionStore();
+  const updateCollection = useUpdateCollection();
-  const { account, updateAccount } = useAccountStore();
+  const { data: collections = [], isLoading } = useCollections();
+
+  const { data: user = {} } = useUser();
+  const updateUser = useUpdateUser();
 
   const router = useRouter();
   const currentPath = router.asPath;
 
+  const [tree, setTree] = useState<TreeData | undefined>();
+
   const initialTree = useMemo(() => {
-    if (collections.length > 0) {
+    if (
+      // !tree &&
+      collections.length > 0
+    ) {
       return buildTreeFromCollections(
         collections,
         router,
-        account.collectionOrder
+        user.collectionOrder
       );
-    }
+    } else return undefined;
-    return undefined;
+  }, [collections, user, router]);
-  }, [collections, router]);
-
-  const [tree, setTree] = useState(initialTree);
 
   useEffect(() => {
+    // if (!tree)
     setTree(initialTree);
   }, [initialTree]);
 
   useEffect(() => {
-    if (account.username) {
+    if (user.username) {
       if (
-        (!account.collectionOrder || account.collectionOrder.length === 0) &&
+        (!user.collectionOrder || user.collectionOrder.length === 0) &&
         collections.length > 0
       )
-        updateAccount({
+        updateUser.mutate({
-          ...account,
+          ...user,
           collectionOrder: collections
             .filter(
               (e) =>
                 e.parentId === null ||
                 !collections.find((i) => i.id === e.parentId)
             ) // Filter out collections with non-null parentId
-            .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
+            .map((e) => e.id as number),
         });
       else {
-        const newCollectionOrder: number[] = [
+        const newCollectionOrder: number[] = [...(user.collectionOrder || [])];
-          ...(account.collectionOrder || []),
-        ];
 
         // Start with collections that are in both account.collectionOrder and collections
         const existingCollectionIds = collections.map((c) => c.id as number);
-        const filteredCollectionOrder = account.collectionOrder.filter((id) =>
+        const filteredCollectionOrder = user.collectionOrder.filter((id: any) =>
           existingCollectionIds.includes(id)
         );
 
@@ -78,7 +82,7 @@ const CollectionListing = () => {
         collections.forEach((collection) => {
           if (
             !filteredCollectionOrder.includes(collection.id as number) &&
-            (!collection.parentId || collection.ownerId === account.id)
+            (!collection.parentId || collection.ownerId === user.id)
           ) {
             filteredCollectionOrder.push(collection.id as number);
           }
@@ -87,10 +91,10 @@ const CollectionListing = () => {
         // check if the newCollectionOrder is the same as the old one
         if (
           JSON.stringify(newCollectionOrder) !==
-          JSON.stringify(account.collectionOrder)
+          JSON.stringify(user.collectionOrder)
         ) {
-          updateAccount({
+          updateUser.mutateAsync({
-            ...account,
+            ...user,
             collectionOrder: newCollectionOrder,
           });
         }
@@ -138,9 +142,9 @@ const CollectionListing = () => {
     );
 
     if (
-      (movedCollection?.ownerId !== account.id &&
+      (movedCollection?.ownerId !== user.id &&
         destination.parentId !== source.parentId) ||
-      (destinationCollection?.ownerId !== account.id &&
+      (destinationCollection?.ownerId !== user.id &&
         destination.parentId !== "root")
     ) {
       return toast.error(t("cant_change_collection_you_dont_own"));
@@ -148,18 +152,25 @@ const CollectionListing = () => {
 
     setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
 
-    const updatedCollectionOrder = [...account.collectionOrder];
+    const updatedCollectionOrder = [...user.collectionOrder];
 
     if (source.parentId !== destination.parentId) {
-      await updateCollection({
+      await updateCollection.mutateAsync(
-        ...movedCollection,
+        {
-        parentId:
+          ...movedCollection,
-          destination.parentId && destination.parentId !== "root"
+          parentId:
-            ? Number(destination.parentId)
+            destination.parentId && destination.parentId !== "root"
-            : destination.parentId === "root"
+              ? Number(destination.parentId)
-              ? "root"
+              : destination.parentId === "root"
-              : null,
+                ? "root"
-      } as any);
+                : null,
+        },
+        {
+          onError: (error) => {
+            toast.error(error.message);
+          },
+        }
+      );
     }
 
     if (
@@ -172,8 +183,8 @@ const CollectionListing = () => {
 
       updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
 
-      await updateAccount({
+      await updateUser.mutateAsync({
-        ...account,
+        ...user,
         collectionOrder: updatedCollectionOrder,
       });
     } else if (
@@ -182,8 +193,8 @@ const CollectionListing = () => {
     ) {
       updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
 
-      await updateAccount({
+      updateUser.mutate({
-        ...account,
+        ...user,
         collectionOrder: updatedCollectionOrder,
       });
     } else if (
@@ -193,14 +204,22 @@ const CollectionListing = () => {
     ) {
       updatedCollectionOrder.splice(source.index, 1);
 
-      await updateAccount({
+      await updateUser.mutateAsync({
-        ...account,
+        ...user,
         collectionOrder: updatedCollectionOrder,
       });
     }
   };
 
-  if (!tree) {
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+      </div>
+    );
+  } else if (!tree) {
     return (
       <p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
         {t("you_have_no_collections")}

components/InputSelect/CollectionSelection.tsx

@@ -1,10 +1,10 @@
-import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { styles } from "./styles";
 import { Options } from "./types";
 import CreatableSelect from "react-select/creatable";
 import Select from "react-select";
+import { useCollections } from "@/hooks/store/collections";
 
 type Props = {
   onChange: any;
@@ -24,7 +24,8 @@ export default function CollectionSelection({
   showDefaultValue = true,
   creatable = true,
 }: Props) {
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
+
   const router = useRouter();
 
   const [options, setOptions] = useState<Options[]>([]);

components/InputSelect/TagSelection.tsx

@@ -1,8 +1,8 @@
-import useTagStore from "@/store/tags";
 import { useEffect, useState } from "react";
 import CreatableSelect from "react-select/creatable";
 import { styles } from "./styles";
 import { Options } from "./types";
+import { useTags } from "@/hooks/store/tags";
 
 type Props = {
   onChange: any;
@@ -13,12 +13,12 @@ type Props = {
 };
 
 export default function TagSelection({ onChange, defaultValue }: Props) {
-  const { tags } = useTagStore();
+  const { data: tags = [] } = useTags();
 
   const [options, setOptions] = useState<Options[]>([]);
 
   useEffect(() => {
-    const formatedCollections = tags.map((e) => {
+    const formatedCollections = tags.map((e: any) => {
       return { value: e.id, label: e.name };
     });
 

components/InstallApp.tsx

@@ -8,7 +8,7 @@ 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="fixed 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"

components/LinkListOptions.tsx

@@ -5,17 +5,18 @@ 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";
+import { Sort, ViewMode } from "@/types/global";
+import { useBulkDeleteLinks, useLinks } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   children: React.ReactNode;
   t: TFunction<"translation", undefined>;
-  viewMode: string;
+  viewMode: ViewMode;
-  setViewMode: Dispatch<SetStateAction<string>>;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
   searchFilter?: {
     name: boolean;
     url: boolean;
@@ -48,8 +49,11 @@ const LinkListOptions = ({
   editMode,
   setEditMode,
 }: Props) => {
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
-    useLinkStore();
+
+  const deleteLinksById = useBulkDeleteLinks();
+
+  const { links } = useLinks();
 
   const router = useRouter();
 
@@ -73,20 +77,23 @@ const LinkListOptions = ({
   };
 
   const bulkDeleteLinks = async () => {
-    const load = toast.loading(t("deleting_selections"));
+    const load = toast.loading(t("deleting"));
 
-    const response = await deleteLinksById(
+    await deleteLinksById.mutateAsync(
-      selectedLinks.map((link) => link.id as number)
+      selectedLinks.map((link) => link.id as number),
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setSelectedLinks([]);
+            toast.success(t("deleted"));
+          }
+        },
+      }
     );
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(
-        selectedLinks.length === 1
-          ? t("link_deleted")
-          : t("links_deleted", { count: selectedLinks.length })
-      );
   };
 
   return (
@@ -96,57 +103,64 @@ const LinkListOptions = ({
 
         <div className="flex gap-3 items-center justify-end">
           <div className="flex gap-2 items-center mt-2">
-            {links.length > 0 && editMode !== undefined && setEditMode && (
+            {links &&
-              <div
+              links.length > 0 &&
-                role="button"
+              editMode !== undefined &&
-                onClick={() => {
+              setEditMode && (
-                  setEditMode(!editMode);
+                <div
-                  setSelectedLinks([]);
+                  role="button"
-                }}
+                  onClick={() => {
-                className={`btn btn-square btn-sm btn-ghost ${
+                    setEditMode(!editMode);
-                  editMode
+                    setSelectedLinks([]);
-                    ? "bg-primary/20 hover:bg-primary/20"
+                  }}
-                    : "hover:bg-neutral/20"
+                  className={`btn btn-square btn-sm btn-ghost ${
-                }`}
+                    editMode
-              >
+                      ? "bg-primary/20 hover:bg-primary/20"
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
+                      : "hover:bg-neutral/20"
-              </div>
+                  }`}
-            )}
+                >
+                  <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} />
+            <SortDropdown
+              sortBy={sortBy}
+              setSort={(value) => {
+                setSortBy(value);
+              }}
+              t={t}
+            />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
       </div>
 
-      {editMode && links.length > 0 && (
+      {links && 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">
-            <div className="flex gap-3 ml-3">
+            <input
-              <input
+              type="checkbox"
-                type="checkbox"
+              className="checkbox checkbox-primary"
-                className="checkbox checkbox-primary"
+              onChange={() => handleSelectAll()}
-                onChange={() => handleSelectAll()}
+              checked={
-                checked={
+                selectedLinks.length === links.length && links.length > 0
-                  selectedLinks.length === links.length && links.length > 0
+              }
-                }
+            />
-              />
+            {selectedLinks.length > 0 ? (
-              {selectedLinks.length > 0 ? (
+              <span>
-                <span>
+                {selectedLinks.length === 1
-                  {selectedLinks.length === 1
+                  ? t("link_selected")
-                    ? t("link_selected")
+                  : t("links_selected", { count: selectedLinks.length })}
-                    : t("links_selected", { count: selectedLinks.length })}
+              </span>
-                </span>
+            ) : (
-              ) : (
+              <span>{t("nothing_selected")}</span>
-                <span>{t("nothing_selected")}</span>
+            )}
-              )}
+          </div>
-            </div>
-          )}
           <div className="flex gap-3">
             <button
               onClick={() => setBulkEditLinksModal(true)}

components/LinkViews/Layouts/CardView.tsx

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

components/LinkViews/Layouts/ListView.tsx

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

components/LinkViews/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/LinkComponents/LinkActions.tsx

@@ -7,11 +7,11 @@ import usePermissions from "@/hooks/usePermissions";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
 import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
-import useLinkStore from "@/store/links";
-import { toast } from "react-hot-toast";
-import useAccountStore from "@/store/account";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
+import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -39,34 +39,35 @@ export default function LinkActions({
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
   const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
-  const { removeLink, updateLink } = useLinkStore();
+  const updateLink = useUpdateLink();
+  const deleteLink = useDeleteLink();
 
   const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
 
-    const load = toast.loading(t("applying"));
+    const load = toast.loading(t("updating"));
 
-    const response = await updateLink({
+    await updateLink.mutateAsync(
-      ...link,
+      {
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
+        ...link,
-    });
+        pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    toast.dismiss(load);
+          if (error) {
-
+            toast.error(error.message);
-    response.ok &&
+          } else {
-      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
+            toast.success(
-  };
+              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
-
+            );
-  const deleteLink = async () => {
+          }
-    const load = toast.loading(t("deleting"));
+        },
-
+      }
-    const response = await removeLink(link.id as number);
+    );
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(t("deleted"));
   };
 
   return (
@@ -150,9 +151,25 @@ export default function LinkActions({
               <div
                 role="button"
                 tabIndex={0}
-                onClick={(e) => {
+                onClick={async (e) => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                  e.shiftKey
+                    ? async () => {
+                        const load = toast.loading(t("deleting"));
+
+                        await deleteLink.mutateAsync(link.id as number, {
+                          onSettled: (data, error) => {
+                            toast.dismiss(load);
+
+                            if (error) {
+                              toast.error(error.message);
+                            } else {
+                              toast.success(t("deleted"));
+                            }
+                          },
+                        });
+                      }
+                    : setDeleteLinkModal(true);
                 }}
               >
                 {t("delete")}
@@ -177,7 +194,7 @@ export default function LinkActions({
       {preservedFormatsModal ? (
         <PreservedFormatsModal
           onClose={() => setPreservedFormatsModal(false)}
-          activeLink={link}
+          link={link}
         />
       ) : undefined}
       {/* {expandedLink ? (

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -5,7 +5,6 @@ import {
 } 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";
@@ -13,14 +12,16 @@ 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 LinkIcon from "./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 LinkTypeBadge from "./LinkTypeBadge";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,11 +34,16 @@ type Props = {
 export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const { t } = useTranslation();
 
-  const viewMode = localStorage.getItem("viewMode") || "card";
+  const { data: collections = [] } = useCollections();
-  const { collections } = useCollectionStore();
-  const { account } = useAccountStore();
 
-  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { data: user = {} } = useUser();
+
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const {
+    data: { data: links = [] },
+  } = useLinks();
+  const getLink = useGetLink();
 
   useEffect(() => {
     if (!editMode) {
@@ -93,7 +99,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink(link.id as number);
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -131,7 +137,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       <div
         className="rounded-2xl cursor-pointer h-full flex flex-col justify-between"
         onClick={() =>
-          !editMode && window.open(generateLinkHref(link, account), "_blank")
+          !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
         <div>

components/LinkViews/LinkComponents/LinkCollection.tsx

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

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -70,7 +70,14 @@ export default function LinkIcon({
           size={size}
           icon="bi-file-earmark-image"
         />
-      ) : undefined}
+      ) : // : link.type === "monolith" ? (
+      //   <LinkPlaceholderIcon
+      //     iconClasses={iconClasses + dimension}
+      //     size={size}
+      //     icon="bi-filetype-html"
+      //   />
+      // )
+      undefined}
     </>
   );
 }

components/LinkViews/LinkComponents/LinkList.tsx

@@ -4,7 +4,6 @@ import {
 } 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";
@@ -12,11 +11,13 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 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 LinkTypeBadge from "./LinkTypeBadge";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,9 +34,12 @@ export default function LinkCardCompact({
 }: Props) {
   const { t } = useTranslation();
 
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
-  const { account } = useAccountStore();
+
-  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { data: user = {} } = useUser();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const { links } = useLinks();
 
   useEffect(() => {
     if (!editMode) {
@@ -119,7 +123,7 @@ export default function LinkCardCompact({
         <div
           className="flex items-center cursor-pointer w-full"
           onClick={() =>
-            !editMode && window.open(generateLinkHref(link, account), "_blank")
+            !editMode && window.open(generateLinkHref(link, user), "_blank")
           }
         >
           <div className="shrink-0">
@@ -157,7 +161,12 @@ export default function LinkCardCompact({
           // linkInfo={showInfo}
         />
       </div>
-      <div className="divider my-0 last:hidden h-[1px]"></div>
+      <div
+        className="last:hidden rounded-none"
+        style={{
+          borderTop: "1px solid var(--fallback-bc,oklch(var(--bc)/0.1))",
+        }}
+      ></div>
     </>
   );
 }

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -5,7 +5,6 @@ import {
 } 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";
@@ -13,14 +12,16 @@ 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 LinkIcon from "./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 LinkTypeBadge from "./LinkTypeBadge";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -33,10 +34,13 @@ type Props = {
 export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
   const { t } = useTranslation();
 
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
-  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const { links } = useLinks();
+  const getLink = useGetLink();
 
   useEffect(() => {
     if (!editMode) {
@@ -92,7 +96,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink(link.id as number);
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -130,7 +134,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
       <div
         className="rounded-2xl cursor-pointer"
         onClick={() =>
-          !editMode && window.open(generateLinkHref(link, account), "_blank")
+          !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
         <div className="relative rounded-t-2xl overflow-hidden">
@@ -177,7 +181,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
             </p>
           )}
 
-          {link.tags[0] && (
+          {link.tags && link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
                 <Link
@@ -225,7 +229,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
               </span>
             )}
           </p>
-          {link.tags[0] && (
+          {link.tags && link.tags[0] && (
             <>
               <p className="text-neutral text-lg mt-3 font-semibold">
                 {t("tags")}

components/LinkViews/Links.tsx

@@ -0,0 +1,238 @@
+import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ViewMode,
+} from "@/types/global";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import LinkMasonry from "@/components/LinkViews/LinkComponents/LinkMasonry";
+import Masonry from "react-masonry-css";
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "../../tailwind.config.js";
+import { useMemo } from "react";
+import LinkList from "@/components/LinkViews/LinkComponents/LinkList";
+
+export function CardView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  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">
+      {links?.map((e, i) => {
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {(hasNextPage || isLoading) &&
+        placeholders?.map((e, i) => {
+          return (
+            <div
+              className="flex flex-col gap-4"
+              ref={e === 1 ? placeHolderRef : undefined}
+              key={i}
+            >
+              <div className="skeleton h-40 w-full"></div>
+              <div className="skeleton h-3 w-2/3"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-1/3"></div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export function MasonryView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  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}
+          />
+        );
+      })}
+
+      {(hasNextPage || isLoading) &&
+        placeholders?.map((e, i) => {
+          return (
+            <div
+              className="flex flex-col gap-4"
+              ref={e === 1 ? placeHolderRef : undefined}
+              key={i}
+            >
+              <div className="skeleton h-40 w-full"></div>
+              <div className="skeleton h-3 w-2/3"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-full"></div>
+              <div className="skeleton h-3 w-1/3"></div>
+            </div>
+          );
+        })}
+    </Masonry>
+  );
+}
+
+export function ListView({
+  links,
+  editMode,
+  isLoading,
+  placeholders,
+  hasNextPage,
+  placeHolderRef,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  isLoading?: boolean;
+  placeholders?: number[];
+  hasNextPage?: boolean;
+  placeHolderRef?: any;
+}) {
+  return (
+    <div className="flex gap-1 flex-col">
+      {links?.map((e, i) => {
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
+      })}
+
+      {(hasNextPage || isLoading) &&
+        placeholders?.map((e, i) => {
+          return (
+            <div
+              ref={e === 1 ? placeHolderRef : undefined}
+              key={i}
+              className="flex gap-4 p-4"
+            >
+              <div className="skeleton h-16 w-16"></div>
+              <div className="flex flex-col gap-4 w-full">
+                <div className="skeleton h-3 w-2/3"></div>
+                <div className="skeleton h-3 w-full"></div>
+                <div className="skeleton h-3 w-1/3"></div>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default function Links({
+  layout,
+  links,
+  editMode,
+  placeholderCount,
+  useData,
+}: {
+  layout: ViewMode;
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  editMode?: boolean;
+  placeholderCount?: number;
+  useData?: any;
+}) {
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    if (inView && useData?.fetchNextPage && useData?.hasNextPage) {
+      useData.fetchNextPage();
+    }
+  }, [useData, inView]);
+
+  if (layout === ViewMode.List) {
+    return (
+      <ListView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+        placeholders={placeholderCountToArray(placeholderCount)}
+        hasNextPage={useData?.hasNextPage}
+        placeHolderRef={ref}
+      />
+    );
+  } else if (layout === ViewMode.Masonry) {
+    return (
+      <MasonryView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+        placeholders={placeholderCountToArray(placeholderCount)}
+        hasNextPage={useData?.hasNextPage}
+        placeHolderRef={ref}
+      />
+    );
+  } else {
+    // Default to card view
+    return (
+      <CardView
+        links={links}
+        editMode={editMode}
+        isLoading={useData?.isLoading}
+        placeholders={placeholderCountToArray(placeholderCount)}
+        hasNextPage={useData?.hasNextPage}
+        placeHolderRef={ref}
+      />
+    );
+  }
+}
+
+const placeholderCountToArray = (num?: number) =>
+  num ? Array.from({ length: num }, (_, i) => i + 1) : [];

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -1,9 +1,10 @@
 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";
+import { useBulkDeleteLinks } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -11,22 +12,29 @@ type Props = {
 
 export default function BulkDeleteLinksModal({ onClose }: Props) {
   const { t } = useTranslation();
-  const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
+
+  const deleteLinksById = useBulkDeleteLinks();
 
   const deleteLink = async () => {
     const load = toast.loading(t("deleting"));
 
-    const response = await deleteLinksById(
+    await deleteLinksById.mutateAsync(
-      selectedLinks.map((link) => link.id as number)
+      selectedLinks.map((link) => link.id as number),
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setSelectedLinks([]);
+            onClose();
+            toast.success(t("deleted"));
+          }
+        },
+      }
     );
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success(t("deleted"));
-      setSelectedLinks([]);
-      onClose();
-    } else toast.error(response.data as string);
   };
 
   return (

components/ModalContent/BulkEditLinksModal.tsx

@@ -6,6 +6,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
+import { useBulkEditLinks } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -13,13 +14,14 @@ type Props = {
 
 export default function BulkEditLinksModal({ onClose }: Props) {
   const { t } = useTranslation();
-  const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
   const [removePreviousTags, setRemovePreviousTags] = useState(false);
   const [updatedValues, setUpdatedValues] = useState<
     Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
   >({ tags: [] });
 
+  const updateLinks = useBulkEditLinks();
   const setCollection = (e: any) => {
     const collectionId = e?.value || null;
     setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
@@ -36,22 +38,28 @@ export default function BulkEditLinksModal({ onClose }: Props) {
 
       const load = toast.loading(t("updating"));
 
-      const response = await updateLinks(
+      await updateLinks.mutateAsync(
-        selectedLinks,
+        {
-        removePreviousTags,
+          links: selectedLinks,
-        updatedValues
+          newData: updatedValues,
+          removePreviousTags,
+        },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
+              setSelectedLinks([]);
+              onClose();
+              toast.success(t("updated"));
+            }
+          },
+        }
       );
 
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success(t("updated"));
-        setSelectedLinks([]);
-        onClose();
-      } else toast.error(response.data as string);
-
       setSubmitLoader(false);
-      return response;
     }
   };
 

components/ModalContent/DeleteCollectionModal.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
-import useCollectionStore from "@/store/collections";
-import toast from "react-hot-toast";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
+import { useDeleteCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -22,7 +22,6 @@ export default function DeleteCollectionModal({
   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);
@@ -31,6 +30,8 @@ export default function DeleteCollectionModal({
     setCollection(activeCollection);
   }, []);
 
+  const deleteCollection = useDeleteCollection();
+
   const submit = async () => {
     if (permissions === true && collection.name !== inputField) return;
     if (!submitLoader) {
@@ -41,17 +42,19 @@ export default function DeleteCollectionModal({
 
       const load = toast.loading(t("deleting_collection"));
 
-      let response = await removeCollection(collection.id as number);
+      deleteCollection.mutateAsync(collection.id as number, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-      toast.dismiss(load);
+          if (error) {
-
+            toast.error(error.message);
-      if (response.ok) {
+          } else {
-        toast.success(t("deleted"));
+            onClose();
-        onClose();
+            toast.success(t("deleted"));
-        router.push("/collections");
+            router.push("/collections");
-      } else {
+          }
-        toast.error(response.data as string);
+        },
-      }
+      });
 
       setSubmitLoader(false);
     }

components/ModalContent/DeleteLinkModal.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
+import { useDeleteLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -16,27 +16,32 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   const { t } = useTranslation();
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
-  const { removeLink } = useLinkStore();
+
+  const deleteLink = useDeleteLink();
   const router = useRouter();
 
   useEffect(() => {
     setLink(activeLink);
   }, []);
 
-  const deleteLink = async () => {
+  const submit = async () => {
     const load = toast.loading(t("deleting"));
 
-    const response = await removeLink(link.id as number);
+    await deleteLink.mutateAsync(link.id as number, {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
 
-    toast.dismiss(load);
+        if (error) {
-
+          toast.error(error.message);
-    response.ok && toast.success(t("deleted"));
+        } else {
-
+          if (router.pathname.startsWith("/links/[id]")) {
-    if (router.pathname.startsWith("/links/[id]")) {
+            router.push("/dashboard");
-      router.push("/dashboard");
+          }
-    }
+          toast.success(t("deleted"));
-
+          onClose();
-    onClose();
+        }
+      },
+    });
   };
 
   return (
@@ -57,7 +62,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
 
         <p>{t("shift_key_tip")}</p>
 
-        <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
+        <Button className="ml-auto" intent="destructive" onClick={submit}>
           <i className="bi-trash text-xl" />
           {t("delete")}
         </Button>

components/ModalContent/DeleteUserModal.tsx

@@ -1,8 +1,8 @@
-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";
+import { useDeleteUser } from "@/hooks/store/admin/users";
+import { useState } from "react";
 
 type Props = {
   onClose: Function;
@@ -11,18 +11,22 @@ type Props = {
 
 export default function DeleteUserModal({ onClose, userId }: Props) {
   const { t } = useTranslation();
-  const { removeUser } = useUserStore();
 
-  const deleteUser = async () => {
+  const [submitLoader, setSubmitLoader] = useState(false);
-    const load = toast.loading(t("deleting_user"));
+  const deleteUser = useDeleteUser();
 
-    const response = await removeUser(userId);
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
 
-    toast.dismiss(load);
+      await deleteUser.mutateAsync(userId, {
+        onSuccess: () => {
+          onClose();
+        },
+      });
 
-    response.ok && toast.success(t("user_deleted"));
+      setSubmitLoader(false);
-
+    }
-    onClose();
   };
 
   return (
@@ -41,7 +45,7 @@ export default function DeleteUserModal({ onClose, userId }: Props) {
           </span>
         </div>
 
-        <Button className="ml-auto" intent="destructive" onClick={deleteUser}>
+        <Button className="ml-auto" intent="destructive" onClick={submit}>
           <i className="bi-trash text-xl" />
           {t("delete_confirmation")}
         </Button>

components/ModalContent/EditCollectionModal.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
-import useCollectionStore from "@/store/collections";
-import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
+import { useUpdateCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -21,7 +21,7 @@ export default function EditCollectionModal({
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { updateCollection } = useCollectionStore();
+  const updateCollection = useUpdateCollection();
 
   const submit = async () => {
     if (!submitLoader) {
@@ -32,14 +32,18 @@ export default function EditCollectionModal({
 
       const load = toast.loading(t("updating_collection"));
 
-      let response = await updateCollection(collection as any);
+      await updateCollection.mutateAsync(collection, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-      toast.dismiss(load);
+          if (error) {
-
+            toast.error(error.message);
-      if (response.ok) {
+          } else {
-        toast.success(t("updated"));
+            onClose();
-        onClose();
+            toast.success(t("updated"));
-      } else toast.error(response.data as string);
+          }
+        },
+      });
 
       setSubmitLoader(false);
     }

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
-import useCollectionStore from "@/store/collections";
 import toast from "react-hot-toast";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
-import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Modal from "../Modal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
+import { useUpdateCollection } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
 
 type Props = {
   onClose: Function;
@@ -27,7 +27,7 @@ export default function EditCollectionSharingModal({
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { updateCollection } = useCollectionStore();
+  const updateCollection = useUpdateCollection();
 
   const submit = async () => {
     if (!submitLoader) {
@@ -36,24 +36,26 @@ export default function EditCollectionSharingModal({
 
       setSubmitLoader(true);
 
-      const load = toast.loading(t("updating"));
+      const load = toast.loading(t("updating_collection"));
 
-      let response;
+      await updateCollection.mutateAsync(collection, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-      response = await updateCollection(collection as any);
+          if (error) {
-
+            toast.error(error.message);
-      toast.dismiss(load);
+          } else {
-
+            onClose();
-      if (response.ok) {
+            toast.success(t("updated"));
-        toast.success(t("updated"));
+          }
-        onClose();
+        },
-      } else toast.error(response.data as string);
+      });
 
       setSubmitLoader(false);
     }
   };
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
   const permissions = usePermissions(collection.id as number);
 
   const currentURL = new URL(document.URL);
@@ -68,6 +70,7 @@ export default function EditCollectionSharingModal({
     username: "",
     image: "",
     archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
     archiveAsPDF: undefined as unknown as boolean,
   });
 
@@ -164,7 +167,7 @@ export default function EditCollectionSharingModal({
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
                   addMemberToCollection(
-                    account.username as string,
+                    user.username as string,
                     memberUsername || "",
                     collection,
                     setMemberState,
@@ -176,7 +179,7 @@ export default function EditCollectionSharingModal({
               <div
                 onClick={() =>
                   addMemberToCollection(
-                    account.username as string,
+                    user.username as string,
                     memberUsername || "",
                     collection,
                     setMemberState,

components/ModalContent/EditLinkModal.tsx

@@ -3,12 +3,12 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import toast from "react-hot-toast";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
+import { useUpdateLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -27,9 +27,10 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
     console.log(error);
   }
 
-  const { updateLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const updateLink = useUpdateLink();
+
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
     setLink({
@@ -50,19 +51,23 @@ 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);
-      toast.dismiss(load);
 
-      if (response.ok) {
+      const load = toast.loading(t("updating"));
-        toast.success(t("updated"));
+
-        onClose();
+      await updateLink.mutateAsync(link, {
-      } else {
+        onSettled: (data, error) => {
-        toast.error(response.data as string);
+          toast.dismiss(load);
-      }
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("updated"));
+          }
+        },
+      });
 
       setSubmitLoader(false);
-      return response;
     }
   };
 

components/ModalContent/NewCollectionModal.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
-import useCollectionStore from "@/store/collections";
-import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import useAccountStore from "@/store/account";
-import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
+import { useCreateCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -25,15 +23,14 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
   } as Partial<Collection>;
 
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
-  const { setAccount } = useAccountStore();
-  const { data } = useSession();
 
   useEffect(() => {
     setCollection(initial);
   }, []);
 
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { addCollection } = useCollectionStore();
+
+  const createCollection = useCreateCollection();
 
   const submit = async () => {
     if (submitLoader) return;
@@ -43,16 +40,18 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     const load = toast.loading(t("creating"));
 
-    let response = await addCollection(collection as any);
+    await createCollection.mutateAsync(collection, {
-    toast.dismiss(load);
+      onSettled: (data, error) => {
+        toast.dismiss(load);
 
-    if (response.ok) {
+        if (error) {
-      toast.success(t("created_success"));
+          toast.error(error.message);
-      if (response.data) {
+        } else {
-        setAccount(data?.user.id as number);
+          onClose();
-        onClose();
+          toast.success(t("created"));
-      }
+        }
-    } else toast.error(response.data as string);
+      },
+    });
 
     setSubmitLoader(false);
   };

components/ModalContent/NewLinkModal.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useAddLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -30,6 +29,7 @@ export default function NewLinkModal({ onClose }: Props) {
     image: "",
     pdf: "",
     readable: "",
+    monolith: "",
     textContent: "",
     collection: {
       name: "",
@@ -39,11 +39,13 @@ export default function NewLinkModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
-  const { addLink } = useLinkStore();
+
+  const addLink = useAddLink();
+
   const [submitLoader, setSubmitLoader] = useState(false);
   const [optionsExpanded, setOptionsExpanded] = useState(false);
   const router = useRouter();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
@@ -86,15 +88,22 @@ export default function NewLinkModal({ onClose }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
+
       const load = toast.loading(t("creating_link"));
-      const response = await addLink(link);
+
-      toast.dismiss(load);
+      await addLink.mutateAsync(link, {
-      if (response.ok) {
+        onSettled: (data, error) => {
-        toast.success(t("link_created"));
+          toast.dismiss(load);
-        onClose();
+
-      } else {
+          if (error) {
-        toast.error(response.data as string);
+            toast.error(error.message);
-      }
+          } else {
+            onClose();
+            toast.success(t("link_created"));
+          }
+        },
+      });
+
       setSubmitLoader(false);
     }
   };

components/ModalContent/NewTokenModal.tsx

@@ -3,10 +3,10 @@ import TextInput from "@/components/TextInput";
 import { TokenExpiry } from "@/types/global";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import useTokenStore from "@/store/tokens";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
+import { useAddToken } from "@/hooks/store/tokens";
 
 type Props = {
   onClose: Function;
@@ -15,7 +15,7 @@ type Props = {
 export default function NewTokenModal({ onClose }: Props) {
   const { t } = useTranslation();
   const [newToken, setNewToken] = useState("");
-  const { addToken } = useTokenStore();
+  const addToken = useAddToken();
 
   const initial = {
     name: "",
@@ -28,16 +28,20 @@ export default function NewTokenModal({ onClose }: Props) {
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
+
       const load = toast.loading(t("creating_token"));
 
-      const { ok, data } = await addToken(token);
+      await addToken.mutateAsync(token, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-      toast.dismiss(load);
+          if (error) {
-
+            toast.error(error.message);
-      if (ok) {
+          } else {
-        toast.success(t("token_created"));
+            setNewToken(data.secretKey);
-        setNewToken((data as any).secretKey);
+          }
-      } else toast.error(data as string);
+        },
+      });
 
       setSubmitLoader(false);
     }

components/ModalContent/NewUserModal.tsx

@@ -1,9 +1,9 @@
 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";
+import { useAddUser } from "@/hooks/store/admin/users";
 
 type Props = {
   onClose: Function;
@@ -20,7 +20,9 @@ const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
 
 export default function NewUserModal({ onClose }: Props) {
   const { t } = useTranslation();
-  const { addUser } = useUserStore();
+
+  const addUser = useAddUser();
+
   const [form, setForm] = useState<FormData>({
     name: "",
     username: "",
@@ -44,24 +46,15 @@ export default function NewUserModal({ onClose }: Props) {
       };
 
       if (checkFields()) {
-        if (form.password.length < 8)
-          return toast.error(t("password_length_error"));
-
         setSubmitLoader(true);
 
-        const load = toast.loading(t("creating_account"));
+        await addUser.mutateAsync(form, {
+          onSuccess: () => {
+            onClose();
+          },
+        });
 
-        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"));
       }

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import {
   LinkIncludingShortenedCollectionAndTags,
   ArchivedFormat,
@@ -12,25 +11,26 @@ 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";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
-  activeLink: LinkIncludingShortenedCollectionAndTags;
+  link: LinkIncludingShortenedCollectionAndTags;
 };
 
-export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
+export default function PreservedFormatsModal({ onClose, link }: Props) {
   const { t } = useTranslation();
   const session = useSession();
-  const { getLink } = useLinkStore();
+  const getLink = useGetLink();
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
   const router = useRouter();
 
   let isPublic = router.pathname.startsWith("/public") ? true : undefined;
@@ -41,24 +41,26 @@ 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,
   });
 
   useEffect(() => {
     const fetchOwner = async () => {
-      if (link.collection.ownerId !== account.id) {
+      if (link.collection.ownerId !== user.id) {
         const owner = await getPublicUserData(
           link.collection.ownerId as number
         );
         setCollectionOwner(owner);
-      } else if (link.collection.ownerId === account.id) {
+      } else if (link.collection.ownerId === user.id) {
         setCollectionOwner({
-          id: account.id as number,
+          id: user.id as number,
-          name: account.name,
+          name: user.name,
-          username: account.username as string,
+          username: user.username as string,
-          image: account.image as string,
+          image: user.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };
@@ -72,6 +74,9 @@ 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) &&
@@ -80,22 +85,25 @@ 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);
+      await getLink.mutateAsync(link.id as number);
-      setLink(
-        (data as any).response as LinkIncludingShortenedCollectionAndTags
-      );
     })();
 
     let interval: any;
 
     if (!isReady()) {
       interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublic);
+        await getLink.mutateAsync(link.id as number);
-        setLink(
-          (data as any).response as LinkIncludingShortenedCollectionAndTags
-        );
       }, 5000);
     } else {
       if (interval) {
@@ -108,7 +116,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
         clearInterval(interval);
       }
     };
-  }, [link, getLink]);
+  }, [link?.monolith]);
 
   const updateArchive = async () => {
     const load = toast.loading(t("sending_request"));
@@ -121,10 +129,8 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      const newLink = await getLink(link?.id as number);
+      await getLink.mutateAsync(link?.id as number);
-      setLink(
+
-        (newLink as any).response as LinkIncludingShortenedCollectionAndTags
-      );
       toast.success(t("link_being_archived"));
     } else toast.error(data.response);
   };
@@ -133,56 +139,81 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">{t("preserved_formats")}</p>
       <div className="divider mb-2 mt-1"></div>
-      {isReady() &&
+      {screenshotAvailable(link) ||
-      (screenshotAvailable(link) ||
+      pdfAvailable(link) ||
-        pdfAvailable(link) ||
+      readabilityAvailable(link) ||
-        readabilityAvailable(link)) ? (
+      monolithAvailable(link) ? (
         <p className="mb-3">{t("available_formats")}</p>
       ) : (
         ""
       )}
 
-      <div className="flex flex-col gap-3">
+      <div className={`flex flex-col gap-3`}>
-        {isReady() ? (
+        {monolithAvailable(link) ? (
-          <>
+          <PreservedFormatRow
-            {screenshotAvailable(link) ? (
+            name={t("webpage")}
-              <PreservedFormatRow
+            icon={"bi-filetype-html"}
-                name={t("screenshot")}
+            format={ArchivedFormat.monolith}
-                icon={"bi-file-earmark-image"}
+            link={link}
-                format={
+            downloadable={true}
-                  link?.image?.endsWith("png")
+          />
-                    ? ArchivedFormat.png
+        ) : undefined}
-                    : ArchivedFormat.jpeg
+
-                }
+        {screenshotAvailable(link) ? (
-                activeLink={link}
+          <PreservedFormatRow
-                downloadable={true}
+            name={t("screenshot")}
-              />
+            icon={"bi-file-earmark-image"}
-            ) : undefined}
+            format={
-            {pdfAvailable(link) ? (
+              link?.image?.endsWith("png")
-              <PreservedFormatRow
+                ? ArchivedFormat.png
-                name={t("pdf")}
+                : ArchivedFormat.jpeg
-                icon="bi-file-earmark-pdf"
+            }
-                format={ArchivedFormat.pdf}
+            link={link}
-                activeLink={link}
+            downloadable={true}
-                downloadable={true}
+          />
-              />
+        ) : undefined}
-            ) : undefined}
+
-            {readabilityAvailable(link) ? (
+        {pdfAvailable(link) ? (
-              <PreservedFormatRow
+          <PreservedFormatRow
-                name={t("readable")}
+            name={t("pdf")}
-                icon="bi-file-earmark-text"
+            icon={"bi-file-earmark-pdf"}
-                format={ArchivedFormat.readability}
+            format={ArchivedFormat.pdf}
-                activeLink={link}
+            link={link}
-              />
+            downloadable={true}
-            ) : undefined}
+          />
-          </>
+        ) : undefined}
-        ) : (
+
-          <div className="w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200">
+        {readabilityAvailable(link) ? (
-            <i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
+          <PreservedFormatRow
+            name={t("readable")}
+            icon={"bi-file-earmark-text"}
+            format={ArchivedFormat.readability}
+            link={link}
+          />
+        ) : undefined}
+
+        {!isReady() && !atLeastOneFormatAvailable() ? (
+          <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 ${

components/ModalContent/RevokeTokenModal.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import useTokenStore from "@/store/tokens";
-import toast from "react-hot-toast";
 import Modal from "../Modal";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { AccessToken } from "@prisma/client";
+import { useRevokeToken } from "@/hooks/store/tokens";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -15,7 +15,7 @@ export default function DeleteTokenModal({ onClose, activeToken }: Props) {
   const { t } = useTranslation();
   const [token, setToken] = useState<AccessToken>(activeToken);
 
-  const { revokeToken } = useTokenStore();
+  const revokeToken = useRevokeToken();
 
   useEffect(() => {
     setToken(activeToken);
@@ -24,15 +24,18 @@ export default function DeleteTokenModal({ onClose, activeToken }: Props) {
   const deleteLink = async () => {
     const load = toast.loading(t("deleting"));
 
-    const response = await revokeToken(token.id as number);
+    await revokeToken.mutateAsync(token.id, {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
 
-    toast.dismiss(load);
+        if (error) {
-
+          toast.error(error.message);
-    if (response.ok) {
+        } else {
-      toast.success(t("token_revoked"));
+          onClose();
-    }
+          toast.success(t("token_revoked"));
-
+        }
-    onClose();
+      },
+    });
   };
 
   return (

components/ModalContent/UploadFileModal.tsx

@@ -3,14 +3,17 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import useCollectionStore from "@/store/collections";
+import {
-import useLinkStore from "@/store/links";
+  LinkIncludingShortenedCollectionAndTags,
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+  ArchivedFormat,
+} 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";
+import { useCollections } from "@/hooks/store/collections";
+import { useUploadFile } from "@/hooks/store/links";
 
 type Props = {
   onClose: Function;
@@ -30,6 +33,7 @@ export default function UploadFileModal({ onClose }: Props) {
     image: "",
     pdf: "",
     readable: "",
+    monolith: "",
     textContent: "",
     collection: {
       name: "",
@@ -41,11 +45,11 @@ export default function UploadFileModal({ onClose }: Props) {
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
   const [file, setFile] = useState<File>();
 
-  const { uploadFile } = useLinkStore();
+  const uploadFile = useUploadFile();
   const [submitLoader, setSubmitLoader] = useState(false);
   const [optionsExpanded, setOptionsExpanded] = useState(false);
   const router = useRouter();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
@@ -92,21 +96,45 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const submit = async () => {
     if (!submitLoader && file) {
+      let fileType: ArchivedFormat | null = null;
+      let linkType: "url" | "image" | "monolith" | "pdf" | null = null;
+
+      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
+        fileType = ArchivedFormat.jpeg;
+        linkType = "image";
+      } else if (file.type === "image/png") {
+        fileType = ArchivedFormat.png;
+        linkType = "image";
+      } else if (file.type === "application/pdf") {
+        fileType = ArchivedFormat.pdf;
+        linkType = "pdf";
+      }
+      // else if (file.type === "text/html") {
+      //   fileType = ArchivedFormat.monolith;
+      //   linkType = "monolith";
+      // }
+
       setSubmitLoader(true);
+
       const load = toast.loading(t("creating"));
 
-      const response = await uploadFile(link, file);
+      await uploadFile.mutateAsync(
+        { link, file },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
 
-      toast.dismiss(load);
+            if (error) {
-      if (response.ok) {
+              toast.error(error.message);
-        toast.success(t("created_success"));
+            } else {
-        onClose();
+              onClose();
-      } else {
+              toast.success(t("created_success"));
-        toast.error(response.data as string);
+            }
-      }
+          },
+        }
+      );
 
       setSubmitLoader(false);
-      return response;
     }
   };
 
@@ -122,14 +150,14 @@ export default function UploadFileModal({ onClose }: Props) {
           <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"
+              accept=".pdf,.png,.jpg,.jpeg,.html"
               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", {
-              size: process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30,
+              size: process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10,
             })}
           </p>
         </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 text-3xl sm:text-4xl drop-shadow`}
+        className={`${icon} text-primary sm:text-3xl text-2xl drop-shadow`}
       ></i>
       <div>
         <p className="text-3xl capitalize font-thin">{title}</p>

components/PreserverdFormatRow.tsx

@@ -1,18 +1,16 @@
-import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
+import { useGetLink } from "@/hooks/store/links";
 
 type Props = {
   name: string;
   icon: string;
   format: ArchivedFormat;
-  activeLink: LinkIncludingShortenedCollectionAndTags;
+  link: LinkIncludingShortenedCollectionAndTags;
   downloadable?: boolean;
 };
 
@@ -20,58 +18,30 @@ export default function PreservedFormatRow({
   name,
   icon,
   format,
-  activeLink,
+  link,
   downloadable,
 }: Props) {
-  const session = useSession();
+  const getLink = useGetLink();
-  const { getLink } = useLinkStore();
-
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
   const router = useRouter();
 
   let isPublic = router.pathname.startsWith("/public") ? true : undefined;
 
-  useEffect(() => {
-    (async () => {
-      const data = await getLink(link.id as number, isPublic);
-      setLink(
-        (data as any).response as LinkIncludingShortenedCollectionAndTags
-      );
-    })();
-
-    let interval: any;
-    if (link?.image === "pending" || link?.pdf === "pending") {
-      interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublic);
-        setLink(
-          (data as any).response as LinkIncludingShortenedCollectionAndTags
-        );
-      }, 5000);
-    } else {
-      if (interval) {
-        clearInterval(interval);
-      }
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [link?.image, link?.pdf, link?.readable]);
-
   const handleDownload = () => {
     const path = `/api/v1/archives/${link?.id}?format=${format}`;
     fetch(path)
       .then((response) => {
         if (response.ok) {
           // Create a temporary link and click it to trigger the download
-          const link = document.createElement("a");
+          const anchorElement = document.createElement("a");
-          link.href = path;
+          anchorElement.href = path;
-          link.download = format === ArchivedFormat.pdf ? "PDF" : "Screenshot";
+          anchorElement.download =
-          link.click();
+            format === ArchivedFormat.monolith
+              ? "Webpage"
+              : format === ArchivedFormat.pdf
+                ? "PDF"
+                : "Screenshot";
+          anchorElement.click();
         } else {
           console.error("Failed to download file");
         }

components/ProfileDropdown.tsx

@@ -1,15 +1,17 @@
 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";
+import { useUser } from "@/hooks/store/user";
 
 export default function ProfileDropdown() {
   const { t } = useTranslation();
   const { settings, updateSettings } = useLocalSettingsStore();
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
+
+  const isAdmin = user.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1);
 
   const handleToggle = () => {
     const newTheme = settings.theme === "dark" ? "light" : "dark";
@@ -25,11 +27,15 @@ export default function ProfileDropdown() {
         className="btn btn-circle btn-ghost"
       >
         <ProfilePhoto
-          src={account.image ? account.image : undefined}
+          src={user.image ? user.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">
+      <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"
@@ -54,6 +60,18 @@ export default function ProfileDropdown() {
             })}
           </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={() => {

components/ReadableView.tsx

@@ -1,7 +1,6 @@
 import unescapeString from "@/lib/client/unescapeString";
 import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
 import isValidUrl from "@/lib/shared/isValidUrl";
-import useLinkStore from "@/store/links";
 import {
   ArchivedFormat,
   CollectionIncludingMembersAndLinkCount,
@@ -14,8 +13,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import LinkActions from "./LinkViews/LinkComponents/LinkActions";
-import useCollectionStore from "@/store/collections";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useGetLink } from "@/hooks/store/links";
 
 type LinkContent = {
   title: string;
@@ -45,8 +45,8 @@ export default function ReadableView({ link }: Props) {
 
   const router = useRouter();
 
-  const { getLink } = useLinkStore();
+  const getLink = useGetLink();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
   const collection = useMemo(() => {
     return collections.find(
@@ -73,7 +73,7 @@ export default function ReadableView({ link }: Props) {
   }, [link]);
 
   useEffect(() => {
-    if (link) getLink(link?.id as number);
+    if (link) getLink.mutateAsync(link?.id as number);
 
     let interval: any;
     if (
@@ -81,11 +81,16 @@ 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);
+      interval = setInterval(
+        () => getLink.mutateAsync(link.id as number),
+        5000
+      );
     } else {
       if (interval) {
         clearInterval(interval);
@@ -97,7 +102,7 @@ export default function ReadableView({ link }: Props) {
         clearInterval(interval);
       }
     };
-  }, [link?.image, link?.pdf, link?.readable]);
+  }, [link?.image, link?.pdf, link?.readable, link?.monolith]);
 
   const rgbToHex = (r: number, g: number, b: number): string =>
     "#" +

components/Sidebar.tsx

@@ -1,5 +1,3 @@
-import useCollectionStore from "@/store/collections";
-import useTagStore from "@/store/tags";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -7,6 +5,8 @@ import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
 import CollectionListing from "@/components/CollectionListing";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useTags } from "@/hooks/store/tags";
 
 export default function Sidebar({ className }: { className?: string }) {
   const { t } = useTranslation();
@@ -22,8 +22,9 @@ export default function Sidebar({ className }: { className?: string }) {
     }
   );
 
-  const { collections } = useCollectionStore();
+  const { data: collections } = useCollections();
-  const { tags } = useTagStore();
+
+  const { data: tags = [], isLoading } = useTags();
   const [active, setActive] = useState("");
 
   const router = useRouter();
@@ -52,25 +53,25 @@ export default function Sidebar({ className }: { className?: string }) {
     >
       <div className="grid grid-cols-2 gap-2">
         <SidebarHighlightLink
-          title={"Dashboard"}
+          title={t("dashboard")}
           href={`/dashboard`}
           icon={"bi-house"}
           active={active === `/dashboard`}
         />
         <SidebarHighlightLink
-          title={"Pinned"}
+          title={t("pinned")}
           href={`/links/pinned`}
           icon={"bi-pin-angle"}
           active={active === `/links/pinned`}
         />
         <SidebarHighlightLink
-          title={"All Links"}
+          title={t("all_links")}
           href={`/links`}
           icon={"bi-link-45deg"}
           active={active === `/links`}
         />
         <SidebarHighlightLink
-          title={"All Collections"}
+          title={t("all_collections")}
           href={`/collections`}
           icon={"bi-folder"}
           active={active === `/collections`}
@@ -127,10 +128,16 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel className="flex flex-col gap-1">
-            {tags[0] ? (
+            {isLoading ? (
+              <div className="flex flex-col gap-4">
+                <div className="skeleton h-4 w-full"></div>
+                <div className="skeleton h-4 w-full"></div>
+                <div className="skeleton h-4 w-full"></div>
+              </div>
+            ) : tags[0] ? (
               tags
-                .sort((a, b) => a.name.localeCompare(b.name))
+                .sort((a: any, b: any) => a.name.localeCompare(b.name))
-                .map((e, i) => {
+                .map((e: any, i: any) => {
                   return (
                     <Link key={i} href={`/tags/${e.id}`}>
                       <div

components/SortDropdown.tsx

@@ -1,7 +1,8 @@
-import React, { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction, useEffect } from "react";
 import { Sort } from "@/types/global";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import { TFunction } from "i18next";
+import useLocalSettingsStore from "@/store/localSettings";
 
 type Props = {
   sortBy: Sort;
@@ -10,6 +11,12 @@ type Props = {
 };
 
 export default function SortDropdown({ sortBy, setSort, t }: Props) {
+  const { updateSettings } = useLocalSettingsStore();
+
+  useEffect(() => {
+    updateSettings({ sortBy });
+  }, [sortBy]);
+
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div

components/ViewDropdown.tsx

@@ -4,8 +4,8 @@ import useLocalSettingsStore from "@/store/localSettings";
 import { ViewMode } from "@/types/global";
 
 type Props = {
-  viewMode: string;
+  viewMode: ViewMode;
-  setViewMode: Dispatch<SetStateAction<string>>;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
 };
 
 export default function ViewDropdown({ viewMode, setViewMode }: Props) {
@@ -19,7 +19,7 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
   };
 
   useEffect(() => {
-    updateSettings({ viewMode: viewMode as ViewMode });
+    updateSettings({ viewMode });
   }, [viewMode]);
 
   return (

components/ui/Loader.tsx

@@ -0,0 +1,272 @@
+import React from "react";
+
+type Props = {
+  className?: string;
+  color: string;
+  size: string;
+};
+
+const Loader = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      width={props.size}
+      height={props.size}
+      className={props.className}
+      style={{
+        shapeRendering: "auto",
+        display: "block",
+        background: "rgba(255, 255, 255, 0)",
+      }}
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g>
+        <g transform="rotate(0 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.9166666666666666s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(30 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.8333333333333334s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(60 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.75s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(90 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.6666666666666666s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(120 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.5833333333333334s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(150 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.5s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(180 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.4166666666666667s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(210 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.3333333333333333s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(240 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.25s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(270 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.16666666666666666s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(300 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="-0.08333333333333333s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g transform="rotate(330 50 50)">
+          <rect
+            fill={props.color}
+            height="12"
+            width="6"
+            ry="1.8"
+            rx="1.8"
+            y="24"
+            x="47"
+          >
+            <animate
+              repeatCount="indefinite"
+              begin="0s"
+              dur="1s"
+              keyTimes="0;1"
+              values="1;0"
+              attributeName="opacity"
+            ></animate>
+          </rect>
+        </g>
+        <g></g>
+      </g>
+    </svg>
+  );
+};
+
+export default Loader;

hooks/store/admin/users.tsx

@@ -0,0 +1,93 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import { useSession } from "next-auth/react";
+
+const useUsers = () => {
+  const { status } = useSession();
+
+  return useQuery({
+    queryKey: ["users"],
+    queryFn: async () => {
+      const response = await fetch("/api/v1/users");
+      if (!response.ok) {
+        if (response.status === 401) {
+          window.location.href = "/dashboard";
+        }
+        throw new Error("Failed to fetch users.");
+      }
+
+      const data = await response.json();
+      return data.response;
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+const useAddUser = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (body: any) => {
+      if (body.password.length < 8) throw new Error(t("password_length_error"));
+
+      const load = toast.loading(t("creating_account"));
+
+      const response = await fetch("/api/v1/users", {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      toast.dismiss(load);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["users"], (oldData: any) => [...oldData, data]);
+      toast.success(t("user_created"));
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation({
+    mutationFn: async (userId: number) => {
+      const load = toast.loading(t("deleting_user"));
+
+      const response = await fetch(`/api/v1/users/${userId}`, {
+        method: "DELETE",
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      toast.dismiss(load);
+
+      return data.response;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(["users"], (oldData: any) =>
+        oldData.filter((user: any) => user.id !== variables)
+      );
+      toast.success(t("user_deleted"));
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+export { useUsers, useAddUser, useDeleteUser };

hooks/store/collections.tsx

@@ -0,0 +1,116 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import { useSession } from "next-auth/react";
+
+const useCollections = () => {
+  const { status } = useSession();
+
+  return useQuery({
+    queryKey: ["collections"],
+    queryFn: async (): Promise<CollectionIncludingMembersAndLinkCount[]> => {
+      const response = await fetch("/api/v1/collections");
+      const data = await response.json();
+      return data.response;
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+const useCreateCollection = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: any) => {
+      const response = await fetch("/api/v1/collections", {
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      return queryClient.setQueryData(["collections"], (oldData: any) => {
+        return [...oldData, data];
+      });
+    },
+  });
+};
+
+const useUpdateCollection = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: any) => {
+      const response = await fetch(`/api/v1/collections/${body.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      {
+        return queryClient.setQueryData(["collections"], (oldData: any) => {
+          return oldData.map((collection: any) =>
+            collection.id === data.id ? data : collection
+          );
+        });
+      }
+    },
+    // onMutate: async (data) => {
+    //   await queryClient.cancelQueries({ queryKey: ["collections"] });
+    //   queryClient.setQueryData(["collections"], (oldData: any) => {
+    //     return oldData.map((collection: any) =>
+    //         collection.id === data.id ? data : collection
+    //       )
+    //   });
+    // },
+  });
+};
+
+const useDeleteCollection = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await fetch(`/api/v1/collections/${id}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      return queryClient.setQueryData(["collections"], (oldData: any) => {
+        return oldData.filter((collection: any) => collection.id !== data.id);
+      });
+    },
+  });
+};
+
+export {
+  useCollections,
+  useCreateCollection,
+  useUpdateCollection,
+  useDeleteCollection,
+};

hooks/store/dashboardData.tsx

@@ -0,0 +1,20 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useQuery } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+
+const useDashboardData = () => {
+  const { status } = useSession();
+
+  return useQuery({
+    queryKey: ["dashboardData"],
+    queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => {
+      const response = await fetch("/api/v1/dashboard");
+      const data = await response.json();
+
+      return data.response;
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+export { useDashboardData };

hooks/store/links.tsx

@@ -0,0 +1,437 @@
+import {
+  InfiniteData,
+  useInfiniteQuery,
+  UseInfiniteQueryResult,
+  useQueryClient,
+  useMutation,
+} from "@tanstack/react-query";
+import { useMemo } from "react";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+  LinkRequestQuery,
+} from "@/types/global";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+const useLinks = (params: LinkRequestQuery = {}) => {
+  const router = useRouter();
+
+  const queryParamsObject = {
+    sort: params.sort ?? Number(window.localStorage.getItem("sortBy")) ?? 0,
+    collectionId:
+      params.collectionId ?? router.pathname === "/collections/[id]"
+        ? router.query.id
+        : undefined,
+    tagId:
+      params.tagId ?? router.pathname === "/tags/[id]"
+        ? router.query.id
+        : undefined,
+    pinnedOnly:
+      params.pinnedOnly ?? router.pathname === "/links/pinned"
+        ? true
+        : undefined,
+    searchQueryString: params.searchQueryString,
+    searchByName: params.searchByName,
+    searchByUrl: params.searchByUrl,
+    searchByDescription: params.searchByDescription,
+    searchByTextContent: params.searchByTextContent,
+    searchByTags: params.searchByTags,
+  } as LinkRequestQuery;
+
+  const queryString = buildQueryString(queryParamsObject);
+
+  const { data, ...rest } = useFetchLinks(queryString);
+
+  const links = useMemo(() => {
+    return data?.pages.reduce((acc, page) => {
+      return [...acc, ...page];
+    }, []);
+  }, [data]);
+
+  return {
+    links,
+    data: { ...data, ...rest },
+  } as {
+    links: LinkIncludingShortenedCollectionAndTags[];
+    data: UseInfiniteQueryResult<InfiniteData<any, unknown>, Error>;
+  };
+};
+
+const useFetchLinks = (params: string) => {
+  const { status } = useSession();
+
+  return useInfiniteQuery({
+    queryKey: ["links", { params }],
+    queryFn: async (params) => {
+      const response = await fetch(
+        "/api/v1/links?cursor=" +
+          params.pageParam +
+          ((params.queryKey[1] as any).params
+            ? "&" + (params.queryKey[1] as any).params
+            : "")
+      );
+      const data = await response.json();
+
+      return data.response;
+    },
+    initialPageParam: 0,
+    refetchOnWindowFocus: false,
+    getNextPageParam: (lastPage) => {
+      if (lastPage.length === 0) {
+        return undefined;
+      }
+      return lastPage.at(-1).id;
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+const buildQueryString = (params: LinkRequestQuery) => {
+  return Object.keys(params)
+    .filter((key) => params[key as keyof LinkRequestQuery] !== undefined)
+    .map(
+      (key) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(
+          params[key as keyof LinkRequestQuery] as string
+        )}`
+    )
+    .join("&");
+};
+
+const useAddLink = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (link: LinkIncludingShortenedCollectionAndTags) => {
+      const response = await fetch("/api/v1/links", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(link),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return [data, ...oldData];
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: [[data, ...oldData?.pages[0]], ...oldData?.pages.slice(1)],
+          pageParams: oldData?.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useUpdateLink = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (link: LinkIncludingShortenedCollectionAndTags) => {
+      const response = await fetch(`/api/v1/links/${link.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(link),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return oldData.map((e: any) => (e.id === data.id ? data : e));
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.map((item: any) => (item.id === data.id ? data : item))
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useDeleteLink = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await fetch(`/api/v1/links/${id}`, {
+        method: "DELETE",
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return oldData.filter((e: any) => e.id !== data.id);
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.filter((item: any) => item.id !== data.id)
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useGetLink = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await fetch(`/api/v1/links/${id}`);
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return oldData.map((e: any) => (e.id === data.id ? data : e));
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.map((item: any) => (item.id === data.id ? data : item))
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useBulkDeleteLinks = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (linkIds: number[]) => {
+      const response = await fetch("/api/v1/links", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ linkIds }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return linkIds;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return oldData.filter((e: any) => !data.includes(e.id));
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.filter((item: any) => !data.includes(item.id))
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useUploadFile = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ link, file }: any) => {
+      let fileType: ArchivedFormat | null = null;
+      let linkType: "url" | "image" | "pdf" | null = null;
+
+      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
+        fileType = ArchivedFormat.jpeg;
+        linkType = "image";
+      } else if (file.type === "image/png") {
+        fileType = ArchivedFormat.png;
+        linkType = "image";
+      } else if (file.type === "application/pdf") {
+        fileType = ArchivedFormat.pdf;
+        linkType = "pdf";
+      } else {
+        return { ok: false, data: "Invalid file type." };
+      }
+
+      const response = await fetch("/api/v1/links", {
+        body: JSON.stringify({
+          ...link,
+          type: linkType,
+          name: link.name ? link.name : file.name,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      if (response.ok) {
+        const formBody = new FormData();
+        file && formBody.append("file", file);
+
+        await fetch(
+          `/api/v1/archives/${(data as any).response.id}?format=${fileType}`,
+          {
+            body: formBody,
+            method: "POST",
+          }
+        );
+      }
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return [data, ...oldData];
+      });
+
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: [[data, ...oldData?.pages[0]], ...oldData?.pages.slice(1)],
+          pageParams: oldData?.pageParams,
+        };
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const useBulkEditLinks = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      links,
+      newData,
+      removePreviousTags,
+    }: {
+      links: LinkIncludingShortenedCollectionAndTags[];
+      newData: Pick<
+        LinkIncludingShortenedCollectionAndTags,
+        "tags" | "collectionId"
+      >;
+      removePreviousTags: boolean;
+    }) => {
+      const response = await fetch("/api/v1/links", {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ links, newData, removePreviousTags }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data, { links, newData, removePreviousTags }) => {
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData) return undefined;
+        return oldData.map((e: any) =>
+          data.find((d: any) => d.id === e.id) ? data : e
+        );
+      });
+
+      // TODO: Fix this
+      // queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+      //   if (!oldData) return undefined;
+      //   return {
+      //     pages: oldData.pages.map((page: any) => for (item of links) {
+      //       page.map((item: any) => (item.id === data.id ? data : item))
+      //     }
+      //     ),
+      //     pageParams: oldData.pageParams,
+      //   };
+      // });
+      queryClient.invalidateQueries({ queryKey: ["links"] }); // Temporary workaround
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+export {
+  useLinks,
+  useAddLink,
+  useUpdateLink,
+  useDeleteLink,
+  useBulkDeleteLinks,
+  useUploadFile,
+  useGetLink,
+  useBulkEditLinks,
+};

hooks/store/publicLinks.tsx

@@ -0,0 +1,93 @@
+import {
+  InfiniteData,
+  useInfiniteQuery,
+  UseInfiniteQueryResult,
+} from "@tanstack/react-query";
+import { useMemo } from "react";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  LinkRequestQuery,
+} from "@/types/global";
+import { useRouter } from "next/router";
+
+const usePublicLinks = (params: LinkRequestQuery = {}) => {
+  const router = useRouter();
+
+  const queryParamsObject = {
+    sort: params.sort ?? Number(window.localStorage.getItem("sortBy")) ?? 0,
+    collectionId: params.collectionId ?? router.query.id,
+    tagId:
+      params.tagId ?? router.pathname === "/tags/[id]"
+        ? router.query.id
+        : undefined,
+    pinnedOnly:
+      params.pinnedOnly ?? router.pathname === "/links/pinned"
+        ? true
+        : undefined,
+    searchQueryString: params.searchQueryString,
+    searchByName: params.searchByName,
+    searchByUrl: params.searchByUrl,
+    searchByDescription: params.searchByDescription,
+    searchByTextContent: params.searchByTextContent,
+    searchByTags: params.searchByTags,
+  } as LinkRequestQuery;
+
+  const queryString = buildQueryString(queryParamsObject);
+
+  const { data, ...rest } = useFetchLinks(queryString);
+
+  const links = useMemo(() => {
+    return data?.pages.reduce((acc, page) => {
+      return [...acc, ...page];
+    }, []);
+  }, [data]);
+
+  return {
+    links,
+    data: { ...data, ...rest },
+  } as {
+    links: LinkIncludingShortenedCollectionAndTags[];
+    data: UseInfiniteQueryResult<InfiniteData<any, unknown>, Error>;
+  };
+};
+
+const useFetchLinks = (params: string) => {
+  return useInfiniteQuery({
+    queryKey: ["links", { params }],
+    queryFn: async (params) => {
+      const response = await fetch(
+        "/api/v1/public/collections/links?cursor=" +
+          params.pageParam +
+          ((params.queryKey[1] as any).params
+            ? "&" + (params.queryKey[1] as any).params
+            : "")
+      );
+
+      const data = await response.json();
+
+      return data.response;
+    },
+    initialPageParam: 0,
+    refetchOnWindowFocus: false,
+    getNextPageParam: (lastPage) => {
+      if (lastPage.length === 0) {
+        return undefined;
+      }
+      return lastPage.at(-1).id;
+    },
+  });
+};
+
+const buildQueryString = (params: LinkRequestQuery) => {
+  return Object.keys(params)
+    .filter((key) => params[key as keyof LinkRequestQuery] !== undefined)
+    .map(
+      (key) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(
+          params[key as keyof LinkRequestQuery] as string
+        )}`
+    )
+    .join("&");
+};
+
+export { usePublicLinks };

hooks/store/tags.tsx

@@ -0,0 +1,71 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { TagIncludingLinkCount } from "@/types/global";
+import { useSession } from "next-auth/react";
+
+const useTags = () => {
+  const { status } = useSession();
+
+  return useQuery({
+    queryKey: ["tags"],
+    queryFn: async () => {
+      const response = await fetch("/api/v1/tags");
+      if (!response.ok) throw new Error("Failed to fetch tags.");
+
+      const data = await response.json();
+      return data.response;
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+const useUpdateTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (tag: TagIncludingLinkCount) => {
+      const response = await fetch(`/api/v1/tags/${tag.id}`, {
+        body: JSON.stringify(tag),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "PUT",
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["tags"], (oldData: any) =>
+        oldData.map((tag: TagIncludingLinkCount) =>
+          tag.id === data.id ? data : tag
+        )
+      );
+    },
+  });
+};
+
+const useRemoveTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (tagId: number) => {
+      const response = await fetch(`/api/v1/tags/${tagId}`, {
+        method: "DELETE",
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(["tags"], (oldData: any) =>
+        oldData.filter((tag: TagIncludingLinkCount) => tag.id !== variables)
+      );
+    },
+  });
+};
+
+export { useTags, useUpdateTag, useRemoveTag };

hooks/store/tokens.tsx

@@ -0,0 +1,68 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { AccessToken } from "@prisma/client";
+import { useSession } from "next-auth/react";
+
+const useTokens = () => {
+  const { status } = useSession();
+
+  return useQuery({
+    queryKey: ["tokens"],
+    queryFn: async () => {
+      const response = await fetch("/api/v1/tokens");
+
+      if (!response.ok) throw new Error("Failed to fetch tokens.");
+
+      const data = await response.json();
+      return data.response as AccessToken[];
+    },
+    enabled: status === "authenticated",
+  });
+};
+
+const useAddToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: Partial<AccessToken>) => {
+      const response = await fetch("/api/v1/tokens", {
+        body: JSON.stringify(body),
+        method: "POST",
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["tokens"], (oldData: AccessToken[]) => [
+        ...oldData,
+        data.token,
+      ]);
+    },
+  });
+};
+
+const useRevokeToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (tokenId: number) => {
+      const response = await fetch(`/api/v1/tokens/${tokenId}`, {
+        method: "DELETE",
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData(["tokens"], (oldData: AccessToken[]) =>
+        oldData.filter((token: Partial<AccessToken>) => token.id !== variables)
+      );
+    },
+  });
+};
+
+export { useTokens, useAddToken, useRevokeToken };

hooks/store/user.tsx

@@ -0,0 +1,53 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+
+const useUser = () => {
+  const { data, status } = useSession();
+
+  const userId = data?.user.id;
+
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/users/${userId}`);
+      if (!response.ok) throw new Error("Failed to fetch user data.");
+
+      const data = await response.json();
+
+      return data.response;
+    },
+    enabled: !!userId && status === "authenticated",
+    placeholderData: {},
+  });
+};
+
+const useUpdateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (user: any) => {
+      const response = await fetch(`/api/v1/users/${user.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(user),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(["user"], data.response);
+    },
+    onMutate: async (user) => {
+      await queryClient.cancelQueries({ queryKey: ["user"] });
+      queryClient.setQueryData(["user"], (oldData: any) => {
+        return { ...oldData, ...user };
+      });
+    },
+  });
+};
+
+export { useUser, useUpdateUser };

hooks/useCollectivePermissions.ts

@@ -1,12 +1,12 @@
-import useAccountStore from "@/store/account";
-import useCollectionStore from "@/store/collections";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
+import { useCollections } from "./store/collections";
+import { useUser } from "./store/user";
 
 export default function useCollectivePermissions(collectionIds: number[]) {
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   const [permissions, setPermissions] = useState<Member | true>();
   useEffect(() => {
@@ -15,7 +15,7 @@ export default function useCollectivePermissions(collectionIds: number[]) {
 
       if (collection) {
         let getPermission: Member | undefined = collection.members.find(
-          (e) => e.userId === account.id
+          (e) => e.userId === user.id
         );
 
         if (
@@ -25,10 +25,10 @@ export default function useCollectivePermissions(collectionIds: number[]) {
         )
           getPermission = undefined;
 
-        setPermissions(account.id === collection.ownerId || getPermission);
+        setPermissions(user.id === collection.ownerId || getPermission);
       }
     }
-  }, [account, collections, collectionIds]);
+  }, [user, collections, collectionIds]);
 
   return permissions;
 }

hooks/useInitialData.tsx

@@ -1,34 +1,14 @@
-import useCollectionStore from "@/store/collections";
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
-import useTagStore from "@/store/tags";
-import useAccountStore from "@/store/account";
 import useLocalSettingsStore from "@/store/localSettings";
 
 export default function useInitialData() {
   const { status, data } = useSession();
-  const { setCollections } = useCollectionStore();
-  const { setTags } = useTagStore();
-  // const { setLinks } = useLinkStore();
-  const { account, setAccount } = useAccountStore();
   const { setSettings } = useLocalSettingsStore();
 
   useEffect(() => {
     setSettings();
-    if (status === "authenticated") {
-      // Get account info
-      setAccount(data?.user.id as number);
-    }
   }, [status, data]);
 
-  // Get the rest of the data
-  useEffect(() => {
-    if (account.id && (!process.env.NEXT_PUBLIC_STRIPE || account.username)) {
-      setCollections();
-      setTags();
-      // setLinks();
-    }
-  }, [account]);
-
   return status;
 }

hooks/useLinks.tsx

@@ -1,103 +0,0 @@
-import { LinkRequestQuery } from "@/types/global";
-import { useEffect, useState } from "react";
-import useDetectPageBottom from "./useDetectPageBottom";
-import { useRouter } from "next/router";
-import useLinkStore from "@/store/links";
-
-export default function useLinks(
-  {
-    sort,
-    collectionId,
-    tagId,
-    pinnedOnly,
-    searchQueryString,
-    searchByName,
-    searchByUrl,
-    searchByDescription,
-    searchByTags,
-    searchByTextContent,
-  }: LinkRequestQuery = { sort: 0 }
-) {
-  const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } =
-    useLinkStore();
-  const router = useRouter();
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const { reachedBottom, setReachedBottom } = useDetectPageBottom();
-
-  const getLinks = async (isInitialCall: boolean, cursor?: number) => {
-    const params = {
-      sort,
-      cursor,
-      collectionId,
-      tagId,
-      pinnedOnly,
-      searchQueryString,
-      searchByName,
-      searchByUrl,
-      searchByDescription,
-      searchByTags,
-      searchByTextContent,
-    };
-
-    const buildQueryString = (params: LinkRequestQuery) => {
-      return Object.keys(params)
-        .filter((key) => params[key as keyof LinkRequestQuery] !== undefined)
-        .map(
-          (key) =>
-            `${encodeURIComponent(key)}=${encodeURIComponent(
-              params[key as keyof LinkRequestQuery] as string
-            )}`
-        )
-        .join("&");
-    };
-
-    let queryString = buildQueryString(params);
-
-    let basePath;
-
-    if (router.pathname === "/dashboard") basePath = "/api/v1/dashboard";
-    else if (router.pathname.startsWith("/public/collections/[id]")) {
-      queryString = queryString + "&collectionId=" + router.query.id;
-      basePath = "/api/v1/public/collections/links";
-    } else basePath = "/api/v1/links";
-
-    setIsLoading(true);
-
-    const response = await fetch(`${basePath}?${queryString}`);
-
-    const data = await response.json();
-
-    setIsLoading(false);
-
-    if (response.ok) setLinks(data.response, isInitialCall);
-  };
-
-  useEffect(() => {
-    // Save the selected links before resetting the links
-    // and then restore the selected links after resetting the links
-    const previouslySelected = selectedLinks;
-    resetLinks();
-
-    setSelectedLinks(previouslySelected);
-    getLinks(true);
-  }, [
-    router,
-    sort,
-    searchQueryString,
-    searchByName,
-    searchByUrl,
-    searchByDescription,
-    searchByTextContent,
-    searchByTags,
-  ]);
-
-  useEffect(() => {
-    if (reachedBottom) getLinks(false, links?.at(-1)?.id);
-
-    setReachedBottom(false);
-  }, [reachedBottom]);
-
-  return { isLoading };
-}

hooks/usePermissions.tsx

@@ -1,12 +1,12 @@
-import useAccountStore from "@/store/account";
-import useCollectionStore from "@/store/collections";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
+import { useCollections } from "./store/collections";
+import { useUser } from "./store/user";
 
 export default function usePermissions(collectionId: number) {
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   const [permissions, setPermissions] = useState<Member | true>();
   useEffect(() => {
@@ -14,7 +14,7 @@ export default function usePermissions(collectionId: number) {
 
     if (collection) {
       let getPermission: Member | undefined = collection.members.find(
-        (e) => e.userId === account.id
+        (e) => e.userId === user.id
       );
 
       if (
@@ -24,9 +24,9 @@ export default function usePermissions(collectionId: number) {
       )
         getPermission = undefined;
 
-      setPermissions(account.id === collection.ownerId || getPermission);
+      setPermissions(user.id === collection.ownerId || getPermission);
     }
-  }, [account, collections, collectionId]);
+  }, [user, collections, collectionId]);
 
   return permissions;
 }

layouts/AuthRedirect.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import useInitialData from "@/hooks/useInitialData";
-import useAccountStore from "@/store/account";
+import { useUser } from "@/hooks/store/user";
 
 interface Props {
   children: ReactNode;
@@ -14,7 +14,7 @@ export default function AuthRedirect({ children }: Props) {
   const router = useRouter();
   const { status } = useSession();
   const [shouldRenderChildren, setShouldRenderChildren] = useState(false);
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   useInitialData();
 
@@ -23,7 +23,7 @@ export default function AuthRedirect({ children }: Props) {
     const isUnauthenticated = status === "unauthenticated";
     const isPublicPage = router.pathname.startsWith("/public");
     const hasInactiveSubscription =
-      account.id && !account.subscription?.active && stripeEnabled;
+      user.id && !user.subscription?.active && stripeEnabled;
 
     // There are better ways of doing this... but this one works for now
     const routes = [
@@ -63,7 +63,7 @@ export default function AuthRedirect({ children }: Props) {
         setShouldRenderChildren(true);
       }
     }
-  }, [status, account, router.pathname]);
+  }, [status, user, router.pathname]);
 
   function redirectTo(destination: string) {
     router.push(destination).then(() => setShouldRenderChildren(true));

lib/api/archiveHandler.ts

@@ -1,15 +1,16 @@
 import { LaunchOptions, chromium, devices } from "playwright";
 import { prisma } from "./db";
-import createFile from "./storage/createFile";
+import sendToWayback from "./preservationScheme/sendToWayback";
-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 validateUrlSize from "./validateUrlSize";
+import fetchHeaders from "./fetchHeaders";
 import createFolder from "./storage/createFolder";
-import generatePreview from "./generatePreview";
 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 & {
@@ -20,6 +21,18 @@ 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) {
@@ -39,18 +52,6 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
 
   const page = await context.newPage();
 
-  const timeoutPromise = new Promise((_, reject) => {
-    setTimeout(
-      () =>
-        reject(
-          new Error(
-            `Browser has been open for more than ${BROWSER_TIMEOUT} minutes.`
-          )
-        ),
-      BROWSER_TIMEOUT * 60000
-    );
-  });
-
   createFolder({
     filePath: `archives/preview/${link.collectionId}`,
   });
@@ -62,17 +63,11 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
   try {
     await Promise.race([
       (async () => {
-        const validatedUrl = link.url
+        const user = link.collection?.owner;
-          ? await validateUrlSize(link.url)
-          : undefined;
 
-        if (
+        const header = link.url ? await fetchHeaders(link.url) : undefined;
-          validatedUrl === null &&
-          process.env.IGNORE_URL_SIZE_LIMIT !== "true"
-        )
-          throw "Something went wrong while retrieving the file size.";
 
-        const contentType = validatedUrl?.get("content-type");
+        const contentType = header?.get("content-type");
         let linkType = "url";
         let imageExtension = "png";
 
@@ -84,23 +79,22 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
           else if (contentType.includes("image/png")) imageExtension = "png";
         }
 
-        const user = link.collection?.owner;
+        await prisma.link.update({
-
-        // 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"
-                : "unavailable",
+                : undefined,
             pdf:
               user.archiveAsPDF && !link.pdf?.startsWith("archive")
                 ? "pending"
-                : "unavailable",
+                : undefined,
+            monolith:
+              user.archiveAsMonolith && !link.monolith?.startsWith("archive")
+                ? "pending"
+                : undefined,
             readable: !link.readable?.startsWith("archive")
               ? "pending"
               : undefined,
@@ -111,6 +105,9 @@ 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;
@@ -124,151 +121,37 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
 
           const content = await page.content();
 
-          // TODO single file
+          // Preview
-          // const session = await page.context().newCDPSession(page);
+          if (
-          // const doc = await session.send("Page.captureSnapshot", {
+            !link.preview?.startsWith("archives") &&
-          //   format: "mhtml",
+            !link.preview?.startsWith("unavailable")
-          // });
+          )
-          // const saveDocLocally = (doc: any) => {
+            await handleArchivePreview(link, page);
-          //   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 (
-            articleText &&
+            !link.readable?.startsWith("archives") &&
-            articleText !== "" &&
+            !link.readable?.startsWith("unavailable")
-            !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;
-          });
-
-          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();
-              await generatePreview(buffer, link.collectionId, link.id);
-            }
-
-            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
-          await page.evaluate(
+          if (
-            autoScroll,
+            (!link.image?.startsWith("archives") &&
-            Number(process.env.AUTOSCROLL_TIMEOUT) || 30
+              !link.image?.startsWith("unavailable")) ||
-          );
+            (!link.pdf?.startsWith("archives") &&
+              !link.pdf?.startsWith("unavailable"))
+          )
+            await handleScreenshotAndPdf(link, page, user);
 
-          // Check if the user hasn't deleted the link by the time we're done scrolling
+          // Monolith
-          const linkExists = await prisma.link.findUnique({
+          if (
-            where: { id: link.id },
+            !link.monolith?.startsWith("archive") &&
-          });
+            !link.monolith?.startsWith("unavailable") &&
-          if (linkExists) {
+            user.archiveAsMonolith &&
-            const processingPromises = [];
+            link.url
-
+          )
-            if (
+            await handleMonolith(link, content);
-              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,
@@ -293,6 +176,9 @@ 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,
@@ -308,76 +194,3 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
     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 { Collection, UsersAndCollections } from "@prisma/client";
+import { UsersAndCollections } from "@prisma/client";
 import removeFolder from "@/lib/api/storage/removeFolder";
 
 export default async function deleteCollection(
@@ -58,6 +58,7 @@ export default async function deleteCollection(
     });
 
     await removeFolder({ filePath: `archives/${collectionId}` });
+    await removeFolder({ filePath: `archives/preview/${collectionId}` });
 
     await removeFromOrders(userId, collectionId);
 
@@ -100,6 +101,7 @@ async function deleteSubCollections(collectionId: number) {
     });
 
     await removeFolder({ filePath: `archives/${subCollection.id}` });
+    await removeFolder({ filePath: `archives/preview/${subCollection.id}` });
   }
 }
 

lib/api/controllers/dashboard/getDashboardData.ts

@@ -5,7 +5,7 @@ export default async function getDashboardData(
   userId: number,
   query: LinkRequestQuery
 ) {
-  let order: any;
+  let order: any = { id: "desc" };
   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" };
@@ -42,7 +42,7 @@ export default async function getDashboardData(
         select: { id: true },
       },
     },
-    orderBy: order || { id: "desc" },
+    orderBy: order,
   });
 
   const recentlyAddedLinks = await prisma.link.findMany({
@@ -67,10 +67,18 @@ export default async function getDashboardData(
         select: { id: true },
       },
     },
-    orderBy: order || { id: "desc" },
+    orderBy: order,
   });
 
-  const links = [...recentlyAddedLinks, ...pinnedLinks].sort(
+  const combinedLinks = [...recentlyAddedLinks, ...pinnedLinks];
+
+  const uniqueLinks = Array.from(
+    combinedLinks
+      .reduce((map, item) => map.set(item.id, item), new Map())
+      .values()
+  );
+
+  const links = uniqueLinks.sort(
     (a, b) => (new Date(b.id) as any) - (new Date(a.id) as any)
   );
 

lib/api/controllers/links/getLinks.ts

@@ -2,9 +2,10 @@ 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 = process.env.DATABASE_URL.startsWith("postgresql");
+  const POSTGRES_IS_ENABLED =
+    process.env.DATABASE_URL?.startsWith("postgresql");
 
-  let order: any;
+  let order: any = { id: "desc" };
   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" };
@@ -102,7 +103,7 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
   }
 
   const links = await prisma.link.findMany({
-    take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
+    take: Number(process.env.PAGINATION_TAKE_COUNT) || 50,
     skip: query.cursor ? 1 : undefined,
     cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {
@@ -145,7 +146,7 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
         select: { id: true },
       },
     },
-    orderBy: order || { id: "desc" },
+    orderBy: order,
   });
 
   return { response: links, status: 200 };

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

@@ -1,7 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import { Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import removeFile from "@/lib/api/storage/removeFile";
 import { removeFiles } from "@/lib/api/manageLinkFiles";
 
 export default async function deleteLink(userId: number, linkId: number) {

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

@@ -48,7 +48,7 @@ export default async function updateLinkById(
       },
     });
 
-    return { response: updatedLink, status: 200 };
+    // return { response: updatedLink, status: 200 };
   }
 
   const targetCollectionIsAccessible = await getPermission({
@@ -60,9 +60,6 @@ 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
@@ -71,12 +68,7 @@ export default async function updateLinkById(
         ? data.collection.ownerId === targetCollectionIsAccessible?.ownerId
         : true;
 
-  if (!targetCollectionsAccessible)
+  if (!targetCollectionMatchesData)
-    return {
-      response: "Target collection is not accessible.",
-      status: 401,
-    };
-  else if (!targetCollectionMatchesData)
     return {
       response: "Target collection does not match the data.",
       status: 401,

lib/api/controllers/links/postLink.ts

@@ -1,10 +1,8 @@
 import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import getTitle from "@/lib/shared/getTitle";
+import fetchTitleAndHeaders from "@/lib/shared/fetchTitleAndHeaders";
-import { UsersAndCollections } from "@prisma/client";
-import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
-import validateUrlSize from "../../validateUrlSize";
+import setLinkCollection from "../../setLinkCollection";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
 
@@ -24,93 +22,10 @@ export default async function postLink(
     }
   }
 
-  if (!link.collection.id && link.collection.name) {
+  const linkCollection = await setLinkCollection(link, userId);
-    link.collection.name = link.collection.name.trim();
 
-    // find the collection with the name and the user's id
+  if (!linkCollection)
-    const findCollection = await prisma.collection.findFirst({
+    return { response: "Collection is not accessible.", status: 400 };
-      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;
-      link.collection.ownerId = findCollection.ownerId;
-    } 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: {
@@ -124,8 +39,6 @@ export default async function postLink(
     const urlWithoutWww = hasWwwPrefix ? url?.replace(`://www.`, "://") : url;
     const urlWithWww = hasWwwPrefix ? url : url?.replace("://", `://www.`);
 
-    console.log(url, urlWithoutWww, urlWithWww);
-
     const existingLink = await prisma.link.findFirst({
       where: {
         OR: [{ url: urlWithWww }, { url: urlWithoutWww }],
@@ -135,8 +48,6 @@ export default async function postLink(
       },
     });
 
-    console.log(url, urlWithoutWww, urlWithWww, "DONE!");
-
     if (existingLink)
       return {
         response: "Link already exists",
@@ -147,30 +58,23 @@ export default async function postLink(
   const numberOfLinksTheUserHas = await prisma.link.count({
     where: {
       collection: {
-        ownerId: userId,
+        ownerId: linkCollection.ownerId,
       },
     },
   });
 
-  if (numberOfLinksTheUserHas + 1 > MAX_LINKS_PER_USER)
+  if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
     return {
-      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 
-  link.collection.name = link.collection.name.trim();
+  const { title, headers } = await fetchTitleAndHeaders(link.url || "");
-
-  const title =
-    !(link.name && link.name !== "") && link.url
-      ? await getTitle(link.url)
-      : "";
 
   const name =
     link.name && link.name !== "" ? link.name : link.url ? title : "";
 
-  const validatedUrl = link.url ? await validateUrlSize(link.url) : undefined;
+  const contentType = headers?.get("content-type");
-
-  const contentType = validatedUrl?.get("content-type");
   let linkType = "url";
   let imageExtension = "png";
 
@@ -190,7 +94,7 @@ export default async function postLink(
       type: linkType,
       collection: {
         connect: {
-          id: link.collection.id,
+          id: linkCollection.id,
         },
       },
       tags: {
@@ -198,14 +102,14 @@ export default async function postLink(
           where: {
             name_ownerId: {
               name: tag.name.trim(),
-              ownerId: link.collection.ownerId,
+              ownerId: linkCollection.ownerId,
             },
           },
           create: {
             name: tag.name.trim(),
             owner: {
               connect: {
-                id: link.collection.ownerId,
+                id: linkCollection.ownerId,
               },
             },
           },

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -31,7 +31,7 @@ export default async function importFromHTMLFile(
 
   if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
     return {
-      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 
@@ -63,11 +63,21 @@ async function processBookmarks(
         ) as Element;
 
         if (collectionName) {
-          collectionId = await createCollection(
+          const collectionNameContent = (collectionName.children[0] as TextNode)?.content;
-            userId,
+          if (collectionNameContent) {
-            (collectionName.children[0] as TextNode).content,
+            collectionId = await createCollection(
-            parentCollectionId
+              userId,
-          );
+              collectionNameContent,
+              parentCollectionId
+            );
+          } else {
+            // Handle the case when the collection name is empty
+            collectionId = await createCollection(
+              userId,
+              "Untitled Collection",
+              parentCollectionId
+            );
+          }
         }
         await processBookmarks(
           userId,
@@ -264,3 +274,4 @@ function processNodes(nodes: Node[]) {
   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: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 

lib/api/controllers/migration/importFromWallabag.ts

@@ -47,7 +47,7 @@ export default async function importFromWallabag(
 
   if (totalImports + numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
     return {
-      response: `Error: Each user can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+      response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
       status: 400,
     };
 

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

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

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

@@ -75,6 +75,7 @@ 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

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

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,
+    secret: process.env.NEXTAUTH_SECRET as string,
   });
 
   const tokenBody = await decode({
     token,
-    secret: process.env.NEXTAUTH_SECRET,
+    secret: process.env.NEXTAUTH_SECRET as string,
   });
 
   const createToken = await prisma.accessToken.create({

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

@@ -80,7 +80,7 @@ export default async function deleteUserById(
           });
 
           // Delete archive folders
-          removeFolder({ filePath: `archives/${collection.id}` });
+          await removeFolder({ filePath: `archives/${collection.id}` });
 
           await removeFolder({
             filePath: `archives/preview/${collection.id}`,

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

@@ -207,6 +207,7 @@ export default async function updateUserById(
       ),
       locale: i18n.locales.includes(data.locale) ? data.locale : "en",
       archiveAsScreenshot: data.archiveAsScreenshot,
+      archiveAsMonolith: data.archiveAsMonolith,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
       linksRouteTo: data.linksRouteTo,

lib/api/fetchHeaders.ts

@@ -2,7 +2,7 @@ import fetch from "node-fetch";
 import https from "https";
 import { SocksProxyAgent } from "socks-proxy-agent";
 
-export default async function validateUrlSize(url: string) {
+export default async function fetchHeaders(url: string) {
   if (process.env.IGNORE_URL_SIZE_LIMIT === "true") return null;
 
   try {
@@ -29,13 +29,17 @@ export default async function validateUrlSize(url: string) {
       };
     }
 
-    const response = await fetch(url, fetchOpts);
+    const responsePromise = fetch(url, fetchOpts);
 
-    const totalSizeMB =
+    const timeoutPromise = new Promise((_, reject) => {
-      Number(response.headers.get("content-length")) / Math.pow(1024, 2);
+      setTimeout(() => {
-    if (totalSizeMB > (Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE) || 30))
+        reject(new Error("Fetch header timeout"));
-      return null;
+      }, 10 * 1000); // Stop after 10 seconds
-    else return response.headers;
+    });
+
+    const response = await Promise.race([responsePromise, timeoutPromise]);
+
+    return (response as Response)?.headers || null;
   } catch (err) {
     console.log(err);
     return null;

lib/api/generatePreview.ts

@@ -1,7 +1,6 @@
 import Jimp from "jimp";
 import { prisma } from "./db";
 import createFile from "./storage/createFile";
-import createFolder from "./storage/createFolder";
 
 const generatePreview = async (
   buffer: Buffer,
@@ -9,27 +8,39 @@ const generatePreview = async (
   linkId: number
 ) => {
   if (buffer && collectionId && linkId) {
-    // Load the image using Jimp
+    try {
-    await Jimp.read(buffer, async (err, image) => {
+      const image = await Jimp.read(buffer);
-      if (image && !err) {
-        image?.resize(1280, Jimp.AUTO).quality(20);
-        const processedBuffer = await image?.getBufferAsync(Jimp.MIME_JPEG);
 
-        createFile({
+      if (!image) {
-          data: processedBuffer,
+        console.log("Error generating preview: Image not found");
-          filePath: `archives/preview/${collectionId}/${linkId}.jpeg`,
+        return;
-        }).then(() => {
-          return prisma.link.update({
-            where: { id: linkId },
-            data: {
-              preview: `archives/preview/${collectionId}/${linkId}.jpeg`,
-            },
-          });
-        });
       }
-    }).catch((err) => {
+
+      image.resize(1280, Jimp.AUTO).quality(20);
+      const processedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
+
+      if (
+        Buffer.byteLength(processedBuffer) >
+        1024 * 1024 * Number(process.env.PREVIEW_MAX_BUFFER || 0.1)
+      ) {
+        console.log("Error generating preview: Buffer size exceeded");
+        return;
+      }
+
+      await createFile({
+        data: processedBuffer,
+        filePath: `archives/preview/${collectionId}/${linkId}.jpeg`,
+      });
+
+      await prisma.link.update({
+        where: { id: linkId },
+        data: {
+          preview: `archives/preview/${collectionId}/${linkId}.jpeg`,
+        },
+      });
+    } catch (err) {
       console.error("Error processing the image:", err);
-    });
+    }
   }
 };
 

lib/api/getPermission.ts

@@ -3,14 +3,12 @@ import { prisma } from "@/lib/api/db";
 type Props = {
   userId: number;
   collectionId?: number;
-  collectionName?: string;
   linkId?: number;
 };
 
 export default async function getPermission({
   userId,
   collectionId,
-  collectionName,
   linkId,
 }: Props) {
   if (linkId) {
@@ -26,11 +24,10 @@ export default async function getPermission({
     });
 
     return check;
-  } else if (collectionId || collectionName) {
+  } else if (collectionId) {
     const check = await prisma.collection.findFirst({
       where: {
-        id: collectionId || undefined,
+        id: collectionId,
-        name: collectionName || undefined,
         OR: [{ ownerId: userId }, { members: { some: { userId } } }],
       },
       include: { members: true },

lib/api/isServerAdmin.ts

@@ -36,7 +36,7 @@ export default async function isServerAdmin({ req }: Props): Promise<boolean> {
     },
   });
 
-  if (findUser?.username === process.env.ADMINISTRATOR) {
+  if (findUser?.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1)) {
     return true;
   } else {
     return false;

lib/api/manageLinkFiles.ts

@@ -16,6 +16,10 @@ const removeFiles = async (linkId: number, collectionId: number) => {
   await removeFile({
     filePath: `archives/${collectionId}/${linkId}.jpg`,
   });
+  // HTML
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}.html`,
+  });
   // Preview
   await removeFile({
     filePath: `archives/preview/${collectionId}/${linkId}.jpeg`,
@@ -47,6 +51,11 @@ const moveFiles = async (linkId: number, from: number, to: number) => {
     `archives/${to}/${linkId}.jpg`
   );
 
+  await moveFile(
+    `archives/${from}/${linkId}.html`,
+    `archives/${to}/${linkId}.html`
+  );
+
   await moveFile(
     `archives/preview/${from}/${linkId}.jpeg`,
     `archives/preview/${to}/${linkId}.jpeg`

lib/api/preservationScheme/handleArchivePreview.ts

@@ -0,0 +1,61 @@
+import { Collection, Link, User } from "@prisma/client";
+import { Page } from "playwright";
+import generatePreview from "../generatePreview";
+import createFile from "../storage/createFile";
+import { prisma } from "../db";
+
+type LinksAndCollectionAndOwner = Link & {
+  collection: Collection & {
+    owner: User;
+  };
+};
+
+const handleArchivePreview = async (
+  link: LinksAndCollectionAndOwner,
+  page: Page
+) => {
+  const ogImageUrl = await page.evaluate(() => {
+    const metaTag = document.querySelector('meta[property="og:image"]');
+    return metaTag ? (metaTag as any).content : null;
+  });
+
+  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();
+      generatePreview(buffer, link.collectionId, link.id);
+    }
+
+    await page.goBack();
+  } else if (!link.preview?.startsWith("archive")) {
+    console.log("No og:image found");
+    await page
+      .screenshot({ type: "jpeg", quality: 20 })
+      .then(async (screenshot) => {
+        if (
+          Buffer.byteLength(screenshot) >
+          1024 * 1024 * Number(process.env.PREVIEW_MAX_BUFFER || 0.1)
+        )
+          return console.log("Error generating preview: Buffer size exceeded");
+
+        await createFile({
+          data: screenshot,
+          filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+        });
+
+        await prisma.link.update({
+          where: { id: link.id },
+          data: {
+            preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+          },
+        });
+      });
+  }
+};
+
+export default handleArchivePreview;

lib/api/preservationScheme/handleMonolith.ts

@@ -0,0 +1,46 @@
+import { execSync } from "child_process";
+import createFile from "../storage/createFile";
+import { prisma } from "../db";
+import { Link } from "@prisma/client";
+
+const handleMonolith = async (link: Link, content: string) => {
+  if (!link.url) return;
+
+  try {
+    let html = execSync(
+      `monolith - -I -b ${link.url} ${
+        process.env.MONOLITH_CUSTOM_OPTIONS || "-j -F -s"
+      } -o -`,
+      {
+        timeout: 120000,
+        maxBuffer: 1024 * 1024 * Number(process.env.MONOLITH_MAX_BUFFER || 5),
+        input: content,
+      }
+    );
+
+    if (!html?.length)
+      return console.error("Error archiving as Monolith: Empty buffer");
+
+    if (
+      Buffer.byteLength(html) >
+      1024 * 1024 * Number(process.env.MONOLITH_MAX_BUFFER || 6)
+    )
+      return console.error("Error archiving as Monolith: Buffer size exceeded");
+
+    await createFile({
+      data: html,
+      filePath: `archives/${link.collectionId}/${link.id}.html`,
+    }).then(async () => {
+      await prisma.link.update({
+        where: { id: link.id },
+        data: {
+          monolith: `archives/${link.collectionId}/${link.id}.html`,
+        },
+      });
+    });
+  } catch (err) {
+    console.log("Error running MONOLITH:", err);
+  }
+};
+
+export default handleMonolith;

lib/api/preservationScheme/handleReadablility.ts

@@ -0,0 +1,51 @@
+import { Readability } from "@mozilla/readability";
+import { JSDOM } from "jsdom";
+import DOMPurify from "dompurify";
+import { prisma } from "../db";
+import createFile from "../storage/createFile";
+import { Link } from "@prisma/client";
+
+const handleReadablility = async (content: string, link: Link) => {
+  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 (articleText && articleText !== "") {
+    const collectionId = (
+      await prisma.link.findUnique({
+        where: { id: link.id },
+        select: { collectionId: true },
+      })
+    )?.collectionId;
+
+    const data = JSON.stringify(article);
+
+    if (
+      Buffer.byteLength(data, "utf8") >
+      1024 * 1024 * Number(process.env.READABILITY_MAX_BUFFER || 1)
+    )
+      return console.error(
+        "Error archiving as Readability: Buffer size exceeded"
+      );
+
+    await createFile({
+      data,
+      filePath: `archives/${collectionId}/${link.id}_readability.json`,
+    });
+
+    await prisma.link.update({
+      where: { id: link.id },
+      data: {
+        readable: `archives/${collectionId}/${link.id}_readability.json`,
+        textContent: articleText,
+      },
+    });
+  }
+};
+
+export default handleReadablility;

lib/api/preservationScheme/handleScreenshotAndPdf.ts

@@ -0,0 +1,122 @@
+import { Collection, Link, User } from "@prisma/client";
+import { Page } from "playwright";
+import createFile from "../storage/createFile";
+import { prisma } from "../db";
+
+type LinksAndCollectionAndOwner = Link & {
+  collection: Collection & {
+    owner: User;
+  };
+};
+const handleScreenshotAndPdf = async (
+  link: LinksAndCollectionAndOwner,
+  page: Page,
+  user: User
+) => {
+  await page.evaluate(autoScroll, Number(process.env.AUTOSCROLL_TIMEOUT) || 30);
+
+  // Check if the user hasn't deleted the link by the time we're done scrolling
+  const linkExists = await prisma.link.findUnique({
+    where: { id: link.id },
+  });
+  if (linkExists) {
+    const processingPromises = [];
+
+    if (user.archiveAsScreenshot && !link.image?.startsWith("archive")) {
+      processingPromises.push(
+        page
+          .screenshot({ fullPage: true, type: "jpeg" })
+          .then(async (screenshot) => {
+            if (
+              Buffer.byteLength(screenshot) >
+              1024 * 1024 * Number(process.env.SCREENSHOT_MAX_BUFFER || 2)
+            )
+              return console.log(
+                "Error archiving as Screenshot: Buffer size exceeded"
+              );
+
+            await createFile({
+              data: screenshot,
+              filePath: `archives/${linkExists.collectionId}/${link.id}.jpeg`,
+            });
+            await prisma.link.update({
+              where: { id: link.id },
+              data: {
+                image: user.archiveAsScreenshot
+                  ? `archives/${linkExists.collectionId}/${link.id}.jpeg`
+                  : undefined,
+              },
+            });
+          })
+      );
+    }
+
+    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(async (pdf) => {
+            if (
+              Buffer.byteLength(pdf) >
+              1024 * 1024 * Number(process.env.PDF_MAX_BUFFER || 2)
+            )
+              return console.log(
+                "Error archiving as PDF: Buffer size exceeded"
+              );
+
+            await createFile({
+              data: pdf,
+              filePath: `archives/${linkExists.collectionId}/${link.id}.pdf`,
+            });
+
+            await prisma.link.update({
+              where: { id: link.id },
+              data: {
+                pdf: user.archiveAsPDF
+                  ? `archives/${linkExists.collectionId}/${link.id}.pdf`
+                  : undefined,
+              },
+            });
+          })
+      );
+    }
+    await Promise.allSettled(processingPromises);
+  }
+};
+
+const autoScroll = async (AUTOSCROLL_TIMEOUT: number) => {
+  const timeoutPromise = new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 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]);
+};
+
+export default handleScreenshotAndPdf;

lib/api/preservationScheme/imageHandler.ts

@@ -0,0 +1,38 @@
+import { Link } from "@prisma/client";
+import { prisma } from "../db";
+import createFile from "../storage/createFile";
+import generatePreview from "../generatePreview";
+
+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());
+
+  if (
+    Buffer.byteLength(buffer) >
+    1024 * 1024 * Number(process.env.SCREENSHOT_MAX_BUFFER || 2)
+  )
+    return console.log("Error archiving as Screenshot: Buffer size exceeded");
+
+  const linkExists = await prisma.link.findUnique({
+    where: { id },
+  });
+
+  if (linkExists) {
+    await generatePreview(buffer, linkExists.collectionId, id);
+
+    await createFile({
+      data: buffer,
+      filePath: `archives/${linkExists.collectionId}/${id}.${extension}`,
+    });
+
+    await prisma.link.update({
+      where: { id },
+      data: {
+        image: `archives/${linkExists.collectionId}/${id}.${extension}`,
+      },
+    });
+  }
+};
+
+export default imageHandler;

lib/api/preservationScheme/pdfHandler.ts

@@ -0,0 +1,35 @@
+import { Link } from "@prisma/client";
+import { prisma } from "../db";
+import createFile from "../storage/createFile";
+
+const pdfHandler = async ({ url, id }: Link) => {
+  const pdf = await fetch(url as string).then((res) => res.blob());
+
+  const buffer = Buffer.from(await pdf.arrayBuffer());
+
+  if (
+    Buffer.byteLength(buffer) >
+    1024 * 1024 * Number(process.env.PDF_MAX_BUFFER || 2)
+  )
+    return console.log("Error archiving as PDF: Buffer size exceeded");
+
+  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`,
+      },
+    });
+  }
+};
+
+export default pdfHandler;

lib/api/setLinkCollection.ts

@@ -0,0 +1,89 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { prisma } from "./db";
+import getPermission from "./getPermission";
+import { UsersAndCollections } from "@prisma/client";
+
+const setLinkCollection = async (
+  link: LinkIncludingShortenedCollectionAndTags,
+  userId: number
+) => {
+  if (link?.collection?.id && typeof link?.collection?.id === "number") {
+    const existingCollection = await prisma.collection.findUnique({
+      where: {
+        id: link.collection.id,
+      },
+    });
+
+    if (!existingCollection) return null;
+
+    const collectionIsAccessible = await getPermission({
+      userId,
+      collectionId: existingCollection.id,
+    });
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canCreate
+    );
+
+    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+      return null;
+
+    return existingCollection;
+  } else if (link?.collection?.name) {
+    if (link.collection.name === "Unorganized") {
+      const firstTopLevelUnorganizedCollection =
+        await prisma.collection.findFirst({
+          where: {
+            name: "Unorganized",
+            ownerId: userId,
+            parentId: null,
+          },
+        });
+
+      if (firstTopLevelUnorganizedCollection)
+        return firstTopLevelUnorganizedCollection;
+    }
+
+    const newCollection = await prisma.collection.create({
+      data: {
+        name: link.collection.name.trim(),
+        ownerId: userId,
+      },
+    });
+
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        collectionOrder: {
+          push: newCollection.id,
+        },
+      },
+    });
+
+    return newCollection;
+  } else {
+    const firstTopLevelUnorganizedCollection =
+      await prisma.collection.findFirst({
+        where: {
+          name: "Unorganized",
+          ownerId: userId,
+          parentId: null,
+        },
+      });
+
+    if (firstTopLevelUnorganizedCollection)
+      return firstTopLevelUnorganizedCollection;
+    else
+      return await prisma.collection.create({
+        data: {
+          name: "Unorganized",
+          ownerId: userId,
+          parentId: null,
+        },
+      });
+  }
+};
+
+export default setLinkCollection;

lib/api/storage/readFile.ts

@@ -10,6 +10,7 @@ import util from "util";
 
 type ReturnContentTypes =
   | "text/plain"
+  | "text/html"
   | "image/jpeg"
   | "image/png"
   | "application/pdf"
@@ -61,6 +62,8 @@ export default async function readFile(filePath: string) {
           contentType = "image/png";
         } else if (filePath.endsWith("_readability.json")) {
           contentType = "application/json";
+        } else if (filePath.endsWith(".html")) {
+          contentType = "text/html";
         } else {
           // if (filePath.endsWith(".jpg"))
           contentType = "image/jpeg";
@@ -88,6 +91,8 @@ export default async function readFile(filePath: string) {
       contentType = "image/png";
     } else if (filePath.endsWith("_readability.json")) {
       contentType = "application/json";
+    } else if (filePath.endsWith(".html")) {
+      contentType = "text/html";
     } else {
       // if (filePath.endsWith(".jpg"))
       contentType = "image/jpeg";

lib/client/generateLinkHref.ts

@@ -8,6 +8,7 @@ import {
   pdfAvailable,
   readabilityAvailable,
   screenshotAvailable,
+  monolithAvailable,
 } from "../shared/getArchiveValidity";
 
 export const generateLinkHref = (
@@ -33,12 +34,15 @@ export const generateLinkHref = (
     account.linksRouteTo === LinksRouteTo.SCREENSHOT ||
     link.type === "image"
   ) {
-    console.log(link);
     if (!screenshotAvailable(link)) return link.url || "";
 
     return `/preserved/${link?.id}?format=${
       link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg
     }`;
+  } else if (account.linksRouteTo === LinksRouteTo.MONOLITH) {
+    if (!monolithAvailable(link)) return link.url || "";
+
+    return `/preserved/${link?.id}?format=${ArchivedFormat.monolith}`;
   } else {
     return link.url || "";
   }

lib/shared/fetchTitleAndHeaders.ts

@@ -2,7 +2,7 @@ import fetch from "node-fetch";
 import https from "https";
 import { SocksProxyAgent } from "socks-proxy-agent";
 
-export default async function getTitle(url: string) {
+export default async function fetchTitleAndHeaders(url: string) {
   try {
     const httpsAgent = new https.Agent({
       rejectUnauthorized:
@@ -41,12 +41,16 @@ export default async function getTitle(url: string) {
 
       // regular expression to find the <title> tag
       let match = text.match(/<title.*>([^<]*)<\/title>/);
-      if (match) return match[1];
+
-      else return "";
+      const title = match[1] || "";
+      const headers = (response as Response)?.headers || null;
+
+      return { title, headers };
     } else {
-      return "";
+      return { title: "", headers: null };
     }
   } catch (err) {
     console.log(err);
+    return { title: "", headers: null };
   }
 }

lib/shared/getArchiveValidity.ts

@@ -28,6 +28,17 @@ export function readabilityAvailable(
   );
 }
 
+export function monolithAvailable(
+  link: LinkIncludingShortenedCollectionAndTags
+) {
+  return (
+    link &&
+    link.monolith &&
+    link.monolith !== "pending" &&
+    link.monolith !== "unavailable"
+  );
+}
+
 export function previewAvailable(link: any) {
   return (
     link &&

next-i18next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   i18n: {
     defaultLocale: "en",
-    locales: ["en"],
+    locales: ["en","it"],
   },
   reloadOnPrerender: process.env.NODE_ENV === "development",
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "v2.6.0",
+  "version": "v2.6.2",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -27,6 +27,8 @@
     "@mozilla/readability": "^0.4.4",
     "@prisma/client": "^4.16.2",
     "@stripe/stripe-js": "^1.54.1",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-query-devtools": "^5.51.15",
     "@types/crypto-js": "^4.1.1",
     "@types/formidable": "^3.4.5",
     "@types/node": "^20.10.4",
@@ -60,16 +62,17 @@
     "next-i18next": "^15.3.0",
     "node-fetch": "^2.7.0",
     "nodemailer": "^6.9.3",
-    "playwright": "^1.43.1",
+    "playwright": "^1.45.0",
     "react": "18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^14.1.2",
     "react-image-file-resizer": "^0.4.8",
+    "react-intersection-observer": "^9.13.0",
     "react-masonry-css": "^1.0.16",
     "react-select": "^5.7.4",
-    "react-spinners": "^0.13.8",
+    "react-spinners": "^0.14.1",
     "socks-proxy-agent": "^8.0.2",
     "stripe": "^12.13.0",
     "tailwind-merge": "^2.3.0",
@@ -77,7 +80,7 @@
     "zustand": "^4.3.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.45.0",
     "@types/bcrypt": "^5.0.0",
     "@types/dompurify": "^3.0.4",
     "@types/jsdom": "^21.1.3",

pages/_app.tsx

@@ -11,7 +11,16 @@ import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
 // import useInitialData from "@/hooks/useInitialData";
 import { appWithTranslation } from "next-i18next";
-import nextI18nextConfig from "../next-i18next.config";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 30,
+    },
+  },
+});
 
 function App({
   Component,
@@ -29,82 +38,76 @@ function App({
   }, []);
 
   return (
-    <SessionProvider
+    <QueryClientProvider client={queryClient}>
-      session={pageProps.session}
+      <SessionProvider
-      refetchOnWindowFocus={false}
+        session={pageProps.session}
-      basePath="/api/v1/auth"
+        refetchOnWindowFocus={false}
-    >
+        basePath="/api/v1/auth"
-      <Head>
+      >
-        <title>Linkwarden</title>
+        <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <title>Linkwarden</title>
-        <meta name="theme-color" content="#000000" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link
+          <meta name="theme-color" content="#000000" />
-          rel="apple-touch-icon"
+          <link
-          sizes="180x180"
+            rel="apple-touch-icon"
-          href="/apple-touch-icon.png"
+            sizes="180x180"
-        />
+            href="/apple-touch-icon.png"
-        <link
+          />
-          rel="icon"
+          <link
-          type="image/png"
+            rel="icon"
-          sizes="32x32"
+            type="image/png"
-          href="/favicon-32x32.png"
+            sizes="32x32"
-        />
+            href="/favicon-32x32.png"
-        <link
+          />
-          rel="icon"
+          <link
-          type="image/png"
+            rel="icon"
-          sizes="16x16"
+            type="image/png"
-          href="/favicon-16x16.png"
+            sizes="16x16"
-        />
+            href="/favicon-16x16.png"
-        <link rel="manifest" href="/site.webmanifest" />
+          />
-      </Head>
+          <link rel="manifest" href="/site.webmanifest" />
-      <AuthRedirect>
+        </Head>
-        {/* <GetData> */}
+        <AuthRedirect>
-        <Toaster
+          {/* <GetData> */}
-          position="top-center"
+          <Toaster
-          reverseOrder={false}
+            position="top-center"
-          toastOptions={{
+            reverseOrder={false}
-            className:
+            toastOptions={{
-              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
+              className:
-          }}
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
-        >
+            }}
-          {(t) => (
+          >
-            <ToastBar toast={t}>
+            {(t) => (
-              {({ icon, message }) => (
+              <ToastBar toast={t}>
-                <div
+                {({ icon, message }) => (
-                  className="flex flex-row"
+                  <div
-                  data-testid="toast-message-container"
+                    className="flex flex-row"
-                  data-type={t.type}
+                    data-testid="toast-message-container"
-                >
+                    data-type={t.type}
-                  {icon}
+                  >
-                  <span data-testid="toast-message">{message}</span>
+                    {icon}
-                  {t.type !== "loading" && (
+                    <span data-testid="toast-message">{message}</span>
-                    <button
+                    {t.type !== "loading" && (
-                      className="btn btn-xs outline-none btn-circle btn-ghost"
+                      <button
-                      data-testid="close-toast-button"
+                        className="btn btn-xs outline-none btn-circle btn-ghost"
-                      onClick={() => toast.dismiss(t.id)}
+                        data-testid="close-toast-button"
-                    >
+                        onClick={() => toast.dismiss(t.id)}
-                      <i className="bi bi-x"></i>
+                      >
-                    </button>
+                        <i className="bi bi-x"></i>
-                  )}
+                      </button>
-                </div>
+                    )}
-              )}
+                  </div>
-            </ToastBar>
+                )}
-          )}
+              </ToastBar>
-        </Toaster>
+            )}
-        <Component {...pageProps} />
+          </Toaster>
-        {/* </GetData> */}
+          <Component {...pageProps} />
-      </AuthRedirect>
+          {/* </GetData> */}
-    </SessionProvider>
+        </AuthRedirect>
+      </SessionProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 }
 
 export default appWithTranslation(App);
-
-// function GetData({ children }: { children: React.ReactNode }) {
-//   const status = useInitialData();
-//   return typeof window !== "undefined" && status !== "loading" ? (
-//     children
-//   ) : (
-//     <></>
-//   );
-// }

pages/admin.tsx

@@ -1,12 +1,11 @@
-import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
 import NewUserModal from "@/components/ModalContent/NewUserModal";
-import useUserStore from "@/store/admin/users";
 import { User as U } from "@prisma/client";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import UserListing from "@/components/UserListing";
+import { useUsers } from "@/hooks/store/admin/users";
 
 interface User extends U {
   subscriptions: {
@@ -22,7 +21,7 @@ type UserModal = {
 export default function Admin() {
   const { t } = useTranslation();
 
-  const { users, setUsers } = useUserStore();
+  const { data: users = [] } = useUsers();
 
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredUsers, setFilteredUsers] = useState<User[]>();
@@ -34,10 +33,6 @@ export default function Admin() {
 
   const [newUserModal, setNewUserModal] = useState(false);
 
-  useEffect(() => {
-    setUsers();
-  }, []);
-
   return (
     <div className="max-w-6xl mx-auto p-5">
       <div className="flex sm:flex-row flex-col justify-between gap-2">
@@ -72,7 +67,7 @@ export default function Admin() {
 
                 if (users) {
                   setFilteredUsers(
-                    users.filter((user) =>
+                    users.filter((user: any) =>
                       JSON.stringify(user)
                         .toLowerCase()
                         .includes(e.target.value.toLowerCase())

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

@@ -29,6 +29,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   else if (format === ArchivedFormat.jpeg) suffix = ".jpeg";
   else if (format === ArchivedFormat.pdf) suffix = ".pdf";
   else if (format === ArchivedFormat.readability) suffix = "_readability.json";
+  else if (format === ArchivedFormat.monolith) suffix = ".html";
 
   //@ts-ignore
   if (!linkId || !suffix)
@@ -76,6 +77,12 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       return res.send(file);
     }
   } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const user = await verifyUser({ req, res });
     if (!user) return;
 
@@ -84,21 +91,46 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       linkId,
     });
 
-    const memberHasAccess = collectionPermissions?.members.some(
+    if (!collectionPermissions)
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
+
+    const memberHasAccess = collectionPermissions.members.some(
       (e: UsersAndCollections) => e.userId === user.id && e.canCreate
     );
 
-    if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
+    if (!(collectionPermissions.ownerId === user.id || memberHasAccess))
-      return { response: "Collection is not accessible.", status: 401 };
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
 
     // await uploadHandler(linkId, )
 
-    const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
+    const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER || 30000);
+
+    const numberOfLinksTheUserHas = await prisma.link.count({
+      where: {
+        collection: {
+          ownerId: user.id,
+        },
+      },
+    });
+
+    if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
+      return res.status(400).json({
+        response:
+          "Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.",
+      });
+
+    const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
+      process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10
+    );
 
     const form = formidable({
       maxFields: 1,
       maxFiles: 1,
-      maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
+      maxFileSize: NEXT_PUBLIC_MAX_FILE_BUFFER * 1024 * 1024,
     });
 
     form.parse(req, async (err, fields, files) => {
@@ -116,18 +148,26 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
         !allowedMIMETypes.includes(files.file[0].mimetype || "")
       ) {
         // Handle parsing error
-        return res.status(500).json({
+        return res.status(400).json({
-          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
         });
       } else {
         const fileBuffer = fs.readFileSync(files.file[0].filepath);
 
+        if (
+          Buffer.byteLength(fileBuffer) >
+          1024 * 1024 * Number(NEXT_PUBLIC_MAX_FILE_BUFFER)
+        )
+          return res.status(400).json({
+            response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${NEXT_PUBLIC_MAX_FILE_BUFFER}MB.`,
+          });
+
         const linkStillExists = await prisma.link.findUnique({
           where: { id: linkId },
         });
 
         if (linkStillExists && files.file[0].mimetype?.includes("image")) {
-          const collectionId = collectionPermissions?.id as number;
+          const collectionId = collectionPermissions.id as number;
           createFolder({
             filePath: `archives/preview/${collectionId}`,
           });
@@ -137,9 +177,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
         if (linkStillExists) {
           await createFile({
-            filePath: `archives/${collectionPermissions?.id}/${
+            filePath: `archives/${collectionPermissions.id}/${linkId + suffix}`,
-              linkId + suffix
-            }`,
             data: fileBuffer,
           });
 
@@ -150,10 +188,10 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
                 ? "unavailable"
                 : undefined,
               image: files.file[0].mimetype?.includes("image")
-                ? `archives/${collectionPermissions?.id}/${linkId + suffix}`
+                ? `archives/${collectionPermissions.id}/${linkId + suffix}`
                 : null,
               pdf: files.file[0].mimetype?.includes("pdf")
-                ? `archives/${collectionPermissions?.id}/${linkId + suffix}`
+                ? `archives/${collectionPermissions.id}/${linkId + suffix}`
                 : null,
               lastPreserved: new Date().toISOString(),
             },

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

@@ -1,27 +1,31 @@
 import { prisma } from "@/lib/api/db";
-import NextAuth from "next-auth/next";
-import CredentialsProvider from "next-auth/providers/credentials";
-import bcrypt from "bcrypt";
-import EmailProvider from "next-auth/providers/email";
-import { PrismaAdapter } from "@auth/prisma-adapter";
-import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
-import { Provider } from "next-auth/providers";
 import verifySubscription from "@/lib/api/verifySubscription";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import bcrypt from "bcrypt";
+import { randomBytes } from "crypto";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Adapter } from "next-auth/adapters";
+import NextAuth from "next-auth/next";
+import { Provider } from "next-auth/providers";
 import FortyTwoProvider from "next-auth/providers/42-school";
 import AppleProvider from "next-auth/providers/apple";
 import AtlassianProvider from "next-auth/providers/atlassian";
 import Auth0Provider from "next-auth/providers/auth0";
 import AuthentikProvider from "next-auth/providers/authentik";
+import AzureAdProvider from "next-auth/providers/azure-ad";
+import AzureAdB2CProvider from "next-auth/providers/azure-ad-b2c";
 import BattleNetProvider, {
   BattleNetIssuer,
 } from "next-auth/providers/battlenet";
 import BoxProvider from "next-auth/providers/box";
 import CognitoProvider from "next-auth/providers/cognito";
 import CoinbaseProvider from "next-auth/providers/coinbase";
+import CredentialsProvider from "next-auth/providers/credentials";
 import DiscordProvider from "next-auth/providers/discord";
 import DropboxProvider from "next-auth/providers/dropbox";
 import DuendeIDS6Provider from "next-auth/providers/duende-identity-server6";
+import EmailProvider from "next-auth/providers/email";
 import EVEOnlineProvider from "next-auth/providers/eveonline";
 import FacebookProvider from "next-auth/providers/facebook";
 import FaceItProvider from "next-auth/providers/faceit";
@@ -64,8 +68,6 @@ import ZitadelProvider from "next-auth/providers/zitadel";
 import ZohoProvider from "next-auth/providers/zoho";
 import ZoomProvider from "next-auth/providers/zoom";
 import * as process from "process";
-import type { NextApiRequest, NextApiResponse } from "next";
-import { randomBytes } from "crypto";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -77,10 +79,7 @@ const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
 const providers: Provider[] = [];
 
-if (
+if (process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false") {
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
-) {
   // undefined is for backwards compatibility
   providers.push(
     CredentialsProvider({
@@ -317,13 +316,65 @@ if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
   };
 }
 
+// Azure AD B2C
+if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+  providers.push(
+    AzureAdB2CProvider({
+      tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
+      clientId: process.env.AZURE_AD_B2C_CLIENT_ID!,
+      clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET!,
+      primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
+      authorization: { params: { scope: "offline_access openid" } },
+    })
+  );
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const {
+      "not-before-policy": _,
+      refresh_expires_in,
+      refresh_token_expires_in,
+      not_before,
+      id_token_expires_in,
+      profile_info,
+      ...data
+    } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
+// Azure AD
+if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+  providers.push(
+    AzureAdProvider({
+      clientId: process.env.AZURE_AD_CLIENT_ID!,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET!,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    })
+  );
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const {
+      "not-before-policy": _,
+      refresh_expires_in,
+      token_type,
+      expires_in,
+      ext_expires_in,
+      access_token,
+      ...data
+    } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
 // Battle.net
 if (process.env.NEXT_PUBLIC_BATTLENET_ENABLED === "true") {
   providers.push(
     BattleNetProvider({
       clientId: process.env.BATTLENET_CLIENT_ID!,
       clientSecret: process.env.BATTLENET_CLIENT_SECRET!,
-      issuer: process.env.BATLLENET_ISSUER as BattleNetIssuer,
+      issuer: process.env.BATTLENET_ISSUER as BattleNetIssuer,
     })
   );
 
@@ -1146,6 +1197,28 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
         if (trigger === "signIn" || trigger === "signUp")
           token.id = user?.id as number;
 
+        if (trigger === "signUp") {
+          const checkIfUserExists = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+          });
+
+          if (checkIfUserExists && !checkIfUserExists.username) {
+            const autoGeneratedUsername =
+              "user" + Math.round(Math.random() * 1000000000);
+
+            await prisma.user.update({
+              where: {
+                id: token.id,
+              },
+              data: {
+                username: autoGeneratedUsername,
+              },
+            });
+          }
+        }
+
         return token;
       },
       async session({ session, token }) {

pages/api/v1/auth/forgot-password.ts

@@ -7,6 +7,12 @@ export default async function forgotPassword(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const email = req.body.email;
 
     if (!email) {

pages/api/v1/auth/reset-password.ts

@@ -7,6 +7,12 @@ export default async function resetPassword(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const token = req.body.token;
     const password = req.body.password;
 

pages/api/v1/auth/verify-email.ts

@@ -7,6 +7,12 @@ export default async function verifyEmail(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const token = req.query.token;
 
     if (!token || typeof token !== "string") {

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

@@ -19,9 +19,21 @@ export default async function collections(
       .status(collections.status)
       .json({ response: collections.response });
   } else if (req.method === "PUT") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const updated = await updateCollectionById(user.id, collectionId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   } else if (req.method === "DELETE") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const deleted = await deleteCollectionById(user.id, collectionId);
     return res.status(deleted.status).json({ response: deleted.response });
   }

pages/api/v1/collections/index.ts

@@ -16,6 +16,12 @@ export default async function collections(
       .status(collections.status)
       .json({ response: collections.response });
   } else if (req.method === "POST") {
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
+      return res.status(400).json({
+        response:
+          "This action is disabled because this is a read-only demo of Linkwarden.",
+      });
+
     const newCollection = await postCollection(req.body, user.id);
     return res
       .status(newCollection.status)