Merge pull request #240 from linkwarden/dev

minor cleanup + updated twitter handle

README.md

@@ -3,7 +3,7 @@
   <h1>Linkwarden</h1>
 
 <a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>
-<img alt="GitHub commits since latest release (by SemVer including pre-releases)" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/v1.0.1/dev">
+<img alt="GitHub commits since latest release (by SemVer including pre-releases)" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/v1.1.0/dev">
 <img src="https://img.shields.io/github/languages/top/linkwarden/linkwarden?style=flat-square" alt="Top Language">
 <img src="https://img.shields.io/github/stars/linkwarden/linkwarden?style=flat-square" alt="Github Stars">
 
@@ -38,6 +38,7 @@ We highly recommend that you don't use the old version because it is no longer m
 ## Features
 
 - 📸 Auto capture a screenshot and a PDF of each link.
+- 🏛️ Send your webpage to Wayback Machine archive.org for a snapshot.
 - 📂 Organize links by collection, name, description and multiple tags.
 - 👥 Collaborate on gathering links in a collection.
 - 🔐 Customize the permissions of each member.

components/LinkCard.tsx

@@ -20,6 +20,7 @@ import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
 import Link from "next/link";
+import unescapeString from "@/lib/client/unescapeString";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -161,7 +162,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 {count + 1}
               </p>
               <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
             <Link

components/Modal/Collection/TeamManagement.tsx

@@ -156,7 +156,9 @@ export default function TeamManagement({
         </div>
       ) : null}
 
-      {permissions !== true && collection.isPublic && <hr />}
+      {permissions !== true && collection.isPublic && (
+        <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+      )}
 
       {permissions === true && (
         <>

components/Modal/Link/AddOrEditLink.tsx

@@ -137,7 +137,8 @@ export default function AddOrEditLink({
           className="text-gray-500 dark:text-gray-300 text-center truncate w-full"
           title={link.url}
         >
-          <Link href={link.url} target="_blank" className="font-bold">
+          Editing:{" "}
+          <Link href={link.url} target="_blank">
             {link.url}
           </Link>
         </p>

components/Modal/Link/LinkDetails.tsx

@@ -12,6 +12,7 @@ import {
   faBoxArchive,
   faCloudArrowDown,
   faFolder,
+  faGlobe,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import {
@@ -78,25 +79,29 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
     const bannerInner = document.getElementById("link-banner-inner");
 
     if (colorPalette && banner && bannerInner) {
-      banner.style.background = `linear-gradient(to right, ${rgbToHex(
-        colorPalette[0][0],
-        colorPalette[0][1],
-        colorPalette[0][2]
-      )}, ${rgbToHex(
-        colorPalette[1][0],
-        colorPalette[1][1],
-        colorPalette[1][2]
-      )})`;
+      if (colorPalette[0] && colorPalette[1]) {
+        banner.style.background = `linear-gradient(to right, ${rgbToHex(
+          colorPalette[0][0],
+          colorPalette[0][1],
+          colorPalette[0][2]
+        )}, ${rgbToHex(
+          colorPalette[1][0],
+          colorPalette[1][1],
+          colorPalette[1][2]
+        )})`;
+      }
 
-      bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
-        colorPalette[2][0],
-        colorPalette[2][1],
-        colorPalette[2][2]
-      )}, ${rgbToHex(
-        colorPalette[3][0],
-        colorPalette[3][1],
-        colorPalette[3][2]
-      )})`;
+      if (colorPalette[2] && colorPalette[3]) {
+        bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
+          colorPalette[2][0],
+          colorPalette[2][1],
+          colorPalette[2][2]
+        )}, ${rgbToHex(
+          colorPalette[3][0],
+          colorPalette[3][1],
+          colorPalette[3][2]
+        )})`;
+      }
     }
   }, [colorPalette, theme]);
 
@@ -224,9 +229,9 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
@@ -234,18 +239,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           </div>
 
           <div className="flex text-black dark:text-white gap-1">
