Update .env.sample

Merge pull request #748 from linkwarden/hotfix
bug fix
2024-09-15 13:51:09 -04:00 · 2024-08-29 12:49:48 -04:00 · 2024-08-29 12:47:23 -04:00 · 2024-08-19 23:37:30 -04:00 · 2024-08-19 23:36:28 -04:00 · 2024-08-19 19:30:26 -04:00
123 changed files with 4481 additions and 2045 deletions
@@ -1,11 +1,12 @@
-NEXTAUTH_SECRET=very_sensitive_secret
 NEXTAUTH_URL=http://localhost:3000/api/v1/auth
+NEXTAUTH_SECRET=

 # Manual installation database settings
-DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
+# Example: DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
+DATABASE_URL=

 # Docker installation database settings
-POSTGRES_PASSWORD=super_secret_password
+POSTGRES_PASSWORD=

 # Additional Optional Settings
 PAGINATION_TAKE_COUNT=
@@ -21,7 +22,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 +33,7 @@ PDF_MAX_BUFFER=
 SCREENSHOT_MAX_BUFFER=
 READABILITY_MAX_BUFFER=
 PREVIEW_MAX_BUFFER=
+IMPORT_LIMIT=

 # AWS S3 Settings
 SPACES_KEY=
@@ -90,7 +95,6 @@ AUTHELIA_CLIENT_ID=""
 AUTHELIA_CLIENT_SECRET=""
 AUTHELIA_WELLKNOWN_URL=""

-
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
 AUTHENTIK_CUSTOM_NAME=
@@ -98,12 +102,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 +209,8 @@ FUSIONAUTH_TENANT_ID=
 # GitHub
 NEXT_PUBLIC_GITHUB_ENABLED=
 GITHUB_CUSTOM_NAME=
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
+GITHUB_ID=
+GITHUB_SECRET=

 # GitLab
 NEXT_PUBLIC_GITLAB_ENABLED=
@@ -1,17 +1,18 @@
 <div align="center">
  <img src="./assets/logo.png" width="100px" />
  <h1>Linkwarden</h1>
+  <h3>Bookmark Preservation for Individuals and Teams</h3>

 <a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat" alt="Discord"></a>
-<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a>
-
-<img alt="GitHub commits since latest release" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/latest/dev?style=for-the-badge&label=COMMITS%20SINCE%20LATEST%20RELEASE">
+<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a> <a href="https://news.ycombinator.com/item?id=36942308"><img src="https://img.shields.io/badge/Hacker%20News-280-%23FF6600"></img></a>

 </div>

 <div align='center'>

