more customizable link icons

components/Checkbox.tsx

@@ -28,9 +28,7 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
         icon={faSquare}
         className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
-      <span className="text-black dark:text-white rounded select-none">
-        {label}
-      </span>
+      <span className="rounded select-none">{label}</span>
     </label>
   );
 }

components/LinkCard.tsx

@@ -165,13 +165,15 @@ export default function LinkCard({ link, count, className }: Props) {
           onClick={() => router.push("/links/" + link.id)}
           className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
         >
-          {url && account.blurredFavicons && (
+          {url && account.displayLinkIcons && (
             <Image
               src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
               width={64}
               height={64}
               alt=""
-              className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none"
+              className={`${
+                account.blurredFavicons ? "blur-sm " : ""
+              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
               draggable="false"
               onError={(e) => {
                 const target = e.target as HTMLElement;

components/LinkPreview.tsx

@@ -0,0 +1,112 @@
+import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Image from "next/image";
+import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+import isValidUrl from "@/lib/client/isValidUrl";
+import A from "next/link";
+import unescapeString from "@/lib/client/unescapeString";
+import { Link } from "@prisma/client";
+
+type Props = {
+  link?: Partial<Link>;
+  className?: string;
+  settings: {
+    blurredFavicons: boolean;
+    displayLinkIcons: boolean;
+  };
+};
+
+export default function LinkPreview({ link, className, settings }: Props) {
+  if (!link) {
+    link = {
+      name: "Linkwarden",
+      url: "https://linkwarden.app",
+      createdAt: Date.now() as unknown as Date,
+    };
+  }
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url as string).host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  const url = isValidUrl(link.url as string)
+    ? new URL(link.url as string)
+    : undefined;
+
+  const formattedDate = new Date(link.createdAt as Date).toLocaleString(
+    "en-US",
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }
+  );
+
+  return (
+    <>
+      <div
+        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
+          className || ""
+        }`}
+      >
+        <div className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5">
+          {url && settings?.displayLinkIcons && (
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={64}
+              height={64}
+              alt=""
+              className={`${
+                settings.blurredFavicons ? "blur-sm " : ""
+              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          )}
+
+          <div className="flex justify-between gap-5 w-full h-full z-0">
+            <div className="flex flex-col justify-between w-full">
+              <div className="flex items-baseline gap-1">
+                <p className="text-sm text-gray-500 dark:text-gray-300">{1}</p>
+                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                  {unescapeString(link.name as string)}
+                </p>
+              </div>
+              <div className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100">
+                <FontAwesomeIcon
+                  icon={faFolder}
+                  className="w-4 h-4 mt-1 drop-shadow text-sky-400"
+                />
+                <p className="text-black dark:text-white truncate capitalize w-full">
+                  Landing Pages ⚡️
+                </p>
+              </div>
+              <A
+                href={link.url as string}
+                target="_blank"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100"
+              >
+                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+                <p className="truncate w-full">{shortendURL}</p>
+              </A>
+              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
+                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+                <p>{formattedDate}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -132,6 +132,7 @@ export default async function updateUserById(
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
+      displayLinkIcons: data.displayLinkIcons,
       blurredFavicons: data.blurredFavicons,
       password:
         data.newPassword && data.newPassword !== ""

pages/dashboard.tsx

@@ -338,7 +338,7 @@ export default function Dashboard() {
             <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" : "max-h-[22rem]"
+                  linkPinDisclosure ? "h-full" : "max-h-[20rem]"
                 }`}
               >
                 {links

pages/settings/account.tsx

@@ -334,7 +334,7 @@ export default function Account() {
           </p>
 
           {user.isPrivate && (
-            <div>
+            <div className="pl-5 border-l">
               <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>

pages/settings/appearance.tsx

@@ -13,6 +13,7 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 import SubmitButton from "@/components/SubmitButton";
 import React from "react";
 import Checkbox from "@/components/Checkbox";
+import LinkPreview from "@/components/LinkPreview";
 
 export default function Appearance() {
   const { theme, setTheme } = useTheme();
@@ -67,7 +68,7 @@ export default function Appearance() {
 
   return (
     <SettingsLayout>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-10">
         <div>
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
@@ -100,13 +101,37 @@ export default function Appearance() {
         </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">
+              Link Card
+            </p>
+          </div>
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
           <Checkbox
-            label="Blurred Link Icons"
+            label="Display Icons"
+            state={user.displayLinkIcons}
+            onClick={() =>
+              setUser({ ...user, displayLinkIcons: !user.displayLinkIcons })
+            }
+          />
+          {user.displayLinkIcons ? (
+            <Checkbox
+              label="Blurred"
+              className="pl-5 mt-1"
               state={user.blurredFavicons}
               onClick={() =>
                 setUser({ ...user, blurredFavicons: !user.blurredFavicons })
               }
             />
+          ) : undefined}
+          <p className="my-3">Preview:</p>
+
+          <LinkPreview
+            settings={{
+              blurredFavicons: user.blurredFavicons,
+              displayLinkIcons: user.displayLinkIcons,
+            }}
+          />
         </div>
 
         <SubmitButton

pages/settings/archive.tsx

@@ -64,6 +64,7 @@ export default function Archive() {
           state={archiveAsScreenshot}
           onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
         />
+
         <Checkbox
           label="PDF"
           state={archiveAsPDF}

prisma/migrations/20231111183859_add_display_link_icons_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "displayLinkIcons" BOOLEAN NOT NULL DEFAULT true;

prisma/schema.prisma

@@ -33,6 +33,7 @@ model User {
 
   isPrivate               Boolean         @default(false)
 
+  displayLinkIcons        Boolean         @default(true)
   blurredFavicons         Boolean         @default(true)
 
   createdAt               DateTime        @default(now())