fully added support for sub-collections

Feat/api keys

.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
@@ -19,6 +19,7 @@ NEXT_PUBLIC_MAX_FILE_SIZE=
 MAX_LINKS_PER_USER=
 ARCHIVE_TAKE_COUNT=
 BROWSER_TIMEOUT=
+IGNORE_UNAUTHORIZED_CA=
 
 # AWS S3 Settings
 SPACES_KEY=

.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

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>

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

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

components/FilterSearchDropdown.tsx

@@ -1,3 +1,4 @@
+import { dropdownTriggerer } from "@/lib/client/utils";
 import React from "react";
 
 type Props = {
@@ -20,6 +21,7 @@ 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>

components/LinkViews/Layouts/CardView.tsx

@@ -9,7 +9,14 @@ export default function CardView({
   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}
+          />
+        );
       })}
     </div>
   );

components/LinkViews/Layouts/ListView.tsx

@@ -9,7 +9,14 @@ export default function ListView({
   return (
     <div className="flex 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}
+          />
+        );
       })}
     </div>
   );

components/LinkViews/LinkCard.tsx

@@ -21,9 +21,15 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkGrid({ link, count, className }: Props) {
+export default function LinkGrid({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links, getLink } = useLinkStore();
@@ -81,68 +87,70 @@ export default function LinkGrid({ link, count, className }: Props) {
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
-      <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)",
+      <Link
+        href={link.url || ""}
+        target="_blank"
+        className="rounded-2xl cursor-pointer"
+      >
+        <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>
+            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} />
-      </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>
+
+          <div title={link.url || ""} className="w-fit">
+            <div className="flex gap-1 item-center select-none text-neutral mt-1">
+              <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
+              <p className="text-sm truncate">{shortendURL}</p>
+            </div>
+          </div>
+        </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} />
+        </div>
+      </Link>
 
       {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">
@@ -197,6 +205,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,18 +67,19 @@ 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">
+        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
           {permissions === true ? (
             <li>
               <div

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -17,7 +17,7 @@ export default function LinkCollection({
   return (
     <div
       onClick={(e) => {
-        e.stopPropagation();
+        e.preventDefault();
         router.push(`/collections/${link.collection.id}`);
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"

components/LinkViews/LinkList.tsx

@@ -11,14 +11,21 @@ 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";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
   className?: string;
+  flipDropdown?: boolean;
 };
 
-export default function LinkCardCompact({ link, count, className }: Props) {
+export default function LinkCardCompact({
+  link,
+  count,
+  className,
+  flipDropdown,
+}: Props) {
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -52,15 +59,16 @@ export default function LinkCardCompact({ link, count, className }: Props) {
     <>
       <div
         className={`border-neutral-content relative ${
-          !showInfo ? "hover:bg-base-300" : ""
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
         } duration-200 rounded-lg`}
       >
-        <div
-          onClick={() => link.url && window.open(link.url || "", "_blank")}
-          className="flex items-center cursor-pointer py-3 px-3"
+        <Link
+          href={link.url || ""}
+          target="_blank"
+          className="flex items-start cursor-pointer"
         >
           <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">
@@ -69,16 +77,13 @@ export default function LinkCardCompact({ link, count, className }: Props) {
             </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" />
+                  <div className="flex items-center gap-1 w-fit text-neutral truncate">
+                    <i className="bi-link-45deg text-lg" />
                     <p className="truncate w-full">{shortendURL}</p>
                   </div>
                 ) : (
@@ -86,17 +91,17 @@ export default function LinkCardCompact({ link, count, className }: Props) {
                     {link.type}
                   </div>
                 )}
+                <LinkDate link={link} />
               </div>
-              <span className="hidden sm:block">&middot;</span>
-              <LinkDate link={link} />
             </div>
           </div>
-        </div>
+        </Link>
 
         <LinkActions
           link={link}
           collection={collection}
           position="top-3 right-3"
+          flipDropdown={flipDropdown}
           // toggleShowInfo={() => setShowInfo(!showInfo)}
           // linkInfo={showInfo}
         />

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/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;
@@ -264,6 +265,7 @@ export default function EditCollectionSharingModal({
                                 <div
                                   tabIndex={0}
                                   role="button"
+                                  onMouseDown={dropdownTriggerer}
                                   className="btn btn-sm btn-primary font-normal"
                                 >
                                   {roleLabel}
@@ -443,7 +445,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

@@ -157,7 +157,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,17 +5,20 @@ 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";
 
 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);
 
@@ -47,7 +50,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

@@ -179,7 +179,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 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/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/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.4.8";
 
   const { collections } = useCollectionStore();
 
@@ -64,16 +64,16 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        <Link href="/settings/api">
+        <Link href="/settings/access-tokens">
           <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 CollectionSelection from "@/components/CollectionSelection";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -44,7 +45,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 +98,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>
+            <CollectionSelection links={true} />
           </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,6 +13,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
       <div
         tabIndex={0}
         role="button"
+        onMouseDown={dropdownTriggerer}
         className="btn btn-sm btn-square btn-ghost"
       >
         <i className="bi-chevron-expand text-neutral text-2xl"></i>

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}

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:

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

@@ -43,18 +43,19 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
           ? 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";
 
         if (!link.url) linkType = link.type;
-        else if (contentType === "application/pdf") linkType = "pdf";
+        else if (contentType?.includes("application/pdf")) linkType = "pdf";
         else if (contentType?.startsWith("image")) {
           linkType = "image";
-          if (contentType === "image/jpeg") imageExtension = "jpeg";
-          else if (contentType === "image/png") imageExtension = "png";
+          if (contentType.includes("image/jpeg")) imageExtension = "jpeg";
+          else if (contentType.includes("image/png")) imageExtension = "png";
         }
 
         const user = link.collection?.owner;

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

@@ -37,6 +37,8 @@ export default async function deleteCollection(
   }
 
   const deletedCollection = await prisma.$transaction(async () => {
+    await deleteSubCollections(collectionId);
+
     await prisma.usersAndCollections.deleteMany({
       where: {
         collection: {
@@ -53,7 +55,7 @@ export default async function deleteCollection(
       },
     });
 
-    removeFolder({ filePath: `archives/${collectionId}` });
+    await removeFolder({ filePath: `archives/${collectionId}` });
 
     return await prisma.collection.delete({
       where: {
@@ -64,3 +66,35 @@ 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}` });
+  }
+}

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,26 @@ export default async function updateCollection(
   if (!(collectionIsAccessible?.ownerId === userId))
     return { response: "Collection is not accessible.", status: 401 };
 
+  if (data.parentId) {
+    const findParentCollection = await prisma.collection.findUnique({
+      where: {
+        id: data.parentId,
+      },
+      select: {
+        ownerId: true,
+      },
+    });
+
+    if (
+      findParentCollection?.ownerId !== userId ||
+      typeof data.parentId !== "number"
+    )
+      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: {
@@ -38,6 +57,11 @@ export default async function updateCollection(
         description: data.description,
         color: data.color,
         isPublic: data.isPublic,
+        parent: {
+          connect: {
+            id: data.parentId || undefined,
+          },
+        },
         members: {
           create: data.members.map((e) => ({
             user: { connect: { id: e.user.id || e.userId } },

lib/api/controllers/collections/postCollection.ts

@@ -12,6 +12,26 @@ export default async function postCollection(
       status: 400,
     };
 
+  if (collection.parentId) {
+    const findParentCollection = await prisma.collection.findUnique({
+      where: {
+        id: collection.parentId,
+      },
+      select: {
+        ownerId: true,
+      },
+    });
+
+    if (
+      findParentCollection?.ownerId !== userId ||
+      typeof collection.parentId !== "number"
+    )
+      return {
+        response: "You are not authorized to create a sub-collection here.",
+        status: 403,
+      };
+  }
+
   const findCollection = await prisma.user.findUnique({
     where: {
       id: userId,
@@ -28,7 +48,10 @@ export default async function postCollection(
   const checkIfCollectionExists = findCollection?.collections[0];
 
   if (checkIfCollectionExists)
-    return { response: "Collection already exists.", status: 400 };
+    return {
+      response: "Oops! There's already a Collection with that name.",
+      status: 400,
+    };
 
   const newCollection = await prisma.collection.create({
     data: {
@@ -40,6 +63,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: {

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

@@ -67,9 +67,6 @@ export default async function postLink(
 
   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";

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,

lib/api/validateUrlSize.ts

@@ -1,6 +1,17 @@
+import fetch from "node-fetch";
+import https from "https";
+
 export default async function validateUrlSize(url: string) {
   try {
-    const response = await fetch(url, { method: "HEAD" });
+    const httpsAgent = new https.Agent({
+      rejectUnauthorized:
+        process.env.IGNORE_UNAUTHORIZED_CA === "true" ? false : true,
+    });
+
+    const response = await fetch(url, {
+      method: "HEAD",
+      agent: httpsAgent,
+    });
 
     const totalSizeMB =
       Number(response.headers.get("content-length")) / Math.pow(1024, 2);

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,

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

@@ -1,6 +1,15 @@
+import fetch from "node-fetch";
+import https from "https";
 export default async function getTitle(url: string) {
   try {
-    const response = await fetch(url);
+    const httpsAgent = new https.Agent({
+      rejectUnauthorized:
+        process.env.IGNORE_UNAUTHORIZED_CA === "true" ? false : true,
+    });
+
+    const response = await fetch(url, {
+      agent: httpsAgent,
+    });
     const text = await response.text();
 
     // regular expression to find the <title> tag

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "2.4.0",
+  "version": "2.4.8",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -39,6 +39,7 @@
     "crypto-js": "^4.2.0",
     "csstype": "^3.1.2",
     "dompurify": "^3.0.6",
+    "dotenv": "^16.3.1",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.9",
     "formidable": "^3.5.1",
@@ -58,6 +59,7 @@
     "react-image-file-resizer": "^0.4.8",
     "react-select": "^5.7.4",
     "stripe": "^12.13.0",
+    "vaul": "^0.8.8",
     "zustand": "^4.3.8"
   },
   "devDependencies": {
@@ -65,6 +67,7 @@
     "@types/bcrypt": "^5.0.0",
     "@types/dompurify": "^3.0.4",
     "@types/jsdom": "^21.1.3",
+    "@types/node-fetch": "^2.6.10",
     "@types/shelljs": "^0.8.15",
     "autoprefixer": "^10.4.14",
     "daisyui": "^4.4.2",

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "@/styles/globals.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import { SessionProvider } from "next-auth/react";
@@ -7,6 +7,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import { isPWA } from "@/lib/client/utils";
 
 export default function App({
   Component,
@@ -14,6 +15,15 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
+  useEffect(() => {
+    if (isPWA()) {
+      const meta = document.createElement("meta");
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
+      document.getElementsByTagName("head")[0].appendChild(meta);
+    }
+  }, []);
+
   return (
     <SessionProvider
       session={pageProps.session}
@@ -23,6 +33,7 @@ export default function App({
       <Head>
         <title>Linkwarden</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
         <link
           rel="apple-touch-icon"
           sizes="180x180"

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

@@ -1,6 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import readFile from "@/lib/api/storage/readFile";
-import { getToken } from "next-auth/jwt";
 import { prisma } from "@/lib/api/db";
 import { ArchivedFormat } from "@/types/global";
 import verifyUser from "@/lib/api/verifyUser";
@@ -9,6 +8,7 @@ import { UsersAndCollections } from "@prisma/client";
 import formidable from "formidable";
 import createFile from "@/lib/api/storage/createFile";
 import fs from "fs";
+import verifyToken from "@/lib/api/verifyToken";
 
 export const config = {
   api: {
@@ -33,8 +33,8 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
     return res.status(401).json({ response: "Invalid parameters." });
 
   if (req.method === "GET") {
-    const token = await getToken({ req });
-    const userId = token?.id;
+    const token = await verifyToken({ req });
+    const userId = typeof token === "string" ? undefined : token?.id;
 
     const collectionIsAccessible = await prisma.collection.findFirst({
       where: {

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

@@ -65,6 +65,7 @@ import ZitadelProvider from "next-auth/providers/zitadel";
 import ZohoProvider from "next-auth/providers/zoho";
 import ZoomProvider from "next-auth/providers/zoom";
 import * as process from "process";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -249,7 +250,8 @@ if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
       profile: (profile) => {
         return {
           id: profile.sub,
-          name: profile.name ?? profile.preferred_username,
+          username: profile.preferred_username,
+          name: profile.name || "",
           email: profile.email,
           image: profile.picture,
         };
@@ -589,13 +591,15 @@ if (process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true") {
       profile: (profile) => {
         return {
           id: profile.sub,
-          name: profile.name ?? profile.preferred_username,
+          username: profile.preferred_username,
+          name: profile.name || "",
           email: profile.email,
           image: profile.picture,
         };
       },
     })
   );
+
   const _linkAccount = adapter.linkAccount;
   adapter.linkAccount = (account) => {
     const { "not-before-policy": _, refresh_expires_in, ...data } = account;
@@ -1056,60 +1060,60 @@ if (process.env.NEXT_PUBLIC_ZOOM_ENABLED_ENABLED === "true") {
   };
 }
 
-export const authOptions: AuthOptions = {
-  adapter: adapter as Adapter,
-  session: {
-    strategy: "jwt",
-    maxAge: 30 * 24 * 60 * 60, // 30 days
-  },
-  providers,
-  pages: {
-    signIn: "/login",
-    verifyRequest: "/confirmation",
-  },
-  callbacks: {
-    async signIn({ user, account, profile, email, credentials }) {
-      if (account?.provider !== "credentials") {
-        // registration via SSO can be separately disabled
-        const existingUser = await prisma.account.findFirst({
-          where: {
-            providerAccountId: account?.providerAccountId,
-          },
-        });
-        if (existingUser && newSsoUsersDisabled) {
-          return false;
+export default async function auth(req: NextApiRequest, res: NextApiResponse) {
+  return await NextAuth(req, res, {
+    adapter: adapter as Adapter,
+    session: {
+      strategy: "jwt",
+      maxAge: 30 * 24 * 60 * 60, // 30 days
+    },
+    providers,
+    pages: {
+      signIn: "/login",
+      verifyRequest: "/confirmation",
+    },
+    callbacks: {
+      async signIn({ user, account, profile, email, credentials }) {
+        if (account?.provider !== "credentials") {
+          // registration via SSO can be separately disabled
+          const existingUser = await prisma.account.findFirst({
+            where: {
+              providerAccountId: account?.providerAccountId,
+            },
+          });
+          if (existingUser && newSsoUsersDisabled) {
+            return false;
+          }
         }
-      }
-      return true;
-    },
-    async jwt({ token, trigger, user }) {
-      token.sub = token.sub ? Number(token.sub) : undefined;
-      if (trigger === "signIn" || trigger === "signUp")
-        token.id = user?.id as number;
+        return true;
+      },
+      async jwt({ token, trigger, user }) {
+        token.sub = token.sub ? Number(token.sub) : undefined;
+        if (trigger === "signIn" || trigger === "signUp")
+          token.id = user?.id as number;
 
-      return token;
-    },
-    async session({ session, token }) {
-      session.user.id = token.id;
+        return token;
+      },
+      async session({ session, token }) {
+        session.user.id = token.id;
 
-      if (STRIPE_SECRET_KEY) {
-        const user = await prisma.user.findUnique({
-          where: {
-            id: token.id,
-          },
-          include: {
-            subscriptions: true,
-          },
-        });
+        if (STRIPE_SECRET_KEY) {
+          const user = await prisma.user.findUnique({
+            where: {
+              id: token.id,
+            },
+            include: {
+              subscriptions: true,
+            },
+          });
 
-        if (user) {
-          const subscribedUser = await verifySubscription(user);
+          if (user) {
+            const subscribedUser = await verifySubscription(user);
+          }
         }
-      }
 
-      return session;
+        return session;
+      },
     },
-  },
-};
-
-export default NextAuth(authOptions);
+  });
+}

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

@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import readFile from "@/lib/api/storage/readFile";
-import { getToken } from "next-auth/jwt";
+import verifyToken from "@/lib/api/verifyToken";
 
 export default async function Index(req: NextApiRequest, res: NextApiResponse) {
   const queryId = Number(req.query.id);
@@ -12,8 +12,8 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       .status(401)
       .send("Invalid parameters.");
 
-  const token = await getToken({ req });
-  const userId = token?.id;
+  const token = await verifyToken({ req });
+  const userId = typeof token === "string" ? undefined : token?.id;
 
   if (req.method === "GET") {
     const targetUser = await prisma.user.findUnique({

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

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import getCollectionById from "@/lib/api/controllers/collections/collectionId/getCollectionById";
 import updateCollectionById from "@/lib/api/controllers/collections/collectionId/updateCollectionById";
 import deleteCollectionById from "@/lib/api/controllers/collections/collectionId/deleteCollectionById";
 import verifyUser from "@/lib/api/verifyUser";
@@ -10,18 +11,18 @@ export default async function collections(
   const user = await verifyUser({ req, res });
   if (!user) return;
 
-  if (req.method === "PUT") {
-    const updated = await updateCollectionById(
-      user.id,
-      Number(req.query.id) as number,
-      req.body
-    );
+  const collectionId = Number(req.query.id);
+
+  if (req.method === "GET") {
+    const collections = await getCollectionById(user.id, collectionId);
+    return res
+      .status(collections.status)
+      .json({ response: collections.response });
+  } else if (req.method === "PUT") {
+    const updated = await updateCollectionById(user.id, collectionId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   } else if (req.method === "DELETE") {
-    const deleted = await deleteCollectionById(
-      user.id,
-      Number(req.query.id) as number
-    );
+    const deleted = await deleteCollectionById(user.id, collectionId);
     return res.status(deleted.status).json({ response: deleted.response });
   }
 }

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

@@ -1,10 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import getPublicUser from "@/lib/api/controllers/public/users/getPublicUser";
-import { getToken } from "next-auth/jwt";
+import verifyToken from "@/lib/api/verifyToken";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const token = await getToken({ req });
-  const requestingId = token?.id;
+  const token = await verifyToken({ req });
+  const requestingId = typeof token === "string" ? undefined : token?.id;
 
   const lookupId = req.query.id as string;
 

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

@@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import verifyUser from "@/lib/api/verifyUser";
+import deleteToken from "@/lib/api/controllers/tokens/tokenId/deleteTokenById";
+
+export default async function token(req: NextApiRequest, res: NextApiResponse) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "DELETE") {
+    const deleted = await deleteToken(user.id, Number(req.query.id) as number);
+    return res.status(deleted.status).json({ response: deleted.response });
+  }
+}

pages/api/v1/tokens/index.ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import verifyUser from "@/lib/api/verifyUser";
+import postToken from "@/lib/api/controllers/tokens/postToken";
+import getTokens from "@/lib/api/controllers/tokens/getTokens";
+
+export default async function tokens(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const user = await verifyUser({ req, res });
+  if (!user) return;
+
+  if (req.method === "POST") {
+    const token = await postToken(JSON.parse(req.body), user.id);
+    return res.status(token.status).json({ response: token.response });
+  } else if (req.method === "GET") {
+    const token = await getTokens(user.id);
+    return res.status(token.status).json({ response: token.response });
+  }
+}

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

@@ -2,20 +2,22 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import getUserById from "@/lib/api/controllers/users/userId/getUserById";
 import updateUserById from "@/lib/api/controllers/users/userId/updateUserById";
 import deleteUserById from "@/lib/api/controllers/users/userId/deleteUserById";
-import { getToken } from "next-auth/jwt";
 import { prisma } from "@/lib/api/db";
 import verifySubscription from "@/lib/api/verifySubscription";
+import verifyToken from "@/lib/api/verifyToken";
 
 const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
-  const token = await getToken({ req });
-  const userId = token?.id;
+  const token = await verifyToken({ req });
 
-  if (!userId) {
-    return 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;
+
   if (userId !== Number(req.query.id))
     return res.status(401).json({ response: "Permission denied." });
 

pages/collections/[id].tsx

@@ -23,6 +23,9 @@ import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import Link from "next/link";
+import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -81,6 +84,7 @@ export default function Index() {
   }, [activeCollection]);
 
   const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
@@ -125,6 +129,7 @@ export default function Index() {
               <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>
@@ -158,6 +163,20 @@ export default function Index() {
                       : "View Team"}
                   </div>
                 </li>
+                {permissions === true ? (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setNewCollectionModal(true);
+                      }}
+                    >
+                      Create Sub-Collection
+                    </div>
+                  </li>
+                ) : undefined}
                 <li>
                   <div
                     role="button"
@@ -226,6 +245,31 @@ export default function Index() {
           <p>{activeCollection?.description}</p>
         ) : undefined}
 
+        {/* {collections.some((e) => e.parentId === activeCollection.id) ? (
+          <fieldset className="border rounded-md p-2 border-neutral-content">
+            <legend className="text-sm ml-2">Sub-Collections</legend>
+            <div className="flex gap-3">
+              {collections
+                .filter((e) => e.parentId === activeCollection?.id)
+                .map((e, i) => {
+                  return (
+                    <Link
+                      key={i}
+                      className="flex gap-1 items-center btn btn-ghost btn-sm"
+                      href={`/collections/${e.id}`}
+                    >
+                      <i
+                        className="bi-folder-fill text-2xl drop-shadow"
+                        style={{ color: e.color }}
+                      ></i>
+                      <p className="text-xs">{e.name}</p>
+                    </Link>
+                  );
+                })}
+            </div>
+          </fieldset>
+        ) : undefined} */}
+
         <div className="divider my-0"></div>
 
         <div className="flex justify-between items-end gap-5">
@@ -260,6 +304,12 @@ export default function Index() {
               activeCollection={activeCollection}
             />
           ) : undefined}
+          {newCollectionModal ? (
+            <NewCollectionModal
+              onClose={() => setNewCollectionModal(false)}
+              parent={activeCollection}
+            />
+          ) : undefined}
           {deleteCollectionModal ? (
             <DeleteCollectionModal
               onClose={() => setDeleteCollectionModal(false)}

pages/collections/index.tsx

@@ -11,7 +11,6 @@ import PageHeader from "@/components/PageHeader";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
-  const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
 
@@ -40,7 +39,7 @@ export default function Collections() {
 
         <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections
-            .filter((e) => e.ownerId === data?.user.id)
+            .filter((e) => e.ownerId === data?.user.id && e.parentId === null)
             .map((e, i) => {
               return <CollectionCard key={i} collection={e} />;
             })}

pages/dashboard.tsx

@@ -2,7 +2,6 @@ import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
 import MainLayout from "@/layouts/MainLayout";
-import LinkCard from "@/components/LinkViews/LinkCard";
 import { useEffect, useState } from "react";
 import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
@@ -16,6 +15,7 @@ import PageHeader from "@/components/PageHeader";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
+import { dropdownTriggerer } from "@/lib/client/utils";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function Dashboard() {
@@ -200,6 +200,7 @@ export default function Dashboard() {
                   <div
                     tabIndex={0}
                     role="button"
+                    onMouseDown={dropdownTriggerer}
                     className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
                     id="import-dropdown"
                   >
@@ -277,14 +278,11 @@ export default function Dashboard() {
         >
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
-              <div
-                className={`grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 w-full`}
-              >
-                {links
+              <LinkComponent
+                links={links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
-              </div>
+              />
             </div>
           ) : (
             <div

pages/login.tsx

@@ -3,7 +3,7 @@ import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
-import { useState, FormEvent } from "react";
+import React, { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
 import { getLogins } from "./api/v1/logins";
 import { InferGetServerSidePropsType } from "next";
@@ -131,18 +131,17 @@ export default function Login({
     const Buttons: any = [];
     availableLogins.buttonAuths.forEach((value, index) => {
       Buttons.push(
-        <>
+        <React.Fragment key={index}>
           {index !== 0 ? <div className="divider my-1">OR</div> : undefined}
 
           <AccentSubmitButton
-            key={index}
             type="button"
             onClick={() => loginUserButton(value.method)}
             label={`Sign in with ${value.name}`}
             className=" w-full text-center"
             loading={submitLoader}
           />
-        </>
+        </React.Fragment>
       );
     });
     return Buttons;
@@ -171,6 +170,13 @@ export default function Login({
           {displayLoginCredential()}
           {displayLoginExternalButton()}
           {displayRegistration()}
+          <Link
+            href="https://docs.linkwarden.app/getting-started/pwa-installation"
+            className="underline text-center"
+            target="_blank"
+          >
+            You can install Linkwarden onto your device
+          </Link>
         </div>
       </form>
     </CenteredForm>

pages/search.tsx

@@ -25,8 +25,6 @@ export default function Search() {
     tags: true,
   });
 
-  const [filterDropdown, setFilterDropdown] = useState(false);
-
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );

pages/settings/access-tokens.tsx

@@ -0,0 +1,107 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React, { useEffect, useState } from "react";
+import NewTokenModal from "@/components/ModalContent/NewTokenModal";
+import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
+import { AccessToken } from "@prisma/client";
+import useTokenStore from "@/store/tokens";
+
+export default function AccessTokens() {
+  const [newTokenModal, setNewTokenModal] = useState(false);
+  const [revokeTokenModal, setRevokeTokenModal] = useState(false);
+  const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
+
+  const openRevokeModal = (token: AccessToken) => {
+    setSelectedToken(token);
+    setRevokeTokenModal(true);
+  };
+
+  const { setTokens, tokens } = useTokenStore();
+
+  useEffect(() => {
+    fetch("/api/v1/tokens")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.response) setTokens(data.response as AccessToken[]);
+      });
+  }, []);
+
+  return (
+    <SettingsLayout>
+      <p className="capitalize text-3xl font-thin inline">Access Tokens</p>
+
+      <div className="divider my-3"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>
+          Access Tokens can be used to access Linkwarden from other apps and
+          services without giving away your Username and Password.
+        </p>
+
+        <button
+          className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
+          onClick={() => {
+            setNewTokenModal(true);
+          }}
+        >
+          New Access Token
+        </button>
+
+        {tokens.length > 0 ? (
+          <>
+            <div className="divider my-0"></div>
+
+            <table className="table">
+              {/* head */}
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Created</th>
+                  <th>Expires</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {tokens.map((token, i) => (
+                  <React.Fragment key={i}>
+                    <tr>
+                      <th>{i + 1}</th>
+                      <td>{token.name}</td>
+                      <td>
+                        {new Date(token.createdAt || "").toLocaleDateString()}
+                      </td>
+                      <td>
+                        {new Date(token.expires || "").toLocaleDateString()}
+                      </td>
+                      <td>
+                        <button
+                          className="btn btn-sm btn-ghost btn-square hover:bg-red-500"
+                          onClick={() => openRevokeModal(token as AccessToken)}
+                        >
+                          <i className="bi-x text-lg"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+          </>
+        ) : undefined}
+      </div>
+
+      {newTokenModal ? (
+        <NewTokenModal onClose={() => setNewTokenModal(false)} />
+      ) : undefined}
+      {revokeTokenModal && selectedToken && (
+        <RevokeTokenModal
+          onClose={() => {
+            setRevokeTokenModal(false);
+            setSelectedToken(null);
+          }}
+          activeToken={selectedToken}
+        />
+      )}
+    </SettingsLayout>
+  );
+}

pages/settings/account.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
 import Checkbox from "@/components/Checkbox";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Account() {
   const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
@@ -191,8 +192,8 @@ export default function Account() {
             ) : undefined}
           </div>
 
-          <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="mb-2 text-center">Profile Photo</p>
+          <div className="sm:row-span-2 sm:justify-self-center my-3">
+            <p className="mb-2 sm:text-center">Profile Photo</p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
@@ -245,6 +246,7 @@ export default function Account() {
                 <div
                   tabIndex={0}
                   role="button"
+                  onMouseDown={dropdownTriggerer}
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
@@ -347,8 +349,8 @@ export default function Account() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
 
         <div>
@@ -373,7 +375,7 @@ export default function Account() {
 
         <Link
           href="/settings/delete"
-          className="mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
+          className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
         >
           <p className="text-center w-full">Delete Your Account</p>
         </Link>

pages/settings/api.tsx

@@ -1,78 +0,0 @@
-import Checkbox from "@/components/Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
-import useAccountStore from "@/store/account";
-import { toast } from "react-hot-toast";
-import { AccountSettings } from "@/types/global";
-import TextInput from "@/components/TextInput";
-
-export default function Api() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
-
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-
-  useEffect(() => {
-    setUser({
-      ...account,
-      archiveAsScreenshot,
-      archiveAsPDF,
-      archiveAsWaybackMachine,
-    });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) {
-      setArchiveAsScreenshot(account.archiveAsScreenshot);
-      setArchiveAsPDF(account.archiveAsPDF);
-      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
-    }
-  }, [account]);
-
-  const submit = async () => {
-    // setSubmitLoader(true);
-    // const load = toast.loading("Applying...");
-    // const response = await updateAccount({
-    //   ...user,
-    // });
-    // toast.dismiss(load);
-    // if (response.ok) {
-    //   toast.success("Settings Applied!");
-    // } else toast.error(response.data as string);
-    // setSubmitLoader(false);
-  };
-
-  return (
-    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
-
-      <div className="divider my-3"></div>
-
-      <div className="flex flex-col gap-3">
-        <div className="badge badge-warning rounded-md w-fit">
-          Status: Under Development
-        </div>
-
-        <p>This page will be for creating and managing your API keys.</p>
-
-        <p>
-          For now, you can <i>temporarily</i> use your{" "}
-          <code className="text-xs whitespace-nowrap bg-black/40 rounded-md px-2 py-1">
-            next-auth.session-token
-          </code>{" "}
-          in your browser cookies as the API key for your integrations.
-        </p>
-      </div>
-    </SettingsLayout>
-  );
-}

pages/settings/appearance.tsx

@@ -97,7 +97,7 @@ export default function Appearance() {
         {/* <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
+          label="Save Changes"
           className="mt-2 mx-auto lg:mx-0"
         /> */}
       </div>

pages/settings/archive.tsx

@@ -85,8 +85,8 @@ export default function Archive() {
       <SubmitButton
         onClick={submit}
         loading={submitLoader}
-        label="Save"
-        className="mt-2 mx-auto lg:mx-0"
+        label="Save Changes"
+        className="mt-2 w-full sm:w-fit"
       />
     </SettingsLayout>
   );

pages/settings/delete.tsx

@@ -5,6 +5,9 @@ import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 
+const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
+const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
+
 export default function Delete() {
   const [password, setPassword] = useState("");
   const [comment, setComment] = useState<string>();
@@ -23,7 +26,7 @@ export default function Delete() {
       },
     };
 
-    if (process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" && password == "") {
+    if (!keycloakEnabled && !authentikEnabled && password == "") {
       return toast.error("Please fill the required fields.");
     }
 

pages/settings/password.tsx

@@ -77,8 +77,8 @@ export default function Password() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>

pages/tags/[id].tsx

@@ -11,6 +11,7 @@ import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Index() {
   const router = useRouter();
@@ -153,6 +154,7 @@ export default function Index() {
                       <div
                         tabIndex={0}
                         role="button"
+                        onMouseDown={dropdownTriggerer}
                         className="btn btn-ghost btn-sm btn-square text-neutral"
                       >
                         <i

prisma/migrations/20240113051701_make_key_names_unique/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[name]` on the table `ApiKey` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "ApiKey_name_key" ON "ApiKey"("name");

prisma/migrations/20240113060555_minor_fix/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[name,userId]` on the table `ApiKey` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- DropIndex
+DROP INDEX "ApiKey_name_key";
+
+-- DropIndex
+DROP INDEX "ApiKey_token_userId_key";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApiKey_name_userId_key" ON "ApiKey"("name", "userId");

prisma/migrations/20240124192212_added_revoke_field/migration.sql

@@ -0,0 +1,35 @@
+/*
+  Warnings:
+
+  - You are about to drop the `ApiKey` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "ApiKey" DROP CONSTRAINT "ApiKey_userId_fkey";
+
+-- DropTable
+DROP TABLE "ApiKey";
+
+-- CreateTable
+CREATE TABLE "AccessToken" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "token" TEXT NOT NULL,
+    "revoked" BOOLEAN NOT NULL DEFAULT false,
+    "expires" TIMESTAMP(3) NOT NULL,
+    "lastUsedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "AccessToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AccessToken_token_key" ON "AccessToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AccessToken_name_userId_key" ON "AccessToken"("name", "userId");
+
+-- AddForeignKey
+ALTER TABLE "AccessToken" ADD CONSTRAINT "AccessToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20240124201018_removed_name_unique_constraint/migration.sql

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

prisma/migrations/20240125124457_added_subcollection_relations/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Collection" ADD COLUMN     "parentId" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "Collection" ADD CONSTRAINT "Collection_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "Collection"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -39,7 +39,7 @@ model User {
   pinnedLinks             Link[]
   collectionsJoined       UsersAndCollections[]
   whitelistedUsers        WhitelistedUser[]
-  apiKeys                 ApiKey[]
+  accessTokens            AccessToken[]
   subscriptions           Subscription?
   archiveAsScreenshot     Boolean               @default(true)
   archiveAsPDF            Boolean               @default(true)
@@ -69,17 +69,20 @@ model VerificationToken {
 }
 
 model Collection {
-  id          Int                   @id @default(autoincrement())
-  name        String
-  description String                @default("")
-  color       String                @default("#0ea5e9")
-  isPublic    Boolean               @default(false)
-  owner       User                  @relation(fields: [ownerId], references: [id])
-  ownerId     Int
-  members     UsersAndCollections[]
-  links       Link[]
-  createdAt   DateTime              @default(now())
-  updatedAt   DateTime              @default(now()) @updatedAt
+  id              Int                   @id @default(autoincrement())
+  name            String
+  description     String                @default("")
+  color           String                @default("#0ea5e9")
+  parentId        Int?
+  parent          Collection?           @relation("SubCollections", fields: [parentId], references: [id])
+  subCollections  Collection[]          @relation("SubCollections")
+  isPublic        Boolean               @default(false)
+  owner           User                  @relation(fields: [ownerId], references: [id])
+  ownerId         Int
+  members         UsersAndCollections[]
+  links           Link[]
+  createdAt       DateTime              @default(now())
+  updatedAt       DateTime              @default(now()) @updatedAt
 
   @@unique([name, ownerId])
 }
@@ -142,16 +145,15 @@ model Subscription {
   updatedAt            DateTime @default(now()) @updatedAt
 }
 
-model ApiKey {
+model AccessToken {
   id         Int       @id @default(autoincrement())
-  name       String
+  name       String    
   user       User      @relation(fields: [userId], references: [id])
   userId     Int
   token      String    @unique
+  revoked    Boolean   @default(false)
   expires    DateTime
   lastUsedAt DateTime?
   createdAt  DateTime  @default(now())
   updatedAt  DateTime  @default(now()) @updatedAt
-
-  @@unique([token, userId])
 }