-[Website](https://linkwarden.app) | [Getting Started](https://docs.linkwarden.app) | [Features](https://github.com/linkwarden/linkwarden#features) | [Roadmap](https://github.com/orgs/linkwarden/projects/1) | [Support ❤](https://github.com/linkwarden/linkwarden#support-)
+[« LAUNCH DEMO »](https://demo.linkwarden.app)
+
+[Cloud](https://cloud.linkwarden.app) · [Website](https://linkwarden.app) · [Features](https://github.com/linkwarden/linkwarden#features)

 </div>

@@ -24,7 +25,7 @@ The objective is to organize useful webpages and articles you find across the we
 Additionally, Linkwarden is designed with collaboration in mind, sharing links with the public and/or allowing multiple users to work together seamlessly.

 > [!TIP]  
-> Our official [Cloud](https://linkwarden.app/#pricing) offering provides the simplest way to begin using Linkwarden and it's the preferred choice for many due to its time-saving benefits. <br> Your subscription supports our hosting infrastructure and ongoing development. <br> Alternatively, if you prefer [self-hosting](https://docs.linkwarden.app/self-hosting/installation) Linkwarden, no problem! You'll still have access to all the premium features.
+> Our official [Cloud](https://linkwarden.app/#pricing) offering provides the simplest way to begin using Linkwarden and it's the preferred choice for many due to its time-saving benefits. <br> Your subscription supports our hosting infrastructure and ongoing development. <br> Alternatively, if you prefer self-hosting Linkwarden, you can do so by following our [Installation documentation](https://docs.linkwarden.app/self-hosting/installation).

 <img src="./assets/dashboard.png" />

@@ -71,10 +72,14 @@ We've forked the old version from the current repository into [this repo](https:
 - ⬇️ Import and export your bookmarks.
 - 🔐 SSO integration. (Enterprise and Self-hosted users only)
 - 📦 Installable Progressive Web App (PWA).
+- 🍏 iOS and MacOS Apps, maintained by [JGeek00](https://github.com/JGeek00).
 - 🍎 iOS Shortcut to save links to Linkwarden.
 - 🔑 API keys.
 - ✅ Bulk actions.
- ✨ And so many more features!
+- 👥 User administration.
+- 🌐 Support for Other Languages (i18n).
+- 📁 Image and PDF Uploads.
+- ✨ And many more features. (Literally!)

 ## Like what we're doing? Give us a Star ⭐

@@ -98,7 +103,7 @@ We _usually_ go after the [popular suggestions](https://github.com/linkwarden/li

 Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/projects/1).

-## Docs
+## Documentation

 For information on how to get started or to set up your own instance, please visit the [documentation](https://docs.linkwarden.app).

@@ -110,7 +115,7 @@ If you want to contribute, Thanks! Start by checking our [public roadmap](https:

 If you found a security vulnerability, please do **not** create a public issue, instead send an email to [security@linkwarden.app](mailto:security@linkwarden.app) stating the vulnerability. Thanks!

-## Support ❤
+## Support <3

 Other than using our official [Cloud](https://linkwarden.app/#pricing) offering, any [donations](https://opencollective.com/linkwarden) are highly appreciated as well!

@@ -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,
-          name: account.name,
-          username: account.username as string,
-          image: account.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsMonolith as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsMonolith as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
        });
      }
    };
@@ -80,7 +80,7 @@ export default function CollectionCard({ collection, className }: Props) {
        >
          <i className="bi-three-dots text-xl" title="More"></i>
        </div>
-        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
          {permissions === true && (
            <li>
              <div
@@ -90,6 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
                  (document?.activeElement as HTMLElement)?.blur();
                  setEditCollectionModal(true);
                }}
+                className="whitespace-nowrap"
              >
                {t("edit_collection_info")}
              </div>
@@ -103,6 +104,7 @@ export default function CollectionCard({ collection, className }: Props) {
                (document?.activeElement as HTMLElement)?.blur();
                setEditCollectionSharingModal(true);
              }}
+              className="whitespace-nowrap"
            >
              {permissions === true
                ? t("share_and_collaborate")
@@ -117,6 +119,7 @@ export default function CollectionCard({ collection, className }: Props) {
                (document?.activeElement as HTMLElement)?.blur();
                setDeleteCollectionModal(true);
              }}
+              className="whitespace-nowrap"
            >
              {permissions === true
                ? t("delete_collection")
@@ -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 { account, updateAccount } = useAccountStore();
+  const updateCollection = useUpdateCollection();
+  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
      );
-    }
-    return undefined;
-  }, [collections, router]);
-
-  const [tree, setTree] = useState(initialTree);
+    } else return undefined;
+  }, [collections, user, router]);

  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({
-          ...account,
+        updateUser.mutate({
+          ...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[] = [
-          ...(account.collectionOrder || []),
-        ];
+        const newCollectionOrder: number[] = [...(user.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({
-            ...account,
+          updateUser.mutateAsync({
+            ...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({
-        ...movedCollection,
-        parentId:
-          destination.parentId && destination.parentId !== "root"
-            ? Number(destination.parentId)
-            : destination.parentId === "root"
-              ? "root"
-              : null,
-      } as any);
+      await updateCollection.mutateAsync(
+        {
+          ...movedCollection,
+          parentId:
+            destination.parentId && destination.parentId !== "root"
+              ? Number(destination.parentId)
+              : destination.parentId === "root"
+                ? "root"
+                : null,
+        },
+        {
+          onError: (error) => {
+            toast.error(error.message);
+          },
+        }
+      );
    }

    if (
@@ -172,8 +183,8 @@ const CollectionListing = () => {

      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);

-      await updateAccount({
-        ...account,
+      await updateUser.mutateAsync({
+        ...user,
        collectionOrder: updatedCollectionOrder,
      });
    } else if (
@@ -182,8 +193,8 @@ const CollectionListing = () => {
    ) {
      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);

-      await updateAccount({
-        ...account,
+      updateUser.mutate({
+        ...user,
        collectionOrder: updatedCollectionOrder,
      });
    } else if (
@@ -193,14 +204,22 @@ const CollectionListing = () => {
    ) {
      updatedCollectionOrder.splice(source.index, 1);

-      await updateAccount({
-        ...account,
+      await updateUser.mutateAsync({
+        ...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")}
@@ -1,6 +1,8 @@
 import { dropdownTriggerer } from "@/lib/client/utils";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "next-i18next";
+import { resetInfiniteQueryPagination } from "@/hooks/store/links";
+import { useQueryClient } from "@tanstack/react-query";

 type Props = {
  setSearchFilter: Function;
@@ -18,6 +20,7 @@ export default function FilterSearchDropdown({
  searchFilter,
 }: Props) {
  const { t } = useTranslation();
+  const queryClient = useQueryClient();

  return (
    <div className="dropdown dropdown-bottom dropdown-end">
@@ -29,7 +32,7 @@ export default function FilterSearchDropdown({
      >
        <i className="bi-funnel text-neutral text-2xl"></i>
      </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
        <li>
          <label
            className="label cursor-pointer flex justify-start"
@@ -41,11 +44,12 @@ export default function FilterSearchDropdown({
              name="search-filter-checkbox"
              className="checkbox checkbox-primary"
              checked={searchFilter.name}
-              onChange={() =>
-                setSearchFilter({ ...searchFilter, name: !searchFilter.name })
-              }
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSearchFilter({ ...searchFilter, name: !searchFilter.name });
+              }}
            />
-            <span className="label-text">{t("name")}</span>
+            <span className="label-text whitespace-nowrap">{t("name")}</span>
          </label>
        </li>
        <li>
@@ -59,11 +63,12 @@ export default function FilterSearchDropdown({
              name="search-filter-checkbox"
              className="checkbox checkbox-primary"
              checked={searchFilter.url}
-              onChange={() =>
-                setSearchFilter({ ...searchFilter, url: !searchFilter.url })
-              }
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSearchFilter({ ...searchFilter, url: !searchFilter.url });
+              }}
            />
-            <span className="label-text">{t("link")}</span>
+            <span className="label-text whitespace-nowrap">{t("link")}</span>
          </label>
        </li>
        <li>
@@ -77,14 +82,17 @@ export default function FilterSearchDropdown({
              name="search-filter-checkbox"
              className="checkbox checkbox-primary"
              checked={searchFilter.description}
-              onChange={() =>
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                setSearchFilter({
                  ...searchFilter,
                  description: !searchFilter.description,
-                })
-              }
+                });
+              }}
            />
-            <span className="label-text">{t("description")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description")}
+            </span>
          </label>
        </li>
        <li>
@@ -98,11 +106,12 @@ export default function FilterSearchDropdown({
              name="search-filter-checkbox"
              className="checkbox checkbox-primary"
              checked={searchFilter.tags}
-              onChange={() =>
-                setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
-              }
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSearchFilter({ ...searchFilter, tags: !searchFilter.tags });
+              }}
            />
-            <span className="label-text">{t("tags")}</span>
+            <span className="label-text whitespace-nowrap">{t("tags")}</span>
          </label>
        </li>
        <li>
@@ -116,15 +125,18 @@ export default function FilterSearchDropdown({
              name="search-filter-checkbox"
              className="checkbox checkbox-primary"
              checked={searchFilter.textContent}
-              onChange={() =>
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                setSearchFilter({
                  ...searchFilter,
                  textContent: !searchFilter.textContent,
-                })
-              }
+                });
+              }}
            />
-            <span className="label-text">{t("full_content")}</span>
-            <div className="ml-auto badge badge-sm badge-neutral">
+            <span className="label-text whitespace-nowrap">
+              {t("full_content")}
+            </span>
+            <div className="ml-auto badge badge-sm badge-neutral whitespace-nowrap">
              {t("slower")}
            </div>
          </label>
@@ -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[]>([]);
@@ -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 };
    });

@@ -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">
      <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"
@@ -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;
-  setViewMode: Dispatch<SetStateAction<string>>;
+  viewMode: ViewMode;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
  searchFilter?: {
    name: boolean;
    url: boolean;
@@ -48,8 +49,11 @@ const LinkListOptions = ({
  editMode,
  setEditMode,
 }: Props) => {
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
-    useLinkStore();
+  const { selectedLinks, setSelectedLinks } = 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(
-      selectedLinks.map((link) => link.id as number)
+    await deleteLinksById.mutateAsync(
+      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 && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${
-                  editMode
-                    ? "bg-primary/20 hover:bg-primary/20"
-                    : "hover:bg-neutral/20"
-                }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
+            {links &&
+              links.length > 0 &&
+              editMode !== undefined &&
+              setEditMode && (
+                <div
+                  role="button"
+                  onClick={() => {
+                    setEditMode(!editMode);
+                    setSelectedLinks([]);
+                  }}
+                  className={`btn btn-square btn-sm btn-ghost ${
+                    editMode
+                      ? "bg-primary/20 hover:bg-primary/20"
+                      : "hover:bg-neutral/20"
+                  }`}
+                >
+                  <i className="bi-pencil-fill text-neutral text-xl"></i>
+                </div>
+              )}
            {searchFilter && setSearchFilter && (
              <FilterSearchDropdown
                searchFilter={searchFilter}
                setSearchFilter={setSearchFilter}
              />
            )}
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
+            <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">
-              <input
-                type="checkbox"
-                className="checkbox checkbox-primary"
-                onChange={() => handleSelectAll()}
-                checked={
-                  selectedLinks.length === links.length && links.length > 0
-                }
-              />
-              {selectedLinks.length > 0 ? (
-                <span>
-                  {selectedLinks.length === 1
-                    ? t("link_selected")
-                    : t("links_selected", { count: selectedLinks.length })}
-                </span>
-              ) : (
-                <span>{t("nothing_selected")}</span>
-              )}
-            </div>
-          )}
+          <div className="flex gap-3 ml-3">
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary"
+              onChange={() => handleSelectAll()}
+              checked={
+                selectedLinks.length === links.length && links.length > 0
+              }
+            />
+            {selectedLinks.length > 0 ? (
+              <span>
+                {selectedLinks.length === 1
+                  ? t("link_selected")
+                  : t("links_selected", { count: selectedLinks.length })}
+              </span>
+            ) : (
+              <span>{t("nothing_selected")}</span>
+            )}
+          </div>
          <div className="flex gap-3">
            <button
              onClick={() => setBulkEditLinksModal(true)}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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({
-      ...link,
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
-    });
+    await updateLink.mutateAsync(
+      {
+        ...link,
+        pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);

-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
-  };
-
-  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"));
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(
+              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
+            );
+          }
+        },
+      }
+    );
  };

  return (
@@ -85,7 +86,7 @@ export default function LinkActions({
          <i title="More" className="bi-three-dots text-xl" />
        </div>
        <ul
-          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
+          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mr-1 ${
            alignToTop ? "" : "translate-y-10"
          }`}
        >
@@ -97,6 +98,7 @@ export default function LinkActions({
                (document?.activeElement as HTMLElement)?.blur();
                pinLink();
              }}
+              className="whitespace-nowrap"
            >
              {link?.pinnedBy && link.pinnedBy[0]
                ? t("unpin")
@@ -112,6 +114,7 @@ export default function LinkActions({
                  (document?.activeElement as HTMLElement)?.blur();
                  toggleShowInfo();
                }}
+                className="whitespace-nowrap"
              >
                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
              </div>
@@ -126,6 +129,7 @@ export default function LinkActions({
                  (document?.activeElement as HTMLElement)?.blur();
                  setEditLinkModal(true);
                }}
+                className="whitespace-nowrap"
              >
                {t("edit_link")}
              </div>
@@ -140,6 +144,7 @@ export default function LinkActions({
                  (document?.activeElement as HTMLElement)?.blur();
                  setPreservedFormatsModal(true);
                }}
+                className="whitespace-nowrap"
              >
                {t("preserved_formats")}
              </div>
@@ -150,10 +155,27 @@ 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);
                }}
+                className="whitespace-nowrap"
              >
                {t("delete")}
              </div>
@@ -177,7 +199,7 @@ export default function LinkActions({
      {preservedFormatsModal ? (
        <PreservedFormatsModal
          onClose={() => setPreservedFormatsModal(false)}
-          activeLink={link}
+          link={link}
        />
      ) : undefined}
      {/* {expandedLink ? (
@@ -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 { collections } = useCollectionStore();
-  const { account } = useAccountStore();
+  const { data: collections = [] } = useCollections();

-  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>
@@ -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}`}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
-      title={collection?.name}
-    >
-      <i
-        className="bi-folder-fill text-lg drop-shadow"
-        style={{ color: collection?.color }}
-      ></i>
-      <p className="truncate capitalize">{collection?.name}</p>
-    </Link>
+    <>
+      <Link
+        href={`/collections/${link.collection.id}`}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
+        title={collection?.name}
+      >
+        <i
+          className="bi-folder-fill text-lg drop-shadow"
+          style={{ color: collection?.color }}
+        ></i>
+        <p className="truncate capitalize">{collection?.name}</p>
+      </Link>
+    </>
  );
 }
@@ -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 { account } = useAccountStore();
-  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
+  const { data: collections = [] } = useCollections();
+
+  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>
    </>
  );
 }
@@ -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 { account } = useAccountStore();
+  const { data: collections = [] } = useCollections();
+  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")}
@@ -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) : [];
@@ -41,7 +41,7 @@ export default function MobileNavigation({}: Props) {
                <i className="bi-plus text-5xl pointer-events-none"></i>
              </span>
            </div>
-            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
+            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box mb-1 -ml-12">
              <li>
                <div
                  onClick={() => {
@@ -50,6 +50,7 @@ export default function MobileNavigation({}: Props) {
                  }}
                  tabIndex={0}
                  role="button"
+                  className="whitespace-nowrap"
                >
                  {t("new_link")}
                </div>
@@ -62,6 +63,7 @@ export default function MobileNavigation({}: Props) {
                  }}
                  tabIndex={0}
                  role="button"
+                  className="whitespace-nowrap"
                >
                  {t("upload_file")}
                </div>
@@ -74,6 +76,7 @@ export default function MobileNavigation({}: Props) {
                  }}
                  tabIndex={0}
                  role="button"
+                  className="whitespace-nowrap"
                >
                  {t("new_collection")}
                </div>
@@ -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(
-      selectedLinks.map((link) => link.id as number)
+    await deleteLinksById.mutateAsync(
+      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 (
@@ -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(
-        selectedLinks,
-        removePreviousTags,
-        updatedValues
+      await updateLinks.mutateAsync(
+        {
+          links: selectedLinks,
+          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;
    }
  };

@@ -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 (response.ok) {
-        toast.success(t("deleted"));
-        onClose();
-        router.push("/collections");
-      } else {
-        toast.error(response.data as string);
-      }
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("deleted"));
+            router.push("/collections");
+          }
+        },
+      });

      setSubmitLoader(false);
    }
@@ -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);
-
-    response.ok && toast.success(t("deleted"));
-
-    if (router.pathname.startsWith("/links/[id]")) {
-      router.push("/dashboard");
-    }
-
-    onClose();
+        if (error) {
+          toast.error(error.message);
+        } else {
+          if (router.pathname.startsWith("/links/[id]")) {
+            router.push("/dashboard");
+          }
+          toast.success(t("deleted"));
+          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>
@@ -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 load = toast.loading(t("deleting_user"));
+  const [submitLoader, setSubmitLoader] = useState(false);
+  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"));
-
-    onClose();
+      setSubmitLoader(false);
+    }
  };

  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>
@@ -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 (response.ok) {
-        toast.success(t("updated"));
-        onClose();
-      } else toast.error(response.data as string);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("updated"));
+          }
+        },
+      });

      setSubmitLoader(false);
    }
@@ -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);
-
-      toast.dismiss(load);
-
-      if (response.ok) {
-        toast.success(t("updated"));
-        onClose();
-      } else toast.error(response.data as string);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("updated"));
+          }
+        },
+      });

      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,
