Merge pull request #563 from linkwarden/hotfix/title-fetching

update version number

.devcontainer/devcontainer.json

@@ -1,22 +1,22 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+  "name": "Node.js & TypeScript",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+  // Configure tool-specific properties.
+  // "customizations": {},
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	"remoteUser": "root"
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  "remoteUser": "root"
 }

.env.sample

@@ -1,5 +1,5 @@
 NEXTAUTH_SECRET=very_sensitive_secret
-NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL=http://localhost:3000/api/v1/auth
 
 # Manual installation database settings
 DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
@@ -18,6 +18,10 @@ RE_ARCHIVE_LIMIT=
 NEXT_PUBLIC_MAX_FILE_SIZE=
 MAX_LINKS_PER_USER=
 ARCHIVE_TAKE_COUNT=
+BROWSER_TIMEOUT=
+IGNORE_UNAUTHORIZED_CA=
+IGNORE_HTTPS_ERRORS=
+IGNORE_URL_SIZE_LIMIT=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -32,6 +36,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

.github/SECURITY.md

@@ -1,17 +1,19 @@
-# Security Policy
+# Security
 
-## Supported Versions
+The Linkwarden team and community take security bugs in Linkwarden seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
 
-| Version | Supported |
-| ------- | --------- |
-| 1.x.x   | ✅        |
+# Reporting Security Issues
 
-## Reporting a Vulnerability
+**Please do not report security vulnerabilities through public GitHub issues.**
 
