bug fix

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

.env.sample

@@ -21,7 +21,10 @@ 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=
@@ -29,6 +32,7 @@ PDF_MAX_BUFFER=
 SCREENSHOT_MAX_BUFFER=
 READABILITY_MAX_BUFFER=
 PREVIEW_MAX_BUFFER=
+IMPORT_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -90,7 +94,6 @@ AUTHELIA_CLIENT_ID=""
 AUTHELIA_CLIENT_SECRET=""
 AUTHELIA_WELLKNOWN_URL=""
 
-
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
 AUTHENTIK_CUSTOM_NAME=
@@ -98,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=
@@ -192,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=

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",
@@ -45,18 +45,18 @@ export default function CollectionCard({ collection, className }: Props) {
 
   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,
-          archiveAsMonolith: account.archiveAsMonolith as boolean,
+          archiveAsMonolith: user.archiveAsMonolith as boolean,
-          archiveAsPDF: account.archiveAsPDF 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/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);
@@ -165,7 +167,7 @@ export default function EditCollectionSharingModal({
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
                   addMemberToCollection(
-                    account.username as string,
+                    user.username as string,
                     memberUsername || "",
                     collection,
                     setMemberState,
@@ -177,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;
@@ -40,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;
@@ -87,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,
@@ -16,23 +15,22 @@ import {
   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;
@@ -49,20 +47,20 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
   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,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };
@@ -98,20 +96,14 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
   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) {
@@ -137,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);
   };
@@ -164,7 +154,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             name={t("webpage")}
             icon={"bi-filetype-html"}
             format={ArchivedFormat.monolith}
-            activeLink={link}
+            link={link}
             downloadable={true}
           />
         ) : undefined}
@@ -178,7 +168,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
                 ? ArchivedFormat.png
                 : ArchivedFormat.jpeg
             }
-            activeLink={link}
+            link={link}
             downloadable={true}
           />
         ) : undefined}
@@ -188,7 +178,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             name={t("pdf")}
             icon={"bi-file-earmark-pdf"}
             format={ArchivedFormat.pdf}
-            activeLink={link}
+            link={link}
             downloadable={true}
           />
         ) : undefined}
@@ -198,7 +188,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             name={t("readable")}
             icon={"bi-file-earmark-text"}
             format={ArchivedFormat.readability}
-            activeLink={link}
+            link={link}
           />
         ) : undefined}
 

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,8 +3,6 @@ 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,
   ArchivedFormat,
@@ -14,6 +12,8 @@ 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;
@@ -45,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;
@@ -115,20 +115,26 @@ export default function UploadFileModal({ onClose }: Props) {
       // }
 
       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;
     }
   };
 

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,19 +1,16 @@
-import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import toast from "react-hot-toast";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
+import { useGetLink } from "@/hooks/store/links";
 
 type Props = {
   name: string;
   icon: string;
   format: ArchivedFormat;
-  activeLink: LinkIncludingShortenedCollectionAndTags;
+  link: LinkIncludingShortenedCollectionAndTags;
   downloadable?: boolean;
 };
 
@@ -21,48 +18,15 @@ 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, link?.monolith]);
-
   const handleDownload = () => {
     const path = `/api/v1/archives/${link?.id}?format=${format}`;
     fetch(path)

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 (
@@ -87,7 +87,10 @@ export default function ReadableView({ link }: Props) {
         !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);

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

@@ -86,17 +86,18 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
             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,
-            monolith: !link.monolith?.startsWith("archive")
-              ? "pending"
-              : undefined,
             preview: !link.readable?.startsWith("archive")
               ? "pending"
               : undefined,

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

@@ -5,7 +5,7 @@ export default async function getLink(userId: number, query: LinkRequestQuery) {
   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" };
@@ -103,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: {
@@ -146,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/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/migration/importFromHTMLFile.ts

@@ -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/public/links/getPublicLinksUnderCollection.ts

@@ -69,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/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;

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",
@@ -67,9 +69,10 @@
     "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",

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

@@ -77,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;
 
@@ -86,14 +92,18 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
     });
 
     if (!collectionPermissions)
-      return { response: "Collection is not accessible.", status: 400 };
+      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))
-      return { response: "Collection is not accessible.", status: 400 };
+      return res.status(400).json({
+        response: "Collection is not accessible.",
+      });
 
     // await uploadHandler(linkId, )
 
@@ -108,10 +118,10 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
     });
 
     if (numberOfLinksTheUserHas > MAX_LINKS_PER_USER)
-      return {
+      return res.status(400).json({
-        response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
+        response:
-        status: 400,
+          "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

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)

pages/api/v1/links/[id]/archive/index.ts

@@ -29,6 +29,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     });
 
   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.",