@@ -275,7 +277,7 @@ export default function EditCollectionSharingModal({
                                  {roleLabel}
                                  <i className="bi-chevron-down"></i>
                                </div>
-                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
+                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
                                  <li>
                                    <label
                                      className="label cursor-pointer flex justify-start"
@@ -314,10 +316,12 @@ export default function EditCollectionSharingModal({
                                        }}
                                      />
                                      <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                          {t("viewer")}
                                        </p>
-                                        <p>{t("viewer_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("viewer_desc")}
+                                        </p>
                                      </div>
                                    </label>
                                  </li>
@@ -359,10 +363,12 @@ export default function EditCollectionSharingModal({
                                        }}
                                      />
                                      <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                          {t("contributor")}
                                        </p>
-                                        <p>{t("contributor_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("contributor_desc")}
+                                        </p>
                                      </div>
                                    </label>
                                  </li>
@@ -404,10 +410,12 @@ export default function EditCollectionSharingModal({
                                        }}
                                      />
                                      <div>
-                                        <p className="font-bold">
+                                        <p className="font-bold whitespace-nowrap">
                                          {t("admin")}
                                        </p>
-                                        <p>{t("admin_desc")}</p>
+                                        <p className="whitespace-nowrap">
+                                          {t("admin_desc")}
+                                        </p>
                                      </div>
                                    </label>
                                  </li>
@@ -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) {
-        toast.success(t("updated"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+      const load = toast.loading(t("updating"));
+
+      await updateLink.mutateAsync(link, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("updated"));
+          }
+        },
+      });

      setSubmitLoader(false);
-      return response;
    }
  };

@@ -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);
-    toast.dismiss(load);
+    await createCollection.mutateAsync(collection, {
+      onSettled: (data, error) => {
+        toast.dismiss(load);

-    if (response.ok) {
-      toast.success(t("created_success"));
-      if (response.data) {
-        setAccount(data?.user.id as number);
-        onClose();
-      }
-    } else toast.error(response.data as string);
+        if (error) {
+          toast.error(error.message);
+        } else {
+          onClose();
+          toast.success(t("created"));
+        }
+      },
+    });

    setSubmitLoader(false);
  };
@@ -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);
-      if (response.ok) {
-        toast.success(t("link_created"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+
+      await addLink.mutateAsync(link, {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            onClose();
+            toast.success(t("link_created"));
+          }
+        },
+      });
+
      setSubmitLoader(false);
    }
  };
@@ -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 (ok) {
-        toast.success(t("token_created"));
-        setNewToken((data as any).secretKey);
-      } else toast.error(data as string);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setNewToken(data.secretKey);
+          }
+        },
+      });

      setSubmitLoader(false);
    }
@@ -111,7 +115,7 @@ export default function NewTokenModal({ onClose }: Props) {
                >
                  {getLabel(token.expires)}
                </Button>
-                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
                  <li>
                    <label
                      className="label cursor-pointer flex justify-start"
@@ -131,7 +135,9 @@ export default function NewTokenModal({ onClose }: Props) {
                          });
                        }}
                      />
-                      <span className="label-text">{t("7_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("7_days")}
+                      </span>
                    </label>
                  </li>
                  <li>
@@ -150,7 +156,9 @@ export default function NewTokenModal({ onClose }: Props) {
                          setToken({ ...token, expires: TokenExpiry.oneMonth });
                        }}
                      />
-                      <span className="label-text">{t("30_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("30_days")}
+                      </span>
                    </label>
                  </li>
                  <li>
@@ -172,7 +180,9 @@ export default function NewTokenModal({ onClose }: Props) {
                          });
                        }}
                      />
-                      <span className="label-text">{t("60_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("60_days")}
+                      </span>
                    </label>
                  </li>
                  <li>
@@ -194,7 +204,9 @@ export default function NewTokenModal({ onClose }: Props) {
                          });
                        }}
                      />
-                      <span className="label-text">{t("90_days")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("90_days")}
+                      </span>
                    </label>
                  </li>
                  <li>
