minor change

fix(links): Bulk deleting all links still showing buttons

.env.sample

@@ -20,6 +20,7 @@ MAX_LINKS_PER_USER=
 ARCHIVE_TAKE_COUNT=
 BROWSER_TIMEOUT=
 IGNORE_UNAUTHORIZED_CA=
+IGNORE_HTTPS_ERRORS=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -34,6 +35,15 @@ NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
 
+# Proxy settings
+PROXY=
+PROXY_USERNAME=
+PROXY_PASSWORD=
+PROXY_BYPASS=
+
+# PDF archive settings
+PDF_MARGIN_TOP=
+PDF_MARGIN_BOTTOM=
 
 #
 # SSO Providers

README.md

@@ -59,7 +59,7 @@ We've forked the old version from the current repository into [this repo](https:
 
 - 📸 Auto capture a screenshot, PDF, and readable view of each webpage.
 - 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot. (Optional)
-- 📂 Organize links by collection, name, description and multiple tags.
+- 📂 Organize links by collection, sub-collection, name, description and multiple tags.
 - 👥 Collaborate on gathering links in a collection.
 - 🎛️ Customize the permissions of each member.
 - 🌐 Share your collected links and preserved formats with the world.
@@ -70,6 +70,10 @@ We've forked the old version from the current repository into [this repo](https:
 - 🧩 Browser extension, managed by the community. [Star it here!](https://github.com/linkwarden/browser-extension)
 - ⬇️ Import and export your bookmarks.
 - 🔐 SSO integration. (Enterprise and Self-hosted users only)
+- 📦 Installable Progressive Web App (PWA).
+- 🍎 iOS Shortcut to save links to Linkwarden.
+- 🔑 API keys.
+- ✅ Bulk actions.
 - ✨ And so many more features!
 
 ## Like what we're doing? Give us a Star ⭐

components/AnnouncementBar.tsx

@@ -12,11 +12,11 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
         <div className="w-fit font-semibold">
           🎉️ See what&apos;s new in{" "}
           <Link
-            href="https://blog.linkwarden.app/releases/v2.4"
+            href="https://blog.linkwarden.app/releases/v2.5"
             target="_blank"
             className="underline hover:opacity-50 duration-100"
           >
-            Linkwarden v2.4
+            Linkwarden v2.5
           </Link>
           ! 🥳️
         </div>

components/CollectionListing.tsx

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

components/CollectionSelection.tsx

@@ -1,160 +0,0 @@
-import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
-
-type Props = {
-  links: boolean;
-};
-
-const CollectionSelection = ({ links }: Props) => {
-  const { collections } = useCollectionStore();
-  const [active, setActive] = useState("");
-  const router = useRouter();
-
-  useEffect(() => {
-    setActive(router.asPath);
-  }, [router, collections]);
-
-  return (
-    <div>
-      {collections[0] ? (
-        collections
-          .sort((a, b) => a.name.localeCompare(b.name))
-          .filter((e) => e.parentId === null)
-          .map((e, i) => (
-            <CollectionItem
-              key={i}
-              collection={e}
-              active={active}
-              collections={collections}
-            />
-          ))
-      ) : (
-        <div
-          className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-        >
-          <p className="text-neutral text-xs font-semibold truncate w-full pr-7">
-            You Have No Collections...
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CollectionSelection;
-
-const CollectionItem = ({
-  collection,
-  active,
-  collections,
-}: {
-  collection: CollectionIncludingMembersAndLinkCount;
-  active: string;
-  collections: CollectionIncludingMembersAndLinkCount[];
-}) => {
-  const hasChildren = collections.some((e) => e.parentId === collection.id);
-
-  const router = useRouter();
-
-  // Check if the current collection or any of its subcollections is active
-  const isActiveOrParentOfActive = React.useMemo(() => {
-    const isActive = active === `/collections/${collection.id}`;
-    if (isActive) return true;
-
-    const checkIfParentOfActive = (parentId: number): boolean => {
-      return collections.some((e) => {
-        if (e.id === parseInt(active.split("/collections/")[1])) {
-          if (e.parentId === parentId) return true;
-          if (e.parentId) return checkIfParentOfActive(e.parentId);
-        }
-        return false;
-      });
-    };
-
-    return checkIfParentOfActive(collection.id as number);
-  }, [active, collection.id, collections]);
-
-  const [isOpen, setIsOpen] = useState(isActiveOrParentOfActive);
-
-  useEffect(() => {
-    setIsOpen(isActiveOrParentOfActive);
-  }, [isActiveOrParentOfActive]);
-
-  return hasChildren ? (
-    <details open={isOpen}>
-      <summary
-        className={`${
-          active === `/collections/${collection.id}`
-            ? "bg-primary/20"
-            : "hover:bg-neutral/20"
-        } duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2`}
-      >
-        <Link href={`/collections/${collection.id}`} className="w-full">
-          <div
-            className={`py-1 cursor-pointer flex items-center gap-2 w-full h-8 capitalize`}
-          >
-            <i
-              className="bi-folder-fill text-2xl drop-shadow"
-              style={{ color: collection.color }}
-            ></i>
-            <p className="truncate w-full">{collection.name}</p>
-
-            {collection.isPublic ? (
-              <i
-                className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
-                title="This collection is being shared publicly."
-              ></i>
-            ) : undefined}
-            <div className="drop-shadow text-neutral text-xs">
-              {collection._count?.links}
-            </div>
-          </div>
-        </Link>
-      </summary>
-
-      {hasChildren && (
-        <div className="ml-3 pl-1 border-l border-neutral-content">
-          {collections
-            .filter((e) => e.parentId === collection.id)
-            .map((subCollection) => (
-              <CollectionItem
-                key={subCollection.id}
-                collection={subCollection}
-                active={active}
-                collections={collections}
-              />
-            ))}
-        </div>
-      )}
-    </details>
-  ) : (
-    <Link href={`/collections/${collection.id}`} className="w-full">
-      <div
-        className={`${
-          active === `/collections/${collection.id}`
-            ? "bg-primary/20"
-            : "hover:bg-neutral/20"
-        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize mb-1`}
-      >
-        <i
-          className="bi-folder-fill text-2xl drop-shadow"
-          style={{ color: collection.color }}
-        ></i>
-        <p className="truncate w-full">{collection.name}</p>
-
-        {collection.isPublic ? (
-          <i
-            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
-            title="This collection is being shared publicly."
-          ></i>
-        ) : undefined}
-        <div className="drop-shadow text-neutral text-xs">
-          {collection._count?.links}
-        </div>
-      </div>
-    </Link>
-  );
-};

components/FilterSearchDropdown.tsx

@@ -26,7 +26,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-44 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -84,27 +84,6 @@ export default function FilterSearchDropdown({
             <span className="label-text">Description</span>
           </label>
         </li>
-        <li>
-          <label
-            className="label cursor-pointer flex justify-start"
-            tabIndex={0}
-            role="button"
-          >
-            <input
-              type="checkbox"
-              name="search-filter-checkbox"
-              className="checkbox checkbox-primary"
-              checked={searchFilter.textContent}
-              onChange={() => {
-                setSearchFilter({
-                  ...searchFilter,
-                  textContent: !searchFilter.textContent,
-                });
-              }}
-            />
-            <span className="label-text">Full Content</span>
-          </label>
-        </li>
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -126,6 +105,29 @@ export default function FilterSearchDropdown({
             <span className="label-text">Tags</span>
           </label>
         </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-between"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.textContent}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  textContent: !searchFilter.textContent,
+                });
+              }}
+            />
+            <span className="label-text">Full Content</span>
+
+            <div className="ml-auto badge badge-sm badge-neutral">Slower</div>
+          </label>
+        </li>
       </ul>
     </div>
   );

components/InputSelect/CollectionSelection.tsx

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

components/LinkViews/Layouts/CardView.tsx

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

components/LinkViews/Layouts/ListView.tsx

@@ -1,13 +1,18 @@
 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 flex-col">
+    <div className="flex gap-1 flex-col">
       {links.map((e, i) => {
         return (
           <LinkList
@@ -15,9 +20,19 @@ export default function ListView({
             link={e}
             count={i}
             flipDropdown={i === links.length - 1}
+            editMode={editMode}
           />
         );
       })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
     </div>
   );
 }

components/LinkViews/LinkCard.tsx

@@ -14,25 +14,41 @@ import Image from "next/image";
 import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 import Link from "next/link";
 import LinkIcon from "./LinkComponents/LinkIcon";
-import LinkGroupedIconURL from "./LinkComponents/LinkGroupedIconURL";
 import useOnScreen from "@/hooks/useOnScreen";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
   flipDropdown?: boolean;
+  editMode?: boolean;
 };
 
-export default function LinkGrid({
-  link,
-  count,
-  className,
-  flipDropdown,
-}: Props) {
+export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const { collections } = useCollectionStore();
+  const { account } = useAccountStore();
 
-  const { links, getLink } = useLinkStore();
+  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
 
   let shortendURL;
 
@@ -59,6 +75,7 @@ export default function LinkGrid({
 
   const ref = useRef<HTMLDivElement>(null);
   const isVisible = useOnScreen(ref);
+  const permissions = usePermissions(collection?.id as number);
 
   useEffect(() => {
     let interval: any;
@@ -82,15 +99,36 @@ export default function LinkGrid({
 
   const [showInfo, setShowInfo] = useState(false);
 
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  // window.open ('www.yourdomain.com', '_ blank');
   return (
     <div
       ref={ref}
-      className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      onClick={() =>
+        selectable
+          ? handleCheckboxClick(link)
+          : editMode
+            ? toast.error(
+                "You don't have permission to edit or delete this item."
+              )
+            : undefined
+      }
     >
-      <Link
-        href={link.url || ""}
-        target="_blank"
+      <div
         className="rounded-2xl cursor-pointer"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, account), "_blank")
+        }
       >
         <div className="relative rounded-t-2xl h-40 overflow-hidden">
           {previewAvailable(link) ? (
@@ -112,15 +150,7 @@ export default function LinkGrid({
           ) : (
             <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
           )}
-          <div
-            style={
-              {
-                // background:
-                //   "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
-              }
-            }
-            className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
-          >
+          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
             <LinkIcon link={link} />
           </div>
         </div>
@@ -132,27 +162,33 @@ export default function LinkGrid({
             {unescapeString(link.name || link.description) || link.url}
           </p>
 
-          <div title={link.url || ""} className="w-fit">
-            <div className="flex gap-1 item-center select-none text-neutral mt-1">
-              <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
-              <p className="text-sm truncate">{shortendURL}</p>
-            </div>
-          </div>
+          <Link
+            href={link.url || ""}
+            target="_blank"
+            title={link.url || ""}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+          >
+            <i className="bi-link-45deg text-lg mt-[0.10rem] leading-none"></i>
+            <p className="text-sm truncate">{shortendURL}</p>
+          </Link>
         </div>
 
         <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
         <div className="flex justify-between text-xs text-neutral px-3 pb-1">
           <div className="cursor-pointer w-fit">
-            {collection ? (
+            {collection && (
               <LinkCollection link={link} collection={collection} />
-            ) : undefined}
+            )}
           </div>
           <LinkDate link={link} />
         </div>
-      </Link>
+      </div>
 
-      {showInfo ? (
+      {showInfo && (
         <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
           <div
             onClick={() => setShowInfo(!showInfo)}
@@ -172,7 +208,7 @@ export default function LinkGrid({
               </span>
             )}
           </p>
-          {link.tags[0] ? (
+          {link.tags[0] && (
             <>
               <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
 
@@ -195,9 +231,9 @@ export default function LinkGrid({
                 </div>
               </div>
             </>
-          ) : undefined}
+          )}
         </div>
-      ) : undefined}
+      )}
 
       <LinkActions
         link={link}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -80,22 +80,20 @@ 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 translate-y-10">
-          {permissions === true ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  pinLink();
-                }}
-              >
-                {link?.pinnedBy && link.pinnedBy[0]
-                  ? "Unpin"
-                  : "Pin to Dashboard"}
-              </div>
-            </li>
-          ) : undefined}
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                pinLink();
+              }}
+            >
+              {link?.pinnedBy && link.pinnedBy[0]
+                ? "Unpin"
+                : "Pin to Dashboard"}
+            </div>
+          </li>
           {linkInfo !== undefined && toggleShowInfo ? (
             <li>
               <div

components/LinkViews/LinkComponents/LinkCollection.tsx

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

components/LinkViews/LinkGrid.tsx

@@ -18,7 +18,7 @@ type Props = {
   className?: string;
 };
 
-export default function LinkGrid({ link, count, className }: Props) {
+export default function LinkGrid({ link }: Props) {
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();

components/LinkViews/LinkList.tsx

@@ -12,23 +12,49 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
 import { isPWA } from "@/lib/client/utils";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
   flipDropdown?: boolean;
+  editMode?: boolean;
 };
 
 export default function LinkCardCompact({
   link,
-  count,
-  className,
   flipDropdown,
+  editMode,
 }: Props) {
   const { collections } = useCollectionStore();
+  const { account } = useAccountStore();
+  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const { links } = useLinkStore();
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    const linkIndex = selectedLinks.findIndex(
+      (selectedLink) => selectedLink.id === link.id
+    );
+
+    if (linkIndex !== -1) {
+      const updatedLinks = [...selectedLinks];
+      updatedLinks.splice(linkIndex, 1);
+      setSelectedLinks(updatedLinks);
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
 
   let shortendURL;
 
@@ -53,26 +79,62 @@ export default function LinkCardCompact({
     );
   }, [collections, links]);
 
+  const permissions = usePermissions(collection?.id as number);
+
   const [showInfo, setShowInfo] = useState(false);
 
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border border-primary bg-base-300"
+    : "border-transparent";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
   return (
     <>
       <div
-        className={`border-neutral-content relative ${
+        className={`${selectedStyle} border relative items-center flex ${
           !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
         } duration-200 rounded-lg`}
+        onClick={() =>
+          selectable
+            ? handleCheckboxClick(link)
+            : editMode
+              ? toast.error(
+                  "You don't have permission to edit or delete this item."
+                )
+              : undefined
+        }
       >
-        <Link
-          href={link.url || ""}
-          target="_blank"
-          className="flex items-start cursor-pointer"
+        {/* {showCheckbox &&
+          editMode &&
+          (permissions === true ||
+            permissions?.canCreate ||
+            permissions?.canDelete) && (
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary my-auto mr-2"
+              checked={selectedLinks.some(
+                (selectedLink) => selectedLink.id === link.id
+              )}
+              onChange={() => handleCheckboxClick(link)}
+            />
+          )} */}
+        <div
+          className="flex items-center cursor-pointer"
+          onClick={() =>
+            !editMode && window.open(generateLinkHref(link, account), "_blank")
+          }
         >
           <div className="shrink-0">
             <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
-            <p className="line-clamp-1 mr-8 text-primary">
+            <p className="line-clamp-1 mr-8 text-primary select-none">
               {unescapeString(link.name || link.description) || link.url}
             </p>
 
@@ -82,12 +144,20 @@ export default function LinkCardCompact({
                   <LinkCollection link={link} collection={collection} />
                 ) : undefined}
                 {link.url ? (
-                  <div className="flex items-center gap-1 w-fit text-neutral truncate">
-                    <i className="bi-link-45deg text-lg" />
-                    <p className="truncate w-full">{shortendURL}</p>
-                  </div>
+                  <Link
+                    href={link.url || ""}
+                    target="_blank"
+                    title={link.url || ""}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+                  >
+                    <i className="bi-link-45deg text-lg mt-[0.1rem] leading-none"></i>
+                    <p className="text-sm truncate">{shortendURL}</p>
+                  </Link>
                 ) : (
-                  <div className="badge badge-primary badge-sm my-1">
+                  <div className="badge badge-primary badge-sm my-1 select-none">
                     {link.type}
                   </div>
                 )}
@@ -95,8 +165,7 @@ export default function LinkCardCompact({
               </div>
             </div>
           </div>
-        </Link>
-
+        </div>
         <LinkActions
           link={link}
           collection={collection}
@@ -105,52 +174,7 @@ export default function LinkCardCompact({
           // toggleShowInfo={() => setShowInfo(!showInfo)}
           // linkInfo={showInfo}
         />
-        {showInfo ? (
-          <div>
-            <div className="pb-3 mt-1 px-3">
-              <p className="text-neutral text-lg font-semibold">Description</p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-              <p>
-                {link.description ? (
-                  unescapeString(link.description)
-                ) : (
-                  <span className="text-neutral text-sm">
-                    No description provided.
-                  </span>
-                )}
-              </p>
-              {link.tags[0] ? (
-                <>
-                  <p className="text-neutral text-lg mt-3 font-semibold">
-                    Tags
-                  </p>
-
-                  <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-                  <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                    <div className="flex gap-1 items-center flex-wrap">
-                      {link.tags.map((e, i) => (
-                        <Link
-                          href={"/tags/" + e.id}
-                          key={i}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                          }}
-                          className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                        >
-                          #{e.name}
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                </>
-              ) : undefined}
-            </div>
-          </div>
-        ) : undefined}
       </div>
-
       <div className="divider my-0 last:hidden h-[1px]"></div>
     </>
   );

components/ModalContent/BulkDeleteLinksModal.tsx

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

components/ModalContent/BulkEditLinksModal.tsx

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

components/ModalContent/DeleteLinkModal.tsx

@@ -15,7 +15,6 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
   const { removeLink } = useLinkStore();
-  const [submitLoader, setSubmitLoader] = useState(false);
 
   const router = useRouter();
 

components/ModalContent/EditCollectionSharingModal.tsx

@@ -234,11 +234,8 @@ export default function EditCollectionSharingModal({
                           : undefined;
 
                   return (
-                    <>
-                      <div
-                        key={i}
-                        className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none"
-                      >
+                    <React.Fragment key={i}>
+                      <div className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none">
                         <div
                           className={"flex items-center justify-between w-full"}
                         >
@@ -433,7 +430,7 @@ export default function EditCollectionSharingModal({
                         </div>
                       </div>
                       <div className="divider my-0 last:hidden h-[3px]"></div>
-                    </>
+                    </React.Fragment>
                   );
                 })}
             </div>

components/ModalContent/EditLinkModal.tsx

@@ -124,6 +124,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                         label: "Unorganized",
                       }
                 }
+                creatable={false}
               />
             ) : null}
           </div>

components/ModalContent/NewCollectionModal.tsx

@@ -6,6 +6,8 @@ import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import useAccountStore from "@/store/account";
+import { useSession } from "next-auth/react";
 
 type Props = {
   onClose: Function;
@@ -21,6 +23,8 @@ 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);
@@ -42,7 +46,11 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     if (response.ok) {
       toast.success("Created!");
-      onClose();
+      if (response.data) {
+        // If the collection was created successfully, we need to get the new collection order
+        setAccount(data?.user.id as number);
+        onClose();
+      }
     } else toast.error(response.data as string);
 
     setSubmitLoader(false);

components/ModalContent/NewLinkModal.tsx

@@ -109,7 +109,6 @@ export default function NewLinkModal({ onClose }: Props) {
         toast.success(`Created!`);
         onClose();
       } else toast.error(response.data as string);
-
       setSubmitLoader(false);
 
       return response;

components/Navbar.tsx

@@ -56,7 +56,7 @@ export default function Navbar() {
           setSidebar(true);
           document.body.style.overflow = "hidden";
         }}
-        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden hidden sm:inline-flex"
+        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden sm:inline-flex"
       >
         <i className="bi-list text-2xl leading-none"></i>
       </div>

components/SettingsSidebar.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.4.8";
+  const LINKWARDEN_VERSION = "v2.5.1";
 
   const { collections } = useCollectionStore();
 
@@ -37,30 +37,17 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        <Link href="/settings/appearance">
+        <Link href="/settings/preference">
           <div
             className={`${
-              active === `/settings/appearance`
+              active === `/settings/preference`
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i className="bi-palette text-primary text-2xl"></i>
+            <i className="bi-sliders text-primary text-2xl"></i>
 
-            <p className="truncate w-full pr-7">Appearance</p>
-          </div>
-        </Link>
-
-        <Link href="/settings/archive">
-          <div
-            className={`${
-              active === `/settings/archive`
-                ? "bg-primary/20"
-                : "hover:bg-neutral/20"
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-          >
-            <i className="bi-archive text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">Archive</p>
+            <p className="truncate w-full pr-7">Preference</p>
           </div>
         </Link>
 

components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
-import CollectionSelection from "@/components/CollectionSelection";
+import CollectionListing from "@/components/CollectionListing";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -22,11 +22,10 @@ export default function Sidebar({ className }: { className?: string }) {
 
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
+  const [active, setActive] = useState("");
 
   const router = useRouter();
 
-  const [active, setActive] = useState("");
-
   useEffect(() => {
     localStorage.setItem("tagDisclosure", tagDisclosure ? "true" : "false");
   }, [tagDisclosure]);
@@ -99,7 +98,7 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel>
-            <CollectionSelection links={true} />
+            <CollectionListing />
           </Disclosure.Panel>
         </Transition>
       </Disclosure>

components/SortDropdown.tsx

@@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         tabIndex={0}
         role="button"
         onMouseDown={dropdownTriggerer}
-        className="btn btn-sm btn-square btn-ghost"
+        className="btn btn-sm btn-square btn-ghost border-none"
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>

components/ViewDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect } from "react";
 import useLocalSettingsStore from "@/store/localSettings";
 
 import { ViewMode } from "@/types/global";

hooks/useCollectivePermissions.ts

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

hooks/useLinks.tsx

@@ -1,5 +1,5 @@
 import { LinkRequestQuery } from "@/types/global";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import useDetectPageBottom from "./useDetectPageBottom";
 import { useRouter } from "next/router";
 import useLinkStore from "@/store/links";
@@ -18,9 +18,12 @@ export default function useLinks(
     searchByTextContent,
   }: LinkRequestQuery = { sort: 0 }
 ) {
-  const { links, setLinks, resetLinks } = useLinkStore();
+  const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } =
+    useLinkStore();
   const router = useRouter();
 
+  const [isLoading, setIsLoading] = useState(true);
+
   const { reachedBottom, setReachedBottom } = useDetectPageBottom();
 
   const getLinks = async (isInitialCall: boolean, cursor?: number) => {
@@ -60,16 +63,24 @@ export default function useLinks(
       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,
@@ -87,4 +98,6 @@ export default function useLinks(
 
     setReachedBottom(false);
   }, [reachedBottom]);
+
+  return { isLoading };
 }

lib/api/archiveHandler.ts

@@ -1,4 +1,4 @@
-import { chromium, devices } from "playwright";
+import { LaunchOptions, chromium, devices } from "playwright";
 import { prisma } from "./db";
 import createFile from "./storage/createFile";
 import sendToWayback from "./sendToWayback";
@@ -20,8 +20,23 @@ type LinksAndCollectionAndOwner = Link & {
 const BROWSER_TIMEOUT = Number(process.env.BROWSER_TIMEOUT) || 5;
 
 export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
-  const browser = await chromium.launch();
-  const context = await browser.newContext(devices["Desktop Chrome"]);
+  // allow user to configure a proxy
+  let browserOptions: LaunchOptions = {};
+  if (process.env.PROXY) {
+    browserOptions.proxy = {
+      server: process.env.PROXY,
+      bypass: process.env.PROXY_BYPASS,
+      username: process.env.PROXY_USERNAME,
+      password: process.env.PROXY_PASSWORD,
+    };
+  }
+
+  const browser = await chromium.launch(browserOptions);
+  const context = await browser.newContext({
+    ...devices["Desktop Chrome"],
+    ignoreHTTPSErrors: process.env.IGNORE_HTTPS_ERRORS === "true",
+  });
+
   const page = await context.newPage();
 
   const timeoutPromise = new Promise((_, reject) => {
@@ -70,11 +85,11 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
             image:
               user.archiveAsScreenshot && !link.image?.startsWith("archive")
                 ? "pending"
-                : undefined,
+                : "unavailable",
             pdf:
               user.archiveAsPDF && !link.pdf?.startsWith("archive")
                 ? "pending"
-                : undefined,
+                : "unavailable",
             readable: !link.readable?.startsWith("archive")
               ? "pending"
               : undefined,
@@ -238,6 +253,13 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
                 })
               );
             }
+
+            // apply administrator's defined pdf margins or default to 15px
+            const margins = {
+              top: process.env.PDF_MARGIN_TOP || "15px",
+              bottom: process.env.PDF_MARGIN_BOTTOM || "15px",
+            };
+
             if (user.archiveAsPDF && !link.pdf?.startsWith("archive")) {
               processingPromises.push(
                 page
@@ -245,7 +267,7 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
                     width: "1366px",
                     height: "1931px",
                     printBackground: true,
-                    margin: { top: "15px", bottom: "15px" },
+                    margin: margins,
                   })
                   .then((pdf) => {
                     return createFile({

lib/api/checkSubscriptionByEmail.ts

@@ -32,11 +32,12 @@ export default async function checkSubscriptionByEmail(email: string) {
     customer.subscriptions?.data.some((subscription) => {
       subscription.current_period_end;
 
-      active = subscription.items.data.some(
-        (e) =>
-          (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
-          (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
-      );
+      active =
+        subscription.items.data.some(
+          (e) =>
+            (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
+            (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
+        ) || false;
       stripeSubscriptionId = subscription.id;
       currentPeriodStart = subscription.current_period_start * 1000;
       currentPeriodEnd = subscription.current_period_end * 1000;
@@ -44,7 +45,7 @@ export default async function checkSubscriptionByEmail(email: string) {
   });
 
   return {
-    active,
+    active: active || false,
     stripeSubscriptionId,
     currentPeriodStart,
     currentPeriodEnd,

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

@@ -31,6 +31,8 @@ export default async function deleteCollection(
         },
       });
 
+    await removeFromOrders(userId, collectionId);
+
     return { response: deletedUsersAndCollectionsRelation, status: 200 };
   } else if (collectionIsAccessible?.ownerId !== userId) {
     return { response: "Collection is not accessible.", status: 401 };
@@ -57,6 +59,8 @@ export default async function deleteCollection(
 
     await removeFolder({ filePath: `archives/${collectionId}` });
 
+    await removeFromOrders(userId, collectionId);
+
     return await prisma.collection.delete({
       where: {
         id: collectionId,
@@ -98,3 +102,28 @@ async function deleteSubCollections(collectionId: number) {
     await removeFolder({ filePath: `archives/${subCollection.id}` });
   }
 }
+
+async function removeFromOrders(userId: number, collectionId: number) {
+  const userCollectionOrder = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+    select: {
+      collectionOrder: true,
+    },
+  });
+
+  if (userCollectionOrder)
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        collectionOrder: {
+          set: userCollectionOrder.collectionOrder.filter(
+            (e: number) => e !== collectionId
+          ),
+        },
+      },
+    });
+}

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

@@ -18,24 +18,30 @@ export default async function updateCollection(
   if (!(collectionIsAccessible?.ownerId === userId))
     return { response: "Collection is not accessible.", status: 401 };
 
-  if (data.parentId) {
-    const findParentCollection = await prisma.collection.findUnique({
-      where: {
-        id: data.parentId,
-      },
-      select: {
-        ownerId: true,
-      },
-    });
+  console.log(data);
 
-    if (
-      findParentCollection?.ownerId !== userId ||
-      typeof data.parentId !== "number"
-    )
-      return {
-        response: "You are not authorized to create a sub-collection here.",
-        status: 403,
-      };
+  if (data.parentId) {
+    if (data.parentId !== ("root" as any)) {
+      const findParentCollection = await prisma.collection.findUnique({
+        where: {
+          id: data.parentId,
+        },
+        select: {
+          ownerId: true,
+          parentId: true,
+        },
+      });
+
+      if (
+        findParentCollection?.ownerId !== userId ||
+        typeof data.parentId !== "number" ||
+        findParentCollection?.parentId === data.parentId
+      )
+        return {
+          response: "You are not authorized to create a sub-collection here.",
+          status: 403,
+        };
+    }
   }
 
   const updatedCollection = await prisma.$transaction(async () => {
@@ -51,17 +57,23 @@ export default async function updateCollection(
       where: {
         id: collectionId,
       },
-
       data: {
         name: data.name.trim(),
         description: data.description,
         color: data.color,
         isPublic: data.isPublic,
-        parent: {
-          connect: {
-            id: data.parentId || undefined,
-          },
-        },
+        parent:
+          data.parentId && data.parentId !== ("root" as any)
+            ? {
+                connect: {
+                  id: data.parentId,
+                },
+              }
+            : data.parentId === ("root" as any)
+              ? {
+                  disconnect: true,
+                }
+              : undefined,
         members: {
           create: data.members.map((e) => ({
             user: { connect: { id: e.user.id || e.userId } },

lib/api/controllers/collections/getCollections.ts

@@ -12,6 +12,12 @@ export default async function getCollection(userId: number) {
       _count: {
         select: { links: true },
       },
+      parent: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
       members: {
         include: {
           user: {

lib/api/controllers/collections/postCollection.ts

@@ -32,27 +32,6 @@ export default async function postCollection(
       };
   }
 
-  const findCollection = await prisma.user.findUnique({
-    where: {
-      id: userId,
-    },
-    select: {
-      collections: {
-        where: {
-          name: collection.name,
-        },
-      },
-    },
-  });
-
-  const checkIfCollectionExists = findCollection?.collections[0];
-
-  if (checkIfCollectionExists)
-    return {
-      response: "Oops! There's already a Collection with that name.",
-      status: 400,
-    };
-
   const newCollection = await prisma.collection.create({
     data: {
       owner: {
@@ -88,6 +67,17 @@ export default async function postCollection(
     },
   });
 
+  await prisma.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      collectionOrder: {
+        push: newCollection.id,
+      },
+    },
+  });
+
   createFolder({ filePath: `archives/${newCollection.id}` });
 
   return { response: newCollection, status: 200 };

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

@@ -0,0 +1,58 @@
+import { prisma } from "@/lib/api/db";
+import { UsersAndCollections } from "@prisma/client";
+import getPermission from "@/lib/api/getPermission";
+import removeFile from "@/lib/api/storage/removeFile";
+
+export default async function deleteLinksById(
+  userId: number,
+  linkIds: number[]
+) {
+  if (!linkIds || linkIds.length === 0) {
+    return { response: "Please choose valid links.", status: 401 };
+  }
+
+  const collectionIsAccessibleArray = [];
+
+  // Check if the user has access to the collection of each link
+  // if any of the links are not accessible, return an error
+  // if all links are accessible, continue with the deletion
+  // and add the collection to the collectionIsAccessibleArray
+  for (const linkId of linkIds) {
+    const collectionIsAccessible = await getPermission({ userId, linkId });
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canDelete
+    );
+
+    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess)) {
+      return { response: "Collection is not accessible.", status: 401 };
+    }
+
+    collectionIsAccessibleArray.push(collectionIsAccessible);
+  }
+
+  const deletedLinks = await prisma.link.deleteMany({
+    where: {
+      id: { in: linkIds },
+    },
+  });
+
+  // Loop through each link and delete the associated files
+  // if the user has access to the collection
+  for (let i = 0; i < linkIds.length; i++) {
+    const linkId = linkIds[i];
+    const collectionIsAccessible = collectionIsAccessibleArray[i];
+
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
+    });
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
+    });
+    removeFile({
+      filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
+    });
+  }
+
+  return { response: deletedLinks, status: 200 };
+}

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

@@ -0,0 +1,50 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import updateLinkById from "../linkId/updateLinkById";
+
+export default async function updateLinks(
+  userId: number,
+  links: LinkIncludingShortenedCollectionAndTags[],
+  removePreviousTags: boolean,
+  newData: Pick<
+    LinkIncludingShortenedCollectionAndTags,
+    "tags" | "collectionId"
+  >
+) {
+  let allUpdatesSuccessful = true;
+
+  // Have to use a loop here rather than updateMany, see the following:
+  // https://github.com/prisma/prisma/issues/3143
+  for (const link of links) {
+    let updatedTags = [...link.tags, ...(newData.tags ?? [])];
+
+    if (removePreviousTags) {
+      // If removePreviousTags is true, replace the existing tags with new tags
+      updatedTags = [...(newData.tags ?? [])];
+    }
+
+    const updatedData: LinkIncludingShortenedCollectionAndTags = {
+      ...link,
+      tags: updatedTags,
+      collection: {
+        ...link.collection,
+        id: newData.collectionId ?? link.collection.id,
+      },
+    };
+
+    const updatedLink = await updateLinkById(
+      userId,
+      link.id as number,
+      updatedData
+    );
+
+    if (updatedLink.status !== 200) {
+      allUpdatesSuccessful = false;
+    }
+  }
+
+  if (allUpdatesSuccessful) {
+    return { response: "All links updated successfully", status: 200 };
+  } else {
+    return { response: "Some links failed to update", status: 400 };
+  }
+}

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

@@ -1,5 +1,5 @@
 import { prisma } from "@/lib/api/db";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import { Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import removeFile from "@/lib/api/storage/removeFile";
 

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

@@ -1,6 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import moveFile from "@/lib/api/storage/moveFile";
 
@@ -17,13 +17,70 @@ export default async function updateLinkById(
 
   const collectionIsAccessible = await getPermission({ userId, linkId });
 
+  const isCollectionOwner =
+    collectionIsAccessible?.ownerId === data.collection.ownerId &&
+    data.collection.ownerId === userId;
+
+  const canPinPermission = collectionIsAccessible?.members.some(
+    (e: UsersAndCollections) => e.userId === userId
+  );
+
+  // If the user is able to create a link, they can pin it to their dashboard only.
+  if (canPinPermission) {
+    const updatedLink = await prisma.link.update({
+      where: {
+        id: linkId,
+      },
+      data: {
+        pinnedBy:
+          data?.pinnedBy && data.pinnedBy[0]
+            ? { connect: { id: userId } }
+            : { disconnect: { id: userId } },
+      },
+      include: {
+        collection: true,
+        pinnedBy: isCollectionOwner
+          ? {
+              where: { id: userId },
+              select: { id: true },
+            }
+          : undefined,
+      },
+    });
+
+    return { response: updatedLink, status: 200 };
+  }
+
+  const targetCollectionIsAccessible = await getPermission({
+    userId,
+    collectionId: data.collection.id,
+  });
+
   const memberHasAccess = collectionIsAccessible?.members.some(
     (e: UsersAndCollections) => e.userId === userId && e.canUpdate
   );
 
-  const isCollectionOwner =
-    collectionIsAccessible?.ownerId === data.collection.ownerId &&
-    data.collection.ownerId === userId;
+  const targetCollectionsAccessible =
+    targetCollectionIsAccessible?.ownerId === userId;
+
+  const targetCollectionMatchesData = data.collection.id
+    ? data.collection.id === targetCollectionIsAccessible?.id
+    : true && data.collection.name
+      ? data.collection.name === targetCollectionIsAccessible?.name
+      : true && data.collection.ownerId
+        ? data.collection.ownerId === targetCollectionIsAccessible?.ownerId
+        : true;
+
+  if (!targetCollectionsAccessible)
+    return {
+      response: "Target collection is not accessible.",
+      status: 401,
+    };
+  else if (!targetCollectionMatchesData)
+    return {
+      response: "Target collection does not match the data.",
+      status: 401,
+    };
 
   const unauthorizedSwitchCollection =
     !isCollectionOwner && collectionIsAccessible?.id !== data.collection.id;

lib/api/controllers/links/postLink.ts

@@ -22,8 +22,114 @@ export default async function postLink(
     };
   }
 
-  if (!link.collection.name) {
+  if (!link.collection.id && link.collection.name) {
+    link.collection.name = link.collection.name.trim();
+
+    // find the collection with the name and the user's id
+    const findCollection = await prisma.collection.findFirst({
+      where: {
+        name: link.collection.name,
+        ownerId: userId,
+        parentId: link.collection.parentId,
+      },
+    });
+
+    if (findCollection) {
+      const collectionIsAccessible = await getPermission({
+        userId,
+        collectionId: findCollection.id,
+      });
+
+      const memberHasAccess = collectionIsAccessible?.members.some(
+        (e: UsersAndCollections) => e.userId === userId && e.canCreate
+      );
+
+      if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+        return { response: "Collection is not accessible.", status: 401 };
+
+      link.collection.id = findCollection.id;
+    } else {
+      const collection = await prisma.collection.create({
+        data: {
+          name: link.collection.name,
+          ownerId: userId,
+        },
+      });
+
+      link.collection.id = collection.id;
+
+      await prisma.user.update({
+        where: {
+          id: userId,
+        },
+        data: {
+          collectionOrder: {
+            push: link.collection.id,
+          },
+        },
+      });
+    }
+  } else if (link.collection.id) {
+    const collectionIsAccessible = await getPermission({
+      userId,
+      collectionId: link.collection.id,
+    });
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canCreate
+    );
+
+    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+      return { response: "Collection is not accessible.", status: 401 };
+  } else if (!link.collection.id) {
     link.collection.name = "Unorganized";
+    link.collection.parentId = null;
+
+    // find the collection with the name "Unorganized" and the user's id
+    const unorganizedCollection = await prisma.collection.findFirst({
+      where: {
+        name: "Unorganized",
+        ownerId: userId,
+      },
+    });
+
+    link.collection.id = unorganizedCollection?.id;
+
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        collectionOrder: {
+          push: link.collection.id,
+        },
+      },
+    });
+  } else {
+    return { response: "Uncaught error.", status: 500 };
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
+
+  if (user?.preventDuplicateLinks) {
+    const existingLink = await prisma.link.findFirst({
+      where: {
+        url: link.url?.trim(),
+        collection: {
+          ownerId: userId,
+        },
+      },
+    });
+
+    if (existingLink)
+      return {
+        response: "Link already exists",
+        status: 409,
+      };
   }
 
   const numberOfLinksTheUserHas = await prisma.link.count({
@@ -42,22 +148,6 @@ export default async function postLink(
 
   link.collection.name = link.collection.name.trim();
 
-  if (link.collection.id) {
-    const collectionIsAccessible = await getPermission({
-      userId,
-      collectionId: link.collection.id,
-    });
-
-    const memberHasAccess = collectionIsAccessible?.members.some(
-      (e: UsersAndCollections) => e.userId === userId && e.canCreate
-    );
-
-    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
-      return { response: "Collection is not accessible.", status: 401 };
-  } else {
-    link.collection.ownerId = userId;
-  }
-
   const description =
     link.description && link.description !== ""
       ? link.description
@@ -81,22 +171,13 @@ export default async function postLink(
 
   const newLink = await prisma.link.create({
     data: {
-      url: link.url,
+      url: link.url?.trim(),
       name: link.name,
       description,
       type: linkType,
       collection: {
-        connectOrCreate: {
-          where: {
-            name_ownerId: {
-              ownerId: link.collection.ownerId,
-              name: link.collection.name,
-            },
-          },
-          create: {
-            name: link.collection.name.trim(),
-            ownerId: userId,
-          },
+        connect: {
+          id: link.collection.id,
         },
       },
       tags: {

lib/api/controllers/migration/exportData.ts

@@ -13,6 +13,8 @@ export default async function exportData(userId: number) {
           },
         },
       },
+      pinnedLinks: true,
+      whitelistedUsers: true,
     },
   });
 

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -1,6 +1,7 @@
 import { prisma } from "@/lib/api/db";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
+import { parse, Node, Element, TextNode } from "himalaya";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
 
@@ -11,6 +12,11 @@ export default async function importFromHTMLFile(
   const dom = new JSDOM(rawData);
   const document = dom.window.document;
 
+  // remove bad tags
+  document.querySelectorAll("meta").forEach((e) => (e.outerHTML = e.innerHTML));
+  document.querySelectorAll("META").forEach((e) => (e.outerHTML = e.innerHTML));
+  document.querySelectorAll("P").forEach((e) => (e.outerHTML = e.innerHTML));
+
   const bookmarks = document.querySelectorAll("A");
   const totalImports = bookmarks.length;
 
@@ -28,94 +34,165 @@ export default async function importFromHTMLFile(
       status: 400,
     };
 
-  const folders = document.querySelectorAll("H3");
+  const jsonData = parse(document.documentElement.outerHTML);
 
-  await prisma
-    .$transaction(
-      async () => {
-        // @ts-ignore
-        for (const folder of folders) {
-          const findCollection = await prisma.user.findUnique({
-            where: {
-              id: userId,
-            },
-            select: {
-              collections: {
-                where: {
-                  name: folder.textContent.trim(),
-                },
-              },
-            },
-          });
-
-          const checkIfCollectionExists = findCollection?.collections[0];
-
-          let collectionId = findCollection?.collections[0]?.id;
-
-          if (!checkIfCollectionExists || !collectionId) {
-            const newCollection = await prisma.collection.create({
-              data: {
-                name: folder.textContent.trim(),
-                description: "",
-                color: "#0ea5e9",
-                isPublic: false,
-                ownerId: userId,
-              },
-            });
-
-            createFolder({ filePath: `archives/${newCollection.id}` });
-
-            collectionId = newCollection.id;
-          }
-
-          createFolder({ filePath: `archives/${collectionId}` });
-
-          const bookmarks = folder.nextElementSibling.querySelectorAll("A");
-          for (const bookmark of bookmarks) {
-            await prisma.link.create({
-              data: {
-                name: bookmark.textContent.trim(),
-                url: bookmark.getAttribute("HREF"),
-                tags: bookmark.getAttribute("TAGS")
-                  ? {
-                      connectOrCreate: bookmark
-                        .getAttribute("TAGS")
-                        .split(",")
-                        .map((tag: string) =>
-                          tag
-                            ? {
-                                where: {
-                                  name_ownerId: {
-                                    name: tag.trim(),
-                                    ownerId: userId,
-                                  },
-                                },
-                                create: {
-                                  name: tag.trim(),
-                                  owner: {
-                                    connect: {
-                                      id: userId,
-                                    },
-                                  },
-                                },
-                              }
-                            : undefined
-                        ),
-                    }
-                  : undefined,
-                description: bookmark.getAttribute("DESCRIPTION")
-                  ? bookmark.getAttribute("DESCRIPTION")
-                  : "",
-                collectionId: collectionId,
-                createdAt: new Date(),
-              },
-            });
-          }
-        }
-      },
-      { timeout: 30000 }
-    )
-    .catch((err) => console.log(err));
+  for (const item of jsonData) {
+    console.log(item);
+    await processBookmarks(userId, item as Element);
+  }
 
   return { response: "Success.", status: 200 };
 }
+
+async function processBookmarks(
+  userId: number,
+  data: Node,
+  parentCollectionId?: number
+) {
+  if (data.type === "element") {
+    for (const item of data.children) {
+      if (item.type === "element" && item.tagName === "dt") {
+        // process collection or sub-collection
+
+        let collectionId;
+        const collectionName = item.children.find(
+          (e) => e.type === "element" && e.tagName === "h3"
+        ) as Element;
+
+        if (collectionName) {
+          collectionId = await createCollection(
+            userId,
+            (collectionName.children[0] as TextNode).content,
+            parentCollectionId
+          );
+        }
+        await processBookmarks(
+          userId,
+          item,
+          collectionId || parentCollectionId
+        );
+      } else if (item.type === "element" && item.tagName === "a") {
+        // process link
+
+        const linkUrl = item?.attributes.find((e) => e.key === "href")?.value;
+        const linkName = (
+          item?.children.find((e) => e.type === "text") as TextNode
+        )?.content;
+        const linkTags = item?.attributes
+          .find((e) => e.key === "tags")
+          ?.value.split(",");
+
+        if (linkUrl && parentCollectionId) {
+          await createLink(
+            userId,
+            linkUrl,
+            parentCollectionId,
+            linkName,
+            "",
+            linkTags
+          );
+        } else if (linkUrl) {
+          // create a collection named "Imported Bookmarks" and add the link to it
+          const collectionId = await createCollection(userId, "Imports");
+
+          await createLink(
+            userId,
+            linkUrl,
+            collectionId,
+            linkName,
+            "",
+            linkTags
+          );
+        }
+
+        await processBookmarks(userId, item, parentCollectionId);
+      } else {
+        // process anything else
+        await processBookmarks(userId, item, parentCollectionId);
+      }
+    }
+  }
+}
+
+const createCollection = async (
+  userId: number,
+  collectionName: string,
+  parentId?: number
+) => {
+  const findCollection = await prisma.collection.findFirst({
+    where: {
+      parentId,
+      name: collectionName,
+      ownerId: userId,
+    },
+  });
+
+  if (findCollection) {
+    return findCollection.id;
+  }
+
+  const collectionId = await prisma.collection.create({
+    data: {
+      name: collectionName,
+      parent: parentId
+        ? {
+            connect: {
+              id: parentId,
+            },
+          }
+        : undefined,
+      owner: {
+        connect: {
+          id: userId,
+        },
+      },
+    },
+  });
+
+  createFolder({ filePath: `archives/${collectionId.id}` });
+
+  return collectionId.id;
+};
+
+const createLink = async (
+  userId: number,
+  url: string,
+  collectionId: number,
+  name?: string,
+  description?: string,
+  tags?: string[]
+) => {
+  await prisma.link.create({
+    data: {
+      name: name || "",
+      url,
+      description,
+      collectionId,
+      tags:
+        tags && tags[0]
+          ? {
+              connectOrCreate: tags.map((tag: string) => {
+                return (
+                  {
+                    where: {
+                      name_ownerId: {
+                        name: tag.trim(),
+                        ownerId: userId,
+                      },
+                    },
+                    create: {
+                      name: tag.trim(),
+                      owner: {
+                        connect: {
+                          id: userId,
+                        },
+                      },
+                    },
+                  } || undefined
+                );
+              }),
+            }
+          : undefined,
+    },
+  });
+};

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -37,41 +37,20 @@ export default async function importFromLinkwarden(
         for (const e of data.collections) {
           e.name = e.name.trim();
 
-          const findCollection = await prisma.user.findUnique({
-            where: {
-              id: userId,
-            },
-            select: {
-              collections: {
-                where: {
-                  name: e.name,
+          const newCollection = await prisma.collection.create({
+            data: {
+              owner: {
+                connect: {
+                  id: userId,
                 },
               },
+              name: e.name,
+              description: e.description,
+              color: e.color,
             },
           });
 
-          const checkIfCollectionExists = findCollection?.collections[0];
-
-          let collectionId = findCollection?.collections[0]?.id;
-
-          if (!checkIfCollectionExists) {
-            const newCollection = await prisma.collection.create({
-              data: {
-                owner: {
-                  connect: {
-                    id: userId,
-                  },
-                },
-                name: e.name,
-                description: e.description,
-                color: e.color,
-              },
-            });
-
-            createFolder({ filePath: `archives/${newCollection.id}` });
-
-            collectionId = newCollection.id;
-          }
+          createFolder({ filePath: `archives/${newCollection.id}` });
 
           // Import Links
           for (const link of e.links) {
@@ -82,7 +61,7 @@ export default async function importFromLinkwarden(
                 description: link.description,
                 collection: {
                   connect: {
-                    id: collectionId,
+                    id: newCollection.id,
                   },
                 },
                 // Import Tags

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

@@ -183,9 +183,14 @@ export default async function updateUserById(
       email: data.email?.toLowerCase().trim(),
       isPrivate: data.isPrivate,
       image: data.image ? `uploads/avatar/${userId}.jpg` : "",
+      collectionOrder: data.collectionOrder.filter(
+        (value, index, self) => self.indexOf(value) === index
+      ),
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
+      linksRouteTo: data.linksRouteTo,
+      preventDuplicateLinks: data.preventDuplicateLinks,
       password:
         data.newPassword && data.newPassword !== ""
           ? newHashedPassword

lib/api/getPermission.ts

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

lib/api/paymentCheckout.ts

@@ -16,8 +16,11 @@ export default async function paymentCheckout(
 
   const isExistingCustomer = listByEmail?.data[0]?.id || undefined;
 
+  console.log("isExistingCustomer", listByEmail?.data[0]);
+
   const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-    process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
+    Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS) || 14;
+
   const session = await stripe.checkout.sessions.create({
     customer: isExistingCustomer ? isExistingCustomer : undefined,
     line_items: [
@@ -34,9 +37,9 @@ export default async function paymentCheckout(
       enabled: true,
     },
     subscription_data: {
-      trial_period_days: NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-        ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS)
-        : 14,
+      trial_period_days: isExistingCustomer
+        ? undefined
+        : NEXT_PUBLIC_TRIAL_PERIOD_DAYS,
     },
   });
 

lib/api/verifySubscription.ts

@@ -17,15 +17,7 @@ export default async function verifySubscription(
 
   const currentDate = new Date();
 
-  if (
-    subscription &&
-    currentDate > subscription.currentPeriodEnd &&
-    !subscription.active
-  ) {
-    return null;
-  }
-
-  if (!subscription || currentDate > subscription.currentPeriodEnd) {
+  if (!subscription?.active || currentDate > subscription.currentPeriodEnd) {
     const {
       active,
       stripeSubscriptionId,
@@ -59,15 +51,21 @@ export default async function verifySubscription(
           },
         })
         .catch((err) => console.log(err));
-    }
+    } else if (!active) {
+      const subscription = await prisma.subscription.findFirst({
+        where: {
+          userId: user.id,
+        },
+      });
 
-    if (!active) {
-      if (user.username)
-        // await prisma.user.update({
-        //   where: { id: user.id },
-        //   data: { username: null },
-        // });
-        return null;
+      if (subscription)
+        await prisma.subscription.delete({
+          where: {
+            userId: user.id,
+          },
+        });
+
+      return null;
     }
   }
 

lib/api/verifyUser.ts

@@ -52,7 +52,7 @@ export default async function verifyUser({
   }
 
   if (STRIPE_SECRET_KEY) {
-    const subscribedUser = verifySubscription(user);
+    const subscribedUser = await verifySubscription(user);
 
     if (!subscribedUser) {
       res.status(401).json({

lib/client/generateLinkHref.ts

@@ -0,0 +1,39 @@
+import {
+  AccountSettings,
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { LinksRouteTo } from "@prisma/client";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  screenshotAvailable,
+} from "../shared/getArchiveValidity";
+
+export const generateLinkHref = (
+  link: LinkIncludingShortenedCollectionAndTags,
+  account: AccountSettings
+): string => {
+  // Return the links href based on the account's preference
+  // If the user's preference is not available, return the original link
+  switch (account.linksRouteTo) {
+    case LinksRouteTo.ORIGINAL:
+      return link.url || "";
+    case LinksRouteTo.PDF:
+      if (!pdfAvailable(link)) return link.url || "";
+
+      return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
+    case LinksRouteTo.READABLE:
+      if (!readabilityAvailable(link)) return link.url || "";
+
+      return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
+    case LinksRouteTo.SCREENSHOT:
+      if (!screenshotAvailable(link)) return link.url || "";
+
+      return `/preserved/${link?.id}?format=${
+        link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg
+      }`;
+    default:
+      return link.url || "";
+  }
+};

lib/shared/getArchiveValidity.ts

@@ -1,4 +1,8 @@
-export function screenshotAvailable(link: any) {
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export function screenshotAvailable(
+  link: LinkIncludingShortenedCollectionAndTags
+) {
   return (
     link &&
     link.image &&
@@ -7,13 +11,15 @@ export function screenshotAvailable(link: any) {
   );
 }
 
-export function pdfAvailable(link: any) {
+export function pdfAvailable(link: LinkIncludingShortenedCollectionAndTags) {
   return (
     link && link.pdf && link.pdf !== "pending" && link.pdf !== "unavailable"
   );
 }
 
-export function readabilityAvailable(link: any) {
+export function readabilityAvailable(
+  link: LinkIncludingShortenedCollectionAndTags
+) {
   return (
     link &&
     link.readable &&

lib/shared/getTitle.ts

@@ -1,5 +1,7 @@
 import fetch from "node-fetch";
 import https from "https";
+import { SocksProxyAgent } from "socks-proxy-agent";
+
 export default async function getTitle(url: string) {
   try {
     const httpsAgent = new https.Agent({
@@ -7,9 +9,26 @@ export default async function getTitle(url: string) {
         process.env.IGNORE_UNAUTHORIZED_CA === "true" ? false : true,
     });
 
-    const response = await fetch(url, {
+    // fetchOpts allows a proxy to be defined
+    let fetchOpts = {
       agent: httpsAgent,
-    });
+    };
+
+    if (process.env.PROXY) {
+      // parse proxy url
+      let proxy = new URL(process.env.PROXY);
+      // if authentication set, apply to proxy URL
+      if (process.env.PROXY_USERNAME) {
+        proxy.username = process.env.PROXY_USERNAME;
+        proxy.password = process.env.PROXY_PASSWORD || "";
+      }
+
+      // add socks5 proxy to fetchOpts
+      fetchOpts = { agent: new SocksProxyAgent(proxy.toString()) }; //TODO: add support for http/https proxies
+    }
+
+    const response = await fetch(url, fetchOpts);
+
     const text = await response.text();
 
     // regular expression to find the <title> tag

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "2.4.8",
+  "version": "2.5.1",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -10,15 +10,16 @@
     "seed": "node ./prisma/seed.js"
   },
   "scripts": {
-    "dev": "concurrently -k \"next dev\" \"yarn worker:dev\"",
+    "dev": "concurrently -k -P \"next dev {@}\" \"yarn worker:dev\" --",
     "worker:dev": "nodemon --skip-project scripts/worker.ts",
     "worker:prod": "ts-node --transpile-only --skip-project scripts/worker.ts",
-    "start": "concurrently \"next start\" \"yarn worker:prod\"",
+    "start": "concurrently -k -P \"next start {@}\" \"yarn worker:prod\" --",
     "build": "next build",
     "lint": "next lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,json,md}\""
   },
   "dependencies": {
+    "@atlaskit/tree": "^8.8.7",
     "@auth/prisma-adapter": "^1.0.1",
     "@aws-sdk/client-s3": "^3.379.1",
     "@headlessui/react": "^1.7.15",
@@ -44,12 +45,14 @@
     "eslint-config-next": "13.4.9",
     "formidable": "^3.5.1",
     "framer-motion": "^10.16.4",
+    "himalaya": "^1.1.0",
     "jimp": "^0.22.10",
     "jsdom": "^22.1.0",
     "lottie-web": "^5.12.2",
     "micro": "^10.0.1",
     "next": "13.4.12",
     "next-auth": "^4.22.1",
+    "node-fetch": "^2.7.0",
     "nodemailer": "^6.9.3",
     "playwright": "^1.35.1",
     "react": "18.2.0",
@@ -58,6 +61,8 @@
     "react-hot-toast": "^2.4.1",
     "react-image-file-resizer": "^0.4.8",
     "react-select": "^5.7.4",
+    "react-spinners": "^0.13.8",
+    "socks-proxy-agent": "^8.0.2",
     "stripe": "^12.13.0",
     "vaul": "^0.8.8",
     "zustand": "^4.3.8"

pages/api/v1/links/index.ts

@@ -3,6 +3,8 @@ import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 import { LinkRequestQuery } from "@/types/global";
 import verifyUser from "@/lib/api/verifyUser";
+import deleteLinksById from "@/lib/api/controllers/links/bulk/deleteLinksById";
+import updateLinks from "@/lib/api/controllers/links/bulk/updateLinks";
 
 export default async function links(req: NextApiRequest, res: NextApiResponse) {
   const user = await verifyUser({ req, res });
@@ -39,5 +41,20 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     return res.status(newlink.status).json({
       response: newlink.response,
     });
+  } else if (req.method === "PUT") {
+    const updated = await updateLinks(
+      user.id,
+      req.body.links,
+      req.body.removePreviousTags,
+      req.body.newData
+    );
+    return res.status(updated.status).json({
+      response: updated.response,
+    });
+  } else if (req.method === "DELETE") {
+    const deleted = await deleteLinksById(user.id, req.body.linkIds);
+    return res.status(deleted.status).json({
+      response: deleted.response,
+    });
   }
 }

pages/collections/[id].tsx

@@ -24,15 +24,18 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import Link from "next/link";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import toast from "react-hot-toast";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
 
   const router = useRouter();
 
-  const { links } = useLinkStore();
+  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+    useLinkStore();
   const { collections } = useCollectionStore();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -81,6 +84,9 @@ export default function Index() {
     };
 
     fetchOwner();
+
+    // When the collection changes, reset the selected links
+    setSelectedLinks([]);
   }, [activeCollection]);
 
   const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -88,6 +94,13 @@ export default function Index() {
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -102,6 +115,35 @@ export default function Index() {
   // @ts-ignore
   const LinkComponent = linkView[viewMode];
 
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   return (
     <MainLayout>
       <div
@@ -135,7 +177,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">
-                {permissions === true ? (
+                {permissions === true && (
                   <li>
                     <div
                       role="button"
@@ -148,7 +190,7 @@ export default function Index() {
                       Edit Collection Info
                     </div>
                   </li>
-                ) : undefined}
+                )}
                 <li>
                   <div
                     role="button"
@@ -163,7 +205,7 @@ export default function Index() {
                       : "View Team"}
                   </div>
                 </li>
-                {permissions === true ? (
+                {permissions === true && (
                   <li>
                     <div
                       role="button"
@@ -176,7 +218,7 @@ export default function Index() {
                       Create Sub-Collection
                     </div>
                   </li>
-                ) : undefined}
+                )}
                 <li>
                   <div
                     role="button"
@@ -196,7 +238,7 @@ export default function Index() {
           </div>
         )}
 
-        {activeCollection ? (
+        {activeCollection && (
           <div className={`min-w-[15rem]`}>
             <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
               <div
@@ -232,18 +274,17 @@ export default function Index() {
               </div>
               <p className="text-neutral text-sm font-semibold">
                 By {collectionOwner.name}
-                {activeCollection.members.length > 0
-                  ? ` and ${activeCollection.members.length} others`
-                  : undefined}
+                {activeCollection.members.length > 0 &&
+                  ` and ${activeCollection.members.length} others`}
                 .
               </p>
             </div>
           </div>
-        ) : undefined}
+        )}
 
-        {activeCollection?.description ? (
+        {activeCollection?.description && (
           <p>{activeCollection?.description}</p>
-        ) : undefined}
+        )}
 
         {/* {collections.some((e) => e.parentId === activeCollection.id) ? (
           <fieldset className="border rounded-md p-2 border-neutral-content">
@@ -272,16 +313,88 @@ export default function Index() {
 
         <div className="divider my-0"></div>
 
-        <div className="flex justify-between items-end gap-5">
+        <div className="flex justify-between items-center gap-5">
           <p>Showing {activeCollection?._count?.links} results</p>
           <div className="flex items-center gap-2">
+            {links.length > 0 &&
+              (permissions === true ||
+                permissions?.canUpdate ||
+                permissions?.canDelete) && (
+                <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>
+              )}
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canUpdate)
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(permissions === true || permissions?.canDelete)
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
+            editMode={editMode}
             links={links.filter(
               (e) => e.collection.id === activeCollection?.id
             )}
@@ -290,34 +403,48 @@ export default function Index() {
           <NoLinksFound />
         )}
       </div>
-      {activeCollection ? (
+      {activeCollection && (
         <>
-          {editCollectionModal ? (
+          {editCollectionModal && (
             <EditCollectionModal
               onClose={() => setEditCollectionModal(false)}
               activeCollection={activeCollection}
             />
-          ) : undefined}
-          {editCollectionSharingModal ? (
+          )}
+          {editCollectionSharingModal && (
             <EditCollectionSharingModal
               onClose={() => setEditCollectionSharingModal(false)}
               activeCollection={activeCollection}
             />
-          ) : undefined}
-          {newCollectionModal ? (
+          )}
+          {newCollectionModal && (
             <NewCollectionModal
               onClose={() => setNewCollectionModal(false)}
               parent={activeCollection}
             />
-          ) : undefined}
-          {deleteCollectionModal ? (
+          )}
+          {deleteCollectionModal && (
             <DeleteCollectionModal
               onClose={() => setDeleteCollectionModal(false)}
               activeCollection={activeCollection}
             />
-          ) : undefined}
+          )}
+          {bulkDeleteLinksModal && (
+            <BulkDeleteLinksModal
+              onClose={() => {
+                setBulkDeleteLinksModal(false);
+              }}
+            />
+          )}
+          {bulkEditLinksModal && (
+            <BulkEditLinksModal
+              onClose={() => {
+                setBulkEditLinksModal(false);
+              }}
+            />
+          )}
         </>
-      ) : undefined}
+      )}
     </MainLayout>
   );
 }

pages/links/index.tsx

@@ -3,24 +3,73 @@ import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
-import { Sort, ViewMode } from "@/types/global";
+import { Member, Sort, ViewMode } from "@/types/global";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";
 
 export default function Links() {
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
+  const router = useRouter();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
   useLinks({ sort: sortBy });
 
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -41,17 +90,105 @@ export default function Links() {
           />
 
           <div className="mt-2 flex items-center justify-end gap-2">
+            {links.length > 0 && (
+              <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>
+            )}
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
         {links[0] ? (
-          <LinkComponent links={links} />
+          <LinkComponent editMode={editMode} links={links} />
         ) : (
           <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
     </MainLayout>
   );
 }

pages/links/pinned.tsx

@@ -2,16 +2,22 @@ import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
+import { useRouter } from "next/router";
 
 export default function PinnedLinks() {
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -20,6 +26,48 @@ export default function PinnedLinks() {
 
   useLinks({ sort: sortBy, pinnedOnly: true });
 
+  const router = useRouter();
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -39,13 +87,87 @@ export default function PinnedLinks() {
             description={"Pinned Links from your Collections"}
           />
           <div className="mt-2 flex items-center justify-end gap-2">
+            {!(links.length === 0) && (
+              <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>
+            )}
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links} />
+          <LinkComponent editMode={editMode} links={links} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
@@ -62,6 +184,20 @@ export default function PinnedLinks() {
           </div>
         )}
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
     </MainLayout>
   );
 }

pages/public/collections/[id].tsx

@@ -60,8 +60,8 @@ export default function PublicCollections() {
     name: true,
     url: true,
     description: true,
-    textContent: true,
     tags: true,
+    textContent: false,
   });
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

pages/search.tsx

@@ -5,12 +5,13 @@ import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
+import { GridLoader, PropagateLoader } from "react-spinners";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -21,8 +22,8 @@ export default function Search() {
     name: true,
     url: true,
     description: true,
-    textContent: true,
     tags: true,
+    textContent: false,
   });
 
   const [viewMode, setViewMode] = useState<string>(
@@ -30,7 +31,7 @@ export default function Search() {
   );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  useLinks({
+  const { isLoading } = useLinks({
     sort: sortBy,
     searchQueryString: decodeURIComponent(router.query.q as string),
     searchByName: searchFilter.name,
@@ -40,6 +41,10 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
+  useEffect(() => {
+    console.log("isLoading", isLoading);
+  }, [isLoading]);
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -51,7 +56,7 @@ export default function Search() {
 
   return (
     <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full">
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
         <div className="flex justify-between">
           <PageHeader icon={"bi-search"} title={"Search Results"} />
 
@@ -67,15 +72,24 @@ export default function Search() {
           </div>
         </div>
 
-        {links[0] ? (
-          <LinkComponent links={links} />
-        ) : (
+        {!isLoading && !links[0] ? (
           <p>
             Nothing found.{" "}
             <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>
+        ) : links[0] ? (
+          <LinkComponent links={links} isLoading={isLoading} />
+        ) : (
+          isLoading && (
+            <GridLoader
+              color="oklch(var(--p))"
+              loading={true}
+              size={20}
+              className="m-auto py-10"
+            />
+          )
         )}
       </div>
     </MainLayout>

pages/settings/appearance.tsx

@@ -1,106 +0,0 @@
-import SettingsLayout from "@/layouts/SettingsLayout";
-import { useState, useEffect } from "react";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { toast } from "react-hot-toast";
-import React from "react";
-import useLocalSettingsStore from "@/store/localSettings";
-
-export default function Appearance() {
-  const { updateSettings } = useLocalSettingsStore();
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-
-  const [user, setUser] = useState<AccountSettings>(
-    !objectIsEmpty(account)
-      ? account
-      : ({
-          // @ts-ignore
-          id: null,
-          name: "",
-          username: "",
-          email: "",
-          emailVerified: null,
-          blurredFavicons: null,
-          image: "",
-          isPrivate: true,
-          // @ts-ignore
-          createdAt: null,
-          whitelistedUsers: [],
-        } as unknown as AccountSettings)
-  );
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) setUser({ ...account });
-  }, [account]);
-
-  return (
-    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Appearance</p>
-
-      <div className="divider my-3"></div>
-
-      <div className="flex flex-col gap-5">
-        <div>
-          <p className="mb-3">Select Theme</p>
-          <div className="flex gap-3 w-full">
-            <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
-                localStorage.getItem("theme") === "dark"
-                  ? "dark:outline-primary text-primary"
-                  : "text-white"
-              }`}
-              onClick={() => updateSettings({ theme: "dark" })}
-            >
-              <i className="bi-moon-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Dark</p>
-
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
-            </div>
-            <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
-                localStorage.getItem("theme") === "light"
-                  ? "outline-primary text-primary"
-                  : "text-black"
-              }`}
-              onClick={() => updateSettings({ theme: "light" })}
-            >
-              <i className="bi-sun-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Light</p>
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
-            </div>
-          </div>
-        </div>
-
-        {/* <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Save Changes"
-          className="mt-2 mx-auto lg:mx-0"
-        /> */}
-      </div>
-    </SettingsLayout>
-  );
-}

pages/settings/archive.tsx

@@ -1,93 +0,0 @@
-import Checkbox from "@/components/Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
-import useAccountStore from "@/store/account";
-import { toast } from "react-hot-toast";
-import { AccountSettings } from "@/types/global";
-
-export default function Archive() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
-
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-
-  useEffect(() => {
-    setUser({
-      ...account,
-      archiveAsScreenshot,
-      archiveAsPDF,
-      archiveAsWaybackMachine,
-    });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) {
-      setArchiveAsScreenshot(account.archiveAsScreenshot);
-      setArchiveAsPDF(account.archiveAsPDF);
-      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
-    }
-  }, [account]);
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Archive Settings</p>
-
-      <div className="divider my-3"></div>
-
-      <p>Formats to Archive/Preserve webpages:</p>
-      <div className="p-3">
-        <Checkbox
-          label="Screenshot"
-          state={archiveAsScreenshot}
-          onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
-        />
-
-        <Checkbox
-          label="PDF"
-          state={archiveAsPDF}
-          onClick={() => setArchiveAsPDF(!archiveAsPDF)}
-        />
-
-        <Checkbox
-          label="Archive.org Snapshot"
-          state={archiveAsWaybackMachine}
-          onClick={() => setArchiveAsWaybackMachine(!archiveAsWaybackMachine)}
-        />
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Save Changes"
-        className="mt-2 w-full sm:w-fit"
-      />
-    </SettingsLayout>
-  );
-}

pages/settings/preference.tsx

@@ -0,0 +1,237 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useState, useEffect } from "react";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import React from "react";
+import useLocalSettingsStore from "@/store/localSettings";
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
+import { LinksRouteTo } from "@prisma/client";
+
+export default function Appearance() {
+  const { updateSettings } = useLocalSettingsStore();
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+  const [user, setUser] = useState<AccountSettings>(account);
+
+  const [preventDuplicateLinks, setPreventDuplicateLinks] =
+    useState<boolean>(false);
+  const [archiveAsScreenshot, setArchiveAsScreenshot] =
+    useState<boolean>(false);
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(false);
+  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
+    user.linksRouteTo
+  );
+
+  useEffect(() => {
+    setUser({
+      ...account,
+      archiveAsScreenshot,
+      archiveAsPDF,
+      archiveAsWaybackMachine,
+      linksRouteTo,
+      preventDuplicateLinks,
+    });
+  }, [
+    account,
+    archiveAsScreenshot,
+    archiveAsPDF,
+    archiveAsWaybackMachine,
+    linksRouteTo,
+    preventDuplicateLinks,
+  ]);
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) {
+      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsPDF(account.archiveAsPDF);
+      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+      setLinksRouteTo(account.linksRouteTo);
+      setPreventDuplicateLinks(account.preventDuplicateLinks);
+    }
+  }, [account]);
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Preference</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-5">
+        <div>
+          <p className="mb-3">Select Theme</p>
+          <div className="flex gap-3 w-full">
+            <div
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+                localStorage.getItem("theme") === "dark"
+                  ? "dark:outline-primary text-primary"
+                  : "text-white"
+              }`}
+              onClick={() => updateSettings({ theme: "dark" })}
+            >
+              <i className="bi-moon-fill text-6xl"></i>
+              <p className="ml-2 text-2xl">Dark</p>
+
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+            </div>
+            <div
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+                localStorage.getItem("theme") === "light"
+                  ? "outline-primary text-primary"
+                  : "text-black"
+              }`}
+              onClick={() => updateSettings({ theme: "light" })}
+            >
+              <i className="bi-sun-fill text-6xl"></i>
+              <p className="ml-2 text-2xl">Light</p>
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="capitalize text-3xl font-thin inline">
+            Archive Settings
+          </p>
+
+          <div className="divider my-3"></div>
+
+          <p>Formats to Archive/Preserve webpages:</p>
+          <div className="p-3">
+            <Checkbox
+              label="Screenshot"
+              state={archiveAsScreenshot}
+              onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
+            />
+
+            <Checkbox
+              label="PDF"
+              state={archiveAsPDF}
+              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+            />
+
+            <Checkbox
+              label="Archive.org Snapshot"
+              state={archiveAsWaybackMachine}
+              onClick={() =>
+                setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
+              }
+            />
+          </div>
+        </div>
+
+        <div>
+          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
+
+          <div className="divider my-3"></div>
+          <div className="mb-3">
+            <Checkbox
+              label="Prevent duplicate links"
+              state={preventDuplicateLinks}
+              onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
+            />
+          </div>
+
+          <p>Clicking on Links should:</p>
+          <div className="p-3">
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Original"
+                checked={linksRouteTo === LinksRouteTo.ORIGINAL}
+                onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
+              />
+              <span className="label-text">Open the original content</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="PDF"
+                checked={linksRouteTo === LinksRouteTo.PDF}
+                onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
+              />
+              <span className="label-text">Open PDF, if available</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Readable"
+                checked={linksRouteTo === LinksRouteTo.READABLE}
+                onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
+              />
+              <span className="label-text">Open Readable, if available</span>
+            </label>
+
+            <label
+              className="label cursor-pointer flex gap-2 justify-start w-fit"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Screenshot"
+                checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
+                onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
+              />
+              <span className="label-text">Open Screenshot, if available</span>
+            </label>
+          </div>
+        </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
+        />
+      </div>
+    </SettingsLayout>
+  );
+}

pages/subscribe.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
 import AccentSubmitButton from "@/components/AccentSubmitButton";
+import useAccountStore from "@/store/account";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -12,6 +13,8 @@ export default function Subscribe() {
 
   const [plan, setPlan] = useState<Plan>(1);
 
+  const { account } = useAccountStore();
+
   const router = useRouter();
 
   async function submit() {
@@ -27,9 +30,13 @@ export default function Subscribe() {
 
   return (
     <CenteredForm
-      text={`Start with a ${
-        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-      }-day free trial, cancel anytime!`}
+      text={
+        account.username
+          ? ""
+          : `Start with a ${
+              process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+            }-day free trial, cancel anytime!`
+      }
     >
       <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
@@ -37,7 +44,6 @@ export default function Subscribe() {
         </p>
 
         <div className="divider my-0"></div>
-
         <div>
           <p>
             You will be redirected to Stripe, feel free to reach out to us at{" "}
@@ -47,7 +53,6 @@ export default function Subscribe() {
             in case of any issue.
           </p>
         </div>
-
         <div className="flex gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
@@ -74,7 +79,6 @@ export default function Subscribe() {
             25% Off
           </div>
         </div>
-
         <div className="flex flex-col gap-2 justify-center items-center">
           <p className="text-3xl">
             ${plan === Plan.monthly ? "4" : "3"}
@@ -89,13 +93,20 @@ export default function Subscribe() {
             </legend>
 
             <p className="text-sm">
-              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
-              {plan === Plan.monthly ? "4 per month" : "36 annually"}
+              {account.username
+                ? ""
+                : `${process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then `}
+              ${plan === Plan.monthly ? "4 per month" : "36 annually"}
             </p>
             <p className="text-sm">+ VAT if applicable</p>
           </fieldset>
-        </div>
 
+          <p className="text-sm mb-5">
+            {account.username
+              ? "Please note that since your trial has been previously ended, your subscription will start immediately. You can cancel anytime."
+              : ""}
+          </p>
+        </div>
         <AccentSubmitButton
           type="button"
           label="Complete Subscription!"
@@ -103,7 +114,6 @@ export default function Subscribe() {
           onClick={submit}
           loading={submitLoader}
         />
-
         <div
           onClick={() => signOut()}
           className="w-fit mx-auto cursor-pointer text-neutral font-semibold "

pages/tags/[id].tsx

@@ -1,6 +1,6 @@
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, use, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import useTagStore from "@/store/tags";
 import SortDropdown from "@/components/SortDropdown";
@@ -12,11 +12,15 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 
 export default function Index() {
   const router = useRouter();
 
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
+    useLinkStore();
   const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -26,11 +30,30 @@ export default function Index() {
 
   const [activeTag, setActiveTag] = useState<TagIncludingLinkCount>();
 
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (editMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
   useLinks({ tagId: Number(router.query.id), sort: sortBy });
 
   useEffect(() => {
-    setActiveTag(tags.find((e) => e.id === Number(router.query.id)));
-  }, [router, tags]);
+    const tag = tags.find((e) => e.id === Number(router.query.id));
+
+    if (tags.length > 0 && !tag?.id) {
+      router.push("/dashboard");
+      return;
+    }
+
+    setActiveTag(tag);
+  }, [router, tags, Number(router.query.id), setActiveTag]);
 
   useEffect(() => {
     setNewTagName(activeTag?.name);
@@ -91,6 +114,35 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );
@@ -195,16 +247,102 @@ export default function Index() {
           </div>
 
           <div className="flex gap-2 items-center mt-2">
+            <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>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
+        {editMode && links.length > 0 && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                onClick={() => setBulkEditLinksModal(true)}
+                className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canUpdate
+                  )
+                }
+              >
+                Edit
+              </button>
+              <button
+                onClick={(e) => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  e.shiftKey
+                    ? bulkDeleteLinks()
+                    : setBulkDeleteLinksModal(true);
+                }}
+                className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                disabled={
+                  selectedLinks.length === 0 ||
+                  !(
+                    collectivePermissions === true ||
+                    collectivePermissions?.canDelete
+                  )
+                }
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
         <LinkComponent
+          editMode={editMode}
           links={links.filter((e) =>
             e.tags.some((e) => e.id === Number(router.query.id))
           )}
         />
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
     </MainLayout>
   );
 }

prisma/migrations/20240207152849_add_links_route_enum_setting/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "LinksRouteTo" AS ENUM ('ORIGINAL', 'PDF', 'READABLE', 'SCREENSHOT');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "linksRouteTo" "LinksRouteTo" NOT NULL DEFAULT 'ORIGINAL';

prisma/migrations/20240218080348_allow_duplicate_collection_names/migration.sql

@@ -0,0 +1,2 @@
+-- DropIndex
+DROP INDEX "Collection_name_ownerId_key";

prisma/migrations/20240222050805_collection_order/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "collectionOrder" INTEGER[] DEFAULT ARRAY[]::INTEGER[];

prisma/migrations/20240305045701_add_merge_duplicate_links/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "preventDuplicateLinks" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20240310062152_added_indexes/migration.sql

@@ -0,0 +1,5 @@
+-- CreateIndex
+CREATE INDEX "Collection_ownerId_idx" ON "Collection"("ownerId");
+
+-- CreateIndex
+CREATE INDEX "UsersAndCollections_userId_idx" ON "UsersAndCollections"("userId");

prisma/migrations/20240310062318_added_index_to_ownerid_on_tag_model/migration.sql

@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "Tag_ownerId_idx" ON "Tag"("ownerId");

prisma/schema.prisma

@@ -38,9 +38,12 @@ model User {
   tags                    Tag[]
   pinnedLinks             Link[]
   collectionsJoined       UsersAndCollections[]
+  collectionOrder         Int[]                @default([])
   whitelistedUsers        WhitelistedUser[]
   accessTokens            AccessToken[]
   subscriptions           Subscription?
+  linksRouteTo            LinksRouteTo          @default(ORIGINAL)
+  preventDuplicateLinks   Boolean               @default(false)
   archiveAsScreenshot     Boolean               @default(true)
   archiveAsPDF            Boolean               @default(true)
   archiveAsWaybackMachine Boolean               @default(false)
@@ -49,6 +52,13 @@ model User {
   updatedAt               DateTime              @default(now()) @updatedAt
 }
 
+enum LinksRouteTo {
+  ORIGINAL
+  PDF
+  READABLE
+  SCREENSHOT
+}
+
 model WhitelistedUser {
   id        Int      @id @default(autoincrement())
   username  String   @default("")
@@ -83,8 +93,8 @@ model Collection {
   links           Link[]
   createdAt       DateTime              @default(now())
   updatedAt       DateTime              @default(now()) @updatedAt
-
-  @@unique([name, ownerId])
+  
+  @@index([ownerId])
 }
 
 model UsersAndCollections {
@@ -99,6 +109,7 @@ model UsersAndCollections {
   updatedAt    DateTime   @default(now()) @updatedAt
 
   @@id([userId, collectionId])
+  @@index([userId])
 }
 
 model Link {
@@ -131,6 +142,7 @@ model Tag {
   updatedAt DateTime @default(now()) @updatedAt
 
   @@unique([name, ownerId])
+  @@index([ownerId])
 }
 
 model Subscription {

scripts/worker.ts

@@ -19,36 +19,16 @@ async function processBatch() {
       url: { not: null },
       OR: [
         {
-          collection: {
-            owner: {
-              archiveAsScreenshot: true,
-            },
-          },
           image: null,
         },
         {
-          collection: {
-            owner: {
-              archiveAsScreenshot: true,
-            },
-          },
           image: "pending",
         },
         ///////////////////////
         {
-          collection: {
-            owner: {
-              archiveAsPDF: true,
-            },
-          },
           pdf: null,
         },
         {
-          collection: {
-            owner: {
-              archiveAsPDF: true,
-            },
-          },
           pdf: "pending",
         },
         ///////////////////////
@@ -76,36 +56,16 @@ async function processBatch() {
       url: { not: null },
       OR: [
         {
-          collection: {
-            owner: {
-              archiveAsScreenshot: true,
-            },
-          },
           image: null,
         },
         {
-          collection: {
-            owner: {
-              archiveAsScreenshot: true,
-            },
-          },
           image: "pending",
         },
         ///////////////////////
         {
-          collection: {
-            owner: {
-              archiveAsPDF: true,
-            },
-          },
           pdf: null,
         },
         {
-          collection: {
-            owner: {
-              archiveAsPDF: true,
-            },
-          },
           pdf: "pending",
         },
         ///////////////////////
@@ -115,13 +75,6 @@ async function processBatch() {
         {
           readable: "pending",
         },
-        ///////////////////////
-        {
-          preview: null,
-        },
-        {
-          preview: "pending",
-        },
       ],
     },
     take: archiveTakeCount,

store/links.ts

@@ -10,10 +10,12 @@ type ResponseObject = {
 
 type LinkStore = {
   links: LinkIncludingShortenedCollectionAndTags[];
+  selectedLinks: LinkIncludingShortenedCollectionAndTags[];
   setLinks: (
     data: LinkIncludingShortenedCollectionAndTags[],
     isInitialCall: boolean
   ) => void;
+  setSelectedLinks: (links: LinkIncludingShortenedCollectionAndTags[]) => void;
   addLink: (
     body: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
@@ -21,12 +23,22 @@ type LinkStore = {
   updateLink: (
     link: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
+  updateLinks: (
+    links: LinkIncludingShortenedCollectionAndTags[],
+    removePreviousTags: boolean,
+    newData: Pick<
+      LinkIncludingShortenedCollectionAndTags,
+      "tags" | "collectionId"
+    >
+  ) => Promise<ResponseObject>;
   removeLink: (linkId: number) => Promise<ResponseObject>;
+  deleteLinksById: (linkIds: number[]) => Promise<ResponseObject>;
   resetLinks: () => void;
 };
 
 const useLinkStore = create<LinkStore>()((set) => ({
   links: [],
+  selectedLinks: [],
   setLinks: async (data, isInitialCall) => {
     isInitialCall &&
       set(() => ({
@@ -45,6 +57,7 @@ const useLinkStore = create<LinkStore>()((set) => ({
       ),
     }));
   },
+  setSelectedLinks: (links) => set({ selectedLinks: links }),
   addLink: async (body) => {
     const response = await fetch("/api/v1/links", {
       body: JSON.stringify(body),
@@ -122,6 +135,41 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  updateLinks: async (links, removePreviousTags, newData) => {
+    const response = await fetch("/api/v1/links", {
+      body: JSON.stringify({ links, removePreviousTags, newData }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      set((state) => ({
+        links: state.links.map((e) =>
+          links.some((link) => link.id === e.id)
+            ? {
+                ...e,
+                collectionId: newData.collectionId ?? e.collectionId,
+                collection: {
+                  ...e.collection,
+                  id: newData.collectionId ?? e.collection.id,
+                },
+                tags: removePreviousTags
+                  ? [...(newData.tags ?? [])]
+                  : [...e.tags, ...(newData.tags ?? [])],
+              }
+            : e
+        ),
+      }));
+      useTagStore.getState().setTags();
+      useCollectionStore.getState().setCollections();
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   removeLink: async (linkId) => {
     const response = await fetch(`/api/v1/links/${linkId}`, {
       headers: {
@@ -142,6 +190,27 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  deleteLinksById: async (linkIds: number[]) => {
+    const response = await fetch("/api/v1/links", {
+      body: JSON.stringify({ linkIds }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "DELETE",
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      set((state) => ({
+        links: state.links.filter((e) => !linkIds.includes(e.id as number)),
+      }));
+      useTagStore.getState().setTags();
+      useCollectionStore.getState().setCollections();
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   resetLinks: () => set({ links: [] }),
 }));
 

store/localSettings.ts

@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { ViewMode } from "@/types/global";
 
 type LocalSettings = {
   theme?: string;

types/enviornment.d.ts

@@ -36,6 +36,16 @@ declare global {
       NEXT_PUBLIC_TRIAL_PERIOD_DAYS?: string;
       BASE_URL?: string;
 
+      // Proxy settings
+      PROXY?: string;
+      PROXY_USERNAME?: string;
+      PROXY_PASSWORD?: string;
+      PROXY_BYPASS?: string;
+
+      // PDF archive settings
+      PDF_MARGIN_TOP?: string;
+      PDF_MARGIN_BOTTOM?: string;
+
       //
       // SSO Providers
       //

types/global.ts

@@ -33,6 +33,7 @@ export interface CollectionIncludingMembersAndLinkCount
   id?: number;
   ownerId?: number;
   createdAt?: string;
+  updatedAt?: string;
   _count?: { links: number };
   members: Member[];
 }

types/himalaya.d.ts

@@ -0,0 +1,22 @@
+declare module "himalaya" {
+  export interface Attribute {
+    key: string;
+    value: string;
+  }
+
+  export interface TextNode {
+    type: "text";
+    content: string;
+  }
+
+  export type Node = TextNode | Element;
+
+  export interface Element {
+    type: "element";
+    tagName: string;
+    attributes: Attribute[];
+    children: Node[];
+  }
+
+  export function parse(html: string): Node[];
+}

yarn.lock

@@ -12,6 +12,15 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@atlaskit/tree@^8.8.7":
+  version "8.8.7"
+  resolved "https://registry.yarnpkg.com/@atlaskit/tree/-/tree-8.8.7.tgz#f895137b063f676a490abb0b5deb939a96f51fd7"
+  integrity sha512-ftbFCzZoa5tZh35EdwMEP9lPuBfw19vtB1CcBmDDMP0AnyEXLjUVfVo8kIls6oI4wivYfIWkZgrUlgN+Jk1b0Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    css-box-model "^1.2.0"
+    react-beautiful-dnd-next "11.0.5"
+
 "@auth/core@0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.9.0.tgz#7a5d66eea0bc059cef072734698547ae2a0c86a6"
@@ -614,6 +623,21 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/runtime-corejs2@^7.4.5":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.24.0.tgz#23c12d76ac8a7a0ec223c4b0c3b937f9c203fa33"
+  integrity sha512-RZVGq1it0GA1K8rb+z7v7NzecP6VYCMedN7yHsCCIQUMmRXFCPJD8GISdf6uIGj7NDDihg7ieQEzpdpQbUL75Q==
+  dependencies:
+    core-js "^2.6.12"
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.0.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
@@ -628,6 +652,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.21.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
@@ -1925,6 +1956,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/jsdom@^21.1.3":
   version "21.1.3"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-21.1.3.tgz#a88c5dc65703e1b10b2a7839c12db49662b43ff0"
@@ -1993,6 +2032,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.20":
+  version "7.1.33"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.33.tgz#53c5564f03f1ded90904e3c90f77e4bd4dc20b15"
+  integrity sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^4.4.0":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
@@ -2113,6 +2162,13 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agent-base@^7.0.2:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.0.tgz#536802b76bc0b34aa50195eb2442276d613e3434"
+  integrity sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==
+  dependencies:
+    debug "^4.3.4"
+
 ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -2601,6 +2657,11 @@ cookie@0.5.0, cookie@^0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+core-js@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2636,6 +2697,13 @@ crypto-js@^4.2.0:
   resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
   integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
 
+css-box-model@^1.1.2, css-box-model@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-selector-tokenizer@^0.8:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
@@ -3713,7 +3781,12 @@ hexoid@^1.0.0:
   resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-1.0.0.tgz#ad10c6573fb907de23d9ec63a711267d9dc9bc18"
   integrity sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==
 
-hoist-non-react-statics@^3.3.1:
+himalaya@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/himalaya/-/himalaya-1.1.0.tgz#31724ae9d35714cd7c6f4be94888953f3604606a"
+  integrity sha512-LLase1dHCRMel68/HZTFft0N0wti0epHr3nNY7ynpLbyZpmrKMQ8YIpiOV77TM97cNpC8Wb2n6f66IRggwdWPw==
+
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3847,6 +3920,14 @@ iota-array@^1.0.0:
   resolved "https://registry.yarnpkg.com/iota-array/-/iota-array-1.0.0.tgz#81ef57fe5d05814cd58c2483632a99c30a0e8087"
   integrity sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==
 
+ip-address@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a"
+  integrity sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==
+  dependencies:
+    jsbn "1.1.0"
+    sprintf-js "^1.1.3"
+
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -4111,6 +4192,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsbn@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
+  integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -4287,6 +4373,11 @@ make-error@^1.1.1:
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+memoize-one@^5.0.4:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memoize-one@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@@ -4469,7 +4560,7 @@ node-bitmap@0.0.1:
   resolved "https://registry.yarnpkg.com/node-bitmap/-/node-bitmap-0.0.1.tgz#180eac7003e0c707618ef31368f62f84b2a69091"
   integrity sha512-Jx5lPaaLdIaOsj2mVLWMWulXF6GQVdyLvNSxmiYCvZ8Ma2hfKX0POoR2kgKOqz+oFsRreq0yYZjQ2wjE9VNzCA==
 
-node-fetch@^2.6.1:
+node-fetch@^2.6.1, node-fetch@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -4959,7 +5050,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5010,6 +5101,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raf-schd@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
+
 raw-body@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
@@ -5020,6 +5116,20 @@ raw-body@2.4.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-beautiful-dnd-next@11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd-next/-/react-beautiful-dnd-next-11.0.5.tgz#41e693733bbdeb6269b9e4b923a36de2e99ed761"
+  integrity sha512-kM5Mob41HkA3ShS9uXqeMkW51L5bVsfttxfrwwHucu7I6SdnRKCyN78t6QiLH/UJQQ8T4ukI6NeQAQQpGwolkg==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.4.5"
+    css-box-model "^1.1.2"
+    memoize-one "^5.0.4"
+    raf-schd "^4.0.0"
+    react-redux "^7.0.3"
+    redux "^4.0.1"
+    tiny-invariant "^1.0.4"
+    use-memo-one "^1.1.0"
+
 react-colorful@^5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
@@ -5050,6 +5160,23 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
+react-redux@^7.0.3:
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
+  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/react-redux" "^7.1.20"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
@@ -5084,6 +5211,11 @@ react-select@^5.7.4:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
+react-spinners@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -5140,6 +5272,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+redux@^4.0.0, redux@^4.0.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.3:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -5357,6 +5496,28 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+smart-buffer@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
+socks-proxy-agent@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz#5acbd7be7baf18c46a3f293a840109a430a640ad"
+  integrity sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "^4.3.4"
+    socks "^2.7.1"
+
+socks@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.3.tgz#7d8a75d7ce845c0a96f710917174dba0d543a785"
+  integrity sha512-vfuYK48HXCTFD03G/1/zkIls3Ebr2YNa4qU9gHDZdblHLiqhJrJGkY3+0Nx0JpN9qBhJbVObc1CNciT1bIZJxw==
+  dependencies:
+    ip-address "^9.0.5"
+    smart-buffer "^4.2.0"
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -5372,6 +5533,11 @@ spawn-command@0.0.2:
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
   integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
 
+sprintf-js@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
+  integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
+
 sshpk@^1.7.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
@@ -5636,6 +5802,16 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+tiny-invariant@^1.0.4:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
+tiny-invariant@^1.0.6:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
 tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
@@ -5872,6 +6048,11 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
+use-memo-one@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"