fixed filter by tags + refactored search + bug fixed + settings page [WIP]

components/Modal/Link/LinkDetails.tsx

@@ -79,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],
@@ -88,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],
@@ -99,6 +102,7 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           colorPalette[3][2]
         )})`;
       }
+    }
   }, [colorPalette, theme]);
 
   const handleDownload = (format: "png" | "pdf") => {

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/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/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",

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"