@@ -213,7 +225,9 @@ export default function NewTokenModal({ onClose }: Props) {
                          setToken({ ...token, expires: TokenExpiry.never });
                        }}
                      />
-                      <span className="label-text">{t("no_expiration")}</span>
+                      <span className="label-text whitespace-nowrap">
+                        {t("no_expiration")}
+                      </span>
                    </label>
                  </li>
                </ul>
@@ -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"));
      }
@@ -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 { account } = useAccountStore();
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
  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,
-          name: account.name,
-          username: account.username as string,
-          image: account.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot 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);
-      setLink(
-        (data as any).response as LinkIncludingShortenedCollectionAndTags
-      );
+      await getLink.mutateAsync(link.id as number);
    })();

    let interval: any;

    if (!isReady()) {
      interval = setInterval(async () => {
-        const data = await getLink(link.id as number, isPublic);
-        setLink(
-          (data as any).response as LinkIncludingShortenedCollectionAndTags
-        );
+        await getLink.mutateAsync(link.id as number);
      }, 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);
-      setLink(
-        (newLink as any).response as LinkIncludingShortenedCollectionAndTags
-      );
+      await getLink.mutateAsync(link?.id as number);
+
      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}

@@ -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 (response.ok) {
-      toast.success(t("token_revoked"));
-    }
-
-    onClose();
+        if (error) {
+          toast.error(error.message);
+        } else {
+          onClose();
+          toast.success(t("token_revoked"));
+        }
+      },
+    });
  };

  return (
@@ -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 (response.ok) {
-        toast.success(t("created_success"));
-        onClose();
-      } else {
-        toast.error(response.data as string);
-      }
+            if (error) {
+              toast.error(error.message);
+            } else {
+              onClose();
+              toast.success(t("created_success"));
+            }
+          },
+        }
+      );

      setSubmitLoader(false);
-      return response;
    }
  };

@@ -66,7 +66,7 @@ export default function Navbar() {
              </span>
            </div>
          </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 mt-1">
            <li>
              <div
                onClick={() => {
@@ -75,6 +75,7 @@ export default function Navbar() {
                }}
                tabIndex={0}
                role="button"
+                className="whitespace-nowrap"
              >
                {t("new_link")}
              </div>
@@ -87,6 +88,7 @@ export default function Navbar() {
                }}
                tabIndex={0}
                role="button"
+                className="whitespace-nowrap"
              >
                {t("upload_file")}
              </div>
@@ -99,6 +101,7 @@ export default function Navbar() {
                }}
                tabIndex={0}
                role="button"
+                className="whitespace-nowrap"
              >
                {t("new_collection")}
              </div>
@@ -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>
@@ -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 } = useLinkStore();
-
-  const [link, setLink] =
-    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+  const getLink = useGetLink();

  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)
@@ -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,17 +27,20 @@ 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 mt-1`}
+      >
        <li>
          <Link
            href="/settings/account"
            onClick={() => (document?.activeElement as HTMLElement)?.blur()}
            tabIndex={0}
            role="button"
+            className="whitespace-nowrap"
          >
            {t("settings")}
          </Link>
@@ -48,12 +53,26 @@ export default function ProfileDropdown() {
            }}
            tabIndex={0}
            role="button"
+            className="whitespace-nowrap"
          >
            {t("switch_to", {
              theme: settings.theme === "light" ? t("dark") : t("light"),
            })}
          </div>
        </li>
+        {isAdmin ? (
+          <li>
+            <Link
+              href="/admin"
+              onClick={() => (document?.activeElement as HTMLElement)?.blur()}
+              tabIndex={0}
+              role="button"
+              className="whitespace-nowrap"
+            >
+              {t("server_administration")}
+            </Link>
+          </li>
+        ) : null}
        <li>
          <div
            onClick={() => {
@@ -62,6 +81,7 @@ export default function ProfileDropdown() {
            }}
            tabIndex={0}
            role="button"
+            className="whitespace-nowrap"
          >
            {t("logout")}
          </div>
@@ -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 { collections } = useCollectionStore();
+  const getLink = useGetLink();
+  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);
@@ -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 { tags } = useTagStore();
+  const { data: collections } = useCollections();
+
+  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))
-                .map((e, i) => {
+                .sort((a: any, b: any) => a.name.localeCompare(b.name))
+                .map((e: any, i: any) => {
                  return (
                    <Link key={i} href={`/tags/${e.id}`}>
                      <div
@@ -14,6 +14,7 @@ export default function SidebarHighlightLink({
  return (
    <Link href={href}>
      <div
+        title={title}
        className={`${
          active || false
            ? "bg-primary/20"
@@ -28,7 +29,7 @@ export default function SidebarHighlightLink({
          <i className={`${icon} text-primary text-2xl drop-shadow`}></i>
        </div>
        <div className={"mt-1"}>
-          <p className="truncate w-full font-semibold text-sm">{title}</p>
+          <p className="truncate w-full font-semibold text-xs">{title}</p>
        </div>
      </div>
    </Link>
@@ -1,7 +1,10 @@
-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";
+import { resetInfiniteQueryPagination } from "@/hooks/store/links";
+import { useQueryClient } from "@tanstack/react-query";

 type Props = {
  sortBy: Sort;
@@ -10,6 +13,13 @@ type Props = {
 };

 export default function SortDropdown({ sortBy, setSort, t }: Props) {
+  const { updateSettings } = useLocalSettingsStore();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    updateSettings({ sortBy });
+  }, [sortBy]);
+
  return (
    <div className="dropdown dropdown-bottom dropdown-end">
      <div
@@ -20,7 +30,7 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
      >
        <i className="bi-chevron-expand text-neutral text-2xl"></i>
      </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
        <li>
          <label
            className="label cursor-pointer flex justify-start"
@@ -32,9 +42,14 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.DateNewestFirst}
-              onChange={() => setSort(Sort.DateNewestFirst)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.DateNewestFirst);
+              }}
            />
-            <span className="label-text">{t("date_newest_first")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("date_newest_first")}
+            </span>
          </label>
        </li>
        <li>
@@ -48,9 +63,14 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.DateOldestFirst}
-              onChange={() => setSort(Sort.DateOldestFirst)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.DateOldestFirst);
+              }}
            />
-            <span className="label-text">{t("date_oldest_first")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("date_oldest_first")}
+            </span>
          </label>
        </li>
        <li>
@@ -64,9 +84,12 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.NameAZ}
-              onChange={() => setSort(Sort.NameAZ)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.NameAZ);
+              }}
            />
-            <span className="label-text">{t("name_az")}</span>
+            <span className="label-text whitespace-nowrap">{t("name_az")}</span>
          </label>
        </li>
        <li>
@@ -80,9 +103,12 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.NameZA}
-              onChange={() => setSort(Sort.NameZA)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.NameZA);
+              }}
            />
-            <span className="label-text">{t("name_za")}</span>
+            <span className="label-text whitespace-nowrap">{t("name_za")}</span>
          </label>
        </li>
        <li>
@@ -96,9 +122,14 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.DescriptionAZ}
-              onChange={() => setSort(Sort.DescriptionAZ)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.DescriptionAZ);
+              }}
            />
-            <span className="label-text">{t("description_az")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description_az")}
+            </span>
          </label>
        </li>
        <li>
@@ -112,9 +143,14 @@ export default function SortDropdown({ sortBy, setSort, t }: Props) {
              name="sort-radio"
              className="radio checked:bg-primary"
              checked={sortBy === Sort.DescriptionZA}
-              onChange={() => setSort(Sort.DescriptionZA)}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSort(Sort.DescriptionZA);
+              }}
            />
-            <span className="label-text">{t("description_za")}</span>
+            <span className="label-text whitespace-nowrap">
+              {t("description_za")}
+            </span>
          </label>
        </li>
      </ul>
