Merge pull request #229 from linkwarden/dev

Dev

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,6 +79,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
     const bannerInner = document.getElementById("link-banner-inner");
 
     if (colorPalette && banner && bannerInner) {
+      if (colorPalette[0] && colorPalette[1]) {
         banner.style.background = `linear-gradient(to right, ${rgbToHex(
           colorPalette[0][0],
           colorPalette[0][1],
@@ -87,7 +89,9 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           colorPalette[1][1],
           colorPalette[1][2]
         )})`;
+      }
 
+      if (colorPalette[2] && colorPalette[3]) {
         bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
           colorPalette[2][0],
           colorPalette[2][1],
@@ -98,6 +102,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           colorPalette[3][2]
         )})`;
       }
+    }
   }, [colorPalette, theme]);
 
   const handleDownload = (format: "png" | "pdf") => {
@@ -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>
 
@@ -237,7 +242,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             <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
@@ -258,9 +262,9 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           </div>
         </div>
 
-        <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={faFilePdf} className="w-6 h-6" />
             </div>
 
@@ -271,7 +275,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
-              rel="noreferrer"
               className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
@@ -291,6 +294,30 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
             </div>
           </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">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/ProfileSettings.tsx

@@ -109,7 +109,7 @@ export default function ProfileSettings({
           <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
             <ProfilePhoto
               src={user.profilePic}
-              className="h-auto  w-28"
+              className="h-auto border-none w-28"
               status={handleProfileStatus}
             />
             {profileStatus && (
@@ -120,7 +120,7 @@ export default function ProfileSettings({
                     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"
+                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>

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
@@ -132,7 +133,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/SettingsSidebar.tsx

@@ -0,0 +1,219 @@
+import useCollectionStore from "@/store/collections";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faPalette,
+  faBoxArchive,
+  faLock,
+  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={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 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/profile">
+          <div
+            className={`${
+              active === `/settings/profile`
+                ? "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">
+              Profile
+            </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/privacy">
+          <div
+            className={`${
+              active === `/settings/privacy`
+                ? "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={faLock}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Privacy
+            </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://twitter.com/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={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>
+
+        <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://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>
+      </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>(() => {

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,7 +17,6 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
-  if (status === "authenticated" && !redirect && routeExists)
   return (
     <>
       <ModalManagement />
@@ -43,7 +33,4 @@ export default function MainLayout({ children }: Props) {
       </div>
     </>
   );
-  else if ((status === "unauthenticated" && !redirect) || !routeExists)
-    return <>{children}</>;
-  else return <></>;
 }

layouts/SettingsLayout.tsx

@@ -0,0 +1,78 @@
+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 } from "@fortawesome/free-solid-svg-icons";
+
+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">
+        <div className="hidden lg:block">
+          <SettingsSidebar className="fixed top-0" />
+        </div>
+
+        <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80 p-5">
+          <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>
+
+            <p className="capitalize text-3xl">
+              {router.asPath.split("/").pop()} Settings
+            </p>
+          </div>
+          <hr className="my-3" />
+          {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,12 +1,15 @@
 import { Page, 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();
 
+  sendToWayback(url);
+
   try {
     await page.goto(url, { waitUntil: "domcontentloaded" });
 

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)
+  if (query.sort === Sort.DateNewestFirst) order = { createdAt: "desc" };
-    order = {
+  else if (query.sort === Sort.DateOldestFirst) order = { createdAt: "asc" };
-      createdAt: "desc",
+  else if (query.sort === Sort.NameAZ) order = { name: "asc" };
-    };
+  else if (query.sort === Sort.NameZA) order = { name: "desc" };
-  else if (query.sort === Sort.DateOldestFirst)
+  else if (query.sort === Sort.DescriptionAZ) order = { description: "asc" };
-    order = {
+  else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
-      createdAt: "asc",
+
-    };
+  const searchConditions = [];
-  else if (query.sort === Sort.NameAZ)
+
-    order = {
+  if (query.searchQuery) {
-      name: "asc",
+    if (query.searchFilter?.name) {
-    };
+      searchConditions.push({
-  else if (query.sort === Sort.NameZA)
+        name: {
-    order = {
+          contains: query.searchQuery,
-      name: "desc",
+          mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
-    };
+        },
-  else if (query.sort === Sort.DescriptionAZ)
+      });
-    order = {
+    }
-      description: "asc",
+
-    };
+    if (query.searchFilter?.url) {
-  else if (query.sort === Sort.DescriptionZA)
+      searchConditions.push({
-    order = {
+        url: {
-      description: "desc",
+          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
+    cursor: query.cursor ? { id: query.cursor } : undefined,
-      ? {
-          id: query.cursor,
-        }
-      : undefined,
     where: {
-      collection: {
+      AND: [
-        id: query.collectionId ? query.collectionId : undefined, // If collectionId was defined, filter by collection
-        OR: [
         {
-            ownerId: userId,
+          collection: {
-          },
+            OR: [
+              { ownerId: userId },
               {
                 members: {
-              some: {
+                  some: { userId },
-                userId,
-              },
                 },
               },
             ],
           },
+        },
+        ...collectionCondition,
+        {
+          OR: [
+            ...tagCondition,
+            {
               [query.searchQuery ? "OR" : "AND"]: [
                 {
-          pinnedBy: query.pinnedOnly ? { some: { id: userId } } : undefined,
+                  pinnedBy: query.pinnedOnly
-        },
+                    ? { some: { id: userId } }
-        {
-          name: {
-            contains:
-              query.searchQuery && query.searchFilter?.name
-                ? query.searchQuery
-                : undefined,
-            mode: POSTGRES_IS_ENABLED ? "insensitive" : undefined,
-          },
-        },
-        {
-          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: {
+                ...searchConditions,
-                                  members: {
+              ],
-                                    some: {
-                                      userId, // Tags from collections where the user is a member
-                                    },
-                                  },
-                                },
-                              },
-                            },
             },
           ],
-                      }
-                    : undefined,
-                },
         },
       ],
     },
@@ -146,9 +138,7 @@ export default async function getLink(userId: number, body: string) {
         select: { id: true },
       },
     },
-    orderBy: order || {
+    orderBy: order || { createdAt: "desc" },
-      createdAt: "desc",
-    },
   });
 
   return { response: links, status: 200 };

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> {
-  const response = await fetch(fileUrl, { method: "HEAD" });
+  if (avatarCache.has(fileUrl)) {
-  return !(response.headers.get("content-type") === "text/html");
+    return avatarCache.get(fileUrl);
+  }
+
+  const response = await fetch(fileUrl, { method: "HEAD" });
+  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/collections/[id].tsx

@@ -229,9 +229,7 @@ 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
+            {links.map((e, i) => {
-              .filter((e) => e.collectionId === Number(router.query.id))
-              .map((e, i) => {
               return <LinkCard key={i} link={e} count={i} />;
             })}
           </div>

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/settings/appearance.tsx

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function appearance() {
+  return (
+    <SettingsLayout>
+      <div>appearance</div>
+    </SettingsLayout>
+  );
+}

pages/settings/archive.tsx

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function archive() {
+  return (
+    <SettingsLayout>
+      <div>archive</div>
+    </SettingsLayout>
+  );
+}

pages/settings/billing.tsx

@@ -0,0 +1,18 @@
+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>Billing</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

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function password() {
+  return (
+    <SettingsLayout>
+      <div>password</div>
+    </SettingsLayout>
+  );
+}

pages/settings/privacy.tsx

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function privacy() {
+  return (
+    <SettingsLayout>
+      <div>privacy</div>
+    </SettingsLayout>
+  );
+}

pages/settings/profile.tsx

@@ -0,0 +1,10 @@
+import SettingsLayout from "@/layouts/SettingsLayout";
+import React from "react";
+
+export default function profile() {
+  return (
+    <SettingsLayout>
+      <div>profile</div>
+    </SettingsLayout>
+  );
+}

pages/tags/[id].tsx

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

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"