Merge pull request #342 from YeeJiaWei/compact-list-view

link compact list view

components/LinkCard.tsx

@@ -2,31 +2,17 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import {
+import { faLink } from "@fortawesome/free-solid-svg-icons";
-  faFolder,
-  faEllipsis,
-  faLink,
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
-import Image from "next/image";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
-import useAccountStore from "@/store/account";
-import {
-  faCalendarDays,
-  faFileImage,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/shared/isValidUrl";
-import Link from "next/link";
 import unescapeString from "@/lib/client/unescapeString";
-import { useRouter } from "next/router";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
-import EditLinkModal from "./ModalContent/EditLinkModal";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
-import DeleteLinkModal from "./ModalContent/DeleteLinkModal";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
-import PreservedFormatsModal from "./ModalContent/PreservedFormatsModal";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -35,15 +21,24 @@ type Props = {
 };
 
 export default function LinkCard({ link, count, className }: Props) {
-  const router = useRouter();
+  const { links } = useLinkStore();
-
-  const permissions = usePermissions(link.collection.id as number);
 
   const { collections } = useCollectionStore();
 
-  const { links } = useLinkStore();
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
 
-  const { account } = useAccountStore();
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+  }, [collections, links]);
 
   let shortendURL;
 
@@ -53,179 +48,22 @@ export default function LinkCard({ link, count, className }: Props) {
     console.log(error);
   }
 
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-
-  useEffect(() => {
-    setCollection(
-      collections.find(
-        (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembersAndLinkCount
-    );
-  }, [collections, links]);
-
-  const { removeLink, updateLink } = useLinkStore();
-
-  const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateLink({
-      ...link,
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
-    });
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
-  };
-
-  const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
-
-    const response = await removeLink(link.id as number);
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-  };
-
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  const [editLinkModal, setEditLinkModal] = useState(false);
-  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-
   return (
     <div
       className={`h-fit hover:bg-base-300 hover:border-base-300 border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-200 rounded-2xl relative ${
         className || ""
       }`}
     >
-      {permissions === true ||
-      permissions?.canUpdate ||
-      permissions?.canDelete ? (
-        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
-          <div
-            tabIndex={0}
-            role="button"
-            className="btn btn-ghost btn-sm btn-square text-neutral"
-          >
-            <FontAwesomeIcon
-              icon={faEllipsis}
-              title="More"
-              className="w-5 h-5"
-              id={"expand-dropdown" + collection.id}
-            />
-          </div>
-          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
-            {permissions === true ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    pinLink();
-                  }}
-                >
-                  {link?.pinnedBy && link.pinnedBy[0]
-                    ? "Unpin"
-                    : "Pin to Dashboard"}
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true || permissions?.canUpdate ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    setEditLinkModal(true);
-                  }}
-                >
-                  Edit
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    setPreservedFormatsModal(true);
-                    // updateArchive();
-                  }}
-                >
-                  Preserved Formats
-                </div>
-              </li>
-            ) : undefined}
-            {permissions === true || permissions?.canDelete ? (
-              <li>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  onClick={(e) => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
-                  }}
-                >
-                  Delete
-                </div>
-              </li>
-            ) : undefined}
-          </ul>
-        </div>
-      ) : undefined}
-
       <div
         onClick={() => link.url && window.open(link.url || "", "_blank")}
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
-        {link.url && url ? (
+        <div className="absolute bottom-3 right-3">
-          <Image
+          <LinkIcon link={link} />
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+        </div>
-            width={64}
-            height={64}
-            alt=""
-            className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-3 right-3 select-none z-10`}
-            draggable="false"
-            onError={(e) => {
-              const target = e.target as HTMLElement;
-              target.style.display = "none";
-            }}
-          />
-        ) : link.type === "pdf" ? (
-          <FontAwesomeIcon
-            icon={faFilePdf}
-            className="absolute h-12 w-12 bg-primary/20 text-primary shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
-          />
-        ) : link.type === "image" ? (
-          <FontAwesomeIcon
-            icon={faFileImage}
-            className="absolute h-12 w-12 bg-primary/20 text-primary shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
-          />
-        ) : undefined}
 
         <div className="flex items-baseline gap-1">
           <p className="text-sm text-neutral">{count + 1}</p>
@@ -243,65 +81,33 @@ export default function LinkCard({ link, count, className }: Props) {
           <div className="badge badge-primary badge-sm my-1">{link.type}</div>
         )}
 
-        <div
+        <LinkCollection link={link} collection={collection} />
-          onClick={(e) => {
-            e.stopPropagation();
-            router.push(`/collections/${link.collection.id}`);
-          }}
-          className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
-        >
-          <FontAwesomeIcon
-            icon={faFolder}
-            className="w-4 h-4 mt-1 drop-shadow"
-            style={{ color: collection?.color }}
-          />
-          <p className="truncate capitalize w-full">{collection?.name}</p>
-        </div>
 
-        <div className="flex items-center gap-1 text-neutral">
+        <LinkDate link={link} />
-          <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-          <p>{formattedDate}</p>
-        </div>
         {/* {link.tags[0] ? (
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-nowrap">
+<div className="flex gap-1 items-center flex-nowrap">
-                  {link.tags.map((e, i) => (
+{link.tags.map((e, i) => (
-                    <Link
+<Link
-                      href={"/tags/" + e.id}
+  href={"/tags/" + e.id}
-                      key={i}
+  key={i}
-                      onClick={(e) => {
+  onClick={(e) => {
-                        e.stopPropagation();
+    e.stopPropagation();
-                      }}
+  }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
+>
-                      #{e.name}
+  #{e.name}
-                    </Link>
+</Link>
-                  ))}
+))}
-                </div>
+</div>
-                <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
+<div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
-              </div>
+</div>
-            ) : (
+) : (
-              <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
+<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
-            )} */}
+)} */}
       </div>
-      {editLinkModal ? (
+
-        <EditLinkModal
+      <LinkActions link={link} collection={collection} />
-          onClose={() => setEditLinkModal(false)}
-          activeLink={link}
-        />
-      ) : undefined}
-      {deleteLinkModal ? (
-        <DeleteLinkModal
-          onClose={() => setDeleteLinkModal(false)}
-          activeLink={link}
-        />
-      ) : undefined}
-      {preservedFormatsModal ? (
-        <PreservedFormatsModal
-          onClose={() => setPreservedFormatsModal(false)}
-          activeLink={link}
-        />
-      ) : undefined}
     </div>
   );
 }

components/LinkViews/CompactGridView.tsx

@@ -0,0 +1,16 @@
+import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function CompactGridView({
+  links,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+  return (
+    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+      {links.map((e, i) => {
+        return <LinkCardCompact key={i} link={e} count={i} />;
+      })}
+    </div>
+  );
+}

components/LinkViews/DefaultGridView.tsx

@@ -0,0 +1,16 @@
+import LinkCard from "@/components/LinkCard";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function DefaultGridView({
+  links,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+  return (
+    <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>
+  );
+}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import usePermissions from "@/hooks/usePermissions";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import EditLinkModal from "@/components/ModalContent/EditLinkModal";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
+import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import useLinkStore from "@/store/links";
+import { toast } from "react-hot-toast";
+import useAccountStore from "@/store/account";
+
+export default function LinkActions({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const permissions = usePermissions(link.collection.id as number);
+
+  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
+  const [expandedLink, setExpandedLink] = useState(false);
+
+  const { account } = useAccountStore();
+
+  const { removeLink, updateLink } = useLinkStore();
+
+  const pinLink = async () => {
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateLink({
+      ...link,
+      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
+    });
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+  };
+
+  const deleteLink = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeLink(link.id as number);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`Link Deleted.`);
+  };
+
+  return (
+    <div>
+      {permissions === true ||
+      permissions?.canUpdate ||
+      permissions?.canDelete ? (
+        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-ghost btn-sm btn-square text-neutral"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + collection.id}
+            />
+          </div>
+          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    pinLink();
+                  }}
+                >
+                  {link?.pinnedBy && link.pinnedBy[0]
+                    ? "Unpin"
+                    : "Pin to Dashboard"}
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canUpdate ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                >
+                  Edit
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setPreservedFormatsModal(true);
+                    // updateArchive();
+                  }}
+                >
+                  Preserved Formats
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canDelete ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                  }}
+                >
+                  Delete
+                </div>
+              </li>
+            ) : undefined}
+          </ul>
+        </div>
+      ) : undefined}
+
+      {editLinkModal ? (
+        <EditLinkModal
+          onClose={() => setEditLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {deleteLinkModal ? (
+        <DeleteLinkModal
+          onClose={() => setDeleteLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {/* {expandedLink ? (
+                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
+              ) : undefined} */}
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkCardCompact.tsx

@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkCardCompact({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+  }, [collections, links]);
+
+  return (
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex items-center cursor-pointer p-3"
+      >
+        <div className="shrink-0">
+          <LinkIcon link={link} />
+        </div>
+
+        <div className="w-[calc(100%-56px)] ml-2">
+          <p className="line-clamp-1 mr-8">
+            {unescapeString(link.name || link.description) || link.url}
+          </p>
+
+          <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+            <div className="flex items-center gap-2">
+              <LinkCollection link={link} collection={collection} />
+              &middot;
+              {link.url ? (
+                <div
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.open(link.url || "", "_blank");
+                  }}
+                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+                >
+                  <p className="truncate w-full">{shortendURL}</p>
+                </div>
+              ) : (
+                <div className="badge badge-primary badge-sm my-1">
+                  {link.type}
+                </div>
+              )}
+            </div>
+            <span className="hidden sm:block">&middot;</span>
+            <LinkDate link={link} />
+          </div>
+        </div>
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -0,0 +1,34 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+
+export default function LinkCollection({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const router = useRouter();
+
+  return (
+    <div
+      onClick={(e) => {
+        e.preventDefault();
+        router.push(`/collections/${link.collection.id}`);
+      }}
+      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+    >
+      <FontAwesomeIcon
+        icon={faFolder}
+        className="w-4 h-4"
+        style={{ color: collection?.color }}
+      />
+      <p className="truncate capitalize">{collection?.name}</p>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -0,0 +1,25 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+
+export default function LinkDate({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const formattedDate = new Date(link.createdAt as string).toLocaleString(
+    "en-US",
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    },
+  );
+
+  return (
+    <div className="flex items-center gap-1 text-neutral">
+      <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+      <p>{formattedDate}</p>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -0,0 +1,40 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+import Image from "next/image";
+import isValidUrl from "@/lib/shared/isValidUrl";
+
+export default function LinkIcon({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const url =
+    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
+
+  const iconClasses: string =
+    "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";
+
+  return (
+    <div>
+      {link.url && url ? (
+        <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          width={64}
+          height={64}
+          alt=""
+          className={iconClasses}
+          draggable="false"
+          onError={(e) => {
+            const target = e.target as HTMLElement;
+            target.style.display = "none";
+          }}
+        />
+      ) : link.type === "pdf" ? (
+        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+      ) : link.type === "image" ? (
+        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+      ) : undefined}
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkRow.tsx

@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkCardCompact({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+  }, [collections, links]);
+
+  return (
+    <div className="border-b last:border-b-0 border-neutral-content relative">
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex items-center cursor-pointer p-3"
+      >
+        <div className="shrink-0">
+          <LinkIcon link={link} />
+        </div>
+
+        <div className="w-[calc(100%-56px)] ml-2">
+          <p className="line-clamp-1 mr-8">
+            {unescapeString(link.name || link.description) || link.url}
+          </p>
+
+          <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+            <div className="flex items-center gap-2">
+              <LinkCollection link={link} collection={collection} />
+              &middot;
+              {link.url ? (
+                <div
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.open(link.url || "", "_blank");
+                  }}
+                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+                >
+                  <p className="truncate w-full">{shortendURL}</p>
+                </div>
+              ) : (
+                <div className="badge badge-primary badge-sm my-1">
+                  {link.type}
+                </div>
+              )}
+            </div>
+            <span className="hidden sm:block">&middot;</span>
+            <LinkDate link={link} />
+          </div>
+        </div>
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}

components/LinkViews/ListView.tsx

@@ -0,0 +1,18 @@
+import LinkRow from "@/components/LinkViews/LinkComponents/LinkRow";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export default function ListView({
+  links,
+}: {
+  links: LinkIncludingShortenedCollectionAndTags[];
+}) {
+  return (
+    <div>
+      <div className="flex flex-col border border-neutral-content bg-base-200 rounded-md">
+        {links.map((e, i) => {
+          return <LinkRow key={i} link={e} count={i} />;
+        })}
+      </div>
+    </div>
+  );
+}

components/SortDropdown.tsx

@@ -16,11 +16,14 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <FontAwesomeIcon
+        <svg
-          icon={faSort}
-          id="sort-dropdown"
           className="w-5 h-5 text-neutral"
-        />
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+        >
+          <path d="M3 6H12H21M6 12H18M9 18H15" stroke="currentColor"></path>
+        </svg>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>

components/ViewDropdown.tsx

@@ -0,0 +1,71 @@
+import React, {Dispatch, SetStateAction, useEffect, useState} from "react";
+import useLocalSettingsStore from "@/store/localSettings";
+
+import {ViewMode} from "@/types/global";
+
+type Props = {
+    viewMode: string;
+    setViewMode: Dispatch<SetStateAction<string>>;
+};
+
+export default function ViewDropdown({viewMode, setViewMode}: Props) {
+    const {updateSettings} = useLocalSettingsStore();
+
+    const onChangeViewMode = (e: React.MouseEvent<HTMLButtonElement>, viewMode: ViewMode) => {
+        setViewMode(viewMode);
+    }
+
+    useEffect(() => {
+        updateSettings({viewMode: viewMode as ViewMode});
+    }, [viewMode]);
+
+    return (
+        <div className="p-1 flex flex-row gap-0.5 border border-neutral-content rounded-md">
+            <button
+                onClick={(e) => onChangeViewMode(e, ViewMode.Default)}
+                className={`p-2 rounded-md ${
+                    viewMode == ViewMode.Default ? "bg-primary/20" : "hover:bg-neutral/20"
+                }`}
+            >
+                <svg
+                    className="w-4 h-4 text-neutral"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                >
+                    <path
+                        d="M10.93,14.44v5.45a1.38,1.38,0,0,1-1.37,1.37H4.11a1.38,1.38,0,0,1-1.37-1.37V14.44a1.38,1.38,0,0,1,1.37-1.37H9.56A1.38,1.38,0,0,1,10.93,14.44ZM9.56,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11V9.56a1.38,1.38,0,0,0,1.37,1.37H9.56a1.38,1.38,0,0,0,1.37-1.37V4.11A1.38,1.38,0,0,0,9.56,2.74Zm11.7,17.15V14.44a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37v5.45a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,19.89Zm0-10.33V4.11a1.38,1.38,0,0,0-1.37-1.37H14.44a1.38,1.38,0,0,0-1.37,1.37V9.56a1.38,1.38,0,0,0,1.37,1.37h5.45A1.38,1.38,0,0,0,21.26,9.56Z"/>
+                </svg>
+            </button>
+            <button
+                onClick={(e) => onChangeViewMode(e, ViewMode.Compact)}
+                className={`p-2 rounded-md ${
+                    viewMode == ViewMode.Compact ? "bg-primary/20" : "hover:bg-neutral/20"
+                }`}
+            >
+                <svg
+                    className="w-4 h-4 text-neutral"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                >
+                    <path
+                        d="M14.34,11V13A1.37,1.37,0,0,1,13,14.34H11A1.37,1.37,0,0,1,9.66,13V11A1.37,1.37,0,0,1,11,9.66H13A1.37,1.37,0,0,1,14.34,11ZM13,2.74H11A1.37,1.37,0,0,0,9.66,4.11V6.06A1.37,1.37,0,0,0,11,7.43H13a1.37,1.37,0,0,0,1.37-1.37V4.11A1.37,1.37,0,0,0,13,2.74ZM21.26,13V11a1.37,1.37,0,0,0-1.37-1.37H17.94A1.37,1.37,0,0,0,16.57,11V13a1.37,1.37,0,0,0,1.37,1.37h1.95A1.37,1.37,0,0,0,21.26,13ZM11,21.26H13a1.37,1.37,0,0,0,1.37-1.37V17.94A1.37,1.37,0,0,0,13,16.57H11a1.37,1.37,0,0,0-1.37,1.37v1.95A1.37,1.37,0,0,0,11,21.26ZM2.74,11V13a1.37,1.37,0,0,0,1.37,1.37H6.06A1.37,1.37,0,0,0,7.43,13V11A1.37,1.37,0,0,0,6.06,9.66H4.11A1.37,1.37,0,0,0,2.74,11Zm18.52-5V4.11a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37V6.06a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,6.06ZM2.74,4.11V6.06A1.38,1.38,0,0,0,4.11,7.43H6.06A1.38,1.38,0,0,0,7.43,6.06V4.11A1.38,1.38,0,0,0,6.06,2.74H4.11A1.38,1.38,0,0,0,2.74,4.11ZM21.26,19.89V17.94a1.38,1.38,0,0,0-1.37-1.37H17.94a1.38,1.38,0,0,0-1.37,1.37v1.95a1.38,1.38,0,0,0,1.37,1.37h1.95A1.38,1.38,0,0,0,21.26,19.89ZM2.74,17.94v1.95a1.38,1.38,0,0,0,1.37,1.37H6.06a1.38,1.38,0,0,0,1.37-1.37V17.94a1.38,1.38,0,0,0-1.37-1.37H4.11A1.38,1.38,0,0,0,2.74,17.94Z"/>
+                </svg>
+            </button>
+            <button
+                onClick={(e) => onChangeViewMode(e, ViewMode.List)}
+                className={`p-2 rounded-md ${
+                    viewMode == ViewMode.List ? "bg-primary/20" : "hover:bg-neutral/20"
+                }`}
+            >
+                <svg
+                    className="w-4 h-4 text-neutral"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                >
+                    <path
+                        d="M5.36,5A1.76,1.76,0,1,1,3.6,3.26,1.76,1.76,0,0,1,5.36,5ZM20.78,3.48H8.6A1.37,1.37,0,0,0,7.22,4.85v.33A1.37,1.37,0,0,0,8.6,6.55H20.78a1.37,1.37,0,0,0,1.37-1.37V4.85A1.37,1.37,0,0,0,20.78,3.48ZM3.6,10.24A1.76,1.76,0,1,0,5.36,12,1.75,1.75,0,0,0,3.6,10.24Zm17.18.22H8.6a1.38,1.38,0,0,0-1.38,1.37v.34A1.38,1.38,0,0,0,8.6,13.54H20.78a1.37,1.37,0,0,0,1.37-1.37v-.34A1.37,1.37,0,0,0,20.78,10.46ZM3.6,17.23A1.76,1.76,0,1,0,5.36,19,1.75,1.75,0,0,0,3.6,17.23Zm17.18.22H8.6a1.37,1.37,0,0,0-1.38,1.37v.33A1.37,1.37,0,0,0,8.6,20.52H20.78a1.37,1.37,0,0,0,1.37-1.37v-.33A1.37,1.37,0,0,0,20.78,17.45Z"/>
+                </svg>
+            </button>
+        </div>
+    );
+}

pages/links/index.tsx

@@ -4,18 +4,32 @@ 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 { Sort, ViewMode } from "@/types/global";
 import { faLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
+import ViewDropdown from "@/components/ViewDropdown";
+import DefaultGridView from "@/components/LinkViews/DefaultGridView";
+import CompactGridView from "@/components/LinkViews/CompactGridView";
+import ListView from "@/components/LinkViews/ListView";
 
 export default function Links() {
   const { links } = useLinkStore();
 
+  const [viewMode, setViewMode] = useState<string>(localStorage.getItem('viewMode') || ViewMode.Default);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   useLinks({ sort: sortBy });
 
+  const components = {
+    [ViewMode.Default]: DefaultGridView,
+    [ViewMode.Compact]: CompactGridView,
+    [ViewMode.List]: ListView,
+  };
+
+  // @ts-ignore
+  const Component = components[viewMode];
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -32,16 +46,13 @@ export default function Links() {
             </div>
           </div>
 
-          <div className="relative mt-2">
+          <div className="flex items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
         {links[0] ? (
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
+          <Component links={links} />
-            {links.map((e, i) => {
-              return <LinkCard key={i} link={e} count={i} />;
-            })}
-          </div>
         ) : (
           <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}

store/localSettings.ts

@@ -1,7 +1,9 @@
 import { create } from "zustand";
+import {ViewMode} from "@/types/global";
 
 type LocalSettings = {
-  theme: string;
+  theme?: string;
+  viewMode?: string
 };
 
 type LocalSettingsStore = {
@@ -13,6 +15,7 @@ type LocalSettingsStore = {
 const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
   settings: {
     theme: "",
+    viewMode: "",
   },
   updateSettings: async (newSettings) => {
     if (
@@ -26,6 +29,15 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
       document.querySelector("html")?.setAttribute("data-theme", localTheme);
     }
 
+    if (
+      newSettings.viewMode &&
+      newSettings.viewMode !== localStorage.getItem("viewMode")
+    ) {
+      localStorage.setItem("viewMode", newSettings.viewMode);
+
+      // const localTheme = localStorage.getItem("viewMode") || "";
+    }
+
     set((state) => ({ settings: { ...state.settings, ...newSettings } }));
   },
   setSettings: async () => {

types/global.ts

@@ -57,6 +57,12 @@ export interface PublicCollectionIncludingLinks extends Collection {
   links: LinksIncludingTags[];
 }
 
+export enum ViewMode {
+  Default = "default",
+  Compact = "compact",
+  List = "list",
+}
+
 export enum Sort {
   DateNewestFirst,
   DateOldestFirst,