-First off, we really appreciate the time you spent!
+Instead, please use the GitHub Security Advisory ["Report a Vulnerability"](https://github.com/linkwarden/linkwarden/security/advisories/new) tab.
 
-If you found a vulnerability, these are the ways you can reach us:
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message:
+[security@linkwarden.app](mailto:security@linkwarden.app)
 
-Email: [security@linkwarden.app](mailto:security@linkwarden.app)
 
-Or you can directly DM me via Twitter: [@daniel31x13](https://twitter.com/Daniel31X13).
+After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
+
+# Preferred Languages
+
+We prefer all communications to be in English.

.gitignore

@@ -46,4 +46,5 @@ prisma/dev.db
 /playwright/.cache/
 
 # docker
-pgdata
+pgdata
+certificates

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+public
+
+*.lock
+*.log
+
+.github
+
+data
+pgdata

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2
+}

ARCHITECTURE.md

@@ -0,0 +1,45 @@
+# Architecture
+
+This is a summary of the architecture of Linkwarden. It's intended as a primer for collaborators to get a high-level understanding of the project.
+
+When you start Linkwarden, there are mainly two components that run:
+
+- The NextJS app, This is the main app and it's responsible for serving the frontend and handling the API routes.
+- [The Background Worker](https://github.com/linkwarden/linkwarden/blob/main/scripts/worker.ts), This is a separate `ts-node` process that runs in the background and is responsible for archiving links.
+
+## Main Tech Stack
+
+- [NextJS](https://github.com/vercel/next.js)
+- [TypeScript](https://github.com/microsoft/TypeScript)
+- [Tailwind](https://github.com/tailwindlabs/tailwindcss)
+- [DaisyUI](https://github.com/saadeghi/daisyui)
+- [Prisma](https://github.com/prisma/prisma)
+- [Playwright](https://github.com/microsoft/playwright)
+- [Zustand](https://github.com/pmndrs/zustand)
+
+## Folder Structure
+
+Here's a summary of the main files and folders in the project:
+
+```
+linkwarden
+├── components         # React components
+├── hooks              # React reusable hooks
+├── layouts            # Layouts for pages
+├── lib
+│   ├── api            # Server-side functions (controllers, etc.)
+│   ├── client         # Client-side functions
+│   └── shared         # Shared functions between client and server
+├── pages              # Pages and API routes
+├── prisma             # Prisma schema and migrations
+├── scripts
+│   ├── migration      # Scripts for breaking changes
+│   └── worker.ts      # Background worker for archiving links
+├── store              # Zustand stores
+├── styles             # Styles
+└── types              # TypeScript types
+```
+
+## Versioning
+
+We use semantic versioning for the project. You can track the changes from the [Releases](https://github.com/linkwarden/linkwarden/releases).

Dockerfile

@@ -9,7 +9,7 @@ WORKDIR /data
 COPY ./package.json ./yarn.lock ./playwright.config.ts ./
 
 # Increase timeout to pass github actions arm64 build
-RUN yarn install --network-timeout 10000000
+RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn yarn install --network-timeout 10000000
 
 RUN npx playwright install-deps && \
     apt-get clean && \

README.md

@@ -17,7 +17,9 @@
 
 ## Intro & motivation
 
-**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, organize and archive webpages.** The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://www.howtogeek.com/786227/what-is-link-rot-and-how-does-it-threaten-the-web/)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
+**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, organize and archive webpages.**
+
+The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://www.howtogeek.com/786227/what-is-link-rot-and-how-does-it-threaten-the-web/)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
 
 Additionally, Linkwarden is designed with collaboration in mind, sharing links with the public and/or allowing multiple users to work together seamlessly.
 
@@ -27,17 +29,21 @@ Additionally, Linkwarden is designed with collaboration in mind, sharing links w
 <img src="./assets/dashboard.png" />
 
 <div align="center">
-<img src="./assets/all_links.png" width="32%" />
+<img src="./assets/all_links.jpg" width="23%" />
 
-<img src="./assets/all_collections.png" width="32%" />
+<img src="./assets/list_view.jpg" width="23%" />
 
-<img src="./assets/manage_team.png" width="32%" />
+<img src="./assets/all_collections.jpg" width="23%" />
 
-<img src="./assets/readable_view.png" width="32%" />
+<img src="./assets/manage_team.jpg" width="23%" />
 
-<img src="./assets/public_page.png" width="32%" />
+<img src="./assets/readable_view.jpg" width="23%" />
 
-<img src="./assets/light_mode.png" width="32%" />
+<img src="./assets/preserved_formats.jpg" width="23%" />
+
+<img src="./assets/public_page.jpg" width="23%" />
+
+<img src="./assets/light_dashboard.jpg" width="23%" />
 </div>
 
 <details>
@@ -53,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.
@@ -64,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/CollectionCard.tsx

@@ -9,6 +9,7 @@ import useAccountStore from "@/store/account";
 import EditCollectionModal from "./ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 type Props = {
   collection: CollectionIncludingMembersAndLinkCount;
@@ -70,6 +71,7 @@ export default function CollectionCard({ collection, className }: Props) {
         <div
           tabIndex={0}
           role="button"
+          onMouseDown={dropdownTriggerer}
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
           <i className="bi-three-dots text-xl" title="More"></i>
@@ -170,7 +172,7 @@ export default function CollectionCard({ collection, className }: Props) {
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
                   <i
-                    className="bi-globe-americas drop-shadow text-neutral"
+                    className="bi-globe2 drop-shadow text-neutral"
                     title="This collection is being shared publicly."
                   ></i>
                 ) : undefined}

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

@@ -1,3 +1,4 @@
+import { dropdownTriggerer } from "@/lib/client/utils";
 import React from "react";
 
 type Props = {
@@ -20,13 +21,12 @@ export default function FilterSearchDropdown({
       <div
         tabIndex={0}
         role="button"
+        onMouseDown={dropdownTriggerer}
         className="btn btn-sm btn-square btn-ghost"
       >
-        <i
-          className="bi-funnel text-neutral text-2xl"
-        ></i>
+        <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,16 +1,39 @@
 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">
       {links.map((e, i) => {
-        return <LinkCard key={i} link={e} count={i} />;
+        return (
+          <LinkCard
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
       })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
     </div>
   );
 }

components/LinkViews/Layouts/ListView.tsx

@@ -1,16 +1,38 @@
 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 key={i} link={e} count={i} />;
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
       })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
     </div>
   );
 }

components/LinkViews/LinkCard.tsx

@@ -14,19 +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 }: 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;
 
@@ -53,6 +75,7 @@ export default function LinkGrid({ link, count, className }: Props) {
 
   const ref = useRef<HTMLDivElement>(null);
   const isVisible = useOnScreen(ref);
+  const permissions = usePermissions(collection?.id as number);
 
   useEffect(() => {
     let interval: any;
@@ -76,75 +99,96 @@ export default function LinkGrid({ link, count, className }: Props) {
 
   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
+      }
     >
-      <div className="relative rounded-t-2xl h-40 overflow-hidden">
-        {previewAvailable(link) ? (
-          <Image
-            src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-            width={1280}
-            height={720}
-            alt=""
-            className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-            style={{ filter: "blur(2px)" }}
-            draggable="false"
-            onError={(e) => {
-              const target = e.target as HTMLElement;
-              target.style.display = "none";
-            }}
-          />
-        ) : link.preview === "unavailable" ? (
-          <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-        ) : (
-          <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"
-        >
-          <LinkIcon link={link} />
-        </div>
-      </div>
-
-      <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-
-      <div className="p-3 mt-1">
-        <p className="truncate w-full pr-8 text-primary">
-          {unescapeString(link.name || link.description) || link.url}
-        </p>
-
-        <Link
-          href={link.url || ""}
-          target="_blank"
-          title={link.url || ""}
-          className="w-fit"
-        >
-          <div className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-60 duration-100">
-            <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
-            <p className="text-sm truncate">{shortendURL}</p>
+      <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) ? (
+            <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+              width={1280}
+              height={720}
+              alt=""
+              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              style={{ filter: "blur(2px)" }}
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : link.preview === "unavailable" ? (
+            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+          ) : (
+            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+          )}
+          <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>
-        </Link>
-      </div>
-
-      <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-      <div className="flex justify-between text-xs text-neutral px-3 pb-1">
-        <div className="cursor-pointer w-fit">
-          {collection ? (
-            <LinkCollection link={link} collection={collection} />
-          ) : undefined}
         </div>
-        <LinkDate link={link} />
+
+        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+
+        <div className="p-3 mt-1">
+          <p className="truncate w-full pr-8 text-primary">
+            {unescapeString(link.name || link.description) || link.url}
+          </p>
+
+          <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 && (
+              <LinkCollection link={link} collection={collection} />
+            )}
+          </div>
+          <LinkDate link={link} />
+        </div>
       </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)}
@@ -164,7 +208,7 @@ export default function LinkGrid({ link, count, className }: Props) {
               </span>
             )}
           </p>
-          {link.tags[0] ? (
+          {link.tags[0] && (
             <>
               <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
 
@@ -187,9 +231,9 @@ export default function LinkGrid({ link, count, className }: Props) {
                 </div>
               </div>
             </>
-          ) : undefined}
+          )}
         </div>
-      ) : undefined}
+      )}
 
       <LinkActions
         link={link}
@@ -197,6 +241,7 @@ export default function LinkGrid({ link, count, className }: Props) {
         position="top-[10.75rem] right-3"
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
+        flipDropdown={flipDropdown}
       />
     </div>
   );

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -10,6 +10,7 @@ import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsMod
 import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -17,6 +18,7 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
+  flipDropdown?: boolean;
 };
 
 export default function LinkActions({
@@ -24,6 +26,7 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
+  flipDropdown,
 }: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
@@ -64,34 +67,33 @@ export default function LinkActions({
   return (
     <>
       <div
-        className={`dropdown dropdown-left absolute ${
+        className={`dropdown dropdown-left dropdown-end absolute ${
           position || "top-3 right-3"
         } z-20`}
       >
         <div
           tabIndex={0}
           role="button"
+          onMouseDown={dropdownTriggerer}
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
           <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">
-          {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}
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
+          <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.stopPropagation();
-        router.push(`/collections/${link.collection.id}`);
       }}
-      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/LinkComponents/LinkDate.tsx

@@ -1,17 +1,18 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import React from "react";
 
-export default function LinkDate({ link }: {
+export default function LinkDate({
+  link,
+}: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    },
-  );
+  const formattedDate = new Date(
+    (link.importDate || link.createdAt) as string
+  ).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
 
   return (
     <div className="flex items-center gap-1 text-neutral">

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

@@ -11,17 +11,50 @@ import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
 import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
+import { isPWA } from "@/lib/client/utils";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
+  editMode?: boolean;
 };
 
-export default function LinkCardCompact({ link, count, className }: Props) {
+export default function LinkCardCompact({
+  link,
+  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;
 
@@ -46,106 +79,102 @@ export default function LinkCardCompact({ link, count, className }: Props) {
     );
   }, [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 ${
-          !showInfo ? "hover:bg-base-300" : ""
+        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
+        }
       >
+        {/* {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
-          onClick={() => link.url && window.open(link.url || "", "_blank")}
-          className="flex items-center cursor-pointer py-3 px-3"
+          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" />
+            <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>
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
                 {collection ? (
-                  <>
-                    <LinkCollection link={link} collection={collection} />
-                    &middot;
-                  </>
+                  <LinkCollection link={link} collection={collection} />
                 ) : undefined}
                 {link.url ? (
-                  <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-                    <i className="bi-link-45deg text-base" />
-                    <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>
                 )}
+                <LinkDate link={link} />
               </div>
-              <span className="hidden sm:block">&middot;</span>
-              <LinkDate link={link} />
             </div>
           </div>
         </div>
-
         <LinkActions
           link={link}
           collection={collection}
           position="top-3 right-3"
+          flipDropdown={flipDropdown}
           // 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/MobileNavigation.tsx

@@ -0,0 +1,96 @@
+import { dropdownTriggerer, isIphone } from "@/lib/client/utils";
+import React from "react";
+import { useState } from "react";
+import NewLinkModal from "./ModalContent/NewLinkModal";
+import NewCollectionModal from "./ModalContent/NewCollectionModal";
+import UploadFileModal from "./ModalContent/UploadFileModal";
+import MobileNavigationButton from "./MobileNavigationButton";
+
+type Props = {};
+
+export default function MobileNavigation({}: Props) {
+  const [newLinkModal, setNewLinkModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
+  const [uploadFileModal, setUploadFileModal] = useState(false);
+
+  return (
+    <>
+      <div
+        className={`fixed bottom-0 left-0 right-0 z-30 duration-200 sm:hidden`}
+      >
+        <div
+          className={`w-full flex bg-base-100 ${
+            isIphone() ? "pb-5" : ""
+          } border-solid border-t-neutral-content border-t`}
+        >
+          <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />
+          <MobileNavigationButton
+            href={`/links/pinned`}
+            icon={"bi-pin-angle"}
+          />
+          <div className="dropdown dropdown-top -mt-4">
+            <div
+              tabIndex={0}
+              role="button"
+              onMouseDown={dropdownTriggerer}
+              className={`flex items-center btn btn-accent dark:border-violet-400 text-white btn-circle w-20 h-20 px-2 relative`}
+            >
+              <span>
+                <i className="bi-plus text-5xl pointer-events-none"></i>
+              </span>
+            </div>
+            <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mb-1 -ml-12">
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewLinkModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Link
+                </div>
+              </li>
+              {/* <li>
+              <div
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setUploadFileModal(true);
+                }}
+                tabIndex={0}
+                role="button"
+              >
+                Upload File
+              </div>
+            </li> */}
+              <li>
+                <div
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setNewCollectionModal(true);
+                  }}
+                  tabIndex={0}
+                  role="button"
+                >
+                  New Collection
+                </div>
+              </li>
+            </ul>
+          </div>
+          <MobileNavigationButton href={`/links`} icon={"bi-link-45deg"} />
+          <MobileNavigationButton href={`/collections`} icon={"bi-folder"} />
+        </div>
+      </div>
+      {newLinkModal ? (
+        <NewLinkModal onClose={() => setNewLinkModal(false)} />
+      ) : undefined}
+      {newCollectionModal ? (
+        <NewCollectionModal onClose={() => setNewCollectionModal(false)} />
+      ) : undefined}
+      {uploadFileModal ? (
+        <UploadFileModal onClose={() => setUploadFileModal(false)} />
+      ) : undefined}
+    </>
+  );
+}

components/MobileNavigationButton.tsx

@@ -0,0 +1,45 @@
+import { isPWA } from "@/lib/client/utils";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function MobileNavigationButton({
+  href,
+  icon,
+}: {
+  href: string;
+  icon: string;
+}) {
+  const router = useRouter();
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    setActive(href === router.asPath);
+  }, [router]);
+
+  return (
+    <Link
+      href={href}
+      className="w-full active:scale-[80%] duration-200 select-none"
+      draggable="false"
+      style={{ WebkitTouchCallout: "none" }}
+      onContextMenu={(e) => {
+        if (isPWA()) {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        } else return null;
+      }}
+    >
+      <div
+        className={`py-2 cursor-pointer gap-2 w-full rounded-full capitalize flex items-center justify-center`}
+      >
+        <i
+          className={`${icon} text-primary text-3xl drop-shadow duration-200 rounded-full w-14 h-14 text-center pt-[0.65rem] ${
+            active || false ? "bg-primary/20" : ""
+          }`}
+        ></i>
+      </div>
+    </Link>
+  );
+}

components/Modal.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEventHandler, ReactNode, useEffect } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { Drawer } from "vaul";
 
 type Props = {
   toggleModal: Function;
@@ -8,31 +9,59 @@ type Props = {
 };
 
 export default function Modal({ toggleModal, className, children }: Props) {
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  });
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
 
-  return (
-    <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-40">
-      <ClickAwayHandler
-        onClickOutside={toggleModal}
-        className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
-          className || ""
-        }`}
+  useEffect(() => {
+    if (window.innerWidth >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (window.innerWidth < 640) {
+    return (
+      <Drawer.Root
+        open={drawerIsOpen}
+        onClose={() => setTimeout(() => toggleModal(), 100)}
       >
-        <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible">
-          <div
-            onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
+        <Drawer.Portal>
+          <Drawer.Overlay className="fixed inset-0 bg-black/40" />
+          <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+              <div className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto">
+                <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5" />
+
+                {children}
+              </div>
+            </Drawer.Content>
+          </ClickAwayHandler>
+        </Drawer.Portal>
+      </Drawer.Root>
+    );
+  } else {
+    return (
+      <div className="overflow-y-auto pt-2 sm:py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-40">
+        <ClickAwayHandler
+          onClickOutside={toggleModal}
+          className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
+            className || ""
+          }`}
+        >
+          <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible">
+            <div
+              onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+              className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+            >
+              <i className="bi-x text-neutral text-2xl"></i>
+            </div>
+            {children}
           </div>
-          {children}
-        </div>
-      </ClickAwayHandler>
-    </div>
-  );
+        </ClickAwayHandler>
+      </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();
 
@@ -49,7 +48,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
         <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"/>
+          <i className="bi-exclamation-triangle text-xl" />
           <span>
             <b>Warning:</b> This action is irreversible!
           </span>
@@ -64,7 +63,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
           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"/>
+          <i className="bi-trash text-xl" />
           Delete
         </button>
       </div>

components/ModalContent/EditCollectionModal.tsx

@@ -110,7 +110,7 @@ export default function EditCollectionModal({
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          Save
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -9,6 +9,7 @@ import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Modal from "../Modal";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 type Props = {
   onClose: Function;
@@ -227,17 +228,14 @@ export default function EditCollectionSharingModal({
                     e.canCreate && e.canUpdate && e.canDelete
                       ? "Admin"
                       : e.canCreate && !e.canUpdate && !e.canDelete
-                      ? "Contributor"
-                      : !e.canCreate && !e.canUpdate && !e.canDelete
-                      ? "Viewer"
-                      : undefined;
+                        ? "Contributor"
+                        : !e.canCreate && !e.canUpdate && !e.canDelete
+                          ? "Viewer"
+                          : 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"}
                         >
@@ -264,6 +262,7 @@ export default function EditCollectionSharingModal({
                                 <div
                                   tabIndex={0}
                                   role="button"
+                                  onMouseDown={dropdownTriggerer}
                                   className="btn btn-sm btn-primary font-normal"
                                 >
                                   {roleLabel}
@@ -431,7 +430,7 @@ export default function EditCollectionSharingModal({
                         </div>
                       </div>
                       <div className="divider my-0 last:hidden h-[3px]"></div>
-                    </>
+                    </React.Fragment>
                   );
                 })}
             </div>
@@ -443,7 +442,7 @@ export default function EditCollectionSharingModal({
             className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
             onClick={submit}
           >
-            Save
+            Save Changes
           </button>
         )}
       </div>

components/ModalContent/EditLinkModal.tsx

@@ -86,7 +86,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           title={link.url}
           target="_blank"
         >
-          <i className="bi-link-45deg text-xl"/>
+          <i className="bi-link-45deg text-xl" />
           <p>{shortendURL}</p>
         </Link>
       ) : undefined}
@@ -116,14 +116,15 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 defaultValue={
                   link.collection.id
                     ? {
-                      value: link.collection.id,
-                      label: link.collection.name,
-                    }
+                        value: link.collection.id,
+                        label: link.collection.name,
+                      }
                     : {
-                      value: null as unknown as number,
-                      label: "Unorganized",
-                    }
+                        value: null as unknown as number,
+                        label: "Unorganized",
+                      }
                 }
+                creatable={false}
               />
             ) : null}
           </div>
@@ -157,7 +158,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Save
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/NewCollectionModal.tsx

@@ -5,19 +5,26 @@ import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import useAccountStore from "@/store/account";
+import { useSession } from "next-auth/react";
 
 type Props = {
   onClose: Function;
+  parent?: CollectionIncludingMembersAndLinkCount;
 };
 
-export default function NewCollectionModal({ onClose }: Props) {
+export default function NewCollectionModal({ onClose, parent }: Props) {
   const initial = {
+    parentId: parent?.id,
     name: "",
     description: "",
     color: "#0ea5e9",
-  };
+  } as Partial<Collection>;
 
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
+  const { setAccount } = useAccountStore();
+  const { data } = useSession();
 
   useEffect(() => {
     setCollection(initial);
@@ -39,7 +46,11 @@ export default function NewCollectionModal({ onClose }: 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);
@@ -47,7 +58,14 @@ export default function NewCollectionModal({ onClose }: Props) {
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create a New Collection</p>
+      {parent?.id ? (
+        <>
+          <p className="text-xl font-thin">New Sub-Collection</p>
+          <p className="capitalize text-sm">For {parent.name}</p>
+        </>
+      ) : (
+        <p className="text-xl font-thin">Create a New Collection</p>
+      )}
 
       <div className="divider mb-3 mt-1"></div>
 

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;
@@ -179,7 +178,7 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder="Will be auto generated if nothing is provided."
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>

components/ModalContent/NewTokenModal.tsx

@@ -0,0 +1,227 @@
+import React, { useState } from "react";
+import TextInput from "@/components/TextInput";
+import { TokenExpiry } from "@/types/global";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import useTokenStore from "@/store/tokens";
+import { dropdownTriggerer } from "@/lib/client/utils";
+
+type Props = {
+  onClose: Function;
+};
+
+export default function NewTokenModal({ onClose }: Props) {
+  const [newToken, setNewToken] = useState("");
+
+  const { addToken } = useTokenStore();
+
+  const initial = {
+    name: "",
+    expires: 0 as TokenExpiry,
+  };
+
+  const [token, setToken] = useState(initial as any);
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
+
+      const load = toast.loading("Creating...");
+
+      const { ok, data } = await addToken(token);
+
+      toast.dismiss(load);
+
+      if (ok) {
+        toast.success(`Created!`);
+        setNewToken((data as any).secretKey);
+      } else toast.error(data as string);
+
+      setSubmitLoader(false);
+    }
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      {newToken ? (
+        <div className="flex flex-col justify-center space-y-4">
+          <p className="text-xl font-thin">Access Token Created</p>
+          <p>
+            Your new token has been created. Please copy it and store it
+            somewhere safe. You will not be able to see it again.
+          </p>
+          <TextInput
+            spellCheck={false}
+            value={newToken}
+            onChange={() => {}}
+            className="w-full"
+          />
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(newToken);
+              toast.success("Copied to clipboard!");
+            }}
+            className="btn btn-primary w-fit mx-auto"
+          >
+            Copy to Clipboard
+          </button>
+        </div>
+      ) : (
+        <>
+          <p className="text-xl font-thin">Create an Access Token</p>
+
+          <div className="divider mb-3 mt-1"></div>
+
+          <div className="flex sm:flex-row flex-col gap-2 items-center">
+            <div className="w-full">
+              <p className="mb-2">Name</p>
+
+              <TextInput
+                value={token.name}
+                onChange={(e) => setToken({ ...token, name: e.target.value })}
+                placeholder="e.g. For the iOS shortcut"
+                className="bg-base-200"
+              />
+            </div>
+
+            <div className="w-full sm:w-fit">
+              <p className="mb-2">Expires in</p>
+
+              <div className="dropdown dropdown-bottom dropdown-end w-full">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  onMouseDown={dropdownTriggerer}
+                  className="btn btn-outline w-full sm:w-36 flex items-center btn-sm h-10"
+                >
+                  {token.expires === TokenExpiry.sevenDays && "7 Days"}
+                  {token.expires === TokenExpiry.oneMonth && "30 Days"}
+                  {token.expires === TokenExpiry.twoMonths && "60 Days"}
+                  {token.expires === TokenExpiry.threeMonths && "90 Days"}
+                  {token.expires === TokenExpiry.never && "No Expiration"}
+                </div>
+                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.sevenDays}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.sevenDays,
+                          });
+                        }}
+                      />
+                      <span className="label-text">7 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.oneMonth}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({ ...token, expires: TokenExpiry.oneMonth });
+                        }}
+                      />
+                      <span className="label-text">30 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.twoMonths}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.twoMonths,
+                          });
+                        }}
+                      />
+                      <span className="label-text">60 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.threeMonths}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({
+                            ...token,
+                            expires: TokenExpiry.threeMonths,
+                          });
+                        }}
+                      />
+                      <span className="label-text">90 Days</span>
+                    </label>
+                  </li>
+                  <li>
+                    <label
+                      className="label cursor-pointer flex justify-start"
+                      tabIndex={0}
+                      role="button"
+                    >
+                      <input
+                        type="radio"
+                        name="sort-radio"
+                        className="radio checked:bg-primary"
+                        checked={token.expires === TokenExpiry.never}
+                        onChange={() => {
+                          (document?.activeElement as HTMLElement)?.blur();
+                          setToken({ ...token, expires: TokenExpiry.never });
+                        }}
+                      />
+                      <span className="label-text">No Expiration</span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end items-center mt-5">
+            <button
+              className="btn btn-accent dark:border-violet-400 text-white"
+              onClick={submit}
+            >
+              Create Access Token
+            </button>
+          </div>
+        </>
+      )}
+    </Modal>
+  );
+}

components/ModalContent/PreservedFormatsModal.tsx

@@ -69,11 +69,13 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
   const isReady = () => {
     return (
-      collectionOwner.archiveAsScreenshot ===
-        (link && link.pdf && link.pdf !== "pending") &&
-      collectionOwner.archiveAsPDF ===
-        (link && link.pdf && link.pdf !== "pending") &&
       link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
       link.readable &&
       link.readable !== "pending"
     );
@@ -215,10 +217,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             <i className="bi-box-arrow-up-right" />
           </Link>
           {link?.collection.ownerId === session.data?.user.id ? (
-            <div
-              className={`btn w-1/2 btn-outline`}
-              onClick={() => updateArchive()}
-            >
+            <div className={`btn btn-outline`} onClick={() => updateArchive()}>
               <div>
                 <p>Refresh Preserved Formats</p>
                 <p className="text-xs">

components/ModalContent/RevokeTokenModal.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import { useRouter } from "next/router";
+import { AccessToken } from "@prisma/client";
+import useTokenStore from "@/store/tokens";
+
+type Props = {
+  onClose: Function;
+  activeToken: AccessToken;
+};
+
+export default function DeleteTokenModal({ onClose, activeToken }: Props) {
+  const [token, setToken] = useState<AccessToken>(activeToken);
+
+  const { revokeToken } = useTokenStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    setToken(activeToken);
+  }, []);
+
+  const deleteLink = async () => {
+    console.log(token);
+    const load = toast.loading("Deleting...");
+
+    const response = await revokeToken(token.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Token Revoked.`);
+
+    onClose();
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">Revoke Token</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>
+          Are you sure you want to revoke this Access Token? Any apps or
+          services using this token will no longer be able to access Linkwarden
+          using it.
+        </p>
+
+        <button
+          className={`ml-auto 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" />
+          Revoke
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/Navbar.tsx

@@ -13,6 +13,8 @@ import NewLinkModal from "./ModalContent/NewLinkModal";
 import NewCollectionModal from "./ModalContent/NewCollectionModal";
 import Link from "next/link";
 import UploadFileModal from "./ModalContent/UploadFileModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import MobileNavigation from "./MobileNavigation";
 
 export default function Navbar() {
   const { settings, updateSettings } = useLocalSettingsStore();
@@ -35,14 +37,12 @@ export default function Navbar() {
 
   useEffect(() => {
     setSidebar(false);
-  }, [width]);
-
-  useEffect(() => {
-    setSidebar(false);
-  }, [router]);
+    document.body.style.overflow = "auto";
+  }, [width, router]);
 
   const toggleSidebar = () => {
-    setSidebar(!sidebar);
+    setSidebar(false);
+    document.body.style.overflow = "auto";
   };
 
   const [newLinkModal, setNewLinkModal] = useState(false);
@@ -52,8 +52,11 @@ export default function Navbar() {
   return (
     <div className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
       <div
-        onClick={toggleSidebar}
-        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
+        onClick={() => {
+          setSidebar(true);
+          document.body.style.overflow = "hidden";
+        }}
+        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>
@@ -61,11 +64,12 @@ export default function Navbar() {
       <div className="flex items-center gap-2">
         <ToggleDarkMode className="hidden sm:inline-grid" />
 
-        <div className="dropdown dropdown-end">
+        <div className="dropdown dropdown-end sm:inline-block hidden">
           <div className="tooltip tooltip-bottom" data-tip="Create New...">
             <div
               tabIndex={0}
               role="button"
+              onMouseDown={dropdownTriggerer}
               className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
             >
               <span>
@@ -117,7 +121,12 @@ export default function Navbar() {
         </div>
 
         <div className="dropdown dropdown-end">
-          <div tabIndex={0} role="button" className="btn btn-circle btn-ghost">
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className="btn btn-circle btn-ghost"
+          >
             <ProfilePhoto
               src={account.image ? account.image : undefined}
               priority={true}
@@ -134,7 +143,7 @@ export default function Navbar() {
                 Settings
               </Link>
             </li>
-            <li>
+            <li className="block sm:hidden">
               <div
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
@@ -161,6 +170,9 @@ export default function Navbar() {
           </ul>
         </div>
       </div>
+
+      <MobileNavigation />
+
       {sidebar ? (
         <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-40">
           <ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>

components/PreserverdFormatRow.tsx

@@ -102,9 +102,9 @@ export default function PreservedFormatRow({
         ) : undefined}
 
         <Link
-          href={`${isPublic ? "/public" : ""}/preserved/${
-            link?.id
-          }?format=${format}`}
+          href={`${
+            isPublic ? "/public" : ""
+          }/preserved/${link?.id}?format=${format}`}
           target="_blank"
           className="btn btn-sm btn-square"
         >

components/ProfilePhoto.tsx

@@ -45,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${large || "w-8 h-8"}`}
+      } ${large ? "w-28 h-28" : "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image

components/ReadableView.tsx

@@ -34,6 +34,8 @@ export default function ReadableView({ link }: Props) {
   const [imageError, setImageError] = useState<boolean>(false);
   const [colorPalette, setColorPalette] = useState<RGBColor[]>();
 
+  const [date, setDate] = useState<Date | string>();
+
   const colorThief = new ColorThief();
 
   const router = useRouter();
@@ -54,6 +56,8 @@ export default function ReadableView({ link }: Props) {
     };
 
     fetchLinkContent();
+
+    setDate(link.importDate || link.createdAt);
   }, [link]);
 
   useEffect(() => {
@@ -211,8 +215,8 @@ export default function ReadableView({ link }: Props) {
           </div>
 
           <p className="min-w-fit text-sm text-neutral">
-            {link?.createdAt
-              ? new Date(link?.createdAt).toLocaleString("en-US", {
+            {date
+              ? new Date(date).toLocaleString("en-US", {
                   year: "numeric",
                   month: "long",
                   day: "numeric",

components/SearchBar.tsx

@@ -47,11 +47,11 @@ export default function SearchBar({ placeholder }: Props) {
                 "/public/collections/" +
                   router.query.id +
                   "?q=" +
-                  encodeURIComponent(searchQuery || ""),
+                  encodeURIComponent(searchQuery || "")
               );
             } else {
               return router.push(
-                "/search?q=" + encodeURIComponent(searchQuery),
+                "/search?q=" + encodeURIComponent(searchQuery)
               );
             }
           }

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.0";
+  const LINKWARDEN_VERSION = "v2.5.2";
 
   const { collections } = useCollectionStore();
 
@@ -37,43 +37,30 @@ 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>
+            <p className="truncate w-full pr-7">Preference</p>
           </div>
         </Link>
 
-        <Link href="/settings/archive">
+        <Link href="/settings/access-tokens">
           <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>
-          </div>
-        </Link>
-
-        <Link href="/settings/api">
-          <div
-            className={`${
-              active === `/settings/api`
+              active === `/settings/access-tokens`
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <i className="bi-key text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">API Keys</p>
+            <p className="truncate w-full pr-7">Access Tokens</p>
           </div>
         </Link>
 

components/Sidebar.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import SidebarHighlightLink from "@/components/SidebarHighlightLink";
+import CollectionListing from "@/components/CollectionListing";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -21,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]);
@@ -44,7 +44,7 @@ export default function Sidebar({ className }: { className?: string }) {
   return (
     <div
       id="sidebar"
-      className={`bg-base-200 h-full w-72 lg:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
+      className={`bg-base-200 h-full w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
         className || ""
       }`}
     >
@@ -97,48 +97,8 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveFrom="transform opacity-100 translate-y-0"
           leaveTo="transform opacity-0 -translate-y-3"
         >
-          <Disclosure.Panel className="flex flex-col gap-1">
-            {collections[0] ? (
-              collections
-                .sort((a, b) => a.name.localeCompare(b.name))
-                .map((e, i) => {
-                  return (
-                    <Link key={i} href={`/collections/${e.id}`}>
-                      <div
-                        className={`${
-                          active === `/collections/${e.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`}
-                      >
-                        <i
-                          className="bi-folder-fill text-2xl drop-shadow"
-                          style={{ color: e.color }}
-                        ></i>
-                        <p className="truncate w-full">{e.name}</p>
-
-                        {e.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">
-                          {e._count?.links}
-                        </div>
-                      </div>
-                    </Link>
-                  );
-                })
-            ) : (
-              <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>
-            )}
+          <Disclosure.Panel>
+            <CollectionListing />
           </Disclosure.Panel>
         </Transition>
       </Disclosure>

components/SortDropdown.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { Sort } from "@/types/global";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 type Props = {
   sortBy: Sort;
@@ -12,7 +13,8 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
       <div
         tabIndex={0}
         role="button"
-        className="btn btn-sm btn-square btn-ghost"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-sm btn-square btn-ghost border-none"
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>
       </div>

components/TextInput.tsx

@@ -8,6 +8,7 @@ type Props = {
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
   className?: string;
+  spellCheck?: boolean;
 };
 
 export default function TextInput({
@@ -18,9 +19,11 @@ export default function TextInput({
   onChange,
   onKeyDown,
   className,
+  spellCheck,
 }: Props) {
   return (
     <input
+      spellCheck={spellCheck}
       autoFocus={autoFocus}
       type={type ? type : "text"}
       placeholder={placeholder}

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";

docker-compose.yml

@@ -11,7 +11,8 @@ services:
     environment:
       - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/postgres
     restart: always
-    image: ghcr.io/linkwarden/linkwarden:latest
+    # build: . # uncomment this line to build from source
+    image: ghcr.io/linkwarden/linkwarden:latest # comment this line to build from source
     ports:
       - 3000:3000
     volumes:

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 };
 }

hooks/useSort.tsx

@@ -8,7 +8,7 @@ import { SetStateAction, useEffect } from "react";
 type Props<
   T extends
     | CollectionIncludingMembersAndLinkCount
-    | LinkIncludingShortenedCollectionAndTags
+    | LinkIncludingShortenedCollectionAndTags,
 > = {
   sortBy: Sort;
 
@@ -19,7 +19,7 @@ type Props<
 export default function useSort<
   T extends
     | CollectionIncludingMembersAndLinkCount
-    | LinkIncludingShortenedCollectionAndTags
+    | LinkIncludingShortenedCollectionAndTags,
 >({ sortBy, data, setData }: Props<T>) {
   useEffect(() => {
     const dataArray = [...data];

layouts/MainLayout.tsx

@@ -46,7 +46,7 @@ export default function MainLayout({ children }: Props) {
         </div>
 
         <div
-          className={`w-full flex flex-col min-h-${
+          className={`w-full sm:pb-0 pb-20 flex flex-col min-h-${
             showAnnouncement ? "full" : "screen"
           } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >

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";
@@ -17,232 +17,283 @@ 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) => {
+    setTimeout(
+      () =>
+        reject(
+          new Error(
+            `Browser has been open for more than ${BROWSER_TIMEOUT} minutes.`
+          )
+        ),
+      BROWSER_TIMEOUT * 60000
+    );
+  });
+
   try {
-    const validatedUrl = link.url ? await validateUrlSize(link.url) : undefined;
+    await Promise.race([
+      (async () => {
+        const validatedUrl = link.url
+          ? await validateUrlSize(link.url)
+          : undefined;
 
-    if (validatedUrl === null) throw "File is too large to be stored.";
+        if (validatedUrl === null)
+          throw "Something went wrong while retrieving the file size.";
 
-    const contentType = validatedUrl?.get("content-type");
-    let linkType = "url";
-    let imageExtension = "png";
+        const contentType = validatedUrl?.get("content-type");
+        let linkType = "url";
+        let imageExtension = "png";
 
-    if (!link.url) linkType = link.type;
-    else if (contentType === "application/pdf") linkType = "pdf";
-    else if (contentType?.startsWith("image")) {
-      linkType = "image";
-      if (contentType === "image/jpeg") imageExtension = "jpeg";
-      else if (contentType === "image/png") imageExtension = "png";
-    }
-
-    const user = link.collection?.owner;
-
-    // send to archive.org
-    if (user.archiveAsWaybackMachine && link.url) sendToWayback(link.url);
-
-    const targetLink = await prisma.link.update({
-      where: { id: link.id },
-      data: {
-        type: linkType,
-        image:
-          user.archiveAsScreenshot && !link.image?.startsWith("archive")
-            ? "pending"
-            : undefined,
-        pdf:
-          user.archiveAsPDF && !link.pdf?.startsWith("archive")
-            ? "pending"
-            : undefined,
-        readable: !link.readable?.startsWith("archive") ? "pending" : undefined,
-        preview: !link.readable?.startsWith("archive") ? "pending" : undefined,
-        lastPreserved: new Date().toISOString(),
-      },
-    });
-
-    if (linkType === "image" && !link.image?.startsWith("archive")) {
-      await imageHandler(link, imageExtension); // archive image (jpeg/png)
-      return;
-    } else if (linkType === "pdf" && !link.pdf?.startsWith("archive")) {
-      await pdfHandler(link); // archive pdf
-      return;
-    } else if (link.url) {
-      // archive url
-
-      await page.goto(link.url, { waitUntil: "domcontentloaded" });
-
-      const content = await page.content();
-
-      // TODO single file
-      // const session = await page.context().newCDPSession(page);
-      // const doc = await session.send("Page.captureSnapshot", {
-      //   format: "mhtml",
-      // });
-      // const saveDocLocally = (doc: any) => {
-      //   console.log(doc);
-      //   return createFile({
-      //     data: doc,
-      //     filePath: `archives/${targetLink.collectionId}/${link.id}.mhtml`,
-      //   });
-      // };
-      // saveDocLocally(doc.data);
-
-      // Readability
-      const window = new JSDOM("").window;
-      const purify = DOMPurify(window);
-      const cleanedUpContent = purify.sanitize(content);
-      const dom = new JSDOM(cleanedUpContent, { url: link.url || "" });
-      const article = new Readability(dom.window.document).parse();
-      const articleText = article?.textContent
-        .replace(/ +(?= )/g, "") // strip out multiple spaces
-        .replace(/(\r\n|\n|\r)/gm, " "); // strip out line breaks
-      if (
-        articleText &&
-        articleText !== "" &&
-        !link.readable?.startsWith("archive")
-      ) {
-        await createFile({
-          data: JSON.stringify(article),
-          filePath: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
-        });
-
-        await prisma.link.update({
-          where: { id: link.id },
-          data: {
-            readable: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
-            textContent: articleText,
-          },
-        });
-      }
-
-      // Preview
-
-      const ogImageUrl = await page.evaluate(() => {
-        const metaTag = document.querySelector('meta[property="og:image"]');
-        return metaTag ? (metaTag as any).content : null;
-      });
-
-      createFolder({
-        filePath: `archives/preview/${link.collectionId}`,
-      });
-
-      if (ogImageUrl) {
-        console.log("Found og:image URL:", ogImageUrl);
-
-        // Download the image
-        const imageResponse = await page.goto(ogImageUrl);
-
-        // Check if imageResponse is not null
-        if (imageResponse && !link.preview?.startsWith("archive")) {
-          const buffer = await imageResponse.body();
-
-          // Check if buffer is not null
-          if (buffer) {
-            // Load the image using Jimp
-            Jimp.read(buffer, async (err, image) => {
-              if (image && !err) {
-                image?.resize(1280, Jimp.AUTO).quality(20);
-                const processedBuffer = await image?.getBufferAsync(
-                  Jimp.MIME_JPEG
-                );
-
-                createFile({
-                  data: processedBuffer,
-                  filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
-                }).then(() => {
-                  return prisma.link.update({
-                    where: { id: link.id },
-                    data: {
-                      preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
-                    },
-                  });
-                });
-              }
-            }).catch((err) => {
-              console.error("Error processing the image:", err);
-            });
-          } else {
-            console.log("No image data found.");
-          }
+        if (!link.url) linkType = link.type;
+        else if (contentType?.includes("application/pdf")) linkType = "pdf";
+        else if (contentType?.startsWith("image")) {
+          linkType = "image";
+          if (contentType.includes("image/jpeg")) imageExtension = "jpeg";
+          else if (contentType.includes("image/png")) imageExtension = "png";
         }
 
-        await page.goBack();
-      } else if (!link.preview?.startsWith("archive")) {
-        console.log("No og:image found");
-        await page
-          .screenshot({ type: "jpeg", quality: 20 })
-          .then((screenshot) => {
-            return createFile({
-              data: screenshot,
-              filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+        const user = link.collection?.owner;
+
+        // send to archive.org
+        if (user.archiveAsWaybackMachine && link.url) sendToWayback(link.url);
+
+        const targetLink = await prisma.link.update({
+          where: { id: link.id },
+          data: {
+            type: linkType,
+            image:
+              user.archiveAsScreenshot && !link.image?.startsWith("archive")
+                ? "pending"
+                : "unavailable",
+            pdf:
+              user.archiveAsPDF && !link.pdf?.startsWith("archive")
+                ? "pending"
+                : "unavailable",
+            readable: !link.readable?.startsWith("archive")
+              ? "pending"
+              : undefined,
+            preview: !link.readable?.startsWith("archive")
+              ? "pending"
+              : undefined,
+            lastPreserved: new Date().toISOString(),
+          },
+        });
+
+        if (linkType === "image" && !link.image?.startsWith("archive")) {
+          await imageHandler(link, imageExtension); // archive image (jpeg/png)
+          return;
+        } else if (linkType === "pdf" && !link.pdf?.startsWith("archive")) {
+          await pdfHandler(link); // archive pdf
+          return;
+        } else if (link.url) {
+          // archive url
+
+          await page.goto(link.url, { waitUntil: "domcontentloaded" });
+
+          const content = await page.content();
+
+          // TODO single file
+          // const session = await page.context().newCDPSession(page);
+          // const doc = await session.send("Page.captureSnapshot", {
+          //   format: "mhtml",
+          // });
+          // const saveDocLocally = (doc: any) => {
+          //   console.log(doc);
+          //   return createFile({
+          //     data: doc,
+          //     filePath: `archives/${targetLink.collectionId}/${link.id}.mhtml`,
+          //   });
+          // };
+          // saveDocLocally(doc.data);
+
+          // Readability
+          const window = new JSDOM("").window;
+          const purify = DOMPurify(window);
+          const cleanedUpContent = purify.sanitize(content);
+          const dom = new JSDOM(cleanedUpContent, { url: link.url || "" });
+          const article = new Readability(dom.window.document).parse();
+          const articleText = article?.textContent
+            .replace(/ +(?= )/g, "") // strip out multiple spaces
+            .replace(/(\r\n|\n|\r)/gm, " "); // strip out line breaks
+          if (
+            articleText &&
+            articleText !== "" &&
+            !link.readable?.startsWith("archive")
+          ) {
+            await createFile({
+              data: JSON.stringify(article),
+              filePath: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
             });
-          })
-          .then(() => {
-            return prisma.link.update({
+
+            await prisma.link.update({
               where: { id: link.id },
               data: {
-                preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                readable: `archives/${targetLink.collectionId}/${link.id}_readability.json`,
+                textContent: articleText,
               },
             });
+          }
+
+          // Preview
+
+          const ogImageUrl = await page.evaluate(() => {
+            const metaTag = document.querySelector('meta[property="og:image"]');
+            return metaTag ? (metaTag as any).content : null;
           });
-      }
 
-      // Screenshot/PDF
-      await page.evaluate(
-        autoScroll,
-        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-      );
+          createFolder({
+            filePath: `archives/preview/${link.collectionId}`,
+          });
 
-      // Check if the user hasn't deleted the link by the time we're done scrolling
-      const linkExists = await prisma.link.findUnique({
-        where: { id: link.id },
-      });
-      if (linkExists) {
-        const processingPromises = [];
+          if (ogImageUrl) {
+            console.log("Found og:image URL:", ogImageUrl);
 
-        if (user.archiveAsScreenshot && !link.image?.startsWith("archive")) {
-          processingPromises.push(
-            page.screenshot({ fullPage: true }).then((screenshot) => {
-              return createFile({
-                data: screenshot,
-                filePath: `archives/${linkExists.collectionId}/${link.id}.png`,
-              });
-            })
-          );
-        }
-        if (user.archiveAsPDF && !link.pdf?.startsWith("archive")) {
-          processingPromises.push(
-            page
-              .pdf({
-                width: "1366px",
-                height: "1931px",
-                printBackground: true,
-                margin: { top: "15px", bottom: "15px" },
-              })
-              .then((pdf) => {
+            // Download the image
+            const imageResponse = await page.goto(ogImageUrl);
+
+            // Check if imageResponse is not null
+            if (imageResponse && !link.preview?.startsWith("archive")) {
+              const buffer = await imageResponse.body();
+
+              // Check if buffer is not null
+              if (buffer) {
+                // Load the image using Jimp
+                Jimp.read(buffer, async (err, image) => {
+                  if (image && !err) {
+                    image?.resize(1280, Jimp.AUTO).quality(20);
+                    const processedBuffer = await image?.getBufferAsync(
+                      Jimp.MIME_JPEG
+                    );
+
+                    createFile({
+                      data: processedBuffer,
+                      filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                    }).then(() => {
+                      return prisma.link.update({
+                        where: { id: link.id },
+                        data: {
+                          preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                        },
+                      });
+                    });
+                  }
+                }).catch((err) => {
+                  console.error("Error processing the image:", err);
+                });
+              } else {
+                console.log("No image data found.");
+              }
+            }
+
+            await page.goBack();
+          } else if (!link.preview?.startsWith("archive")) {
+            console.log("No og:image found");
+            await page
+              .screenshot({ type: "jpeg", quality: 20 })
+              .then((screenshot) => {
                 return createFile({
-                  data: pdf,
-                  filePath: `archives/${linkExists.collectionId}/${link.id}.pdf`,
+                  data: screenshot,
+                  filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
                 });
               })
+              .then(() => {
+                return prisma.link.update({
+                  where: { id: link.id },
+                  data: {
+                    preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
+                  },
+                });
+              });
+          }
+
+          // Screenshot/PDF
+          await page.evaluate(
+            autoScroll,
+            Number(process.env.AUTOSCROLL_TIMEOUT) || 30
           );
+
+          // Check if the user hasn't deleted the link by the time we're done scrolling
+          const linkExists = await prisma.link.findUnique({
+            where: { id: link.id },
+          });
+          if (linkExists) {
+            const processingPromises = [];
+
+            if (
+              user.archiveAsScreenshot &&
+              !link.image?.startsWith("archive")
+            ) {
+              processingPromises.push(
+                page.screenshot({ fullPage: true }).then((screenshot) => {
+                  return createFile({
+                    data: screenshot,
+                    filePath: `archives/${linkExists.collectionId}/${link.id}.png`,
+                  });
+                })
+              );
+            }
+
+            // apply administrator's defined pdf margins or default to 15px
+            const margins = {
+              top: process.env.PDF_MARGIN_TOP || "15px",
+              bottom: process.env.PDF_MARGIN_BOTTOM || "15px",
+            };
+
+            if (user.archiveAsPDF && !link.pdf?.startsWith("archive")) {
+              processingPromises.push(
+                page
+                  .pdf({
+                    width: "1366px",
+                    height: "1931px",
+                    printBackground: true,
+                    margin: margins,
+                  })
+                  .then((pdf) => {
+                    return createFile({
+                      data: pdf,
+                      filePath: `archives/${linkExists.collectionId}/${link.id}.pdf`,
+                    });
+                  })
+              );
+            }
+            await Promise.allSettled(processingPromises);
+            await prisma.link.update({
+              where: { id: link.id },
+              data: {
+                image: user.archiveAsScreenshot
+                  ? `archives/${linkExists.collectionId}/${link.id}.png`
+                  : undefined,
+                pdf: user.archiveAsPDF
+                  ? `archives/${linkExists.collectionId}/${link.id}.pdf`
+                  : undefined,
+              },
+            });
+          }
         }
-        await Promise.allSettled(processingPromises);
-        await prisma.link.update({
-          where: { id: link.id },
-          data: {
-            image: user.archiveAsScreenshot
-              ? `archives/${linkExists.collectionId}/${link.id}.png`
-              : undefined,
-            pdf: user.archiveAsPDF
-              ? `archives/${linkExists.collectionId}/${link.id}.pdf`
-              : undefined,
-          },
-        });
-      }
-    }
+      })(),
+      timeoutPromise,
+    ]);
   } catch (err) {
     console.log(err);
     console.log("Failed Link details:", link);

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,12 +31,16 @@ 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 };
   }
 
   const deletedCollection = await prisma.$transaction(async () => {
+    await deleteSubCollections(collectionId);
+
     await prisma.usersAndCollections.deleteMany({
       where: {
         collection: {
@@ -53,7 +57,9 @@ export default async function deleteCollection(
       },
     });
 
-    removeFolder({ filePath: `archives/${collectionId}` });
+    await removeFolder({ filePath: `archives/${collectionId}` });
+
+    await removeFromOrders(userId, collectionId);
 
     return await prisma.collection.delete({
       where: {
@@ -64,3 +70,60 @@ export default async function deleteCollection(
 
   return { response: deletedCollection, status: 200 };
 }
+
+async function deleteSubCollections(collectionId: number) {
+  const subCollections = await prisma.collection.findMany({
+    where: { parentId: collectionId },
+  });
+
+  for (const subCollection of subCollections) {
+    await deleteSubCollections(subCollection.id);
+
+    await prisma.usersAndCollections.deleteMany({
+      where: {
+        collection: {
+          id: subCollection.id,
+        },
+      },
+    });
+
+    await prisma.link.deleteMany({
+      where: {
+        collection: {
+          id: subCollection.id,
+        },
+      },
+    });
+
+    await prisma.collection.delete({
+      where: { id: subCollection.id },
+    });
+
+    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/getCollectionById.ts

@@ -0,0 +1,34 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getCollectionById(
+  userId: number,
+  collectionId: number
+) {
+  const collections = await prisma.collection.findFirst({
+    where: {
+      id: collectionId,
+      OR: [
+        { ownerId: userId },
+        { members: { some: { user: { id: userId } } } },
+      ],
+    },
+    include: {
+      _count: {
+        select: { links: true },
+      },
+      members: {
+        include: {
+          user: {
+            select: {
+              username: true,
+              name: true,
+              image: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  return { response: collections, status: 200 };
+}

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

@@ -1,7 +1,6 @@
 import { prisma } from "@/lib/api/db";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import getPermission from "@/lib/api/getPermission";
-import { Collection, UsersAndCollections } from "@prisma/client";
 
 export default async function updateCollection(
   userId: number,
@@ -19,6 +18,32 @@ export default async function updateCollection(
   if (!(collectionIsAccessible?.ownerId === userId))
     return { response: "Collection is not accessible.", status: 401 };
 
+  console.log(data);
+
+  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 () => {
     await prisma.usersAndCollections.deleteMany({
       where: {
@@ -32,12 +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:
+          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

@@ -12,23 +12,25 @@ export default async function postCollection(
       status: 400,
     };
 
-  const findCollection = await prisma.user.findUnique({
-    where: {
-      id: userId,
-    },
-    select: {
-      collections: {
-        where: {
-          name: collection.name,
-        },
+  if (collection.parentId) {
+    const findParentCollection = await prisma.collection.findUnique({
+      where: {
+        id: collection.parentId,
       },
-    },
-  });
+      select: {
+        ownerId: true,
+      },
+    });
 
-  const checkIfCollectionExists = findCollection?.collections[0];
-
-  if (checkIfCollectionExists)
-    return { response: "Collection already exists.", status: 400 };
+    if (
+      findParentCollection?.ownerId !== userId ||
+      typeof collection.parentId !== "number"
+    )
+      return {
+        response: "You are not authorized to create a sub-collection here.",
+        status: 403,
+      };
+  }
 
   const newCollection = await prisma.collection.create({
     data: {
@@ -40,6 +42,13 @@ export default async function postCollection(
       name: collection.name.trim(),
       description: collection.description,
       color: collection.color,
+      parent: collection.parentId
+        ? {
+            connect: {
+              id: collection.parentId,
+            },
+          }
+        : undefined,
     },
     include: {
       _count: {
@@ -58,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/dashboard/getDashboardData.ts

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

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,115 @@ 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;
+      link.collection.ownerId = findCollection.ownerId;
+    } else {
+      const collection = await prisma.collection.create({
+        data: {
+          name: link.collection.name,
+          ownerId: userId,
+        },
+      });
+
+      link.collection.id = collection.id;
+
+      await prisma.user.update({
+        where: {
+          id: userId,
+        },
+        data: {
+          collectionOrder: {
+            push: link.collection.id,
+          },
+        },
+      });
+    }
+  } else if (link.collection.id) {
+    const collectionIsAccessible = await getPermission({
+      userId,
+      collectionId: link.collection.id,
+    });
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canCreate
+    );
+
+    if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+      return { response: "Collection is not accessible.", status: 401 };
+  } else if (!link.collection.id) {
     link.collection.name = "Unorganized";
+    link.collection.parentId = null;
+
+    // find the collection with the name "Unorganized" and the user's id
+    const unorganizedCollection = await prisma.collection.findFirst({
+      where: {
+        name: "Unorganized",
+        ownerId: userId,
+      },
+    });
+
+    link.collection.id = unorganizedCollection?.id;
+
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        collectionOrder: {
+          push: link.collection.id,
+        },
+      },
+    });
+  } else {
+    return { response: "Uncaught error.", status: 500 };
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      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,34 +149,15 @@ 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
       : link.url
-      ? await getTitle(link.url)
-      : undefined;
+        ? await getTitle(link.url)
+        : undefined;
 
   const validatedUrl = link.url ? await validateUrlSize(link.url) : undefined;
 
-  if (validatedUrl === null)
-    return { response: "File is too large to be stored.", status: 400 };
-
   const contentType = validatedUrl?.get("content-type");
   let linkType = "url";
   let imageExtension = "png";
@@ -84,22 +172,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,8 @@
 import { prisma } from "@/lib/api/db";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
+import { parse, Node, Element, TextNode } from "himalaya";
+import { writeFileSync } from "fs";
 
 const MAX_LINKS_PER_USER = Number(process.env.MAX_LINKS_PER_USER) || 30000;
 
@@ -11,6 +13,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 +35,232 @@ 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 processedArray = processNodes(jsonData);
 
-          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 processedArray) {
+    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.toLowerCase() === "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(",");
+
+        // set date if available
+        const linkDateValue = item?.attributes.find(
+          (e) => e.key.toLowerCase() === "add_date"
+        )?.value;
+
+        const linkDate = linkDateValue
+          ? new Date(Number(linkDateValue) * 1000)
+          : undefined;
+
+        let linkDesc =
+          (
+            (
+              item?.children?.find(
+                (e) => e.type === "element" && e.tagName === "dd"
+              ) as Element
+            )?.children[0] as TextNode
+          )?.content || "";
+
+        if (linkUrl && parentCollectionId) {
+          await createLink(
+            userId,
+            linkUrl,
+            parentCollectionId,
+            linkName,
+            linkDesc,
+            linkTags,
+            linkDate
+          );
+        } 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,
+            linkDesc,
+            linkTags,
+            linkDate
+          );
+        }
+
+        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[],
+  importDate?: Date
+) => {
+  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,
+      importDate: importDate || undefined,
+    },
+  });
+};
+
+function processNodes(nodes: Node[]) {
+  const findAndProcessDL = (node: Node) => {
+    if (node.type === "element" && node.tagName === "dl") {
+      processDLChildren(node);
+    } else if (
+      node.type === "element" &&
+      node.children &&
+      node.children.length
+    ) {
+      node.children.forEach((child) => findAndProcessDL(child));
+    }
+  };
+
+  const processDLChildren = (dlNode: Element) => {
+    dlNode.children.forEach((child, i) => {
+      if (child.type === "element" && child.tagName === "dt") {
+        const nextSibling = dlNode.children[i + 1];
+        if (
+          nextSibling &&
+          nextSibling.type === "element" &&
+          nextSibling.tagName === "dd"
+        ) {
+          const aElement = child.children.find(
+            (el) => el.type === "element" && el.tagName === "a"
+          );
+          if (aElement && aElement.type === "element") {
+            // Add the 'dd' element as a child of the 'a' element
+            aElement.children.push(nextSibling);
+            // Remove the 'dd' from the parent 'dl' to avoid duplicate processing
+            dlNode.children.splice(i + 1, 1);
+            // Adjust the loop counter due to the removal
+          }
+        }
+      }
+    });
+  };
+
+  nodes.forEach(findAndProcessDL);
+  return nodes;
+}

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -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/tokens/getTokens.ts

@@ -0,0 +1,21 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getToken(userId: number) {
+  const getTokens = await prisma.accessToken.findMany({
+    where: {
+      userId,
+      revoked: false,
+    },
+    select: {
+      id: true,
+      name: true,
+      expires: true,
+      createdAt: true,
+    },
+  });
+
+  return {
+    response: getTokens,
+    status: 200,
+  };
+}

lib/api/controllers/tokens/postToken.ts

@@ -0,0 +1,92 @@
+import { prisma } from "@/lib/api/db";
+import { TokenExpiry } from "@/types/global";
+import crypto from "crypto";
+import { decode, encode } from "next-auth/jwt";
+
+export default async function postToken(
+  body: {
+    name: string;
+    expires: TokenExpiry;
+  },
+  userId: number
+) {
+  console.log(body);
+
+  const checkHasEmptyFields = !body.name || body.expires === undefined;
+
+  if (checkHasEmptyFields)
+    return {
+      response: "Please fill out all the fields.",
+      status: 400,
+    };
+
+  const checkIfTokenExists = await prisma.accessToken.findFirst({
+    where: {
+      name: body.name,
+      revoked: false,
+      userId,
+    },
+  });
+
+  if (checkIfTokenExists) {
+    return {
+      response: "Token with that name already exists.",
+      status: 400,
+    };
+  }
+
+  const now = Date.now();
+  let expiryDate = new Date();
+  const oneDayInSeconds = 86400;
+  let expiryDateSecond = 7 * oneDayInSeconds;
+
+  if (body.expires === TokenExpiry.oneMonth) {
+    expiryDate.setDate(expiryDate.getDate() + 30);
+    expiryDateSecond = 30 * oneDayInSeconds;
+  } else if (body.expires === TokenExpiry.twoMonths) {
+    expiryDate.setDate(expiryDate.getDate() + 60);
+    expiryDateSecond = 60 * oneDayInSeconds;
+  } else if (body.expires === TokenExpiry.threeMonths) {
+    expiryDate.setDate(expiryDate.getDate() + 90);
+    expiryDateSecond = 90 * oneDayInSeconds;
+  } else if (body.expires === TokenExpiry.never) {
+    expiryDate.setDate(expiryDate.getDate() + 73000); // 200 years (not really never)
+    expiryDateSecond = 73050 * oneDayInSeconds;
+  } else {
+    expiryDate.setDate(expiryDate.getDate() + 7);
+    expiryDateSecond = 7 * oneDayInSeconds;
+  }
+
+  const token = await encode({
+    token: {
+      id: userId,
+      iat: now / 1000,
+      exp: (expiryDate as any) / 1000,
+      jti: crypto.randomUUID(),
+    },
+    maxAge: expiryDateSecond || 604800,
+    secret: process.env.NEXTAUTH_SECRET,
+  });
+
+  const tokenBody = await decode({
+    token,
+    secret: process.env.NEXTAUTH_SECRET,
+  });
+
+  const createToken = await prisma.accessToken.create({
+    data: {
+      name: body.name,
+      userId,
+      token: tokenBody?.jti as string,
+      expires: expiryDate,
+    },
+  });
+
+  return {
+    response: {
+      secretKey: token,
+      token: createToken,
+    },
+    status: 200,
+  };
+}

lib/api/controllers/tokens/tokenId/deleteTokenById.ts

@@ -0,0 +1,24 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function deleteToken(userId: number, tokenId: number) {
+  if (!tokenId)
+    return { response: "Please choose a valid token.", status: 401 };
+
+  const tokenExists = await prisma.accessToken.findFirst({
+    where: {
+      id: tokenId,
+      userId,
+    },
+  });
+
+  const revokedToken = await prisma.accessToken.update({
+    where: {
+      id: tokenExists?.id,
+    },
+    data: {
+      revoked: true,
+    },
+  });
+
+  return { response: revokedToken, status: 200 };
+}

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

@@ -5,6 +5,9 @@ import Stripe from "stripe";
 import { DeleteUserBody } from "@/types/global";
 import removeFile from "@/lib/api/storage/removeFile";
 
+const keycloakEnabled = process.env.KEYCLOAK_CLIENT_SECRET;
+const authentikEnabled = process.env.AUTHENTIK_CLIENT_SECRET;
+
 export default async function deleteUserById(
   userId: number,
   body: DeleteUserBody
@@ -22,7 +25,7 @@ export default async function deleteUserById(
   }
 
   // Then, we check if the provided password matches the one stored in the database (disabled in Keycloak integration)
-  if (!process.env.KEYCLOAK_CLIENT_SECRET) {
+  if (!keycloakEnabled && !authentikEnabled) {
     const isPasswordValid = bcrypt.compareSync(
       body.password,
       user.password as string

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

@@ -23,6 +23,7 @@ export default async function updateUserById(
       id: userId,
     },
   });
+
   if (ssoUser) {
     // deny changes to SSO-defined properties
     if (data.email !== user?.email) {
@@ -49,7 +50,7 @@ export default async function updateUserById(
         status: 400,
       };
     }
-    if (data.image !== "") {
+    if (data.image?.startsWith("data:image/jpeg;base64")) {
       return {
         response: "SSO Users cannot change their avatar.",
         status: 400,
@@ -182,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/storage/removeFolder.ts

@@ -40,7 +40,10 @@ async function emptyS3Directory(bucket: string, dir: string) {
 export default async function removeFolder({ filePath }: { filePath: string }) {
   if (s3Client) {
     try {
-      await emptyS3Directory(process.env.SPACES_BUCKET_NAME as string, filePath);
+      await emptyS3Directory(
+        process.env.SPACES_BUCKET_NAME as string,
+        filePath
+      );
     } catch (err) {
       console.log("Error", err);
     }

lib/api/validateUrlSize.ts

@@ -1,6 +1,35 @@
+import fetch from "node-fetch";
+import https from "https";
+import { SocksProxyAgent } from "socks-proxy-agent";
+
 export default async function validateUrlSize(url: string) {
+  if (process.env.IGNORE_URL_SIZE_LIMIT === "true") return null;
+
   try {
-    const response = await fetch(url, { method: "HEAD" });
+    const httpsAgent = new https.Agent({
+      rejectUnauthorized:
+        process.env.IGNORE_UNAUTHORIZED_CA === "true" ? false : true,
+    });
+
+    let fetchOpts = {
+      method: "HEAD",
+      agent: httpsAgent,
+    };
+
+    if (process.env.PROXY) {
+      let proxy = new URL(process.env.PROXY);
+      if (process.env.PROXY_USERNAME) {
+        proxy.username = process.env.PROXY_USERNAME;
+        proxy.password = process.env.PROXY_PASSWORD || "";
+      }
+
+      fetchOpts = {
+        method: "HEAD",
+        agent: new SocksProxyAgent(proxy.toString()),
+      };
+    }
+
+    const response = await fetch(url, fetchOpts);
 
     const totalSizeMB =
       Number(response.headers.get("content-length")) / Math.pow(1024, 2);

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/verifyToken.ts

@@ -0,0 +1,36 @@
+import { NextApiRequest } from "next";
+import { JWT, getToken } from "next-auth/jwt";
+import { prisma } from "./db";
+
+type Props = {
+  req: NextApiRequest;
+};
+
+export default async function verifyToken({
+  req,
+}: Props): Promise<JWT | string> {
+  const token = await getToken({ req });
+  const userId = token?.id;
+
+  if (!userId) {
+    return "You must be logged in.";
+  }
+
+  if (token.exp < Date.now() / 1000) {
+    return "Your session has expired, please log in again.";
+  }
+
+  // check if token is revoked
+  const revoked = await prisma.accessToken.findFirst({
+    where: {
+      token: token.jti,
+      revoked: true,
+    },
+  });
+
+  if (revoked) {
+    return "Your session has expired, please log in again.";
+  }
+
+  return token;
+}

lib/api/verifyUser.ts

@@ -1,8 +1,8 @@
 import { NextApiRequest, NextApiResponse } from "next";
-import { getToken } from "next-auth/jwt";
 import { prisma } from "./db";
 import { User } from "@prisma/client";
 import verifySubscription from "./verifySubscription";
+import verifyToken from "./verifyToken";
 
 type Props = {
   req: NextApiRequest;
@@ -15,14 +15,15 @@ export default async function verifyUser({
   req,
   res,
 }: Props): Promise<User | null> {
-  const token = await getToken({ req });
-  const userId = token?.id;
+  const token = await verifyToken({ req });
 
-  if (!userId) {
-    res.status(401).json({ response: "You must be logged in." });
+  if (typeof token === "string") {
+    res.status(401).json({ response: token });
     return null;
   }
 
+  const userId = token?.id;
+
   const user = await prisma.user.findUnique({
     where: {
       id: userId,
@@ -42,7 +43,8 @@ export default async function verifyUser({
     return null;
   }
 
-  if (!user.username && !ssoUser) { // SSO users don't need a username
+  if (!user.username && !ssoUser) {
+    // SSO users don't need a username
     res.status(401).json({
       response: "Username not found.",
     });
@@ -50,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/client/utils.ts

@@ -0,0 +1,20 @@
+export function isPWA() {
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    (window.navigator as any).standalone ||
+    document.referrer.includes("android-app://")
+  );
+}
+
+export function isIphone() {
+  return /iPhone/.test(navigator.userAgent) && !(window as any).MSStream;
+}
+
+export function dropdownTriggerer(e: any) {
+  let targetEl = e.currentTarget;
+  if (targetEl && targetEl.matches(":focus")) {
+    setTimeout(function () {
+      targetEl.blur();
+    }, 0);
+  }
+}

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,12 +1,51 @@
+import fetch from "node-fetch";
+import https from "https";
+import { SocksProxyAgent } from "socks-proxy-agent";
+
 export default async function getTitle(url: string) {
   try {
-    const response = await fetch(url);
-    const text = await response.text();
+    const httpsAgent = new https.Agent({
+      rejectUnauthorized:
+        process.env.IGNORE_UNAUTHORIZED_CA === "true" ? false : true,
+    });
 
-    // regular expression to find the <title> tag
-    let match = text.match(/<title.*>([^<]*)<\/title>/);
-    if (match) return match[1];
-    else return "";
+    // 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 responsePromise = fetch(url, fetchOpts);
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => {
+        reject(new Error("Fetch title timeout"));
+      }, 10 * 1000); // Stop after 10 seconds
+    });
+
+    const response = await Promise.race([responsePromise, timeoutPromise]);
+
+    if ((response as any)?.status) {
+      const text = await (response as any).text();
+
+      // regular expression to find the <title> tag
+      let match = text.match(/<title.*>([^<]*)<\/title>/);
+      if (match) return match[1];
+      else return "";
+    } else {
+      return "";
+    }
   } catch (err) {
     console.log(err);
   }