Revert "undo commit"

This reverts commit 9103f67db5.

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -22,44 +22,23 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
-import useLocalSettingsStore from "@/store/localSettings";
-import clsx from "clsx";
-import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
-  columns: number;
+  count: number;
+  className?: string;
+  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkMasonry({ link, editMode, columns }: Props) {
+export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
   const { t } = useTranslation();
 
-  const heightMap = {
-    1: "h-44",
-    2: "h-40",
-    3: "h-36",
-    4: "h-32",
-    5: "h-28",
-    6: "h-24",
-    7: "h-20",
-    8: "h-20",
-  };
-
-  const imageHeightClass = useMemo(
-    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
-    [columns]
-  );
-
   const { data: collections = [] } = useCollections();
   const { data: user = {} } = useUser();
 
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const {
-    settings: { show },
-  } = useLocalSettingsStore();
-
   const { links } = useLinks();
   const getLink = useGetLink();
 
@@ -109,7 +88,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
   const permissions = usePermissions(collection?.id as number);
 
   useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
+    let interval: any;
 
     if (
       isVisible &&
@@ -117,7 +96,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync({ id: link.id as number });
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -128,6 +107,8 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
     };
   }, [isVisible, link.preview]);
 
+  const [showInfo, setShowInfo] = useState(false);
+
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -141,7 +122,7 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
   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 group`}
+      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)
@@ -150,61 +131,57 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
             : undefined
       }
     >
-      <div>
-        {show.image && previewAvailable(link) && (
-          <div
-            className="rounded-2xl cursor-pointer"
-            onClick={() =>
-              !editMode && window.open(generateLinkHref(link, user), "_blank")
-            }
-          >
-            <div className="relative rounded-t-2xl overflow-hidden">
-              {previewAvailable(link) ? (
-                <Image
-                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
-                  width={1280}
-                  height={720}
-                  alt=""
-                  className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} w-full shadow opacity-80 scale-105`}
-                  style={show.icon ? { filter: "blur(1px)" } : undefined}
-                  draggable="false"
-                  onError={(e) => {
-                    const target = e.target as HTMLElement;
-                    target.style.display = "none";
-                  }}
-                />
-              ) : link.preview === "unavailable" ? null : (
-                <div
-                  className={`duration-100 ${imageHeightClass} bg-opacity-80 skeleton rounded-none`}
-                ></div>
-              )}
-              {show.icon && (
-                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center rounded-md">
-                  <LinkIcon link={link} />
-                </div>
-              )}
+      <div
+        className="rounded-2xl cursor-pointer"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, user), "_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={
+                link.type !== "image" ? { filter: "blur(1px)" } : undefined
+              }
+              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>
+          )}
+          {link.type !== "image" && (
+            <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>
 
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-          </div>
+        {link.preview !== "unavailable" && (
+          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
         )}
 
-        <div className="p-3 flex flex-col gap-2 h-full min-h-14">
-          {show.name && (
-            <p className="hyphens-auto w-full text-primary text-sm">
-              {unescapeString(link.name)}
-            </p>
-          )}
+        <div className="p-3 flex flex-col gap-2">
+          <p className="hyphens-auto w-full pr-9 text-primary text-sm">
+            {unescapeString(link.name)}
+          </p>
 
-          {show.link && <LinkTypeBadge link={link} />}
+          <LinkTypeBadge link={link} />
 
-          {show.description && link.description && (
-            <p className={clsx("hyphens-auto text-sm w-full")}>
+          {link.description && (
+            <p className="hyphens-auto text-sm">
               {unescapeString(link.description)}
             </p>
           )}
 
-          {show.tags && link.tags && link.tags[0] && (
+          {link.tags && link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
                 <Link
@@ -222,26 +199,77 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
           )}
         </div>
 
-        {(show.collection || show.date) && (
-          <div>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-            <div className="flex flex-wrap justify-between items-center text-xs text-neutral px-3 pb-1 w-full gap-x-2">
-              {show.collection && (
-                <div className="cursor-pointer truncate">
-                  <LinkCollection link={link} collection={collection} />
-                </div>
-              )}
-              {show.date && <LinkDate link={link} />}
-            </div>
-          </div>
-        )}
+        <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
+          {collection && <LinkCollection link={link} collection={collection} />}
+          <LinkDate link={link} />
+        </div>
       </div>
 
-      {/* Overlay on hover */}
-      <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
-      <LinkActions link={link} collection={collection} />
-      <LinkPin link={link} />
+      {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">
+            {t("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">
+                {t("no_description")}
+              </span>
+            )}
+          </p>
+          {link.tags && link.tags[0] && (
+            <>
+              <p className="text-neutral text-lg mt-3 font-semibold">
+                {t("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>
   );
 }