+      });
+
     if (
       link?.lastPreserved &&
       getTimezoneDifferenceInMinutes(new Date(), link?.lastPreserved) <

pages/api/v1/links/[id]/index.ts

@@ -14,6 +14,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: updated.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 updateLinkById(
       user.id,
       Number(req.query.id),
@@ -23,6 +29,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       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 deleteLinkById(user.id, Number(req.query.id));
     return res.status(deleted.status).json({
       response: deleted.response,

pages/api/v1/links/index.ts

@@ -37,11 +37,23 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     const links = await getLinks(user.id, convertedData);
     return res.status(links.status).json({ response: links.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 newlink = await postLink(req.body, user.id);
     return res.status(newlink.status).json({
       response: newlink.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 updateLinks(
       user.id,
       req.body.links,
@@ -52,6 +64,12 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       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 deleteLinksById(user.id, req.body.linkIds);
     return res.status(deleted.status).json({
       response: deleted.response,

pages/api/v1/logins/index.ts

@@ -55,6 +55,20 @@ export function getLogins() {
       name: process.env.AUTHENTIK_CUSTOM_NAME ?? "Authentik",
     });
   }
+  // Azure AD B2C
+  if (process.env.NEXT_PUBLIC_AZURE_AD_B2C_ENABLED === "true") {
+    buttonAuths.push({
+      method: "azure-ad-b2c",
+      name: process.env.AZURE_AD_B2C_CUSTOM_NAME ?? "Azure AD B2C",
+    });
+  }
+  // Azure AD
+  if (process.env.NEXT_PUBLIC_AZURE_AD_ENABLED === "true") {
+    buttonAuths.push({
+      method: "azure-ad",
+      name: process.env.AZURE_AD_CUSTOM_NAME ?? "Azure AD",
+    });
+  }
   // Battle.net
   if (process.env.NEXT_PUBLIC_BATTLENET_ENABLED === "true") {
     buttonAuths.push({
@@ -400,8 +414,7 @@ export function getLogins() {
   }
   return {
     credentialsEnabled:
-      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false"
-      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
         ? "true"
         : "false",
     emailEnabled:

pages/api/v1/migration/index.ts

@@ -9,7 +9,9 @@ import importFromWallabag from "@/lib/api/controllers/migration/importFromWallab
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: "10mb",
+      sizeLimit: process.env.IMPORT_LIMIT
+        ? process.env.IMPORT_LIMIT + "mb"
+        : "10mb",
     },
   },
 };
@@ -28,6 +30,12 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
         .status(data.status)
         .json(data.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 request: MigrationRequest = JSON.parse(req.body);
 
     let data;

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

@@ -10,9 +10,21 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const tagId = Number(req.query.id);
 
   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 tags = await updeteTagById(user.id, tagId, req.body);
     return res.status(tags.status).json({ response: tags.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 tags = await deleteTagById(user.id, tagId);
     return res.status(tags.status).json({ response: tags.response });
   }

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

@@ -7,6 +7,12 @@ export default async function token(req: NextApiRequest, res: NextApiResponse) {
   if (!user) return;
 
   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 deleteToken(user.id, Number(req.query.id) as number);
     return res.status(deleted.status).json({ response: deleted.response });
   }

pages/api/v1/tokens/index.ts

@@ -11,6 +11,12 @@ export default async function tokens(
   if (!user) return;
 
   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 = await postToken(JSON.parse(req.body), user.id);
     return res.status(token.status).json({ response: token.response });
   } else if (req.method === "GET") {

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

@@ -22,7 +22,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
     },
   });
 
-  const isServerAdmin = process.env.ADMINISTRATOR === user?.username;
+  const isServerAdmin = user?.id === Number(process.env.NEXT_PUBLIC_ADMIN || 1);
 
   const userId = isServerAdmin ? Number(req.query.id) : token.id;
 
@@ -58,9 +58,21 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   }
 
   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 updateUserById(userId, 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 updated = await deleteUserById(userId, req.body, isServerAdmin);
     return res.status(updated.status).json({ response: updated.response });
   }

pages/api/v1/users/index.ts

@@ -5,11 +5,18 @@ import verifyUser from "@/lib/api/verifyUser";
 
 export default async function users(req: NextApiRequest, 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 response = await postUser(req, res);
     return res.status(response.status).json({ response: response.response });
   } else if (req.method === "GET") {
     const user = await verifyUser({ req, res });
-    if (!user || process.env.ADMINISTRATOR !== user.username)
+
+    if (!user || user.id !== Number(process.env.NEXT_PUBLIC_ADMIN || 1))
       return res.status(401).json({ response: "Unauthorized..." });
 
     const response = await getUsers();

pages/collections/[id].tsx

@@ -1,5 +1,3 @@
-import useCollectionStore from "@/store/collections";
-import useLinkStore from "@/store/links";
 import {
   CollectionIncludingMembersAndLinkCount,
   Sort,
@@ -9,23 +7,22 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
 import useLocalSettingsStore from "@/store/localSettings";
-import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
+import Links from "@/components/LinkViews/Links";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -33,25 +30,29 @@ export default function Index() {
 
   const router = useRouter();
 
-  const { links } = useLinkStore();
+  const { data: collections = [] } = useCollections();
-  const { collections } = useCollectionStore();
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const { links, data } = useLinks({
+    sort: sortBy,
+    collectionId: Number(router.query.id),
+  });
 
   const [activeCollection, setActiveCollection] =
     useState<CollectionIncludingMembersAndLinkCount>();
 
   const permissions = usePermissions(activeCollection?.id as number);
 
-  useLinks({ collectionId: Number(router.query.id), sort: sortBy });
-
   useEffect(() => {
     setActiveCollection(
       collections.find((e) => e.id === Number(router.query.id))
     );
   }, [router, collections]);
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   const [collectionOwner, setCollectionOwner] = useState({
     id: null as unknown as number,
@@ -65,20 +66,20 @@ export default function Index() {
 
   useEffect(() => {
     const fetchOwner = async () => {
-      if (activeCollection && activeCollection.ownerId !== account.id) {
+      if (activeCollection && activeCollection.ownerId !== user.id) {
         const owner = await getPublicUserData(
           activeCollection.ownerId as number
         );
         setCollectionOwner(owner);
-      } else if (activeCollection && activeCollection.ownerId === account.id) {
+      } else if (activeCollection && activeCollection.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,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };
@@ -97,19 +98,10 @@ export default function Index() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div
@@ -128,7 +120,7 @@ export default function Index() {
                 style={{ color: activeCollection?.color }}
               ></i>
 
-              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+              <p className="sm:text-3xl text-2xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                 {activeCollection?.name}
               </p>
             </div>
@@ -323,16 +315,14 @@ export default function Index() {
           </p>
         </LinkListOptions>
 
-        {links.some((e) => e.collectionId === Number(router.query.id)) ? (
+        <Links
-          <LinkComponent
+          editMode={editMode}
-            editMode={editMode}
+          links={links}
-            links={links.filter(
+          layout={viewMode}
-              (e) => e.collection.id === activeCollection?.id
+          placeholderCount={1}
-            )}
+          useData={data}
-          />
+        />
-        ) : (
+        {!data.isLoading && links && !links[0] && <NoLinksFound />}
-          <NoLinksFound />
-        )}
       </div>
       {activeCollection && (
         <>

pages/collections/index.tsx

@@ -1,4 +1,3 @@
-import useCollectionStore from "@/store/collections";
 import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -10,11 +9,14 @@ import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 import PageHeader from "@/components/PageHeader";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
 
 export default function Collections() {
   const { t } = useTranslation();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
   const [sortedCollections, setSortedCollections] = useState(collections);
 
   const { data } = useSession();

pages/confirmation.tsx

@@ -1,7 +1,7 @@
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";

pages/dashboard.tsx

@@ -1,9 +1,5 @@
-import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
-import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
 import { useEffect, useState } from "react";
-import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import React from "react";
@@ -12,26 +8,25 @@ import { MigrationFormat, MigrationRequest, ViewMode } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
 import NewLinkModal from "@/components/ModalContent/NewLinkModal";
 import PageHeader from "@/components/PageHeader";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useTags } from "@/hooks/store/tags";
+import { useDashboardData } from "@/hooks/store/dashboardData";
+import Links from "@/components/LinkViews/Links";
 
 export default function Dashboard() {
   const { t } = useTranslation();
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
-  const { links } = useLinkStore();
+  const dashboardData = useDashboardData();
-  const { tags } = useTagStore();
+  const { data: tags = [] } = useTags();
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
   const [showLinks, setShowLinks] = useState(3);
 
-  useLinks({ pinnedOnly: true, sort: 0 });
-
   useEffect(() => {
     setNumberOfLinks(
       collections.reduce(
@@ -81,7 +76,7 @@ export default function Dashboard() {
           body: JSON.stringify(body),
         });
 
-        const data = await response.json();
+        await response.json();
 
         toast.dismiss(load);
 
@@ -99,20 +94,10 @@ export default function Dashboard() {
 
   const [newLinkModal, setNewLinkModal] = useState(false);
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: ,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
@@ -171,12 +156,30 @@ export default function Dashboard() {
         </div>
 
         <div
-          style={{ flex: links[0] ? "0 1 auto" : "1 1 auto" }}
+          style={{
+            flex:
+              dashboardData.data || dashboardData.isLoading
+                ? "0 1 auto"
+                : "1 1 auto",
+          }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
-          {links[0] ? (
+          {dashboardData.isLoading ? (
             <div className="w-full">
-              <LinkComponent links={links.slice(0, showLinks)} />
+              <Links
+                layout={viewMode}
+                placeholderCount={showLinks / 2}
+                useData={dashboardData}
+              />
+            </div>
+          ) : dashboardData.data &&
+            dashboardData.data[0] &&
+            !dashboardData.isLoading ? (
+            <div className="w-full">
+              <Links
+                links={dashboardData.data.slice(0, showLinks)}
+                layout={viewMode}
+              />
             </div>
           ) : (
             <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
@@ -300,12 +303,21 @@ export default function Dashboard() {
           style={{ flex: "1 1 auto" }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
-          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          {dashboardData.isLoading ? (
             <div className="w-full">
-              <LinkComponent
+              <Links
-                links={links
+                layout={viewMode}
+                placeholderCount={showLinks / 2}
+                useData={dashboardData}
+              />
+            </div>
+          ) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+            <div className="w-full">
+              <Links
+                links={dashboardData.data
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
                   .slice(0, showLinks)}
+                layout={viewMode}
               />
             </div>
           ) : (

pages/links/index.tsx

@@ -1,26 +1,28 @@
 import NoLinksFound from "@/components/NoLinksFound";
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
 import MainLayout from "@/layouts/MainLayout";
-import useLinkStore from "@/store/links";
 import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import { useRouter } from "next/router";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import LinkListOptions from "@/components/LinkListOptions";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import Links from "@/components/LinkViews/Links";
 
-export default function Links() {
+export default function Index() {
   const { t } = useTranslation();
-  const { links } = useLinkStore();
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
+
+  const { links, data } = useLinks({
+    sort: sortBy,
+  });
 
   const router = useRouter();
 
@@ -30,17 +32,6 @@ export default function Links() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  useLinks({ sort: sortBy });
-
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -60,9 +51,14 @@ export default function Links() {
           />
         </LinkListOptions>
 
-        {links[0] ? (
+        <Links
-          <LinkComponent editMode={editMode} links={links} />
+          editMode={editMode}
-        ) : (
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
+        {!data.isLoading && links && !links[0] && (
           <NoLinksFound text={t("you_have_not_added_any_links")} />
         )}
       </div>

pages/links/pinned.tsx

@@ -1,45 +1,32 @@
-import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
-import useLinkStore from "@/store/links";
 import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import { useRouter } from "next/router";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useLinks } from "@/hooks/store/links";
+import Links from "@/components/LinkViews/Links";
 
 export default function PinnedLinks() {
   const { t } = useTranslation();
 
-  const { links } = useLinkStore();
+  const [viewMode, setViewMode] = useState<ViewMode>(
-
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
-  const [viewMode, setViewMode] = useState<string>(
+  );
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
   );
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  useLinks({ sort: sortBy, pinnedOnly: true });
+  const { links, data } = useLinks({
+    sort: sortBy,
+    pinnedOnly: true,
+  });
 
   const router = useRouter();
   const [editMode, setEditMode] = useState(false);
 
-  useEffect(() => {
-    if (editMode) return setEditMode(false);
-  }, [router]);
-
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -59,9 +46,14 @@ export default function PinnedLinks() {
           />
         </LinkListOptions>
 
-        {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+        <Links
-          <LinkComponent editMode={editMode} links={links} />
+          editMode={editMode}
-        ) : (
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
+        {!data.isLoading && links && !links[0] && (
           <div
             style={{ flex: "1 1 auto" }}
             className="flex flex-col gap-2 justify-center h-full w-full mx-auto p-10"

pages/login.tsx

@@ -92,6 +92,66 @@ export default function Login({
             {t("enter_credentials")}
           </p>
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+
+          {process.env.NEXT_PUBLIC_DEMO === "true" &&
+            process.env.NEXT_PUBLIC_DEMO_USERNAME &&
+            process.env.NEXT_PUBLIC_DEMO_PASSWORD && (
+              <div className="p-3 shadow-lg border border-primary rounded-xl">
+                <div className="flex flex-col gap-2 items-center text-center w-full">
+                  <div className="flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      className="stroke-info h-6 w-6 shrink-0"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      ></path>
+                    </svg>
+                    <p className="font-bold">{t("demo_title")}</p>
+                  </div>
+                  <div className="text-xs">{t("demo_desc")}</div>
+
+                  <div className="text-xs">
+                    {t("demo_desc_2")}{" "}
+                    <a
+                      href="https://cloud.linkwarden.app"
+                      target="_blank"
+                      className="font-bold"
+                    >
+                      cloud.linkwarden.app
+                    </a>
+                  </div>
+                  <div
+                    className="btn btn-sm btn-primary w-full"
+                    onClick={async () => {
+                      const load = toast.loading(t("authenticating"));
+
+                      setForm({
+                        username: process.env
+                          .NEXT_PUBLIC_DEMO_USERNAME as string,
+                        password: process.env
+                          .NEXT_PUBLIC_DEMO_PASSWORD as string,
+                      });
+                      await signIn("credentials", {
+                        username: process.env.NEXT_PUBLIC_DEMO_USERNAME,
+                        password: process.env.NEXT_PUBLIC_DEMO_PASSWORD,
+                        redirect: false,
+                      });
+
+                      toast.dismiss(load);
+                    }}
+                  >
+                    {t("demo_button")}
+                  </div>
+                </div>
+              </div>
+            )}
+
           <div>
             <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
               {availableLogins.emailEnabled === "true"

pages/preserved/[id].tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
 import {
   ArchivedFormat,
@@ -7,9 +6,12 @@ import {
 } from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 export default function Index() {
-  const { links, getLink } = useLinkStore();
+  const { links } = useLinks();
+
+  const getLink = useGetLink();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
 
@@ -18,7 +20,7 @@ export default function Index() {
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink(Number(router.query.id));
+        await getLink.mutateAsync(Number(router.query.id));
       }
     };
 
@@ -26,7 +28,8 @@ export default function Index() {
   }, []);
 
   useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+    if (links && links[0])
+      setLink(links.find((e) => e.id === Number(router.query.id)));
   }, [links]);
 
   return (

pages/public/collections/[id].tsx

@@ -8,8 +8,6 @@ import {
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import Head from "next/head";
-import useLinks from "@/hooks/useLinks";
-import useLinkStore from "@/store/links";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -18,21 +16,19 @@ import Link from "next/link";
 import useLocalSettingsStore from "@/store/localSettings";
 import SearchBar from "@/components/SearchBar";
 import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
-import useCollectionStore from "@/store/collections";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useCollections } from "@/hooks/store/collections";
+import { usePublicLinks } from "@/hooks/store/publicLinks";
+import Links from "@/components/LinkViews/Links";
 
 export default function PublicCollections() {
   const { t } = useTranslation();
-  const { links } = useLinkStore();
 
   const { settings } = useLocalSettingsStore();
 
-  const { collections } = useCollectionStore();
+  const { data: collections = [] } = useCollections();
 
   const router = useRouter();
 
@@ -54,9 +50,11 @@ export default function PublicCollections() {
     textContent: false,
   });
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
 
-  useLinks({
+  const { links, data } = usePublicLinks({
     sort: sortBy,
     searchQueryString: router.query.q
       ? decodeURIComponent(router.query.q as string)
@@ -91,19 +89,10 @@ export default function PublicCollections() {
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return collection ? (
     <div
       className="h-96"
@@ -227,19 +216,21 @@ export default function PublicCollections() {
             />
           </LinkListOptions>
 
-          {links[0] ? (
+          <Links
-            <LinkComponent
+            links={
-              links={links
+              links?.map((e, i) => {
-                .filter((e) => e.collectionId === Number(router.query.id))
+                const linkWithCollectionData = {
-                .map((e, i) => {
+                  ...e,
-                  const linkWithCollectionData = {
+                  collection: collection, // Append collection data
-                    ...e,
+                };
-                    collection: collection, // Append collection data
+                return linkWithCollectionData;
-                  };
+              }) as any
-                  return linkWithCollectionData;
+            }
-                })}
+            layout={viewMode}
-            />
+            placeholderCount={1}
-          ) : (
+            useData={data}
+          />
+          {!data.isLoading && links && !links[0] && (
             <p>{t("collection_is_empty")}</p>
           )}
 

pages/public/preserved/[id].tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
 import {
   ArchivedFormat,
@@ -7,20 +6,20 @@ import {
 } from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useGetLink, useLinks } from "@/hooks/store/links";
 
 export default function Index() {
-  const { links, getLink } = useLinkStore();
+  const { links } = useLinks();
+  const getLink = useGetLink();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
 
   const router = useRouter();
 
-  let isPublic = router.pathname.startsWith("/public") ? true : false;
-
   useEffect(() => {
     const fetchLink = async () => {
       if (router.query.id) {
-        await getLink(Number(router.query.id), isPublic);
+        await getLink.mutateAsync(Number(router.query.id));
       }
     };
 
@@ -28,7 +27,8 @@ export default function Index() {
   }, []);
 
   useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+    if (links && links[0])
+      setLink(links.find((e) => e.id === Number(router.query.id)));
   }, [links]);
 
   return (

pages/search.tsx

@@ -1,23 +1,17 @@
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
 import MainLayout from "@/layouts/MainLayout";
-import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
-import { GridLoader } from "react-spinners";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import LinkListOptions from "@/components/LinkListOptions";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { useTranslation } from "next-i18next";
+import Links from "@/components/LinkViews/Links";
 
 export default function Search() {
   const { t } = useTranslation();
 
-  const { links } = useLinkStore();
-
   const router = useRouter();
 
   const [searchFilter, setSearchFilter] = useState({
@@ -28,11 +22,13 @@ export default function Search() {
     textContent: false,
   });
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
 
   const [editMode, setEditMode] = useState(false);
 
@@ -40,7 +36,17 @@ export default function Search() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  const { isLoading } = useLinks({
+  // const { isLoading } = useLink({
+  //   sort: sortBy,
+  //   searchQueryString: decodeURIComponent(router.query.q as string),
+  //   searchByName: searchFilter.name,
+  //   searchByUrl: searchFilter.url,
+  //   searchByDescription: searchFilter.description,
+  //   searchByTextContent: searchFilter.textContent,
+  //   searchByTags: searchFilter.tags,
+  // });
+
+  const { links, data } = useLinks({
     sort: sortBy,
     searchQueryString: decodeURIComponent(router.query.q as string),
     searchByName: searchFilter.name,
@@ -50,15 +56,6 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -76,7 +73,9 @@ export default function Search() {
           <PageHeader icon={"bi-search"} title={"Search Results"} />
         </LinkListOptions>
 
-        {!isLoading && !links[0] ? (
+        {/* {
+        !isLoading && 
+        !links[0] ? (
           <p>{t("nothing_found")}</p>
         ) : links[0] ? (
           <LinkComponent
@@ -93,7 +92,15 @@ export default function Search() {
               className="m-auto py-10"
             />
           )
-        )}
+        )} */}
+
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
       </div>
     </MainLayout>
   );

pages/settings/access-tokens.tsx

@@ -1,11 +1,11 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import NewTokenModal from "@/components/ModalContent/NewTokenModal";
 import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
 import { AccessToken } from "@prisma/client";
-import useTokenStore from "@/store/tokens";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useTokens } from "@/hooks/store/tokens";
 
 export default function AccessTokens() {
   const [newTokenModal, setNewTokenModal] = useState(false);
@@ -18,15 +18,7 @@ export default function AccessTokens() {
     setRevokeTokenModal(true);
   };
 
-  const { setTokens, tokens } = useTokenStore();
+  const { data: tokens = [] } = useTokens();
-
-  useEffect(() => {
-    fetch("/api/v1/tokens")
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.response) setTokens(data.response as AccessToken[]);
-      });
-  }, []);
 
   return (
     <SettingsLayout>

pages/settings/account.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
 import SettingsLayout from "@/layouts/SettingsLayout";
@@ -17,6 +16,7 @@ import Button from "@/components/ui/Button";
 import { i18n } from "next-i18next.config";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -24,7 +24,8 @@ export default function Account() {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
     useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();
   const [user, setUser] = useState<AccountSettings>(
     !objectIsEmpty(account)
       ? account
@@ -78,25 +79,38 @@ export default function Account() {
 
   const submit = async (password?: string) => {
     setSubmitLoader(true);
+
     const load = toast.loading(t("applying_settings"));
 
-    const response = await updateAccount({
+    await updateUser.mutateAsync(
-      ...user,
+      {
-      // @ts-ignore
+        ...user,
-      password: password ? password : undefined,
+        password: password ? password : undefined,
-    });
+      },
+      {
+        onSuccess: (data) => {
+          if (data.response.email !== user.email) {
+            toast.success(t("email_change_request"));
+            setEmailChangeVerificationModal(false);
+          }
+        },
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            if (data.response.email !== user.email) {
+              toast.success(t("email_change_request"));
+              setEmailChangeVerificationModal(false);
+            }
 
-    if (response.ok) {
+            toast.success(t("settings_applied"));
-      const emailChanged = account.email !== user.email;
+          }
-
+        },
-      toast.success(t("settings_applied"));
-      if (emailChanged) {
-        toast.success(t("email_change_request"));
-        setEmailChangeVerificationModal(false);
       }
-    } else toast.error(response.data as string);
+    );
+
     setSubmitLoader(false);
   };
 
@@ -189,17 +203,14 @@ export default function Account() {
             <div>
               <p className="mb-2">{t("language")}</p>
               <select
+                value={user.locale || ""}
                 onChange={(e) => {
                   setUser({ ...user, locale: e.target.value });
                 }}
                 className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
               >
                 {i18n.locales.map((locale) => (
-                  <option
+                  <option key={locale} value={locale}>
-                    key={locale}
-                    value={locale}
-                    selected={user.locale === locale}
-                  >
                     {new Intl.DisplayNames(locale, { type: "language" }).of(
                       locale
                     ) || ""}

pages/settings/password.tsx

@@ -1,11 +1,11 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState } from "react";
-import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
 
 export default function Password() {
   const { t } = useTranslation();
@@ -13,7 +13,8 @@ export default function Password() {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();
 
   const submit = async () => {
     if (newPassword === "" || oldPassword === "") {
@@ -23,23 +24,29 @@ export default function Password() {
 
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
+    const load = toast.loading(t("applying_settings"));
 
-    const response = await updateAccount({
+    await updateUser.mutateAsync(
-      ...account,
+      {
-      newPassword,
+        ...account,
-      oldPassword,
+        newPassword,
-    });
+        oldPassword,
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setNewPassword("");
+            setOldPassword("");
 
-    if (response.ok) {
+            toast.success(t("settings_applied"));
-      toast.success(t("settings_applied"));
+          }
-      setNewPassword("");
+        },
-      setOldPassword("");
+      }
-    } else {
+    );
-      toast.error(response.data as string);
-    }
 
     setSubmitLoader(false);
   };

pages/settings/preference.tsx

@@ -1,6 +1,5 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import Checkbox from "@/components/Checkbox";
@@ -8,12 +7,14 @@ import useLocalSettingsStore from "@/store/localSettings";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
 import { LinksRouteTo } from "@prisma/client";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
 
 export default function Appearance() {
   const { t } = useTranslation();
   const { updateSettings } = useLocalSettingsStore();
   const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
+  const { data: account } = useUser();
+  const updateUser = useUpdateUser();
   const [user, setUser] = useState(account);
 
   const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
@@ -73,17 +74,23 @@ export default function Appearance() {
   const submit = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
+    const load = toast.loading(t("applying_settings"));
 
-    const response = await updateAccount({ ...user });
+    await updateUser.mutateAsync(
+      { ...user },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(t("settings_applied"));
+          }
+        },
+      }
+    );
 
-    if (response.ok) {
-      toast.success(t("settings_applied"));
-    } else {
-      toast.error(response.data as string);
-    }
     setSubmitLoader(false);
   };
 

pages/subscribe.tsx

@@ -7,7 +7,7 @@ import { Plan } from "@/types/global";
 import Button from "@/components/ui/Button";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import { Trans, useTranslation } from "next-i18next";
-import useAccountStore from "@/store/account";
+import { useUser } from "@/hooks/store/user";
 
 const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
@@ -20,11 +20,11 @@ export default function Subscribe() {
 
   const router = useRouter();
 
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   useEffect(() => {
     const hasInactiveSubscription =
-      account.id && !account.subscription?.active && stripeEnabled;
+      user.id && !user.subscription?.active && stripeEnabled;
 
     if (session.status === "authenticated" && !hasInactiveSubscription) {
       router.push("/dashboard");

pages/tags/[id].tsx

@@ -1,29 +1,29 @@
-import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
 import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
-import useTagStore from "@/store/tags";
 import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
-import useLinks from "@/hooks/useLinks";
+import { useLinks } from "@/hooks/store/links";
-import { toast } from "react-hot-toast";
-import CardView from "@/components/LinkViews/Layouts/CardView";
-import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 import { useTranslation } from "next-i18next";
 import getServerSideProps from "@/lib/client/getServerSideProps";
 import LinkListOptions from "@/components/LinkListOptions";
+import { useRemoveTag, useTags, useUpdateTag } from "@/hooks/store/tags";
+import Links from "@/components/LinkViews/Links";
+import toast from "react-hot-toast";
 
 export default function Index() {
   const { t } = useTranslation();
   const router = useRouter();
 
-  const { links } = useLinkStore();
+  const { data: tags = [] } = useTags();
-  const { tags, updateTag, removeTag } = useTagStore();
+  const updateTag = useUpdateTag();
+  const removeTag = useRemoveTag();
 
-  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
 
   const [renameTag, setRenameTag] = useState(false);
   const [newTagName, setNewTagName] = useState<string>();
@@ -38,10 +38,13 @@ export default function Index() {
     if (editMode) return setEditMode(false);
   }, [router]);
 
-  useLinks({ tagId: Number(router.query.id), sort: sortBy });
+  const { links, data } = useLinks({
+    sort: sortBy,
+    tagId: Number(router.query.id),
+  });
 
   useEffect(() => {
-    const tag = tags.find((e) => e.id === Number(router.query.id));
+    const tag = tags.find((e: any) => e.id === Number(router.query.id));
 
     if (tags.length > 0 && !tag?.id) {
       router.push("/dashboard");
@@ -72,21 +75,28 @@ export default function Index() {
 
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
+    if (activeTag && newTagName) {
+      const load = toast.loading(t("applying_changes"));
 
-    let response;
+      await updateTag.mutateAsync(
+        {
+          ...activeTag,
+          name: newTagName,
+        },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
 
-    if (activeTag && newTagName)
+            if (error) {
-      response = await updateTag({
+              toast.error(error.message);
-        ...activeTag,
+            } else {
-        name: newTagName,
+              toast.success(t("tag_renamed"));
-      });
+            }
+          },
+        }
+      );
+    }
 
-    toast.dismiss(load);
-
-    if (response?.ok) {
-      toast.success(t("tag_renamed"));
-    } else toast.error(response?.data as string);
     setSubmitLoader(false);
     setRenameTag(false);
   };
@@ -94,35 +104,31 @@ export default function Index() {
   const remove = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading(t("applying_changes"));
+    if (activeTag?.id) {
+      const load = toast.loading(t("applying_changes"));
 
-    let response;
+      await removeTag.mutateAsync(activeTag?.id, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
 
-    if (activeTag?.id) response = await removeTag(activeTag?.id);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(t("tag_deleted"));
+            router.push("/links");
+          }
+        },
+      });
+    }
 
-    toast.dismiss(load);
-
-    if (response?.ok) {
-      toast.success(t("tag_deleted"));
-      router.push("/links");
-    } else toast.error(response?.data as string);
     setSubmitLoader(false);
     setRenameTag(false);
   };
 
-  const [viewMode, setViewMode] = useState<string>(
+  const [viewMode, setViewMode] = useState<ViewMode>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+    (localStorage.getItem("viewMode") as ViewMode) || ViewMode.Card
   );
 
-  const linkView = {
-    [ViewMode.Card]: CardView,
-    [ViewMode.List]: ListView,
-    [ViewMode.Masonry]: MasonryView,
-  };
-
-  // @ts-ignore
-  const LinkComponent = linkView[viewMode];
-
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
@@ -145,7 +151,7 @@ export default function Index() {
                     <input
                       type="text"
                       autoFocus
-                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
+                      className="sm:text-3xl text-2xl bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content"
                       value={newTagName}
                       onChange={(e) => setNewTagName(e.target.value)}
                     />
@@ -167,7 +173,7 @@ export default function Index() {
                 </>
               ) : (
                 <>
-                  <p className="sm:text-4xl text-3xl capitalize">
+                  <p className="sm:text-3xl text-2xl capitalize">
                     {activeTag?.name}
                   </p>
                   <div className="relative">
@@ -222,11 +228,12 @@ export default function Index() {
           </div>
         </LinkListOptions>
 
-        <LinkComponent
+        <Links
           editMode={editMode}
-          links={links.filter((e) =>
+          links={links}
-            e.tags.some((e) => e.id === Number(router.query.id))
+          layout={viewMode}
-          )}
+          placeholderCount={1}
+          useData={data}
         />
       </div>
       {bulkDeleteLinksModal && (

public/locales/en/common.json

@@ -297,6 +297,7 @@
   "create_new_collection": "Create a New Collection",
   "color": "Color",
   "reset": "Reset",
+  "updating_collection": "Updating Collection...",
   "collection_name_placeholder": "e.g. Example Collection",
   "collection_description_placeholder": "The purpose of this Collection...",
   "create_collection_button": "Create Collection",
@@ -363,5 +364,12 @@
   "hide_link_details": "Hide Link Details",
   "link_pinned": "Link Pinned!",
   "link_unpinned": "Link Unpinned!",
-  "webpage": "Webpage"
+  "webpage": "Webpage",
+  "server_administration": "Server Administration",
+  "all_collections": "All Collections",
+  "dashboard": "Dashboard",
+  "demo_title": "Demo Only",
+  "demo_desc": "This is only a demo instance of Linkwarden and uploads are disabled.",
+  "demo_desc_2": "If you want to try out the full version, you can sign up for a free trial at:",
+  "demo_button": "Login as demo user"
 }

public/locales/it/common.json

@@ -0,0 +1,370 @@
+{
+  "user_administration": "Amministrazione Utenti",
+  "search_users": "Cerca Utenti",
+  "no_users_found": "Nessun utente trovato.",
+  "no_user_found_in_search": "Nessun utente trovato con la query di ricerca specificata.",
+  "username": "Nome utente",
+  "email": "Email",
+  "subscribed": "Iscritto",
+  "created_at": "Creato il",
+  "not_available": "N/D",
+  "check_your_email": "Per favore controlla la tua email",
+  "authenticating": "Autenticazione in corso...",
+  "verification_email_sent": "Email di verifica inviata.",
+  "verification_email_sent_desc": "Un link di accesso è stato inviato al tuo indirizzo email. Se non vedi l'email, controlla la cartella dello spam.",
+  "resend_email": "Reinvia Email",
+  "invalid_credentials": "Credenziali non valide.",
+  "fill_all_fields": "Per favore compila tutti i campi.",
+  "enter_credentials": "Inserisci le tue credenziali",
+  "username_or_email": "Nome utente o Email",
+  "password": "Password",
+  "confirm_password": "Conferma Password",
+  "forgot_password": "Password dimenticata?",
+  "login": "Accedi",
+  "or_continue_with": "O continua con",
+  "new_here": "Nuovo qui?",
+  "sign_up": "Registrati",
+  "sign_in_to_your_account": "Accedi al tuo account",
+  "dashboard_desc": "Una breve panoramica dei tuoi dati",
+  "link": "Link",
+  "links": "Links",
+  "collection": "Collezione",
+  "collections": "Collezioni",
+  "tag": "Tag",
+  "tags": "Tags",
+  "recent": "Recenti",
+  "recent_links_desc": "Link aggiunti di recente",
+  "view_all": "Vedi tutti",
+  "view_added_links_here": "Visualizza i tuoi Link aggiunti di recente qui!",
+  "view_added_links_here_desc": "Questa sezione mostrerà i tuoi ultimi Link aggiunti in tutte le Collezioni a cui hai accesso.",
+  "add_link": "Aggiungi Nuovo Link",
+  "import_links": "Importa Links",
+  "from_linkwarden": "Da Linkwarden",
+  "from_html": "Da file HTML dei segnalibri",
+  "from_wallabag": "Da Wallabag (file JSON)",
+  "pinned": "Fissati",
+  "pinned_links_desc": "I tuoi Link fissati",
+  "pin_favorite_links_here": "Fissa i tuoi Link preferiti qui!",
+  "pin_favorite_links_here_desc": "Puoi fissare i tuoi Link preferiti cliccando sui tre puntini su ogni Link e selezionando Fissa alla Dashboard.",
+  "sending_password_link": "Invio del link per il recupero della password...",
+  "password_email_prompt": "Inserisci la tua email per inviarti un link per creare una nuova password.",
+  "send_reset_link": "Invia Link di Reset",
+  "reset_email_sent_desc": "Controlla la tua email per un link per reimpostare la password. Se non appare entro pochi minuti, controlla la cartella dello spam.",
+  "back_to_login": "Torna al Login",
+  "email_sent": "Email Inviata!",
+  "passwords_mismatch": "Le password non corrispondono.",
+  "password_too_short": "Le password devono essere di almeno 8 caratteri.",
+  "creating_account": "Creazione dell'Account in corso...",
+  "account_created": "Account Creato!",
+  "trial_offer_desc": "Sblocca {{count}} giorni di Servizio Premium gratuitamente!",
+  "register_desc": "Crea un nuovo account",
+  "registration_disabled_desc": "La registrazione è disabilitata per questa istanza, contatta l'amministratore in caso di problemi.",
+  "enter_details": "Inserisci i tuoi dettagli",
+  "display_name": "Nome visualizzato",
+  "sign_up_agreement": "Registrandoti, accetti i nostri <0>Termini di Servizio</0> e la <1>Privacy Policy</1>.",
+  "need_help": "Hai bisogno di aiuto?",
+  "get_in_touch": "Contattaci",
+  "already_registered": "Hai già un account?",
+  "deleting_selections": "Eliminazione delle selezioni in corso...",
+  "links_deleted": "{{count}} Link eliminati.",
+  "link_deleted": "1 Link eliminato.",
+  "links_selected": "{{count}} Link selezionati",
+  "link_selected": "1 Link selezionato",
+  "nothing_selected": "Nessuna selezione",
+  "edit": "Modifica",
+  "delete": "Elimina",
+  "nothing_found": "Nessun risultato trovato.",
+  "redirecting_to_stripe": "Reindirizzamento a Stripe...",
+  "subscribe_title": "Abbonati a Linkwarden!",
+  "subscribe_desc": "Sarai reindirizzato a Stripe, non esitare a contattarci a <0>support@linkwarden.app</0> in caso di problemi.",
+  "monthly": "Mensile",
+  "yearly": "Annuale",
+  "discount_percent": "{{percent}}% di sconto",
+  "billed_monthly": "Fatturato mensilmente",
+  "billed_yearly": "Fatturato annualmente",
+  "total": "Totale",
+  "total_annual_desc": "Prova gratuita di {{count}} giorni, poi ${{annualPrice}} all'anno",
+  "total_monthly_desc": "Prova gratuita di {{count}} giorni, poi ${{monthlyPrice}} al mese",
+  "plus_tax": "+ IVA se applicabile",
+  "complete_subscription": "Completa Abbonamento",
+  "sign_out": "Esci",
+  "access_tokens": "Token di Accesso",
+  "access_tokens_description": "I Token di Accesso possono essere utilizzati per accedere a Linkwarden da altre app e servizi senza dover fornire il tuo Nome utente e Password.",
+  "new_token": "Nuovo Token di Accesso",
+  "name": "Nome",
+  "created_success": "Creato con successo!",
+  "created": "Creato",
+  "expires": "Scade",
+  "accountSettings": "Impostazioni Account",
+  "language": "Lingua",
+  "profile_photo": "Foto Profilo",
+  "upload_new_photo": "Carica una nuova foto...",
+  "remove_photo": "Rimuovi Foto",
+  "make_profile_private": "Rendi il profilo privato",
+  "profile_privacy_info": "Questo limiterà chi può trovarti e aggiungerti a nuove Collezioni.",
+  "whitelisted_users": "Utenti nella lista bianca",
+  "whitelisted_users_info": "Per favore fornisci il Nome utente degli utenti a cui desideri concedere la visibilità del tuo profilo. Separati da virgola.",
+  "whitelisted_users_placeholder": "Il tuo profilo è nascosto a tutti in questo momento...",
+  "save_changes": "Salva Modifiche",
+  "import_export": "Importa & Esporta",
+  "import_data": "Importa i tuoi dati da altre piattaforme.",
+  "download_data": "Scarica i tuoi dati istantaneamente.",
+  "export_data": "Esporta Dati",
+  "delete_account": "Elimina Account",
+  "delete_account_warning": "Questo eliminerà permanentemente TUTTI i Link, le Collezioni, i Tag e i dati archiviati di tua proprietà.",
+  "cancel_subscription_notice": "Cancellerà anche il tuo abbonamento.",
+  "account_deletion_page": "Pagina di eliminazione dell'account",
+  "applying_settings": "Applicazione delle impostazioni in corso...",
+  "settings_applied": "Impostazioni Applicate!",
+  "email_change_request": "Richiesta di cambio email inviata. Per favore verifica il nuovo indirizzo email.",
+  "image_upload_size_error": "Per favore seleziona un file PNG o JPEG di dimensioni inferiori a 1MB.",
+  "image_upload_format_error": "Formato file non valido.",
+  "importing_bookmarks": "Importazione dei segnalibri in corso...",
+  "import_success": "Segnalibri importati! Ricaricamento della pagina...",
+  "more_coming_soon": "Altro in arrivo presto!",
+  "billing_settings": "Impostazioni di Fatturazione",
+  "manage_subscription_intro": "Per gestire/cancellare il tuo abbonamento, visita il",
+  "billing_portal": "Portale di Fatturazione",
+  "help_contact_intro": "Se hai ancora bisogno di aiuto o hai riscontrato problemi, non esitare a contattarci a:",
+  "fill_required_fields": "Per favore compila i campi obbligatori.",
+  "deleting_message": "Eliminazione di tutto in corso, attendere prego...",
+  "delete_warning": "Questo eliminerà permanentemente tutti i Link, le Collezioni, i Tag e i dati archiviati di tua proprietà. Ti disconnetterà anche. Questa azione è irreversibile!",
+  "optional": "Opzionale",
+  "feedback_help": "(ma ci aiuta davvero a migliorare!)",
+  "reason_for_cancellation": "Motivo della cancellazione",
+  "please_specify": "Per favore specifica",
+  "customer_service": "Servizio Clienti",
+  "low_quality": "Bassa Qualità",
+  "missing_features": "Funzionalità Mancanti",
+  "switched_service": "Cambiato Servizio",
+  "too_complex": "Troppo Complesso",
+  "too_expensive": "Troppo Costoso",
+  "unused": "Non Utilizzato",
+  "other": "Altro",
+  "more_information": "Ulteriori informazioni (più dettagli fornisci, più utile sarà)",
+  "feedback_placeholder": "es. Avevo bisogno di una funzionalità che...",
+  "delete_your_account": "Elimina il Tuo Account",
+  "change_password": "Cambia Password",
+  "password_length_error": "Le password devono essere di almeno 8 caratteri.",
+  "applying_changes": "Applicazione in corso...",
+  "password_change_instructions": "Per cambiare la tua password, compila quanto segue. La tua password dovrebbe essere di almeno 8 caratteri.",
+  "old_password": "Vecchia Password",
+  "new_password": "Nuova Password",
+  "preference": "Preferenza",
+  "select_theme": "Seleziona Tema",
+  "dark": "Scuro",
+  "light": "Chiaro",
+  "archive_settings": "Impostazioni di Archiviazione",
+  "formats_to_archive": "Formati per archiviare/preservare le pagine web:",
+  "screenshot": "Screenshot",
+  "pdf": "PDF",
+  "archive_org_snapshot": "Snapshot di Archive.org",
+  "link_settings": "Impostazioni Link",
+  "prevent_duplicate_links": "Previeni link duplicati",
+  "clicking_on_links_should": "Cliccando sui Link si dovrebbe:",
+  "open_original_content": "Aprire il contenuto originale",
+  "open_pdf_if_available": "Aprire PDF, se disponibile",
+  "open_readable_if_available": "Aprire versione leggibile, se disponibile",
+  "open_screenshot_if_available": "Aprire Screenshot, se disponibile",
+  "open_webpage_if_available": "Aprire copia della pagina web, se disponibile",
+  "tag_renamed": "Tag rinominato!",
+  "tag_deleted": "Tag eliminato!",
+  "rename_tag": "Rinomina Tag",
+  "delete_tag": "Elimina Tag",
+  "list_created_with_linkwarden": "Lista creata con Linkwarden",
+  "by_author": "Di {{author}}.",
+  "by_author_and_other": "Di {{author}} e {{count}} altro.",
+  "by_author_and_others": "Di {{author}} e {{count}} altri.",
+  "search_count_link": "Cerca {{count}} Link",
+  "search_count_links": "Cerca {{count}} Links",
+  "collection_is_empty": "Questa Collezione è vuota...",
+  "all_links": "Tutti i Link",
+  "all_links_desc": "Link da ogni Collezione",
+  "you_have_not_added_any_links": "Non hai ancora creato alcun Link",
+  "collections_you_own": "Collezioni di tua proprietà",
+  "new_collection": "Nuova Collezione",
+  "other_collections": "Altre Collezioni",
+  "other_collections_desc": "Collezioni condivise di cui sei membro",
+  "showing_count_results": "Mostrati {{count}} risultati",
+  "showing_count_result": "Mostrato {{count}} risultato",
+  "edit_collection_info": "Modifica Info Collezione",
+  "share_and_collaborate": "Condividi e Collabora",
+  "view_team": "Visualizza Team",
+  "team": "Team",
+  "create_subcollection": "Crea Sotto-Collezione",
+  "delete_collection": "Elimina Collezione",
+  "leave_collection": "Lascia Collezione",
+  "email_verified_signing_out": "Email verificata. Disconnessione in corso...",
+  "invalid_token": "Token non valido.",
+  "sending_password_recovery_link": "Invio del link per il recupero della password in corso...",
+  "please_fill_all_fields": "Per favore compila tutti i campi.",
+  "password_updated": "Password Aggiornata!",
+  "reset_password": "Reimposta Password",
+  "enter_email_for_new_password": "Inserisci la tua email per inviarti un link per creare una nuova password.",
+  "update_password": "Aggiorna Password",
+  "password_successfully_updated": "La tua password è stata aggiornata con successo.",
+  "user_already_member": "L'utente esiste già.",
+  "you_are_already_collection_owner": "Sei già il proprietario della collezione.",
+  "date_newest_first": "Data (Più recente prima)",
+  "date_oldest_first": "Data (Più vecchio prima)",
+  "name_az": "Nome (A-Z)",
+  "name_za": "Nome (Z-A)",
+  "description_az": "Descrizione (A-Z)",
+  "description_za": "Descrizione (Z-A)",
+  "all_rights_reserved": "© {{date}} <0>Linkwarden</0>. Tutti i diritti riservati.",
+  "you_have_no_collections": "Non hai Collezioni...",
+  "you_have_no_tags": "Non hai Tag...",
+  "cant_change_collection_you_dont_own": "Non puoi apportare modifiche a una collezione di cui non sei proprietario.",
+  "account": "Account",
+  "billing": "Fatturazione",
+  "linkwarden_version": "Linkwarden {{version}}",
+  "help": "Aiuto",
+  "github": "GitHub",
+  "twitter": "Twitter",
+  "mastodon": "Mastodon",
+  "link_preservation_in_queue": "La preservazione del Link è attualmente in coda",
+  "check_back_later": "Per favore controlla più tardi per vedere il risultato",
+  "there_are_more_formats": "Ci sono altri formati preservati in coda",
+  "settings": "Impostazioni",
+  "switch_to": "Passa a {{theme}}",
+  "logout": "Esci",
+  "start_journey": "Inizia il tuo viaggio creando un nuovo Link!",
+  "create_new_link": "Crea Nuovo Link",
+  "new_link": "Nuovo Link",
+  "create_new": "Crea Nuovo...",
+  "pwa_install_prompt": "Installa Linkwarden sulla tua schermata iniziale per un accesso più rapido e un'esperienza migliore. <0>Scopri di più</0>",
+  "full_content": "Contenuto Completo",
+  "slower": "Più lento",
+  "new_version_announcement": "Scopri le novità in <0>Linkwarden {{version}}!</0>",
+  "creating": "Creazione in corso...",
+  "upload_file": "Carica File",
+  "file": "File",
+  "file_types": "PDF, PNG, JPG (Fino a {{size}} MB)",
+  "description": "Descrizione",
+  "auto_generated": "Sarà generato automaticamente se non viene fornito nulla.",
+  "example_link": "es. Link di Esempio",
+  "hide": "Nascondi",
+  "more": "Altro",
+  "options": "Opzioni",
+  "description_placeholder": "Note, pensieri, ecc.",
+  "deleting": "Eliminazione in corso...",
+  "token_revoked": "Token Revocato.",
+  "revoke_token": "Revoca Token",
+  "revoke_confirmation": "Sei sicuro di voler revocare questo Token di Accesso? Qualsiasi app o servizio che utilizza questo token non sarà più in grado di accedere a Linkwarden utilizzandolo.",
+  "revoke": "Revoca",
+  "sending_request": "Invio richiesta...",
+  "link_being_archived": "Il Link è in fase di archiviazione...",
+  "preserved_formats": "Formati Preservati",
+  "available_formats": "I seguenti formati sono disponibili per questo link:",
+  "readable": "Leggibile",
+  "preservation_in_queue": "La preservazione del Link è in coda",
+  "view_latest_snapshot": "Visualizza l'ultimo snapshot su archive.org",
+  "refresh_preserved_formats": "Aggiorna Formati Preservati",
+  "this_deletes_current_preservations": "Questo elimina le preservazioni attuali",
+  "create_new_user": "Crea Nuovo Utente",
+  "placeholder_johnny": "Johnny",
+  "placeholder_email": "johnny@esempio.com",
+  "placeholder_john": "john",
+  "user_created": "Utente Creato!",
+  "fill_all_fields_error": "Per favore compila tutti i campi.",
+  "password_change_note": "<0>Nota:</0> Assicurati di informare l'utente che deve cambiare la propria password.",
+  "create_user": "Crea Utente",
+  "creating_token": "Creazione Token in corso...",
+  "token_created": "Token Creato!",
+  "access_token_created": "Token di Accesso Creato",
+  "token_creation_notice": "Il tuo nuovo token è stato creato. Per favore copialo e conservalo in un luogo sicuro. Non sarai in grado di vederlo di nuovo.",
+  "copied_to_clipboard": "Copiato negli appunti!",
+  "copy_to_clipboard": "Copia negli Appunti",
+  "create_access_token": "Crea un Token di Accesso",
+  "expires_in": "Scade tra",
+  "token_name_placeholder": "es. Per la scorciatoia iOS",
+  "create_token": "Crea Token di Accesso",
+  "7_days": "7 Giorni",
+  "30_days": "30 Giorni",
+  "60_days": "60 Giorni",
+  "90_days": "90 Giorni",
+  "no_expiration": "Nessuna Scadenza",
+  "creating_link": "Creazione link in corso...",
+  "link_created": "Link creato!",
+  "link_name_placeholder": "Sarà generato automaticamente se lasciato vuoto.",
+  "link_url_placeholder": "es. http://esempio.com/",
+  "link_description_placeholder": "Note, pensieri, ecc.",
+  "more_options": "Più Opzioni",
+  "hide_options": "Nascondi Opzioni",
+  "create_link": "Crea Link",
+  "new_sub_collection": "Nuova Sotto-Collezione",
+  "for_collection": "Per {{name}}",
+  "create_new_collection": "Crea una Nuova Collezione",
+  "color": "Colore",
+  "reset": "Ripristina",
+  "collection_name_placeholder": "es. Collezione di Esempio",
+  "collection_description_placeholder": "Lo scopo di questa Collezione...",
+  "create_collection_button": "Crea Collezione",
+  "password_change_warning": "Per favore conferma la tua password prima di cambiare il tuo indirizzo email.",
+  "stripe_update_note": "L'aggiornamento di questo campo cambierà anche la tua email di fatturazione su Stripe.",
+  "sso_will_be_removed_warning": "Se cambi il tuo indirizzo email, tutte le connessioni SSO {{service}} esistenti verranno rimosse.",
+  "old_email": "Vecchia Email",
+  "new_email": "Nuova Email",
+  "confirm": "Conferma",
+  "edit_link": "Modifica Link",
+  "updating": "Aggiornamento in corso...",
+  "updated": "Aggiornato!",
+  "placeholder_example_link": "es. Link di Esempio",
+  "make_collection_public": "Rendi la Collezione Pubblica",
+  "make_collection_public_checkbox": "Rendi questa una collezione pubblica",
+  "make_collection_public_desc": "Questo permetterà a chiunque di visualizzare questa collezione e i suoi utenti.",
+  "sharable_link_guide": "Link Condivisibile (Clicca per copiare)",
+  "copied": "Copiato!",
+  "members": "Membri",
+  "members_username_placeholder": "Nome utente (senza '@')",
+  "owner": "Proprietario",
+  "admin": "Amministratore",
+  "contributor": "Collaboratore",
+  "viewer": "Visualizzatore",
+  "viewer_desc": "Accesso in sola lettura",
+  "contributor_desc": "Può visualizzare e creare Link",
+  "admin_desc": "Accesso completo a tutti i Link",
+  "remove_member": "Rimuovi Membro",
+  "placeholder_example_collection": "es. Collezione di Esempio",
+  "placeholder_collection_purpose": "Lo scopo di questa Collezione...",
+  "deleting_user": "Eliminazione in corso...",
+  "user_deleted": "Utente Eliminato.",
+  "delete_user": "Elimina Utente",
+  "confirm_user_deletion": "Sei sicuro di voler rimuovere questo utente?",
+  "irreversible_action_warning": "Questa azione è irreversibile!",
+  "delete_confirmation": "Elimina, so cosa sto facendo",
+  "delete_link": "Elimina Link",
+  "deleted": "Eliminato.",
+  "link_deletion_confirmation_message": "Sei sicuro di voler eliminare questo Link?",
+  "warning": "Attenzione",
+  "irreversible_warning": "Questa azione è irreversibile!",
+  "shift_key_tip": "Tieni premuto il tasto Shift mentre clicchi su 'Elimina' per evitare questa conferma in futuro.",
+  "deleting_collection": "Eliminazione in corso...",
+  "collection_deleted": "Collezione Eliminata.",
+  "confirm_deletion_prompt": "Per confermare, digita \"{{name}}\" nella casella sottostante:",
+  "type_name_placeholder": "Digita \"{{name}}\" Qui.",
+  "deletion_warning": "L'eliminazione di questa collezione cancellerà permanentemente tutti i suoi contenuti e diventerà inaccessibile a tutti, inclusi i membri con accesso precedente.",
+  "leave_prompt": "Clicca il pulsante sottostante per lasciare la collezione corrente.",
+  "leave": "Lascia",
+  "edit_links": "Modifica {{count}} Link",
+  "move_to_collection": "Sposta nella Collezione",
+  "add_tags": "Aggiungi Tag",
+  "remove_previous_tags": "Rimuovi tag precedenti",
+  "delete_links": "Elimina {{count}} Link",
+  "links_deletion_confirmation_message": "Sei sicuro di voler eliminare {{count}} Link? ",
+  "warning_irreversible": "Attenzione: Questa azione è irreversibile!",
+  "shift_key_instruction": "Tieni premuto il tasto 'Shift' mentre clicchi su 'Elimina' per evitare questa conferma in futuro.",
+  "link_selection_error": "Non hai il permesso di modificare o eliminare questo elemento.",
+  "no_description": "Nessuna descrizione fornita.",
+  "applying": "Applicazione in corso...",
+  "unpin": "Rimuovi fissaggio",
+  "pin_to_dashboard": "Fissa alla Dashboard",
+  "show_link_details": "Mostra Dettagli Link",
+  "hide_link_details": "Nascondi Dettagli Link",
+  "link_pinned": "Link Fissato!",
+  "link_unpinned": "Fissaggio Link Rimosso!",
+  "webpage": "Pagina web",
+  "server_administration": "Amministrazione Server",
+  "all_collections": "Tutte le Collezioni",
+  "dashboard": "Dashboard"
+}

scripts/migration/descriptionToName.js

@@ -1,70 +0,0 @@
-// [Optional, but recommended]
-
-// We decided that the "name" field should be the auto-generated field instead of the "description" field, so we need to
-// move the data from the "description" field to the "name" field for links that have an empty name.
-
-// This script is meant to be run only once.
-
-// Run the script with `node scripts/migration/descriptionToName.js`
-
-const { PrismaClient } = require("@prisma/client");
-
-const prisma = new PrismaClient();
-
-async function main() {
-  console.log("Starting...");
-
-  const count = await prisma.link.count({
-    where: {
-      name: "",
-      description: {
-        not: "",
-      },
-    },
-  });
-
-  console.log(
-    `Applying the changes to ${count} ${
-      count == 1 ? "link" : "links"
-    } in 10 seconds...`
-  );
-
-  await new Promise((resolve) => setTimeout(resolve, 10000));
-
-  console.log("Applying the changes...");
-
-  const links = await prisma.link.findMany({
-    where: {
-      name: "",
-      description: {
-        not: "",
-      },
-    },
-    select: {
-      id: true,
-      description: true,
-    },
-  });
-
-  for (const link of links) {
-    await prisma.link.update({
-      where: {
-        id: link.id,
-      },
-      data: {
-        name: link.description,
-        description: "",
-      },
-    });
-  }
-
-  console.log("Done!");
-}
-
-main()
-  .catch((e) => {
-    throw e;
-  })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });