Merge pull request #295 from linkwarden/dev

Dev

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

@@ -0,0 +1,29 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  name: string;
+  value: number;
+  icon: IconProp;
+};
+
+export default function dashboardItem({ name, value, icon }: Props) {
+  return (
+    <div className="flex gap-4 items-end">
+      <div className="p-4 bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+        <FontAwesomeIcon
+          icon={icon}
+          className="w-8 h-8 text-sky-500 dark:text-sky-500"
+        />
+      </div>
+      <div className="flex flex-col justify-center">
+        <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
+          {name}
+        </p>
+        <p className="font-thin text-6xl text-sky-500 dark:text-sky-500">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}

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 && (
+          {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;
@@ -195,7 +197,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
+                className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
               >
                 <FontAwesomeIcon
                   icon={faFolder}

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>
+    </>
+  );
+}

components/NoLinksFound.tsx

@@ -11,7 +11,7 @@ export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+    <div className="w-full h-full flex flex-col justify-center p-10">
       <p className="text-center text-2xl text-black dark:text-white">
         {text || "You haven't created any Links Here"}
       </p>

components/SettingsSidebar.tsx

@@ -20,6 +20,8 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
+  const LINKWARDEN_VERSION = "v2.2.0";
+
   const { collections } = useCollectionStore();
 
   const router = useRouter();
@@ -41,9 +43,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faUser}
@@ -60,9 +62,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faPalette}
@@ -79,9 +81,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faBoxArchive}
@@ -98,9 +100,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <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`}
+                ? "bg-sky-500"
+                : "hover:bg-slate-500"
+            } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faKey}
@@ -118,9 +120,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <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`}
+                  ? "bg-sky-500"
+                  : "hover:bg-slate-500"
+              } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
               <FontAwesomeIcon
                 icon={faCreditCard}
@@ -136,9 +138,16 @@ export default function SettingsSidebar({ className }: { className?: string }) {
       </div>
 
       <div className="flex flex-col gap-1">
+        <Link
+          href={`https://github.com/linkwarden/linkwarden/releases/tag/${LINKWARDEN_VERSION}`}
+          target="_blank"
+          className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
+        >
+          Linkwarden {LINKWARDEN_VERSION}
+        </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`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faCircleQuestion as any}
@@ -153,7 +162,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <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`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faGithub as any}
@@ -168,7 +177,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <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`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faXTwitter as any}
@@ -183,7 +192,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
         <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`}
+            className={`hover:bg-slate-500 duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faMastodon as any}

components/Sidebar.tsx

@@ -7,6 +7,7 @@ import {
   faChevronDown,
   faLink,
   faGlobe,
+  faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
@@ -55,59 +56,69 @@ export default function Sidebar({ className }: { className?: string }) {
         className || ""
       }`}
     >
