small improvements

components/LinkViews/Layouts/GridView.tsx

@@ -1,16 +0,0 @@
-import LinkGrid from "@/components/LinkViews/LinkGrid";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-
-export default function GridView({
-  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 <LinkGrid link={e} count={i} key={i} />;
-      })}
-    </div>
-  );
-}

components/LinkViews/Layouts/MasonryView.tsx

@@ -1,4 +1,4 @@
-import LinkCard from "@/components/LinkViews/LinkCard";
+import LinkMasonry from "@/components/LinkViews/LinkMasonry";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { GridLoader } from "react-spinners";
 import Masonry from "react-masonry-css";
@@ -30,12 +30,11 @@ export default function MasonryView({
     <Masonry
       breakpointCols={breakpointColumnsObj}
       columnClassName="flex flex-col gap-5 !w-full"
-      // className="grid gap-5 grid-cols-3"
       className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 pb-5"
     >
       {links.map((e, i) => {
         return (
-          <LinkCard
+          <LinkMasonry
             key={i}
             link={e}
             count={i}

components/LinkViews/LinkCard.tsx

@@ -133,36 +133,32 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, account), "_blank")
         }
       >
-        {viewMode === "masonry" && !previewAvailable(link) ? null : (
+        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          <>
+          {previewAvailable(link) ? (
-            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+            <Image
-              {previewAvailable(link) ? (
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-                <Image
+              width={1280}
-                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+              height={720}
-                  width={1280}
+              alt=""
-                  height={720}
+              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-                  alt=""
+              style={{ filter: "blur(2px)" }}
-                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              draggable="false"
-                  style={{ filter: "blur(2px)" }}
+              onError={(e) => {
-                  draggable="false"
+                const target = e.target as HTMLElement;
-                  onError={(e) => {
+                target.style.display = "none";
-                    const target = e.target as HTMLElement;
+              }}
-                    target.style.display = "none";
+            />
-                  }}
+          ) : link.preview === "unavailable" ? (
-                />
+            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-              ) : link.preview === "unavailable" ? (
+          ) : (
-                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-              ) : (
+          )}
-                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-              )}
+            <LinkIcon link={link} />
-              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+          </div>
-                <LinkIcon link={link} />
+        </div>
-              </div>
-            </div>
 
-            <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-          </>
-        )}
 
         <div className="p-3 mt-1">
           <p className="truncate w-full pr-8 text-primary">
@@ -234,11 +230,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       <LinkActions
         link={link}
         collection={collection}
-        position={
+        position="top-[10.75rem] right-3"
-          !previewAvailable(link) && viewMode === "masonry"
-            ? "top-[.75rem] right-3"
-            : "top-[10.75rem] right-3"
-        }
         toggleShowInfo={() => setShowInfo(!showInfo)}
         linkInfo={showInfo}
         flipDropdown={flipDropdown}

components/LinkViews/LinkGrid.tsx

@@ -1,111 +0,0 @@
-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";
-import Link from "next/link";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  count: number;
-  className?: string;
-};
-
-export default function LinkGrid({ link }: 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 p-3">
-      <div
-        onClick={() => link.url && window.open(link.url || "", "_blank")}
-        className="cursor-pointer"
-      >
-        <LinkIcon link={link} width="w-12 mb-3" />
-        <p className="truncate w-full">
-          {unescapeString(link.name || link.description) || link.url}
-        </p>
-
-        <div className="mt-1 flex flex-col 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">{shortendURL}</p>
-              </div>
-            ) : (
-              <div className="badge badge-primary badge-sm my-1">
-                {link.type}
-              </div>
-            )}
-          </div>
-          <LinkDate link={link} />
-        </div>
-        <p className="truncate">{unescapeString(link.description)}</p>
-        {link.tags[0] ? (
-          <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-            <div className="flex gap-1 items-center flex-wrap">
-              {link.tags.map((e, i) => (
-                <Link
-                  href={"/tags/" + e.id}
-                  key={i}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                >
-                  #{e.name}
-                </Link>
-              ))}
-            </div>
-          </div>
-        ) : undefined}
-      </div>
-
-      <LinkActions
-        toggleShowInfo={() => {}}
-        linkInfo={false}
-        link={link}
-        collection={collection}
-      />
-    </div>
-  );
-}

components/LinkViews/LinkMasonry.tsx