-            <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.png`}
-              target="_blank"
-              rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-sky-500 dark:text-sky-500"
-              />
-            </Link>
-
             <div
               onClick={() => handleDownload("png")}
               className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
@@ -255,23 +248,10 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
                 className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
               />
             </div>
-          </div>
-        </div>
 
-        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
-          <div className="flex gap-2 items-center">
-            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-            </div>
-
-            <p className="text-black dark:text-white">PDF</p>
-          </div>
-
-          <div className="flex text-black dark:text-white gap-1">
             <Link
-              href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
+              href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
-              rel="noreferrer"
               className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
@@ -279,7 +259,19 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
                 className="w-5 h-5 text-sky-500 dark:text-sky-500"
               />
             </Link>
+          </div>
+        </div>
 
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">PDF</p>
+          </div>
+
+          <div className="flex text-black dark:text-white gap-1">
             <div
               onClick={() => handleDownload("pdf")}
               className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
@@ -289,8 +281,45 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
                 className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
               />
             </div>
+
+            <Link
+              href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
+              target="_blank"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="w-5 h-5 text-sky-500 dark:text-sky-500"
+              />
+            </Link>
           </div>
         </div>
+
+        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+          <div className="flex gap-2 items-center">
+            <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
+              <FontAwesomeIcon icon={faGlobe} className="w-6 h-6" />
+            </div>
+
+            <p className="text-black dark:text-white">
+              Latest archive.org Snapshot
+            </p>
+          </div>
+
+          <Link
+            href={`https://web.archive.org/web/${link.url.replace(
+              /(^\w+:|^)\/\//,
+              ""
+            )}`}
+            target="_blank"
+            className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+          >
+            <FontAwesomeIcon
+              icon={faArrowUpRightFromSquare}
+              className="w-5 h-5 text-sky-500 dark:text-sky-500"
+            />
+          </Link>
+        </div>
       </div>
     </div>
   );

components/Modal/User/BillingPortal.tsx

@@ -1,46 +0,0 @@
-import { useState } from "react";
-import SubmitButton from "@/components/SubmitButton";
-import { toast } from "react-hot-toast";
-import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-
-export default function PaymentPortal() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const router = useRouter();
-
-  const submit = () => {
-    setSubmitLoader(true);
-    const load = toast.loading("Redirecting to billing portal...");
-
-    router.push(process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL as string);
-  };
-
-  return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-black dark:text-white">
-          To manage/cancel your subsciption, visit the billing portal.
-        </p>
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Go to Billing Portal"
-          icon={faArrowUpRightFromSquare}
-          className="mx-auto mt-2"
-        />
-
-        <p className="text-md text-black dark:text-white">
-          If you still need help or encountered any issues, feel free to reach
-          out to us at:{" "}
-          <a
-            className="font-semibold underline"
-            href="mailto:support@linkwarden.app"
-          >
-            support@linkwarden.app
-          </a>
-        </p>
-      </div>
-    </div>
-  );
-}

components/Modal/User/PrivacySettings.tsx

@@ -1,220 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import Checkbox from "../../Checkbox";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import { toast } from "react-hot-toast";
-import Link from "next/link";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
-import useInitialData from "@/hooks/useInitialData";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function PrivacySettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-
-  const [importDropdown, setImportDropdown] = useState(false);
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
-    user.whitelistedUsers.join(", ")
-  );
-
-  useEffect(() => {
-    setUser({
-      ...user,
-      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
-    });
-  }, [whitelistedUsersTextbox]);
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces.split(",");
-
-    return wordsArray;
-  };
-
-  const postBookmarkFile = async (e: any) => {
-    const file: File = e.target.files[0];
-
-    if (file) {
-      var reader = new FileReader();
-      reader.readAsText(file, "UTF-8");
-      reader.onload = async function (e) {
-        const load = toast.loading("Importing...");
-
-        const response = await fetch("/api/migration", {
-          method: "POST",
-          body: e.target?.result,
-        });
-
-        const data = await response.json();
-
-        toast.dismiss(load);
-
-        toast.success("Imported the Bookmarks! Reloading the page...");
-
-        setImportDropdown(false);
-
-        setTimeout(() => {
-          location.reload();
-        }, 2000);
-      };
-      reader.onerror = function (e) {
-        console.log("Error:", e);
-      };
-    }
-  };
-
-  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!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div>
-        <p className="text-sm text-black dark:text-white mb-2">
-          Profile Visibility
-        </p>
-
-        <Checkbox
-          label="Make profile private"
-          state={user.isPrivate}
-          className="text-sm sm:text-base"
-          onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
-        />
-
-        <p className="text-gray-500 dark:text-gray-300 text-sm">
-          This will limit who can find and add you to other Collections.
-        </p>
-
-        {user.isPrivate && (
-          <div>
-            <p className="text-sm text-black dark:text-white mt-2">
-              Whitelisted Users
-            </p>
-            <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
-              Please provide the Username of the users you wish to grant
-              visibility to your profile. Separated by comma.
-            </p>
-            <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
-              placeholder="Your profile is hidden from everyone right now..."
-              value={whitelistedUsersTextbox}
-              onChange={(e) => {
-                setWhiteListedUsersTextbox(e.target.value);
-              }}
-            />
-          </div>
-        )}
-      </div>
-
-      <div className="mt-5">
-        <p className="text-sm text-black dark:text-white mb-2">Import Data</p>
-
-        <div className="flex gap-2">
-          <div
-            onClick={() => setImportDropdown(true)}
-            className="w-fit relative"
-            id="import-dropdown"
-          >
-            <div
-              id="import-dropdown"
-              className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
-            >
-              Import From
-            </div>
-            {importDropdown ? (
-              <ClickAwayHandler
-                onClickOutside={(e: Event) => {
-                  const target = e.target as HTMLInputElement;
-                  if (target.id !== "import-dropdown") setImportDropdown(false);
-                }}
-                className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
-              >
-                <div className="cursor-pointer rounded-md">
-                  <label
-                    htmlFor="import-file"
-                    title="HTML File"
-                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
-                  >
-                    Bookmarks HTML file...
-                    <input
-                      type="file"
-                      name="photo"
-                      id="import-file"
-                      accept=".html"
-                      className="hidden"
-                      onChange={postBookmarkFile}
-                    />
-                  </label>
-                </div>
-              </ClickAwayHandler>
-            ) : null}
-          </div>
-
-          {/* Commented out for now. */}
-          {/* <Link className="w-fit" href="/api/migration">
-            <div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
-              Export Data
-            </div>
-          </Link> */}
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/ProfileSettings.tsx

@@ -1,195 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { resizeImage } from "@/lib/client/resizeImage";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import ProfilePhoto from "../../ProfilePhoto";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
-
-export default function ProfileSettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-  const [profileStatus, setProfileStatus] = useState(true);
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const handleProfileStatus = (e: boolean) => {
-    setProfileStatus(!e);
-  };
-
-  const handleImageUpload = async (e: any) => {
-    const file: File = e.target.files[0];
-
-    const fileExtension = file.name.split(".").pop()?.toLowerCase();
-    const allowedExtensions = ["png", "jpeg", "jpg"];
-
-    if (allowedExtensions.includes(fileExtension as string)) {
-      const resizedFile = await resizeImage(file);
-
-      if (
-        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
-      ) {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          setUser({ ...user, profilePic: reader.result as string });
-        };
-
-        reader.readAsDataURL(resizedFile);
-      } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
-      }
-    } else {
-      toast.error("Invalid file format.");
-    }
-  };
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  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!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
-        <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-black dark:text-white mb-2 text-center">
-            Profile Photo
-          </p>
-          <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
-            <ProfilePhoto
-              src={user.profilePic}
-              className="h-auto  w-28"
-              status={handleProfileStatus}
-            />
-            {profileStatus && (
-              <div
-                onClick={() =>
-                  setUser({
-                    ...user,
-                    profilePic: "",
-                  })
-                }
-                className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-slate-200 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer"
-              >
-                <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
-              </div>
-            )}
-
-            <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-              <label
-                htmlFor="upload-photo"
-                title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
-              >
-                Browse...
-                <input
-                  type="file"
-                  name="photo"
-                  id="upload-photo"
-                  accept=".png, .jpeg, .jpg"
-                  className="hidden"
-                  onChange={handleImageUpload}
-                />
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div>
-            <p className="text-sm text-black dark:text-white mb-2">
-              Display Name
-            </p>
-            <TextInput
-              value={user.name || ""}
-              onChange={(e) => setUser({ ...user, name: e.target.value })}
-            />
-          </div>
-
-          <div>
-            <p className="text-sm text-black dark:text-white mb-2">Username</p>
-            <TextInput
-              value={user.username || ""}
-              onChange={(e) => setUser({ ...user, username: e.target.value })}
-            />
-          </div>
-
-          {emailEnabled ? (
-            <div>
-              <p className="text-sm text-black dark:text-white mb-2">Email</p>
-              <TextInput
-                value={user.email || ""}
-                onChange={(e) => setUser({ ...user, email: e.target.value })}
-              />
-            </div>
-          ) : undefined}
-
-          {user.email !== account.email ? (
-            <p className="text-gray-500">
-              You will need to log back in after you apply this Email.
-            </p>
-          ) : undefined}
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/index.tsx

@@ -1,107 +0,0 @@
-import { Tab } from "@headlessui/react";
-import { AccountSettings } from "@/types/global";
-import { useState } from "react";
-import ChangePassword from "./ChangePassword";
-import ProfileSettings from "./ProfileSettings";
-import PrivacySettings from "./PrivacySettings";
-import BillingPortal from "./BillingPortal";
-
-type Props = {
-  toggleSettingsModal: Function;
-  activeUser: AccountSettings;
-  className?: string;
-  defaultIndex?: number;
-};
-
-const STRIPE_BILLING_PORTAL_URL =
-  process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL;
-
-export default function UserModal({
-  className,
-  defaultIndex,
-  toggleSettingsModal,
-  activeUser,
-}: Props) {
-  const [user, setUser] = useState<AccountSettings>(activeUser);
-
-  return (
-    <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white  duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Profile Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Privacy Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Password
-          </Tab>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab
-              className={({ selected }) =>
-                selected
-                  ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                  : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-              }
-            >
-              Billing
-            </Tab>
-          ) : undefined}
-        </Tab.List>
-        <Tab.Panels>
-          <Tab.Panel>
-            <ProfileSettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <PrivacySettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <ChangePassword
-              togglePasswordFormModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab.Panel>
-              <BillingPortal />
-            </Tab.Panel>
-          ) : undefined}
-        </Tab.Panels>
-      </Tab.Group>
-    </div>
-  );
-}

components/ModalManagement.tsx

@@ -2,12 +2,10 @@ import useModalStore from "@/store/modals";
 import Modal from "./Modal";
 import LinkModal from "./Modal/Link";
 import {
-  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import CollectionModal from "./Modal/Collection";
-import UserModal from "./Modal/User";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
@@ -49,15 +47,5 @@ export default function ModalManagement() {
         />
       </Modal>
     );
-  else if (modal && modal.modal === "ACCOUNT")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <UserModal
-          toggleSettingsModal={toggleModal}
-          defaultIndex={modal.defaultIndex}
-          activeUser={modal.active as AccountSettings}
-        />
-      </Modal>
-    );
   else return <></>;
 }

components/Navbar.tsx

@@ -19,8 +19,6 @@ export default function Navbar() {
 
   const [profileDropdown, setProfileDropdown] = useState(false);
 
-  const [sidebar, setSidebar] = useState(false);
-
   const router = useRouter();
 
   const { theme, setTheme } = useTheme();
@@ -33,6 +31,8 @@ export default function Navbar() {
     }
   };
 
+  const [sidebar, setSidebar] = useState(false);
+
   window.addEventListener("resize", () => setSidebar(false));
 
   useEffect(() => {
@@ -79,6 +79,7 @@ export default function Navbar() {
           >
             <ProfilePhoto
               src={account.profilePic}
+              priority={true}
               className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />
             <p
@@ -93,14 +94,7 @@ export default function Navbar() {
               items={[
                 {
                   name: "Settings",
-                  onClick: () => {
-                    setModal({
-                      modal: "ACCOUNT",
-                      state: true,
-                      active: account,
-                    });
-                    setProfileDropdown(!profileDropdown);
-                  },
+                  href: "/settings/account",
                 },
                 {
                   name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
@@ -132,7 +126,7 @@ export default function Navbar() {
                 onClickOutside={toggleSidebar}
               >
                 <div className="slide-right h-full shadow-lg">
-                  <Sidebar className="" />
+                  <Sidebar />
                 </div>
               </ClickAwayHandler>
             </div>

components/ProfilePhoto.tsx

@@ -9,6 +9,7 @@ type Props = {
   className?: string;
   emptyImage?: boolean;
   status?: Function;
+  priority?: boolean;
 };
 
 export default function ProfilePhoto({
@@ -16,6 +17,7 @@ export default function ProfilePhoto({
   className,
   emptyImage,
   status,
+  priority,
 }: Props) {
   const [error, setError] = useState<boolean>(emptyImage || true);
 
@@ -43,6 +45,7 @@ export default function ProfilePhoto({
       src={src}
       height={112}
       width={112}
+      priority={priority}
       className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
     />
   );

components/PublicPage/LinkCard.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
 import isValidUrl from "@/lib/client/isValidUrl";
+import unescapeString from "@/lib/client/unescapeString";
 
 interface LinksIncludingTags extends LinkType {
   tags: Tag[];
@@ -60,12 +61,12 @@ export default function LinkCard({ link, count }: Props) {
             <div className="flex items-baseline gap-1">
               <p className="text-xs text-gray-500">{count + 1}</p>
               <p className="text-lg text-black">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
-              {link.description}
+              {unescapeString(link.description)}
             </p>
             <div className="flex gap-3 items-center flex-wrap my-3">
               <div className="flex gap-1 items-center flex-wrap mt-1">

components/SettingsSidebar.tsx

@@ -0,0 +1,199 @@
+import useCollectionStore from "@/store/collections";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faPalette,
+  faBoxArchive,
+  faKey,
+} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import {
+  faCircleQuestion,
+  faCreditCard,
+} from "@fortawesome/free-regular-svg-icons";
+import {
+  faGithub,
+  faMastodon,
+  faXTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+
+export default function SettingsSidebar({ className }: { className?: string }) {
+  const { collections } = useCollectionStore();
+
+  const router = useRouter();
+
+  const [active, setActive] = useState("");
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router, collections]);
+
+  return (
+    <div
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+    >
+      <div className="flex flex-col gap-1">
+        <Link href="/settings/account">
+          <div
+            className={`${
+              active === `/settings/account`
+                ? "bg-sky-200 dark:bg-sky-800"
+                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faUser}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Account
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/appearance">
+          <div
+            className={`${
+              active === `/settings/appearance`
+                ? "bg-sky-200 dark:bg-sky-800"
+                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faPalette}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Appearance
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/archive">
+          <div
+            className={`${
+              active === `/settings/archive`
+                ? "bg-sky-200 dark:bg-sky-800"
+                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faBoxArchive}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Archive
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/settings/password">
+          <div
+            className={`${
+              active === `/settings/password`
+                ? "bg-sky-200 dark:bg-sky-800"
+                : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+            } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faKey}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Password
+            </p>
+          </div>
+        </Link>
+
+        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
+          <Link href="/settings/billing">
+            <div
+              className={`${
+                active === `/settings/billing`
+                  ? "bg-sky-200 dark:bg-sky-800"
+                  : "hover:bg-slate-200 hover:dark:bg-neutral-700"
+              } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            >
+              <FontAwesomeIcon
+                icon={faCreditCard}
+                className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              />
+
+              <p className="text-black dark:text-white truncate w-full pr-7">
+                Billing
+              </p>
+            </div>
+          </Link>
+        ) : undefined}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <Link href="https://docs.linkwarden.app" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faCircleQuestion as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Help
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faGithub as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              GitHub
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faXTwitter as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Twitter
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://fosstodon.org/@linkwarden" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faMastodon as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Mastodon
+            </p>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/Sidebar.tsx