-      <div className="flex justify-center gap-2 mt-2">
-        <Link
-          href="/dashboard"
-          className={`${
-            active === "/dashboard"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
-
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Dashboard
-          </p>
+      <div className="flex flex-col gap-2 mt-2">
+        <Link href={`/dashboard`}>
+          <div
+            className={`${
+              active === `/dashboard` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faChartSimple}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Dashboard
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/links"
-          className={`${
-            active === "/links"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
-
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Links
-          </p>
+        <Link href={`/links`}>
+          <div
+            className={`${
+              active === `/links` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faLink}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Links
+            </p>
+          </div>
         </Link>
 
-        <Link
-          href="/collections"
-          className={`${
-            active === "/collections"
-              ? "bg-sky-200 dark:bg-sky-800"
-              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-500`}
-          />
+        <Link href={`/collections`}>
+          <div
+            className={`${
+              active === `/collections` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faFolder}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              All Collections
+            </p>
+          </div>
+        </Link>
 
-          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
-            Collections
-          </p>
+        <Link href={`/links/pinned`}>
+          <div
+            className={`${
+              active === `/links/pinned` ? "bg-sky-500" : "hover:bg-slate-500"
+            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          >
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+            />
+            <p className="text-black dark:text-white truncate w-full">
+              Pinned Links
+            </p>
+          </div>
         </Link>
       </div>
 
@@ -145,9 +156,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
                           icon={faFolder}
@@ -212,9 +223,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-200 dark:bg-sky-800"
-                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
-                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                            ? "bg-sky-500"
+                            : "hover:bg-slate-500"
+                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}

layouts/CenteredForm.tsx

@@ -16,7 +16,7 @@ export default function CenteredForm({ text, children }: Props) {
       <div className="m-auto flex flex-col gap-2 w-full">
         {theme ? (
           <Image
-            src={`/linkwarden_${theme === "dark" ? "dark" : "li"}.png`}
+            src={`/linkwarden_${theme === "dark" ? "dark" : "light"}.png`}
             width={640}
             height={136}
             alt="Linkwarden"

layouts/MainLayout.tsx

@@ -58,9 +58,9 @@ export default function MainLayout({ children }: Props) {
         </div>
 
         <div
-          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
-            showAnnouncement ? "mt-10" : ""
-          }`}
+          className={`w-full flex flex-col min-h-${
+            showAnnouncement ? "full" : "screen"
+          } lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >
           <Navbar />
           {children}

lib/api/controllers/dashboard/getDashboardData.ts

@@ -14,9 +14,7 @@ export default async function getDashboardData(
   else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
 
   const pinnedLinks = await prisma.link.findMany({
-    take: Number(process.env.PAGINATION_TAKE_COUNT) || 20,
-    skip: query.cursor ? 1 : undefined,
-    cursor: query.cursor ? { id: query.cursor } : undefined,
+    take: 6,
     where: {
       AND: [
         {

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

@@ -132,6 +132,8 @@ 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 !== ""
           ? newHashedPassword

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "repository": "https://github.com/Daniel31x13/link-warden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",

pages/collections/index.tsx

@@ -44,7 +44,7 @@ export default function Collections() {
                   Your Collections
                 </p>
 
-                <p className="capitalize text-black dark:text-white">
+                <p className="text-black dark:text-white">
                   Collections you own
                 </p>
               </div>
@@ -150,7 +150,7 @@ export default function Collections() {
                   Other Collections
                 </p>
 
-                <p className="capitalize text-black dark:text-white">
+                <p className="text-black dark:text-white">
                   Shared collections you&apos;re a member of
                 </p>
               </div>

pages/dashboard.tsx

@@ -1,10 +1,12 @@
 import useCollectionStore from "@/store/collections";
 import {
   faChartSimple,
-  faChevronDown,
   faChevronRight,
   faClockRotateLeft,
   faFileImport,
+  faFolder,
+  faHashtag,
+  faLink,
   faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -22,6 +24,7 @@ import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import DashboardItem from "@/components/DashboardItem";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -32,14 +35,7 @@ export default function Dashboard() {
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
 
-  const [showRecents, setShowRecents] = useState(3);
-
-  const [linkPinDisclosure, setLinkPinDisclosure] = useState<boolean>(() => {
-    const storedValue =
-      typeof window !== "undefined" &&
-      localStorage.getItem("linkPinDisclosure");
-    return storedValue ? storedValue === "true" : true;
-  });
+  const [showLinks, setShowLinks] = useState(3);
 
   useLinks({ pinnedOnly: true, sort: 0 });
 
@@ -53,25 +49,18 @@ export default function Dashboard() {
     );
   }, [collections]);
 
-  useEffect(() => {
-    localStorage.setItem(
-      "linkPinDisclosure",
-      linkPinDisclosure ? "true" : "false"
-    );
-  }, [linkPinDisclosure]);
-
-  const handleNumberOfRecents = () => {
-    if (window.innerWidth > 1550) {
-      setShowRecents(6);
+  const handleNumberOfLinksToShow = () => {
+    if (window.innerWidth > 1535) {
+      setShowLinks(6);
     } else if (window.innerWidth > 1295) {
-      setShowRecents(4);
-    } else setShowRecents(3);
+      setShowLinks(4);
+    } else setShowLinks(3);
   };
 
   const { width } = useWindowDimensions();
 
   useEffect(() => {
-    handleNumberOfRecents();
+    handleNumberOfLinksToShow();
   }, [width]);
 
   const [importDropdown, setImportDropdown] = useState(false);
@@ -118,44 +107,47 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <div className="flex gap-3 items-center">
-          <div className="flex gap-2">
-            <FontAwesomeIcon
-              icon={faChartSimple}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
-            />
-            <p className="sm:text-4xl text-3xl text-black dark:text-white font-thin">
+        <div className="flex items-center gap-3">
+          <FontAwesomeIcon
+            icon={faChartSimple}
+            className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+          />
+          <div>
+            <p className="text-3xl capitalize text-black dark:text-white font-thin">
               Dashboard
             </p>
+
+            <p className="text-black dark:text-white">
+              A brief overview of your data
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center gap-5">
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
-              {numberOfLinks}
-            </p>
-            <p className="text-black dark:text-white text-xl">
-              {numberOfLinks === 1 ? "Link" : "Links"}
-            </p>
-          </div>
+        <div>
+          <div className="flex justify-between flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-sky-100 dark:border-neutral-700 bg-gray-100 dark:bg-neutral-800">
+            <DashboardItem
+              name={numberOfLinks === 1 ? "Link" : "Links"}
+              value={numberOfLinks}
+              icon={faLink}
+            />
 
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
-              {collections.length}
-            </p>
-            <p className="text-black dark:text-white text-xl">
-              {collections.length === 1 ? "Collection" : "Collections"}
-            </p>
-          </div>
+            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
+            <div className="h-full border-1 border-l border-sky-100 dark:border-neutral-700 hidden md:block"></div>
 
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
-              {tags.length}
-            </p>
-            <p className="text-black dark:text-white text-xl">
-              {tags.length === 1 ? "Tag" : "Tags"}
-            </p>
+            <DashboardItem
+              name={collections.length === 1 ? "Collection" : "Collections"}
+              value={collections.length}
+              icon={faFolder}
+            />
+
+            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
+            <div className="h-full border-1 border-r border-sky-100 dark:border-neutral-700 hidden md:block"></div>
+
+            <DashboardItem
+              name={tags.length === 1 ? "Tag" : "Tags"}
+              value={tags.length}
+              icon={faHashtag}
+            />
           </div>
         </div>
 
@@ -190,7 +182,7 @@ export default function Dashboard() {
               <div
                 className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
-                {links.slice(0, showRecents).map((e, i) => (
+                {links.slice(0, showLinks).map((e, i) => (
                   <LinkCard key={i} link={e} count={i} />
                 ))}
               </div>
@@ -307,38 +299,32 @@ export default function Dashboard() {
             />
             <p className="text-2xl text-black dark:text-white">Pinned Links</p>
           </div>
-          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-            <button
-              className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
-              onClick={() => setLinkPinDisclosure(!linkPinDisclosure)}
-            >
-              {linkPinDisclosure ? "Show Less" : "Show More"}
-              <FontAwesomeIcon
-                icon={faChevronDown}
-                className={`w-4 h-4 text-black dark:text-white ${
-                  linkPinDisclosure ? "rotate-reverse" : "rotate"
-                }`}
-              />
-            </button>
-          ) : undefined}
+          <Link
+            href="/links/pinned"
+            className="text-black dark:text-white flex items-center gap-2 cursor-pointer"
+          >
+            View All
+            <FontAwesomeIcon
+              icon={faChevronRight}
+              className={`w-4 h-4 text-black dark:text-white`}
+            />
+          </Link>
         </div>
 
         <div
-          style={{ flex: "1 1 auto" }}
+          style={{ flex: "0 1 auto" }}
           className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
         >
-          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
+          {links[0] ? (
             <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]"
-                }`}
+                className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links
+
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
-                  .map((e, i) => (
-                    <LinkCard key={i} link={e} count={i} />
-                  ))}
+                  .map((e, i) => <LinkCard key={i} link={e} count={i} />)
+                  .slice(0, showLinks)}
               </div>
             </div>
           ) : (

pages/links/index.tsx

@@ -31,7 +31,7 @@ export default function Links() {
                 All Links
               </p>
 
-              <p className="capitalize text-black dark:text-white">
+              <p className="text-black dark:text-white">
                 Links from every Collections
               </p>
             </div>

pages/links/pinned.tsx

@@ -0,0 +1,74 @@
+import LinkCard from "@/components/LinkCard";
+import NoLinksFound from "@/components/NoLinksFound";
+import SortDropdown from "@/components/SortDropdown";
+import useLinks from "@/hooks/useLinks";
+import MainLayout from "@/layouts/MainLayout";
+import useLinkStore from "@/store/links";
+import { Sort } from "@/types/global";
+import { faSort, faThumbTack } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+
+export default function PinnedLinks() {
+  const { links } = useLinkStore();
+
+  const [sortDropdown, setSortDropdown] = useState(false);
+  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
+
+  useLinks({ sort: sortBy, pinnedOnly: true });
+
+  return (
+    <MainLayout>
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
+        <div className="flex gap-3 justify-between">
+          <div className="flex items-center gap-3">
+            <FontAwesomeIcon
+              icon={faThumbTack}
+              className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+            />
+            <div>
+              <p className="text-3xl capitalize text-black dark:text-white font-thin">
+                Pinned Links
+              </p>
+
+              <p className="text-black dark:text-white">
+                Pinned Links from your Collections
+              </p>
+            </div>
+          </div>
+
+          <div className="relative mt-2">
+            <div
+              onClick={() => setSortDropdown(!sortDropdown)}
+              id="sort-dropdown"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
+            >
+              <FontAwesomeIcon
+                icon={faSort}
+                id="sort-dropdown"
+                className="w-5 h-5 text-gray-500 dark:text-gray-300"
+              />
+            </div>
+
+            {sortDropdown ? (
+              <SortDropdown
+                sortBy={sortBy}
+                setSort={setSortBy}
+                toggleSortDropdown={() => setSortDropdown(!sortDropdown)}
+              />
+            ) : null}
+          </div>
+        </div>
+        {links[0] ? (
+          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+            {links.map((e, i) => {
+              return <LinkCard key={i} link={e} count={i} />;
+            })}
+          </div>
+        ) : (
+          <NoLinksFound text="You Haven't Created Any Links Yet" />
+        )}
+      </div>
+    </MainLayout>
+  );
+}

pages/settings/account.tsx

@@ -9,7 +9,6 @@ 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";
@@ -17,8 +16,6 @@ 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 [submitLoader, setSubmitLoader] = useState(false);
@@ -154,7 +151,7 @@ export default function Account() {
 
   return (
     <SettingsLayout>
-      <div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
+      <div className="flex flex-col gap-10">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
@@ -337,7 +334,7 @@ export default function Account() {
           </p>
 
           {user.isPrivate && (
-            <div>
+            <div className="pl-5">
               <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>

pages/settings/appearance.tsx

@@ -2,37 +2,144 @@ 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";
+import { useState, useEffect } from "react";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+import { resizeImage } from "@/lib/client/resizeImage";
+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();
 
+  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);
+  };
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { account, updateAccount } = useAccountStore();
+
+  const [user, setUser] = useState<AccountSettings>(
+    !objectIsEmpty(account)
+      ? account
+      : ({
+          // @ts-ignore
+          id: null,
+          name: "",
+          username: "",
+          email: "",
+          emailVerified: null,
+          blurredFavicons: null,
+          image: "",
+          isPrivate: true,
+          // @ts-ignore
+          createdAt: null,
+          whitelistedUsers: [],
+        } as unknown as AccountSettings)
+  );
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) setUser({ ...account });
+  }, [account]);
+
   return (
     <SettingsLayout>
-      <p className="mb-3">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>
+      <div className="flex flex-col gap-10">
+        <div>
+          <p className="mb-3">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" /> */}
+              {/* <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>
         </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 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="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
+          onClick={submit}
+          loading={submitLoader}
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
+        />
       </div>
     </SettingsLayout>
   );

pages/settings/archive.tsx

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

pages/settings/billing.tsx

@@ -11,7 +11,7 @@ export default function Billing() {
 
   return (
     <SettingsLayout>
-      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+      <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

pages/settings/delete.tsx

@@ -134,7 +134,7 @@ export default function Password() {
         ) : undefined}
 
         <button
-          className={`mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
+          className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
             submitLoader
               ? "bg-red-400 cursor-auto"
               : "bg-red-500 hover:bg-red-400 cursor-pointer"

prisma/migrations/20231110154938_add_blurred_favicons_field/migration.sql

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

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,9 @@ model User {
 
   isPrivate               Boolean         @default(false)
 
+  displayLinkIcons        Boolean         @default(true)
+  blurredFavicons         Boolean         @default(true)
+
   createdAt               DateTime        @default(now())
   updatedAt               DateTime        @updatedAt @default(now())
 }

styles/globals.css

@@ -176,10 +176,6 @@ body {
   padding: 0;
 }
 
-.sky-shadow {
-  box-shadow: 0px 0px 3px #0ea5e9;
-}
-
 .primary-btn-gradient {
   box-shadow: inset 0px -10px 10px #0071b7;
 }