@@ -0,0 +1,244 @@
+import {
+  ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useRef, 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 Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
+import Link from "next/link";
+import LinkIcon from "./LinkComponents/LinkIcon";
+import useOnScreen from "@/hooks/useOnScreen";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+  flipDropdown?: boolean;
+  editMode?: boolean;
+};
+
+export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
+  const viewMode = localStorage.getItem("viewMode") || "card";
+  const { collections } = useCollectionStore();
+  const { account } = useAccountStore();
+
+  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  let shortendURL;
+
+  try {
+    if (link.url) {
+      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]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useOnScreen(ref);
+  const permissions = usePermissions(collection?.id as number);
+
+  useEffect(() => {
+    let interval: any;
+
+    if (
+      isVisible &&
+      !link.preview?.startsWith("archives") &&
+      link.preview !== "unavailable"
+    ) {
+      interval = setInterval(async () => {
+        getLink(link.id as number);
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isVisible, link.preview]);
+
+  const [showInfo, setShowInfo] = useState(false);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  return (
+    <div
+      ref={ref}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
+      onClick={() =>
+        selectable
+          ? handleCheckboxClick(link)
+          : editMode
+            ? toast.error(
+                "You don't have permission to edit or delete this item."
+              )
+            : undefined
+      }
+    >
+      <div
+        className="rounded-2xl cursor-pointer"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, account), "_blank")
+        }
+      >
+        <div className="relative rounded-t-2xl overflow-hidden">
+          {previewAvailable(link) ? (
+            <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+              width={1280}
+              height={720}
+              alt=""
+              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              style={{ filter: "blur(2px)" }}
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : link.preview === "unavailable" ? null : (
+            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+          )}
+          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+            <LinkIcon link={link} />
+          </div>
+        </div>
+
+        {link.preview !== "unavailable" && (
+          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+        )}
+
+        <div className="p-3 mt-1">
+          <p className="truncate w-full pr-8 text-primary">
+            {unescapeString(link.name || link.description) || link.url}
+          </p>
+
+          <LinkTypeBadge link={link} />
+        </div>
+
+        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+        <div className="flex justify-between text-xs text-neutral px-3 pb-1">
+          <div className="cursor-pointer w-fit">
+            {collection && (
+              <LinkCollection link={link} collection={collection} />
+            )}
+          </div>
+          <LinkDate link={link} />
+        </div>
+      </div>
+
+      {showInfo && (
+        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
+          <div
+            onClick={() => setShowInfo(!showInfo)}
+            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
+          >
+            <i className="bi-x text-neutral text-2xl"></i>
+          </div>
+          <p className="text-neutral text-lg font-semibold">Description</p>
+
+          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+          <p>
+            {link.description ? (
+              unescapeString(link.description)
+            ) : (
+              <span className="text-neutral text-sm">
+                No description provided.
+              </span>
+            )}
+          </p>
+          {link.tags[0] && (
+            <>
+              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+
+              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                <div className="flex gap-1 items-center flex-wrap">
+                  {link.tags.map((e, i) => (
+                    <Link
+                      href={"/tags/" + e.id}
+                      key={i}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                    >
+                      #{e.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <LinkActions
+        link={link}
+        collection={collection}
+        position={
+          link.preview !== "unavailable"
+            ? "top-[10.75rem] right-3"
+            : "top-[.75rem] right-3"
+        }
+        toggleShowInfo={() => setShowInfo(!showInfo)}
+        linkInfo={showInfo}
+        flipDropdown={flipDropdown}
+      />
+    </div>
+  );
+}

pages/collections/[id].tsx

@@ -21,7 +21,6 @@ import EditCollectionSharingModal from "@/components/ModalContent/EditCollection
 import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
@@ -109,7 +108,6 @@ export default function Index() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };

pages/dashboard.tsx

@@ -17,7 +17,6 @@ import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -101,7 +100,7 @@ export default function Dashboard() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
+    // [ViewMode.Grid]: ,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };

pages/links/index.tsx

@@ -13,7 +13,6 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import toast from "react-hot-toast";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import { useRouter } from "next/router";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
@@ -73,7 +72,6 @@ export default function Links() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };

pages/links/pinned.tsx

@@ -12,7 +12,6 @@ import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal
 import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 import toast from "react-hot-toast";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import { useRouter } from "next/router";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
@@ -71,7 +70,6 @@ export default function PinnedLinks() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };

pages/public/collections/[id].tsx

@@ -25,7 +25,6 @@ import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 
 const cardVariants: Variants = {
   offscreen: {
@@ -108,7 +107,6 @@ export default function PublicCollections() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };

pages/search.tsx

@@ -8,7 +8,6 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
 import { GridLoader } from "react-spinners";
@@ -19,7 +18,8 @@ import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
 
 export default function Search() {
-  const { links, selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+  const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
+    useLinkStore();
 
   const router = useRouter();
 
@@ -59,7 +59,8 @@ export default function Search() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -71,7 +72,8 @@ export default function Search() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -92,7 +94,6 @@ export default function Search() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };
@@ -115,10 +116,11 @@ export default function Search() {
                     setEditMode(!editMode);
                     setSelectedLinks([]);
                   }}
-                  className={`btn btn-square btn-sm btn-ghost ${editMode
+                  className={`btn btn-square btn-sm btn-ghost ${
-                    ? "bg-primary/20 hover:bg-primary/20"
+                    editMode
-                    : "hover:bg-neutral/20"
+                      ? "bg-primary/20 hover:bg-primary/20"
-                    }`}
+                      : "hover:bg-neutral/20"
+                  }`}
                 >
                   <i className="bi-pencil-fill text-neutral text-xl"></i>
                 </div>
@@ -199,7 +201,11 @@ export default function Search() {
             </span>
           </p>
         ) : links[0] ? (
-          <LinkComponent editMode={editMode} links={links} isLoading={isLoading} />
+          <LinkComponent
+            editMode={editMode}
+            links={links}
+            isLoading={isLoading}
+          />
         ) : (
           isLoading && (
             <GridLoader

pages/tags/[id].tsx

@@ -9,7 +9,6 @@ import useLinks from "@/hooks/useLinks";
 import { toast } from "react-hot-toast";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
-// import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
@@ -150,7 +149,6 @@ export default function Index() {
 
   const linkView = {
     [ViewMode.Card]: CardView,
-    // [ViewMode.Grid]: GridView,
     [ViewMode.List]: ListView,
     [ViewMode.Masonry]: MasonryView,
   };