@@ -12,7 +12,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
-import Image from "next/image";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {

components/SubmitButton.tsx

@@ -27,8 +27,8 @@ export default function SubmitButton({
         if (!loading) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      {icon && <FontAwesomeIcon icon={icon} className="h-5 select-none" />}
+      <p className="text-center w-full select-none">{label}</p>
     </div>
   );
 }

docker-compose.yml

@@ -11,7 +11,7 @@ services:
     environment:
       - DATABASE_URL=postgresql://postgres:${POSTGRES_PASSWORD}@postgres:5432/postgres
     restart: always
-    image: ghcr.io/linkwarden/linkwarden:main
+    image: ghcr.io/linkwarden/linkwarden:latest
     ports:
       - 3000:3000
     volumes:

layouts/MainLayout.tsx

@@ -1,10 +1,6 @@
 import Navbar from "@/components/Navbar";
 import Sidebar from "@/components/Sidebar";
 import { ReactNode, useEffect } from "react";
-import { useSession } from "next-auth/react";
-import Loader from "../components/Loader";
-import useRedirect from "@/hooks/useRedirect";
-import { useRouter } from "next/router";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
 
@@ -13,11 +9,6 @@ interface Props {
 }
 
 export default function MainLayout({ children }: Props) {
-  const { status, data } = useSession();
-  const router = useRouter();
-  const redirect = useRedirect();
-  const routeExists = router.route === "/_error" ? false : true;
-
   const { modal } = useModalStore();
 
   useEffect(() => {
@@ -26,24 +17,20 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
-  if (status === "authenticated" && !redirect && routeExists)
-    return (
-      <>
-        <ModalManagement />
+  return (
+    <>
+      <ModalManagement />
 
-        <div className="flex">
-          <div className="hidden lg:block">
-            <Sidebar className="fixed top-0" />
-          </div>
-
-          <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80">
-            <Navbar />
-            {children}
-          </div>
+      <div className="flex">
+        <div className="hidden lg:block">
+          <Sidebar className="fixed top-0" />
         </div>
-      </>
-    );
-  else if ((status === "unauthenticated" && !redirect) || !routeExists)
-    return <>{children}</>;
-  else return <></>;
+
+        <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80">
+          <Navbar />
+          {children}
+        </div>
+      </div>
+    </>
+  );
 }

layouts/SettingsLayout.tsx

@@ -0,0 +1,88 @@
+import SettingsSidebar from "@/components/SettingsSidebar";
+import { ReactNode, useEffect, useState } from "react";
+import ModalManagement from "@/components/ModalManagement";
+import useModalStore from "@/store/modals";
+import { useRouter } from "next/router";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function SettingsLayout({ children }: Props) {
+  const { modal } = useModalStore();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
+
+  const [sidebar, setSidebar] = useState(false);
+
+  window.addEventListener("resize", () => setSidebar(false));
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };
+
+  return (
+    <>
+      <ModalManagement />
+
+      <div className="flex max-w-screen-md mx-auto">
+        <div className="hidden lg:block fixed h-screen">
+          <SettingsSidebar />
+        </div>
+
+        <div className="w-full flex flex-col min-h-screen p-5 lg:ml-64">
+          <div className="flex gap-3">
+            <div
+              onClick={toggleSidebar}
+              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+            </div>
+
+            <Link
+              href="/dashboard"
+              className="inline-flex gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+            </Link>
+
+            <p className="capitalize text-3xl font-thin">
+              {router.asPath.split("/").pop()} Settings
+            </p>
+          </div>
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+          {children}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+              <ClickAwayHandler
+                className="h-full"
+                onClickOutside={toggleSidebar}
+              >
+                <div className="slide-right h-full shadow-lg">
+                  <SettingsSidebar />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}

lib/api/archive.ts

@@ -1,52 +1,72 @@
-import { Page, chromium, devices } from "playwright";
+import { chromium, devices } from "playwright";
 import { prisma } from "@/lib/api/db";
 import createFile from "@/lib/api/storage/createFile";
+import sendToWayback from "./sendToWayback";
 
-export default async function archive(linkId: number, url: string) {
-  const browser = await chromium.launch();
-  const context = await browser.newContext(devices["Desktop Chrome"]);
-  const page = await context.newPage();
+export default async function archive(
+  linkId: number,
+  url: string,
+  userId: number
+) {
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
 
-  try {
-    await page.goto(url, { waitUntil: "domcontentloaded" });
+  if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
-    await page.evaluate(
-      autoScroll,
-      Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-    );
+  if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
+    const browser = await chromium.launch();
+    const context = await browser.newContext(devices["Desktop Chrome"]);
+    const page = await context.newPage();
 
-    const linkExists = await prisma.link.findUnique({
-      where: {
-        id: linkId,
-      },
-    });
+    try {
+      await page.goto(url, { waitUntil: "domcontentloaded" });
 
-    if (linkExists) {
-      const pdf = await page.pdf({
-        width: "1366px",
-        height: "1931px",
-        printBackground: true,
-        margin: { top: "15px", bottom: "15px" },
-      });
-      const screenshot = await page.screenshot({
-        fullPage: true,
+      await page.evaluate(
+        autoScroll,
+        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
+      );
+
+      const linkExists = await prisma.link.findUnique({
+        where: {
+          id: linkId,
+        },
       });
 
-      createFile({
-        data: screenshot,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
-      });
+      if (linkExists) {
+        if (user.archiveAsScreenshot) {
+          const screenshot = await page.screenshot({
+            fullPage: true,
+          });
 
-      createFile({
-        data: pdf,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
-      });
+          createFile({
+            data: screenshot,
+            filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
+          });
+        }
+
+        if (user.archiveAsPDF) {
+          const pdf = await page.pdf({
+            width: "1366px",
+            height: "1931px",
+            printBackground: true,
+            margin: { top: "15px", bottom: "15px" },
+          });
+
+          createFile({
+            data: pdf,
+            filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
+          });
+        }
+      }
+
+      await browser.close();
+    } catch (err) {
+      console.log(err);
+      await browser.close();
     }
-
-    await browser.close();
-  } catch (err) {
-    console.log(err);
-    await browser.close();
   }
 }
 

lib/api/controllers/links/getLinks.ts

@@ -3,138 +3,130 @@ import { LinkRequestQuery, Sort } from "@/types/global";
 
 export default async function getLink(userId: number, body: string) {
   const query: LinkRequestQuery = JSON.parse(decodeURIComponent(body));
-  console.log(query);
 
   const POSTGRES_IS_ENABLED = process.env.DATABASE_URL.startsWith("postgresql");
-  // Sorting logic
+
   let order: any;
-  if (query.sort === Sort.DateNewestFirst)
-    order = {
-      createdAt: "desc",
-    };
-  else if (query.sort === Sort.DateOldestFirst)
-    order = {
-      createdAt: "asc",
-    };
-  else if (query.sort === Sort.NameAZ)
-    order = {
-      name: "asc",
-    };
-  else if (query.sort === Sort.NameZA)
-    order = {
-      name: "desc",
-    };
-  else if (query.sort === Sort.DescriptionAZ)
-    order = {
-      description: "asc",
-    };
-  else if (query.sort === Sort.DescriptionZA)
-    order = {
-      description: "desc",
-    };
+  if (query.sort === Sort.DateNewestFirst) order = { createdAt: "desc" };
+  else if (query.sort === Sort.DateOldestFirst) order = { createdAt: "asc" };
+  else if (query.sort === Sort.NameAZ) order = { name: "asc" };
+  else if (query.sort === Sort.NameZA) order = { name: "desc" };
+  else if (query.sort === Sort.DescriptionAZ) order = { description: "asc" };
+  else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
+
+  const searchConditions = [];
+
+  if (query.searchQuery) {
+    if (query.searchFilter?.name) {
+      searchConditions.push({
+        name: {
+          contains: query.searchQuery,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchFilter?.url) {
+      searchConditions.push({
+        url: {
+          contains: query.searchQuery,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchFilter?.description) {
+      searchConditions.push({
+        description: {
+          contains: query.searchQuery,
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+        },
+      });
+    }
+
+    if (query.searchFilter?.tags) {
+      searchConditions.push({
+        tags: {
+          some: {
+            name: {
+              contains: query.searchQuery,
+              mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+            },
+            OR: [
+              { ownerId: userId },
+              {
+                links: {
+                  some: {
+                    collection: {
+                      members: {
+                        some: { userId },
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      });
+    }
+  }
+
+  const tagCondition = [];
+
+  if (query.tagId) {
+    tagCondition.push({
+      tags: {
+        some: {
+          id: query.tagId,
+        },
+      },
+    });
+  }
+
+  const collectionCondition = [];
+
+  if (query.collectionId) {
+    collectionCondition.push({
+      collection: {
+        id: query.collectionId,
+      },
+    });
+  }
 
   const links = await prisma.link.findMany({
     take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
     skip: query.cursor ? 1 : undefined,
-    cursor: query.cursor
-      ? {
-          id: query.cursor,
-        }
-      : undefined,
+    cursor: query.cursor ? { id: query.cursor } : undefined,
     where: {
-      collection: {
-        id: query.collectionId ? query.collectionId : undefined, // If collectionId was defined, filter by collection
-        OR: [
-          {
-            ownerId: userId,
-          },
-          {
-            members: {
-              some: {
-                userId,
+      AND: [
+        {
+          collection: {
+            OR: [
+              { ownerId: userId },
+              {
+                members: {
+                  some: { userId },
+                },
               },
-            },
-          },
-        ],
-      },
-      [query.searchQuery ? "OR" : "AND"]: [
-        {
-          pinnedBy: query.pinnedOnly ? { some: { id: userId } } : undefined,
-        },
-        {
-          name: {
-            contains:
-              query.searchQuery && query.searchFilter?.name
-                ? query.searchQuery
-                : undefined,
-            mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
+            ],
           },
         },
+        ...collectionCondition,
         {
-          url: {
-            contains:
-              query.searchQuery && query.searchFilter?.url
-                ? query.searchQuery
-                : undefined,
-            mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
-          },
-        },
-        {
-          description: {
-            contains:
-              query.searchQuery && query.searchFilter?.description
-                ? query.searchQuery
-                : undefined,
-            mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
-          },
-        },
-        {
-          tags:
-            query.searchQuery && !query.searchFilter?.tags
-              ? undefined
-              : {
-                  some: query.tagId
-                    ? {
-                        // If tagId was defined, filter by tag
-                        id: query.tagId,
-                        name:
-                          query.searchQuery && query.searchFilter?.tags
-                            ? {
-                                contains: query.searchQuery,
-                                mode: POSTGRES_IS_ENABLED
-                                  ? "insensitive"
-                                  : undefined,
-                              }
-                            : undefined,
-                        OR: [
-                          { ownerId: userId }, // Tags owned by the user
-                          {
-                            links: {
-                              some: {
-                                name: {
-                                  contains:
-                                    query.searchQuery &&
-                                    query.searchFilter?.tags
-                                      ? query.searchQuery
-                                      : undefined,
-                                  mode: POSTGRES_IS_ENABLED
-                                    ? "insensitive"
-                                    : undefined,
-                                },
-                                collection: {
-                                  members: {
-                                    some: {
-                                      userId, // Tags from collections where the user is a member
-                                    },
-                                  },
-                                },
-                              },
-                            },
-                          },
-                        ],
-                      }
+          OR: [
+            ...tagCondition,
+            {
+              [query.searchQuery ? "OR" : "AND"]: [
+                {
+                  pinnedBy: query.pinnedOnly
+                    ? { some: { id: userId } }
                     : undefined,
                 },
+                ...searchConditions,
+              ],
+            },
+          ],
         },
       ],
     },
@@ -146,9 +138,7 @@ export default async function getLink(userId: number, body: string) {
         select: { id: true },
       },
     },
-    orderBy: order || {
-      createdAt: "desc",
-    },
+    orderBy: order || { createdAt: "desc" },
   });
 
   return { response: links, status: 200 };

lib/api/controllers/links/postLink.ts

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import getTitle from "@/lib/api/getTitle";
 import archive from "@/lib/api/archive";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import { Collection, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
 
@@ -94,7 +94,7 @@ export default async function postLink(
 
   createFolder({ filePath: `archives/${newLink.collectionId}` });
 
-  archive(newLink.id, newLink.url);
+  archive(newLink.id, newLink.url, userId);
 
   return { response: newLink, status: 200 };
 }

lib/api/controllers/migration/exportData.ts

@@ -20,5 +20,18 @@ export default async function exportData(userId: number) {
 
   const { password, id, image, ...userData } = user;
 
+  function redactIds(obj: any) {
+    if (Array.isArray(obj)) {
+      obj.forEach((o) => redactIds(o));
+    } else if (obj !== null && typeof obj === "object") {
+      delete obj.id;
+      for (let key in obj) {
+        redactIds(obj[key]);
+      }
+    }
+  }
+
+  redactIds(userData);
+
   return { response: userData, status: 200 };
 }

lib/api/controllers/migration/importFromHTMLFile.ts

@@ -3,7 +3,10 @@ import { Backup } from "@/types/global";
 import createFolder from "@/lib/api/storage/createFolder";
 import { JSDOM } from "jsdom";
 
-export default async function importData(userId: number, rawData: string) {
+export default async function importFromHTMLFile(
+  userId: number,
+  rawData: string
+) {
   try {
     const dom = new JSDOM(rawData);
     const document = dom.window.document;

lib/api/controllers/migration/importFromLinkwarden.ts

@@ -0,0 +1,91 @@
+import { prisma } from "@/lib/api/db";
+import { Backup } from "@/types/global";
+import createFolder from "@/lib/api/storage/createFolder";
+
+export default async function getData(userId: number, rawData: string) {
+  const data: Backup = JSON.parse(rawData);
+
+  console.log(typeof data);
+
+  // Import collections
+  try {
+    for (const e of data.collections) {
+      e.name = e.name.trim();
+
+      const findCollection = await prisma.user.findUnique({
+        where: {
+          id: userId,
+        },
+        select: {
+          collections: {
+            where: {
+              name: e.name,
+            },
+          },
+        },
+      });
+
+      const checkIfCollectionExists = findCollection?.collections[0];
+
+      let collectionId = findCollection?.collections[0]?.id;
+
+      if (!checkIfCollectionExists) {
+        const newCollection = await prisma.collection.create({
+          data: {
+            owner: {
+              connect: {
+                id: userId,
+              },
+            },
+            name: e.name,
+            description: e.description,
+            color: e.color,
+          },
+        });
+
+        createFolder({ filePath: `archives/${newCollection.id}` });
+
+        collectionId = newCollection.id;
+      }
+
+      // Import Links
+      for (const link of e.links) {
+        const newLink = await prisma.link.create({
+          data: {
+            url: link.url,
+            name: link.name,
+            description: link.description,
+            collection: {
+              connect: {
+                id: collectionId,
+              },
+            },
+            // Import Tags
+            tags: {
+              connectOrCreate: link.tags.map((tag) => ({
+                where: {
+                  name_ownerId: {
+                    name: tag.name.trim(),
+                    ownerId: userId,
+                  },
+                },
+                create: {
+                  name: tag.name.trim(),
+                  owner: {
+                    connect: {
+                      id: userId,
+                    },
+                  },
+                },
+              })),
+            },
+          },
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+
+  return { response: "Success.", status: 200 };
+}

lib/api/controllers/users/updateUser.ts

@@ -108,6 +108,9 @@ export default async function updateUser(
       username: user.username.toLowerCase(),
       email: user.email?.toLowerCase(),
       isPrivate: user.isPrivate,
+      archiveAsScreenshot: user.archiveAsScreenshot,
+      archiveAsPDF: user.archiveAsPDF,
+      archiveAsWaybackMachine: user.archiveAsWaybackMachine,
       password:
         user.newPassword && user.newPassword !== ""
           ? newHashedPassword
@@ -161,7 +164,7 @@ export default async function updateUser(
 
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
-  if (STRIPE_SECRET_KEY && emailEnabled)
+  if (STRIPE_SECRET_KEY && emailEnabled && sessionUser.email !== user.email)
     await updateCustomerEmail(
       STRIPE_SECRET_KEY,
       sessionUser.email,

lib/api/sendToWayback.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export default async function sendToWayback(url: string) {
+  const headers = {
+    Accept: "text/html,application/xhtml+xml,application/xml",
+    "Accept-Encoding": "gzip, deflate",
+    Dnt: "1",
+    "Upgrade-Insecure-Requests": "1",
+    "User-Agent":
+      "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36",
+  };
+
+  await axios
+    .get(`https://web.archive.org/save/${url}`, {
+      headers: headers,
+    })
+    .then((response) => {
+      console.log(response.data);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}

lib/client/avatarExists.ts

@@ -1,4 +1,13 @@
+const avatarCache = new Map();
+
 export default async function avatarExists(fileUrl: string): Promise<boolean> {
+  if (avatarCache.has(fileUrl)) {
+    return avatarCache.get(fileUrl);
+  }
+
   const response = await fetch(fileUrl, { method: "HEAD" });
-  return !(response.headers.get("content-type") === "text/html");
+  const exists = !(response.headers.get("content-type") === "text/html");
+
+  avatarCache.set(fileUrl, exists);
+  return exists;
 }

package.json

@@ -16,6 +16,7 @@
     "@auth/prisma-adapter": "^1.0.1",
     "@aws-sdk/client-s3": "^3.379.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -28,6 +29,7 @@
     "@types/nodemailer": "^6.4.8",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.7",
+    "axios": "^1.5.1",
     "bcrypt": "^5.1.0",
     "colorthief": "^2.4.0",
     "crypto-js": "^4.1.1",

pages/_app.tsx

@@ -52,7 +52,7 @@ export default function App({
             reverseOrder={false}
             toastOptions={{
               className:
-                "border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
             }}
           />
           <Component {...pageProps} />

pages/api/migration/index.ts

@@ -2,7 +2,9 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import exportData from "@/lib/api/controllers/migration/exportData";
-import importData from "@/lib/api/controllers/migration/importData";
+import importFromHTMLFile from "@/lib/api/controllers/migration/importFromHTMLFile";
+import importFromLinkwarden from "@/lib/api/controllers/migration/importFromLinkwarden";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const session = await getServerSession(req, res, authOptions);
@@ -25,7 +27,15 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
         .status(data.status)
         .json(data.response);
   } else if (req.method === "POST") {
-    const data = await importData(session.user.id, req.body);
-    return res.status(data.status).json({ response: data.response });
+    const request: MigrationRequest = JSON.parse(req.body);
+
+    let data;
+    if (request.format === MigrationFormat.htmlFile)
+      data = await importFromHTMLFile(session.user.id, request.data);
+
+    if (request.format === MigrationFormat.linkwarden)
+      data = await importFromLinkwarden(session.user.id, request.data);
+
+    if (data) return res.status(data.status).json({ response: data.response });
   }
 }

pages/choose-username.tsx

@@ -1,15 +1,13 @@
 import SubmitButton from "@/components/SubmitButton";
 import { signOut } from "next-auth/react";
-import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
 
-export default function Subscribe() {
+export default function ChooseUsername() {
   const [submitLoader, setSubmitLoader] = useState(false);
   const [inputedUsername, setInputedUsername] = useState("");
 

pages/collections/[id].tsx

@@ -229,11 +229,9 @@ export default function Index() {
         </div>
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-            {links
-              .filter((e) => e.collectionId === Number(router.query.id))
-              .map((e, i) => {
-                return <LinkCard key={i} link={e} count={i} />;
-              })}
+            {links.map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
           </div>
         ) : (
           <NoLinksFound />

pages/dashboard.tsx

@@ -115,19 +115,21 @@ export default function Dashboard() {
 
         <div
           style={{ flex: "1 1 auto" }}
-          className="flex flex-col 2xl:flex-row items-start justify-evenly 2xl:gap-2"
+          className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-            <div
-              className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
-                linkPinDisclosure ? "h-full" : "h-44"
-              }`}
-            >
-              {links
-                .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                .map((e, i) => (
-                  <LinkCard key={i} link={e} count={i} />
-                ))}
+            <div className="w-full">
+              <div
+                className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full ${
+                  linkPinDisclosure ? "h-full" : "h-44"
+                }`}
+              >
+                {links
+                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
+                  .map((e, i) => (
+                    <LinkCard key={i} link={e} count={i} />
+                  ))}
+              </div>
             </div>
           ) : (
             <div

pages/forgot.tsx

@@ -2,7 +2,6 @@ import SubmitButton from "@/components/SubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-hot-toast";

pages/index.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-export default function Home() {
+export default function Index() {
   const router = useRouter();
 
   useEffect(() => {

pages/login.tsx

@@ -2,7 +2,6 @@ import SubmitButton from "@/components/SubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-hot-toast";

pages/settings/account.tsx

@@ -0,0 +1,393 @@
+import { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import SettingsLayout from "@/layouts/SettingsLayout";
+import TextInput from "@/components/TextInput";
+import { resizeImage } from "@/lib/client/resizeImage";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import SubmitButton from "@/components/SubmitButton";
+import { useSession, signOut } from "next-auth/react";
+import React from "react";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
+import Link from "next/link";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import Checkbox from "@/components/Checkbox";
+
+export default function Account() {
+  const { update, data } = useSession();
+
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+
+  const [profileStatus, setProfileStatus] = useState(true);
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const handleProfileStatus = (e: boolean) => {
+    setProfileStatus(!e);
+  };
+
+  const { account, updateAccount } = useAccountStore();
+
+  const [user, setUser] = useState<AccountSettings>(
+    !objectIsEmpty(account)
+      ? account
+      : ({
+          // @ts-ignore
+          id: null,
+          name: "",
+          username: "",
+          email: "",
+          emailVerified: null,
+          image: null,
+          isPrivate: true,
+          // @ts-ignore
+          createdAt: null,
+          whitelistedUsers: [],
+          profilePic: "",
+        } as unknown as AccountSettings)
+  );
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) setUser({ ...account });
+  }, [account]);
+
+  const handleImageUpload = async (e: any) => {
+    const file: File = e.target.files[0];
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    const allowedExtensions = ["png", "jpeg", "jpg"];
+    if (allowedExtensions.includes(fileExtension as string)) {
+      const resizedFile = await resizeImage(file);
+      if (
+        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
+      ) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          setUser({ ...user, profilePic: reader.result as string });
+        };
+        reader.readAsDataURL(resizedFile);
+      } else {
+        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+      }
+    } else {
+      toast.error("Invalid file format.");
+    }
+  };
+
+  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!");
+
+      if (user.email !== account.email) {
+        update({
+          id: data?.user.id,
+        });
+
+        signOut();
+      } else if (
+        user.username !== account.username ||
+        user.name !== account.name
+      )
+        update({
+          id: data?.user.id,
+        });
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  const [importDropdown, setImportDropdown] = useState(false);
+
+  const importBookmarks = async (e: any, format: MigrationFormat) => {
+    const file: File = e.target.files[0];
+
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async function (e) {
+        const load = toast.loading("Importing...");
+
+        const request: string = e.target?.result as string;
+
+        const body: MigrationRequest = {
+          format,
+          data: request,
+        };
+
+        const response = await fetch("/api/migration", {
+          method: "POST",
+          body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        toast.success("Imported the Bookmarks! Reloading the page...");
+
+        setImportDropdown(false);
+
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
+      };
+      reader.onerror = function (e) {
+        console.log("Error:", e);
+      };
+    }
+  };
+
+  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");
+
+  useEffect(() => {
+    setWhiteListedUsersTextbox(account?.whitelistedUsers?.join(", "));
+  }, [account]);
+
+  useEffect(() => {
+    setUser({
+      ...user,
+      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
+    });
+  }, [whitelistedUsersTextbox]);
+
+  const stringToArray = (str: string) => {
+    const stringWithoutSpaces = str?.replace(/\s+/g, "");
+
+    const wordsArray = stringWithoutSpaces?.split(",");
+
+    return wordsArray;
+  };
+
+  return (
+    <SettingsLayout>
+      <div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
+        <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
+          <div className="flex flex-col gap-3">
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Display Name
+              </p>
+              <TextInput
+                value={user.name || ""}
+                onChange={(e) => setUser({ ...user, name: e.target.value })}
+              />
+            </div>
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Username
+              </p>
+              <TextInput
+                value={user.username || ""}
+                onChange={(e) => setUser({ ...user, username: e.target.value })}
+              />
+            </div>
+
+            {emailEnabled ? (
+              <div>
+                <p className="text-sm text-black dark:text-white mb-2">Email</p>
+                <TextInput
+                  value={user.email || ""}
+                  onChange={(e) => setUser({ ...user, email: e.target.value })}
+                />
+              </div>
+            ) : undefined}
+
+            {user.email !== account.email ? (
+              <p className="text-gray-500 dark:text-gray-400">
+                You will need to log back in after you apply this Email.
+              </p>
+            ) : undefined}
+          </div>
+
+          <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
+            <p className="text-sm text-black dark:text-white mb-2 text-center">
+              Profile Photo
+            </p>
+            <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
+              <ProfilePhoto
+                priority={true}
+                src={user.profilePic}
+                className="h-auto border-none w-28"
+                status={handleProfileStatus}
+              />
+              {profileStatus && (
+                <div
+                  onClick={() =>
+                    setUser({
+                      ...user,
+                      profilePic: "",
+                    })
+                  }
+                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
+                >
+                  <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+                </div>
+              )}
+              <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
+                <label className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                  Browse...
+                  <input
+                    type="file"
+                    name="photo"
+                    id="upload-photo"
+                    accept=".png, .jpeg, .jpg"
+                    className="hidden"
+                    onChange={handleImageUpload}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+              Import & Export
+            </p>
+          </div>
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+          <div className="flex gap-3 flex-col">
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Import your data from other platforms.
+              </p>
+              <div
+                onClick={() => setImportDropdown(true)}
+                className="w-fit relative"
+                id="import-dropdown"
+              >
+                <div
+                  id="import-dropdown"
+                  className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
+                >
+                  Import From
+                </div>
+                {importDropdown ? (
+                  <ClickAwayHandler
+                    onClickOutside={(e: Event) => {
+                      const target = e.target as HTMLInputElement;
+                      if (target.id !== "import-dropdown")
+                        setImportDropdown(false);
+                    }}
+                    className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+                  >
+                    <div className="cursor-pointer rounded-md">
+                      <label
+                        htmlFor="import-linkwarden-file"
+                        title="JSON File"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                      >
+                        Linkwarden...
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-linkwarden-file"
+                          accept=".json"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.linkwarden)
+                          }
+                        />
+                      </label>
+                      <label
+                        htmlFor="import-html-file"
+                        title="HTML File"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                      >
+                        Bookmarks HTML file...
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-html-file"
+                          accept=".html"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.htmlFile)
+                          }
+                        />
+                      </label>
+                    </div>
+                  </ClickAwayHandler>
+                ) : null}
+              </div>
+            </div>
+
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Download your data instantly.
+              </p>
+              <Link className="w-fit" href="/api/migration">
+                <div className="border w-fit border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                  Export Data
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+              Profile Visibility
+            </p>
+          </div>
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+          <Checkbox
+            label="Make profile private"
+            state={user.isPrivate}
+            className="text-sm sm:text-base"
+            onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
+          />
+
+          <p className="text-gray-500 dark:text-gray-300 text-sm">
+            This will limit who can find and add you to other Collections.
+          </p>
+
+          {user.isPrivate && (
+            <div>
+              <p className="text-sm text-black dark:text-white mt-2">
+                Whitelisted Users
+              </p>
+              <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
+                Please provide the Username of the users you wish to grant
+                visibility to your profile. Separated by comma.
+              </p>
+              <textarea
+                className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+                placeholder="Your profile is hidden from everyone right now..."
+                value={whitelistedUsersTextbox}
+                onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
+        />
+      </div>
+    </SettingsLayout>
+  );
+}

pages/settings/appearance.tsx

@@ -0,0 +1,39 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+export default function Appearance() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <SettingsLayout>
+      <p className="mb-3 text-sm">Select Theme</p>
+      <div className="flex gap-3 w-full">
+        <div
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+            theme === "dark"
+              ? "dark:outline-sky-500 text-sky-500"
+              : "text-white"
+          }`}
+          onClick={() => setTheme("dark")}
+        >
+          <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Dark Theme</p>
+
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+        </div>
+        <div
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+            theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
+          }`}
+          onClick={() => setTheme("light")}
+        >
+          <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Light Theme</p>
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+        </div>
+      </div>
+    </SettingsLayout>
+  );
+}

pages/settings/archive.tsx

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

pages/settings/billing.tsx

@@ -0,0 +1,40 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Billing() {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE)
+      router.push("/settings/profile");
+  }, []);
+
+  return (
+    <SettingsLayout>
+      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-black dark:text-white">
+          To manage/cancel your subsciption, visit the{" "}
+          <a
+            href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
+            className="underline"
+          >
+            Billing Portal
+          </a>
+          .
+        </p>
+
+        <p className="text-md text-black dark:text-white">
+          If you still need help or encountered any issues, feel free to reach
+          out to us at:{" "}
+          <a
+            className="font-semibold underline"
+            href="mailto:support@linkwarden.app"
+          >
+            support@linkwarden.app
+          </a>
+        </p>
+      </div>
+    </SettingsLayout>
+  );
+}

pages/settings/index.tsx

@@ -0,0 +1,10 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function Settings() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/settings/profile");
+  }, []);
+}

pages/settings/password.tsx

@@ -1,39 +1,18 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { AccountSettings } from "@/types/global";
+import SettingsLayout from "@/layouts/SettingsLayout";
+import { useState } from "react";
 import useAccountStore from "@/store/account";
-import { signOut, useSession } from "next-auth/react";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 
-type Props = {
-  togglePasswordFormModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function ChangePassword({
-  togglePasswordFormModal,
-  setUser,
-  user,
-}: Props) {
+export default function Password() {
   const [newPassword, setNewPassword1] = useState("");
   const [newPassword2, setNewPassword2] = useState("");
 
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const { account, updateAccount } = useAccountStore();
-  const { update, data } = useSession();
-
-  useEffect(() => {
-    if (
-      !(newPassword == "" || newPassword2 == "") &&
-      newPassword === newPassword2
-    ) {
-      setUser({ ...user, newPassword });
-    }
-  }, [newPassword, newPassword2]);
 
   const submit = async () => {
     if (newPassword == "" || newPassword2 == "") {
@@ -50,38 +29,28 @@ export default function ChangePassword({
     const load = toast.loading("Applying...");
 
     const response = await updateAccount({
-      ...user,
+      ...account,
+      newPassword,
     });
 
     toast.dismiss(load);
 
     if (response.ok) {
       toast.success("Settings Applied!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      togglePasswordFormModal();
+      setNewPassword1("");
+      setNewPassword2("");
     } else toast.error(response.data as string);
 
     setSubmitLoader(false);
   };
 
   return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
+    <SettingsLayout>
+      <p className="mb-3">
+        To change your password, please fill out the following. Your password
+        should be at least 8 characters.
+      </p>
+      <div className="w-full flex flex-col gap-2 justify-between">
         <p className="text-sm text-black dark:text-white">New Password</p>
 
         <TextInput
@@ -105,11 +74,10 @@ export default function ChangePassword({
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Apply Settings"
-          icon={faPenToSquare}
-          className="mx-auto mt-2"
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
         />
       </div>
-    </div>
+    </SettingsLayout>
   );
 }

pages/subscribe.tsx

@@ -1,6 +1,6 @@
 import SubmitButton from "@/components/SubmitButton";
 import { signOut } from "next-auth/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";

pages/tags/[id].tsx

@@ -67,11 +67,9 @@ export default function Index() {
           </div>
         </div>
         <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
-          {links
-            .filter((e) => e.tags.some((e) => e.id === Number(router.query.id)))
-            .map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
+          {links.map((e, i) => {
+            return <LinkCard key={i} link={e} count={i} />;
+          })}
         </div>
       </div>
     </MainLayout>

prisma/migrations/20231019032936_modify_archive_formats/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "archiveAsPDF" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "archiveAsScreenshot" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "archiveAsWaybackMachine" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -54,6 +54,10 @@ model User {
 
   pinnedLinks Link[]
 
+  archiveAsScreenshot     Boolean         @default(true)
+  archiveAsPDF            Boolean         @default(true)
+  archiveAsWaybackMachine Boolean         @default(false)
+
   collectionsJoined UsersAndCollections[]
   isPrivate         Boolean               @default(false)
   whitelistedUsers  WhitelistedUser[]

store/modals.ts

@@ -1,17 +1,10 @@
 import {
-  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import { create } from "zustand";
 
 type Modal =
-  | {
-      modal: "ACCOUNT";
-      state: boolean;
-      active: AccountSettings;
-      defaultIndex?: number;
-    }
   | {
       modal: "LINK";
       state: boolean;

types/global.ts

@@ -86,6 +86,16 @@ export interface Backup extends Omit<User, "password" | "id" | "image"> {
   collections: CollectionIncludingLinks[];
 }
 
+export type MigrationRequest = {
+  format: MigrationFormat;
+  data: string;
+};
+
+export enum MigrationFormat {
+  linkwarden,
+  htmlFile,
+}
+
 export enum Plan {
   monthly,
   yearly,

yarn.lock

@@ -779,6 +779,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
   integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
 
+"@fortawesome/fontawesome-common-types@6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
 "@fortawesome/fontawesome-svg-core@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
@@ -786,6 +791,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.4.0"
 
+"@fortawesome/free-brands-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
+  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
 "@fortawesome/free-regular-svg-icons@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
@@ -1791,6 +1803,15 @@ axe-core@^4.6.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.6.3.tgz#fc0db6fdb65cc7a80ccf85286d91d64ababa3ece"
   integrity sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==
 
+axios@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.1.tgz#11fbaa11fc35f431193a9564109c88c1f27b585f"
+  integrity sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
@@ -2715,6 +2736,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -4180,6 +4206,11 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.28, psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"