@@ -4,8 +4,8 @@ import useLocalSettingsStore from "@/store/localSettings";
 import { ViewMode } from "@/types/global";

 type Props = {
-  viewMode: string;
-  setViewMode: Dispatch<SetStateAction<string>>;
+  viewMode: ViewMode;
+  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 (
@@ -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;
@@ -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 };
@@ -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,
+};
@@ -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 };
@@ -0,0 +1,457 @@
+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: ["links"] }); // Temporary workaround
+      queryClient.invalidateQueries({ queryKey: ["dashboardData"] }); // Temporary workaround
+
+      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 }) => {
+      // TODO: Fix these
+      // queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+      //   if (!oldData) return undefined;
+      //   return oldData.map((e: any) =>
+      //     data.find((d: any) => d.id === e.id) ? data : e
+      //   );
+      // });
+      // 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: ["dashboardData"] }); // Temporary workaround
+
+      queryClient.invalidateQueries({ queryKey: ["collections"] });
+      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+    },
+  });
+};
+
+const resetInfiniteQueryPagination = async (
+  queryClient: any,
+  queryKey: any
+) => {
+  queryClient.setQueriesData({ queryKey }, (oldData: any) => {
+    if (!oldData) return undefined;
+
+    return {
+      pages: oldData.pages.slice(0, 1),
+      pageParams: oldData.pageParams.slice(0, 1),
+    };
+  });
+
+  await queryClient.invalidateQueries(queryKey);
+};
+
+export {
+  useLinks,
+  useAddLink,
+  useUpdateLink,
+  useDeleteLink,
+  useBulkDeleteLinks,
+  useUploadFile,
+  useGetLink,
+  useBulkEditLinks,
+  resetInfiniteQueryPagination,
+};
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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;
 }
@@ -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;
 }
@@ -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 };
-}
@@ -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;
 }
@@ -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));
@@ -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,
@@ -57,8 +57,8 @@ export default async function deleteCollection(
      },
    });

-    await removeFolder({ filePath: `archives/${collectionId}` });
-    await removeFolder({ filePath: `archives/preview/${collectionId}` });
+    removeFolder({ filePath: `archives/${collectionId}` });
+    removeFolder({ filePath: `archives/preview/${collectionId}` });

    await removeFromOrders(userId, collectionId);

@@ -100,8 +100,8 @@ async function deleteSubCollections(collectionId: number) {
      where: { id: subCollection.id },
    });

-    await removeFolder({ filePath: `archives/${subCollection.id}` });
-    await removeFolder({ filePath: `archives/preview/${subCollection.id}` });
+    removeFolder({ filePath: `archives/${subCollection.id}` });
+    removeFolder({ filePath: `archives/preview/${subCollection.id}` });
  }
 }

@@ -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)
  );

@@ -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 };
@@ -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)
-    return {
-      response: "Target collection is not accessible.",
-      status: 401,
-    };
-  else if (!targetCollectionMatchesData)
+  if (!targetCollectionMatchesData)
    return {
      response: "Target collection does not match the data.",
      status: 401,
@@ -86,9 +86,11 @@ export default async function postLink(
    else if (contentType === "image/png") imageExtension = "png";
  }

+  if (!link.tags) link.tags = [];
+
  const newLink = await prisma.link.create({
    data: {
-      url: link.url?.trim().replace(/\/+$/, "") || null,
+      url: link.url?.trim() || null,
      name,
      description: link.description,
      type: linkType,
@@ -98,7 +100,7 @@ export default async function postLink(
        },
      },
      tags: {
-        connectOrCreate: link.tags.map((tag) => ({
+        connectOrCreate: link.tags?.map((tag) => ({
          where: {
            name_ownerId: {
              name: tag.name.trim(),
@@ -63,11 +63,22 @@ async function processBookmarks(
        ) as Element;

        if (collectionName) {
-          collectionId = await createCollection(
-            userId,
-            (collectionName.children[0] as TextNode).content,
-            parentCollectionId
-          );
+          const collectionNameContent = (collectionName.children[0] as TextNode)
+            ?.content;
+          if (collectionNameContent) {
+            collectionId = await createCollection(
+              userId,
+              collectionNameContent,
+              parentCollectionId
+            );
+          } else {
+            // Handle the case when the collection name is empty
+            collectionId = await createCollection(
+              userId,
+              "Untitled Collection",
+              parentCollectionId
+            );
+          }
        }
        await processBookmarks(
          userId,
@@ -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: {
@@ -49,12 +49,18 @@ export default async function postUser(

  // Check username (if email was disabled)
  const checkUsername = RegExp("^[a-z0-9_-]{3,31}$");
-  if (!emailEnabled && !checkUsername.test(body.username?.toLowerCase() || ""))
+
+  const autoGeneratedUsername = "user" + Math.round(Math.random() * 1000000000);
+
+  if (body.username && !checkUsername.test(body.username?.toLowerCase()))
    return {
      response:
        "Username has to be between 3-30 characters, no spaces and special characters are allowed.",
      status: 400,
    };
+  else if (!body.username) {
+    body.username = autoGeneratedUsername;
+  }

  const checkIfUserExists = await prisma.user.findFirst({
    where: {
@@ -89,7 +95,8 @@ export default async function postUser(
        data: {
          name: body.name,
          username: emailEnabled
-            ? autoGeneratedUsername
+            ? (body.username as string).toLowerCase().trim() ||
+              autoGeneratedUsername
            : (body.username as string).toLowerCase().trim(),
          email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
          password: hashedPassword,
@@ -24,7 +24,12 @@ const generatePreview = async (
        1024 * 1024 * Number(process.env.PREVIEW_MAX_BUFFER || 0.1)
      ) {
        console.log("Error generating preview: Buffer size exceeded");
-        return;
+        return prisma.link.update({
+          where: { id: linkId },
+          data: {
+            preview: "unavailable",
+          },
+        });
      }

      await createFile({
@@ -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;
@@ -1,17 +1,10 @@
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import { Dispatch, SetStateAction } from "react";
-
-const getPublicCollectionData = async (
-  collectionId: number,
-  setData: Dispatch<
-    SetStateAction<CollectionIncludingMembersAndLinkCount | undefined>
-  >
-) => {
+const getPublicCollectionData = async (collectionId: number) => {
  const res = await fetch("/api/v1/public/collections/" + collectionId);

-  const data = await res.json();
+  if (res.status === 400)
+    return { response: "Collection not found.", status: 400 };

-  setData(data.response);
+  const data = await res.json();

  return data;
 };
@@ -2,7 +2,7 @@
 module.exports = {
  i18n: {
    defaultLocale: "en",
-    locales: ["en"],
+    locales: ["en", "it", "fr", "zh"],
  },
  reloadOnPrerender: process.env.NODE_ENV === "development",
 };
@@ -1,6 +1,6 @@
 {
  "name": "linkwarden",
-  "version": "v2.6.0",
+  "version": "v2.7.1",
  "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",
@@ -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
-      session={pageProps.session}
-      refetchOnWindowFocus={false}
-      basePath="/api/v1/auth"
-    >
-      <Head>
-        <title>Linkwarden</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/site.webmanifest" />
-      </Head>
-      <AuthRedirect>
-        {/* <GetData> */}
-        <Toaster
-          position="top-center"
-          reverseOrder={false}
-          toastOptions={{
-            className:
-              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
-          }}
-        >
-          {(t) => (
-            <ToastBar toast={t}>
-              {({ icon, message }) => (
-                <div
-                  className="flex flex-row"
-                  data-testid="toast-message-container"
-                  data-type={t.type}
-                >
-                  {icon}
-                  <span data-testid="toast-message">{message}</span>
-                  {t.type !== "loading" && (
-                    <button
-                      className="btn btn-xs outline-none btn-circle btn-ghost"
-                      data-testid="close-toast-button"
-                      onClick={() => toast.dismiss(t.id)}
-                    >
-                      <i className="bi bi-x"></i>
-                    </button>
-                  )}
-                </div>
-              )}
-            </ToastBar>
-          )}
-        </Toaster>
-        <Component {...pageProps} />
-        {/* </GetData> */}
-      </AuthRedirect>
-    </SessionProvider>
+    <QueryClientProvider client={queryClient}>
+      <SessionProvider
+        session={pageProps.session}
+        refetchOnWindowFocus={false}
+        basePath="/api/v1/auth"
+      >
+        <Head>
+          <title>Linkwarden</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="theme-color" content="#000000" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest" />
+        </Head>
+        <AuthRedirect>
+          {/* <GetData> */}
+          <Toaster
+            position="top-center"
+            reverseOrder={false}
+            toastOptions={{
+              className:
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
+            }}
+          >
+            {(t) => (
+              <ToastBar toast={t}>
+                {({ icon, message }) => (
+                  <div
+                    className="flex flex-row"
+                    data-testid="toast-message-container"
+                    data-type={t.type}
+                  >
+                    {icon}
+                    <span data-testid="toast-message">{message}</span>
+                    {t.type !== "loading" && (
+                      <button
+                        className="btn btn-xs outline-none btn-circle btn-ghost"
+                        data-testid="close-toast-button"
+                        onClick={() => toast.dismiss(t.id)}
+                      >
+                        <i className="bi bi-x"></i>
+                      </button>
+                    )}
+                  </div>
+                )}
+              </ToastBar>
+            )}
+          </Toaster>
+          <Component {...pageProps} />
+          {/* </GetData> */}
+        </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
-//   ) : (
-//     <></>
-//   );
-// }
@@ -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())
@@ -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 {
-        response: `Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.`,
-        status: 400,
-      };
+      return res.status(400).json({
+        response:
+          "Each collection owner can only have a maximum of ${MAX_LINKS_PER_USER} Links.",
+      });

    const NEXT_PUBLIC_MAX_FILE_BUFFER = Number(
      process.env.NEXT_PUBLIC_MAX_FILE_BUFFER || 10
@@ -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 (
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
-) {
+if (process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false") {
  // 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,
    })
  );

@@ -1135,10 +1186,42 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
              providerAccountId: account?.providerAccountId,
            },
          });
-          if (existingUser && newSsoUsersDisabled) {
+
+          if (!existingUser && newSsoUsersDisabled) {
            return false;
          }
+
+          // If user is already registered, link the provider
+          if (user.email && account) {
+            const findUser = await prisma.user.findFirst({
+              where: {
+                email: user.email,
+              },
+              include: {
+                accounts: true,
+              },
+            });
+
+            if (findUser && findUser.accounts.length === 0) {
+              await prisma.account.create({
+                data: {
+                  userId: findUser.id,
+                  type: account.type,
+                  provider: account.provider,
+                  providerAccountId: account.providerAccountId,
+                  id_token: account.id_token,
+                  access_token: account.access_token,
+                  refresh_token: account.refresh_token,
+                  expires_at: account.expires_at,
+                  token_type: account.token_type,
+                  scope: account.scope,
+                  session_state: account.session_state,
+                },
+              });
+            }
+          }
        }
+
        return true;
      },
      async jwt({ token, trigger, user }) {
@@ -1146,11 +1229,66 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
        if (trigger === "signIn" || trigger === "signUp")
          token.id = user?.id as number;

+        if (trigger === "signUp") {
+          const userExists = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+            include: {
+              accounts: true,
+            },
+          });
+
+          // Verify SSO user email
+          if (userExists && userExists.accounts.length > 0) {
+            await prisma.user.update({
+              where: {
+                id: userExists.id,
+              },
+              data: {
+                emailVerified: new Date(),
+              },
+            });
+          }
+
+          if (userExists && !userExists.username) {
+            const autoGeneratedUsername =
+              "user" + Math.round(Math.random() * 1000000000);
+
+            await prisma.user.update({
+              where: {
+                id: token.id,
+              },
+              data: {
+                username: autoGeneratedUsername,
+              },
+            });
+          }
+        } else if (trigger === "signIn") {
+          const user = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+          });
+
+          if (user && !user.username) {
+            const autoGeneratedUsername =
+              "user" + Math.round(Math.random() * 1000000000);
+
+            await prisma.user.update({
+              where: { id: user.id },
+              data: { username: autoGeneratedUsername },
+            });
+          }
+        }
+
        return token;
      },
      async session({ session, token }) {
        session.user.id = token.id;

+        console.log("session", session);
+
        if (STRIPE_SECRET_KEY) {
          const user = await prisma.user.findUnique({
            where: {
@@ -1162,6 +1300,7 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
          });

          if (user) {
+            //
            const subscribedUser = await verifySubscription(user);
          }
        }
@@ -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) {
@@ -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;

@@ -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") {
@@ -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 });
  }
@@ -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)
@@ -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) <
@@ -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,
@@ -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,
@@ -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 === undefined
+      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED !== "false"
        ? "true"
        : "false",
    emailEnabled:
@@ -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;
@@ -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 });
  }
@@ -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 });
  }
@@ -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") {
@@ -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 });
  }
@@ -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();
@@ -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 { 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 { 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,
-          name: account.name,
-          username: account.username as string,
-          image: account.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
-          archiveAsMonolith: account.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot 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>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (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>
@@ -142,7 +134,7 @@ export default function Index() {
              >
                <i className="bi-three-dots text-xl" title="More"></i>
              </div>
-              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+              <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
                {permissions === true && (
                  <li>
                    <div
@@ -152,6 +144,7 @@ export default function Index() {
                        (document?.activeElement as HTMLElement)?.blur();
                        setEditCollectionModal(true);
                      }}
+                      className="whitespace-nowrap"
                    >
                      {t("edit_collection_info")}
                    </div>
@@ -165,6 +158,7 @@ export default function Index() {
                      (document?.activeElement as HTMLElement)?.blur();
                      setEditCollectionSharingModal(true);
                    }}
+                    className="whitespace-nowrap"
                  >
                    {permissions === true
                      ? t("share_and_collaborate")
@@ -180,6 +174,7 @@ export default function Index() {
                        (document?.activeElement as HTMLElement)?.blur();
                        setNewCollectionModal(true);
                      }}
+                      className="whitespace-nowrap"
                    >
                      {t("create_subcollection")}
                    </div>
@@ -193,6 +188,7 @@ export default function Index() {
                      (document?.activeElement as HTMLElement)?.blur();
                      setDeleteCollectionModal(true);
                    }}
+                    className="whitespace-nowrap"
                  >
                    {permissions === true
                      ? t("delete_collection")
@@ -323,16 +319,14 @@ export default function Index() {
          </p>
        </LinkListOptions>

-        {links.some((e) => e.collectionId === Number(router.query.id)) ? (
-          <LinkComponent
-            editMode={editMode}
-            links={links.filter(
-              (e) => e.collection.id === activeCollection?.id
-            )}
-          />
-        ) : (
-          <NoLinksFound />
-        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
+        {!data.isLoading && links && !links[0] && <NoLinksFound />}
      </div>
      {activeCollection && (
        <>
@@ -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 [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+  const { data: collections = [] } = useCollections();
+  const [sortBy, setSortBy] = useState<Sort>(
+    Number(localStorage.getItem("sortBy")) ?? Sort.DateNewestFirst
+  );
  const [sortedCollections, setSortedCollections] = useState(collections);

  const { data } = useSession();
@@ -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";
@@ -43,6 +43,12 @@ export default function EmailConfirmaion() {

        <div className="divider my-3"></div>

+        {router.query.email && typeof router.query.email === "string" && (
+          <p className="text-center font-bold mb-3 break-all">
+            {decodeURIComponent(router.query.email)}
+          </p>
+        )}
+
        <p>{t("verification_email_sent_desc")}</p>

        <div className="mx-auto w-fit mt-3">
@@ -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 { links } = useLinkStore();
-  const { tags } = useTagStore();
+  const { data: collections = [] } = useCollections();
+  const dashboardData = useDashboardData();
+  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>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (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">
@@ -211,13 +214,14 @@ export default function Dashboard() {
                    <i className="bi-cloud-upload text-xl duration-100"></i>
                    <p>{t("import_links")}</p>
                  </div>
-                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
+                  <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1">
                    <li>
                      <label
                        tabIndex={0}
                        role="button"
                        htmlFor="import-linkwarden-file"
                        title={t("from_linkwarden")}
+                        className="whitespace-nowrap"
                      >
                        {t("from_linkwarden")}
                        <input
@@ -238,6 +242,7 @@ export default function Dashboard() {
                        role="button"
                        htmlFor="import-html-file"
                        title={t("from_html")}
+                        className="whitespace-nowrap"
                      >
                        {t("from_html")}
                        <input
@@ -258,6 +263,7 @@ export default function Dashboard() {
                        role="button"
                        htmlFor="import-wallabag-file"
                        title={t("from_wallabag")}
+                        className="whitespace-nowrap"
                      >
                        {t("from_wallabag")}
                        <input
@@ -300,12 +306,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>
          ) : (
@@ -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>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (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,11 +51,16 @@ export default function Links() {
          />
        </LinkListOptions>

-        {links[0] ? (
-          <LinkComponent editMode={editMode} links={links} />
-        ) : (
+        {!data.isLoading && links && !links[0] && (
          <NoLinksFound text={t("you_have_not_added_any_links")} />
        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
      </div>
    </MainLayout>
  );
@@ -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<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (localStorage.getItem("viewMode") as 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,7 @@ export default function PinnedLinks() {
          />
        </LinkListOptions>

-        {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent editMode={editMode} links={links} />
-        ) : (
+        {!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"
@@ -82,6 +67,13 @@ export default function PinnedLinks() {
            </p>
          </div>
        )}
+        <Links
+          editMode={editMode}
+          links={links}
+          layout={viewMode}
+          placeholderCount={1}
+          useData={data}
+        />
      </div>
    </MainLayout>
  );
@@ -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"
@@ -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 (
@@ -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,22 +16,17 @@ 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 { 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 router = useRouter();

  const [collectionOwner, setCollectionOwner] = useState({
@@ -54,9 +47,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)
@@ -73,37 +68,31 @@ export default function PublicCollections() {

  useEffect(() => {
    if (router.query.id) {
-      getPublicCollectionData(Number(router.query.id), setCollection);
+      getPublicCollectionData(Number(router.query.id)).then((res) => {
+        if (res.status === 400) {
+          router.push("/dashboard");
+        } else {
+          setCollection(res.response);
+        }
+      });
    }
-  }, [collections]);
+  }, []);

  useEffect(() => {
-    const fetchOwner = async () => {
-      if (collection) {
-        const owner = await getPublicUserData(collection.ownerId as number);
-        setCollectionOwner(owner);
-      }
-    };
-
-    fetchOwner();
+    if (collection) {
+      getPublicUserData(collection.ownerId as number).then((owner) =>
+        setCollectionOwner(owner)
+      );
+    }
  }, [collection]);

  const [editCollectionSharingModal, setEditCollectionSharingModal] =
    useState(false);

-  const [viewMode, setViewMode] = useState<string>(
-    localStorage.getItem("viewMode") || ViewMode.Card
+  const [viewMode, setViewMode] = useState<ViewMode>(
+    (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,21 +216,21 @@ export default function PublicCollections() {
            />
          </LinkListOptions>

-          {links[0] ? (
-            <LinkComponent
-              links={links
-                .filter((e) => e.collectionId === Number(router.query.id))
-                .map((e, i) => {
-                  const linkWithCollectionData = {
-                    ...e,
-                    collection: collection, // Append collection data
-                  };
-                  return linkWithCollectionData;
-                })}
-            />
-          ) : (
-            <p>{t("collection_is_empty")}</p>
-          )}
+          <Links
+            links={
+              links?.map((e, i) => {
+                const linkWithCollectionData = {
+                  ...e,
+                  collection: collection, // Append collection data
+                };
+                return linkWithCollectionData;
+              }) as any
+            }
+            layout={viewMode}
+            placeholderCount={1}
+            useData={data}
+          />
+          {!data.isLoading && links && !links[0] && <p>{t("nothing_found")}</p>}

          {/* <p className="text-center text-neutral">
        List created with <span className="text-black">Linkwarden.</span>
@@ -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 (
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Daniel	a276065288	Update .env.sample	2024-09-15 13:51:09 -04:00
Daniel	1461caf68a	Merge pull request #748 from linkwarden/hotfix bug fix	2024-08-29 12:49:48 -04:00
daniel31x13	e7c7fedf8b	bug fix	2024-08-29 12:47:23 -04:00
Daniel	5f4e0d4262	Merge pull request #731 from linkwarden/hotfix bugs fixed	2024-08-19 23:37:30 -04:00
daniel31x13	c072fed99f	bugs fixed	2024-08-19 23:36:28 -04:00
Daniel	b4a9f917b5	Merge pull request #728 from linkwarden/hotfix hotfix	2024-08-19 19:30:26 -04:00
daniel31x13	078e5ba95f	minor change	2024-08-19 19:30:01 -04:00
daniel31x13	495509c888	bug fix	2024-08-19 19:25:13 -04:00
Daniel	03b4240b8b	Merge pull request #720 from linkwarden/revert-719-feat/customizable-links Revert "Feat/customizable links"	2024-08-18 14:47:29 -04:00
Daniel	9a3e82470a	Revert "Feat/customizable links"	2024-08-18 14:46:52 -04:00
Daniel	ee2319996b	Merge pull request #719 from linkwarden/feat/customizable-links Feat/customizable links	2024-08-18 14:46:21 -04:00
daniel31x13	c979adfe69	small improvements	2024-08-18 14:45:40 -04:00
daniel31x13	17d1cb45e3	minor improvement	2024-08-18 13:49:33 -04:00
daniel31x13	c18a5f4162	added details drawer	2024-08-18 02:55:59 -04:00
daniel31x13	a40026040c	icon picker component	2024-08-16 23:00:37 -04:00
Daniel	f944345745	Merge pull request #708 from linkwarden/dev bump version	2024-08-16 13:45:28 -04:00
daniel31x13	6b647573f0	bump version	2024-08-16 13:44:53 -04:00
Daniel	d81493e021	Merge pull request #707 from linkwarden/dev bug fix	2024-08-16 13:43:57 -04:00
daniel31x13	03f4523d57	bug fix	2024-08-16 13:42:55 -04:00
Daniel	c24e76adac	Merge pull request #706 from linkwarden/dev v2.7.0	2024-08-16 12:36:43 -04:00
daniel31x13	5d26617251	bug fixed	2024-08-16 12:35:04 -04:00
daniel31x13	0e47ad9920	bump version	2024-08-15 16:42:36 -04:00
daniel31x13	ca45076b6c	minor fix	2024-08-15 15:37:47 -04:00
Daniel	3bf6dcad2f	Merge pull request #692 from phillibl/main Update [...nextauth].ts to allow existing SSO user sign	2024-08-15 13:45:07 -04:00
daniel31x13	23860b8511	minor fix	2024-08-15 11:00:29 -04:00
daniel31x13	8758976f8d	minor fix	2024-08-15 10:30:44 -04:00
Daniel	550dbd2bf0	Merge pull request #704 from shichen437/dev feat(lang): add chinese translate	2024-08-15 08:49:26 -04:00
shichen437	04d2b3c6b2	feat(lang): add chinese translate	2024-08-15 17:20:46 +08:00
daniel31x13	7bd0e29538	small improvement	2024-08-14 20:07:06 -04:00
daniel31x13	5baf55694c	minor improvement	2024-08-14 19:23:51 -04:00
daniel31x13	193a70c6e8	fix dropdown text wrapping in other languages	2024-08-14 19:13:19 -04:00
daniel31x13	5b430cf31e	add french translation	2024-08-14 17:49:53 -04:00
Daniel	684609a1dd	Merge pull request #654 from zarevskaya/patch-1 Add french translation	2024-08-14 17:43:15 -04:00
Daniel	ebb2016915	Merge pull request #671 from jlssmt/main handle undefined	2024-08-14 17:40:28 -04:00
daniel31x13	c103b66694	Merge branch 'dev' of https://github.com/linkwarden/linkwarden into dev	2024-08-14 17:26:40 -04:00
daniel31x13	863bcc3838	bug fixed	2024-08-14 17:26:38 -04:00
Daniel	66b0aacc3f	Merge pull request #660 from IsaacWise06/issue-646 fix(collections): Redirect to dashboard or login for non-public collections	2024-08-14 17:04:25 -04:00
Daniel	299498ffa6	Merge pull request #703 from linkwarden/chore/react-query-implementation Chore/react query implementation	2024-08-14 16:45:40 -04:00
daniel31x13	8031432995	bug fix	2024-08-14 16:44:07 -04:00
daniel31x13	9cc3a7206e	changes and improvements	2024-08-14 15:22:28 -04:00
daniel31x13	d15d965139	added skeleton loading	2024-08-14 13:14:06 -04:00
daniel31x13	bc04ea0fe8	fixed other views alongside card view	2024-08-13 03:19:28 -04:00
daniel31x13	bd34dacf21	bugs fixed	2024-08-13 03:01:02 -04:00
daniel31x13	80f366cd7b	refactored link state management + a lot of other changes...	2024-08-13 00:08:57 -04:00
phillibl	c5602dc79f	Merge pull request #1 from phillibl/phillibl-SSO-user-signin Update [...nextauth].ts to allow existing SSO user sign	2024-08-07 05:44:19 -04:00
phillibl	0158e58d90	Update [...nextauth].ts Fixed issue where sign in would fail for existing user if DISABLE_NEW_SSO_USERS = true	2024-08-07 05:29:10 -04:00
jlssmt	102690fc10	handle undefined	2024-08-02 09:07:13 +02:00
daniel31x13	a73e5fa6c6	add initialData to queries	2024-08-01 18:40:08 -04:00
daniel31x13	75b1ae738f	remove unused code	2024-08-01 17:43:46 -04:00
daniel31x13	8563a09a07	refactor token store	2024-08-01 17:42:57 -04:00
daniel31x13	da8dc83b8f	refactor tags store	2024-08-01 17:23:51 -04:00
daniel31x13	e889509697	refactor (admin/)users store	2024-08-01 16:54:19 -04:00
Daniel	237499fd03	Merge pull request #684 from linkwarden/daniel31x13-patch-1 Update README	2024-08-01 15:55:20 -04:00
Daniel	9a287d1aef	Merge pull request #683 from linkwarden/daniel31x13-patch-1 Update README.md	2024-08-01 15:54:29 -04:00
Daniel	299a2331ff	Update README.md	2024-08-01 15:54:00 -04:00
daniel31x13	be5400f7cb	rename users hook to user	2024-07-31 14:15:50 -04:00
daniel31x13	099bc9e054	remove old code	2024-07-30 23:23:58 -04:00
daniel31x13	5c5dd967c4	refactor account store + much smoother collection listing updates	2024-07-30 23:19:29 -04:00
daniel31x13	d1ed33b532	bug fix	2024-07-30 14:59:18 -04:00
daniel31x13	05c5bdf63c	refactor collections store	2024-07-30 14:57:09 -04:00
Isaac Wise	9d91d2064b	Merge branch 'linkwarden:main' into issue-646	2024-07-27 17:57:25 -05:00
Daniel	15a0084fb7	Merge pull request #677 from linkwarden/dev bump version	2024-07-26 12:01:38 -04:00
daniel31x13	cd82083e09	bump version	2024-07-26 12:00:46 -04:00
Daniel	c0abf2f411	Merge pull request #676 from linkwarden/dev bug fixed	2024-07-26 11:55:07 -04:00
daniel31x13	061e22d225	bug fixed	2024-07-26 11:54:13 -04:00
Daniel	a886437589	Merge pull request #674 from linkwarden/dev merged the two migration scripts for v2.6.1	2024-07-25 23:44:46 -04:00
daniel31x13	8e6f88d29f	merged the two migration scripts for v2.6.1	2024-07-25 23:43:26 -04:00
Daniel	a82c4ef85f	Merge pull request #670 from linkwarden/dev Dev	2024-07-25 14:24:24 -04:00
daniel31x13	6983e41576	minor improvement	2024-07-25 14:23:33 -04:00
daniel31x13	7e96ba63df	minor improvement	2024-07-25 14:21:39 -04:00
Daniel	7036b46084	Merge pull request #668 from linkwarden/dev made script more efficient	2024-07-25 14:16:16 -04:00
daniel31x13	af7f0fb47c	make script more efficient	2024-07-25 14:15:08 -04:00
Daniel	2bba8198b8	Merge pull request #667 from linkwarden/dev minor fix	2024-07-25 13:58:13 -04:00
daniel31x13	9d8ae6970c	minor fix	2024-07-25 13:57:33 -04:00
Daniel	96a70a9689	Merge pull request #666 from linkwarden/dev update version number	2024-07-25 13:46:59 -04:00
daniel31x13	6cae2fb634	update version number	2024-07-25 13:45:44 -04:00
Daniel	288fd9df87	Merge pull request #665 from linkwarden/dev bug fixed	2024-07-25 13:45:03 -04:00
daniel31x13	5e6d46b6b9	bug fixed	2024-07-25 13:43:55 -04:00
Isaac Wise	7d43ed52a4	format	2024-07-22 17:50:24 -05:00
Isaac Wise	614653bf29	Merge branch 'linkwarden:main' into issue-646	2024-07-22 17:41:34 -05:00
Isaac Wise	1b9dafbe47	Handle 400 error code when accesing a non public collection	2024-07-22 17:39:38 -05:00
zarev	abc93f1bf9	Update common.json Correction	2024-07-20 09:55:51 +02:00
zarev	c23964a46d	Create common.json In french, if you want it ;)	2024-07-19 22:37:46 +02:00
Daniel	a76e996fc1	Merge pull request #653 from linkwarden/dev v2.6.0	2024-07-19 08:59:54 -04:00
daniel31x13	2264abd384	bug fixed	2024-07-18 20:29:33 -04:00
daniel31x13	6544e3ecbb	added translations to demo info + minor improvement	2024-07-18 16:48:14 -04:00
daniel31x13	a8ffbc87d1	UI improvements	2024-07-18 16:29:59 -04:00
daniel31x13	92c7f40956	bug fixed	2024-07-18 10:46:21 -04:00
daniel31x13	6c29d905d9	minor fix	2024-07-18 10:27:32 -04:00
daniel31x13	9b85a2b1bb	minor improvements	2024-07-18 09:51:16 -04:00
Daniel	cebe746ca7	Merge pull request #638 from danilo-tecnosys/italian-language Added Italian translation for common.js and add language tag ‘it’ in next-i18next.config.js	2024-07-18 09:33:38 -04:00
Daniel	5b0297bfe0	Merge pull request #651 from linkwarden:feat/demo-mode added read-only mode + visual improvements	2024-07-16 20:42:27 -04:00
daniel31x13	9c5226ee51	added read-only mode + visual improvements	2024-07-16 20:33:33 -04:00
daniel31x13	6d30912812	Revert "simplified the dockerfile" This reverts commit `78111f010b`.	2024-07-13 18:13:32 -04:00
daniel31x13	78111f010b	simplified the dockerfile	2024-07-13 17:58:38 -04:00
Danilo	a2637d4526	Rename common.js to common.json	2024-07-07 19:43:14 +02:00
Danilo	479995366a	Update next-i18next.config.js for italian language	2024-07-07 19:36:20 +02:00
Danilo	7edd7f893b	Create common.js in italian language	2024-07-07 19:34:06 +02:00
daniel31x13	0185ec57c7	add import limit for the environment variables	2024-07-05 11:36:16 -04:00
daniel31x13	7c95761990	added button for administration	2024-07-03 17:29:33 -04:00
Daniel	c67526e54c	Merge pull request #633 from linkwarden/twihno-azure-ad Twihno azure ad	2024-06-30 15:09:26 +03:30
daniel31x13	8db5307747	Merge branch 'azure-ad' of https://github.com/twihno/linkwarden into twihno-azure-ad	2024-06-30 07:32:10 -04:00
Daniel	54beb50576	Merge pull request #598 from LeonKohli/main Fix bookmark import issue with missing folder names	2024-06-30 14:42:07 +03:30
Daniel	9ab01da369	Merge pull request #619 from linkwarden/feat/single-file Feat/Monolith + Optimizations	2024-06-30 01:28:22 +03:30
Thomas Schuster	7e98de6122	fix azure errors	2024-05-26 17:31:22 +02:00
Thomas Schuster	5f34f03355	fix github documentation	2024-05-26 17:31:11 +02:00
Thomas Schuster	4344183564	fix build error	2024-05-26 17:30:49 +02:00
Thomas Schuster	bc3ec3cc54	fix small mistakes	2024-05-26 16:52:53 +02:00
Thomas Schuster	fc97735703	fix battlenet typo	2024-05-26 16:50:55 +02:00
Thomas Schuster	8f38c82ed7	add azure ad authentication	2024-05-26 16:50:03 +02:00
LeonKohli	74030b26c5	Fix bookmark import issue with missing folder names	2024-05-08 21:00:12 +02:00