Revert "undo commit"

This reverts commit 9103f67db5.

components/LinkViews/LinkComponents/LinkCard.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";
@@ -11,6 +11,7 @@ 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 "./LinkIcon";
 import useOnScreen from "@/hooks/useOnScreen";
 import { generateLinkHref } from "@/lib/client/generateLinkHref";
@@ -21,47 +22,24 @@ 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 { useRouter } from "next/router";
-import useLocalSettingsStore from "@/store/localSettings";
-import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
-  columns: number;
   className?: string;
+  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkCard({ link, columns, editMode }: Props) {
+export default function LinkCard({ 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 {
     data: { data: links = [] },
   } = useLinks();
@@ -112,12 +90,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
   const isVisible = useOnScreen(ref);
   const permissions = usePermissions(collection?.id as number);
 
-  const router = useRouter();
-
-  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
-
   useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
+    let interval: any;
 
     if (
       isVisible &&
@@ -125,7 +99,7 @@ export default function LinkCard({ link, columns, editMode }: Props) {
       link.preview !== "unavailable"
     ) {
       interval = setInterval(async () => {
-        getLink.mutateAsync({ id: link.id as number, isPublicRoute: isPublic });
+        getLink.mutateAsync(link.id as number);
       }, 5000);
     }
 
@@ -136,6 +110,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
     };
   }, [isVisible, link.preview]);
 
+  const [showInfo, setShowInfo] = useState(false);
+
   const selectedStyle = selectedLinks.some(
     (selectedLink) => selectedLink.id === link.id
   )
@@ -149,7 +125,7 @@ export default function LinkCard({ link, columns, editMode }: 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)
@@ -164,76 +140,121 @@ export default function LinkCard({ link, columns, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
-        {show.image && (
-          <div>
-            <div
-              className={`relative rounded-t-2xl ${imageHeightClass} 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" ? (
-                <div
-                  className={`bg-gray-50 ${imageHeightClass} bg-opacity-80`}
-                ></div>
-              ) : (
-                <div
-                  className={`${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>
-            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-          </div>
-        )}
-
-        <div className="flex flex-col justify-between h-full min-h-24">
-          <div className="p-3 flex flex-col gap-2">
-            {show.name && (
-              <p className="truncate w-full text-primary text-sm">
-                {unescapeString(link.name)}
-              </p>
+        <div>
+          <div className="relative rounded-t-2xl h-40 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" ? (
+              <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>
             )}
+            {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>
 
-            {show.link && <LinkTypeBadge link={link} />}
+        <div className="flex flex-col justify-between h-full">
+          <div className="p-3 flex flex-col gap-2">
+            <p className="truncate w-full pr-9 text-primary text-sm">
+              {unescapeString(link.name)}
+            </p>
+
+            <LinkTypeBadge link={link} />
           </div>
 
-          {(show.collection || show.date) && (
-            <div>
-              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+          <div>
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-              <div className="flex justify-between items-center text-xs text-neutral px-3 pb-1 gap-2">
-                {show.collection && (
-                  <div className="cursor-pointer truncate">
-                    <LinkCollection link={link} collection={collection} />
-                  </div>
+            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
+              <div className="cursor-pointer truncate">
+                {collection && (
+                  <LinkCollection link={link} collection={collection} />
                 )}
-                {show.date && <LinkDate link={link} />}
               </div>
+              <LinkDate link={link} />
             </div>
-          )}
+          </div>
         </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-[0.9rem] 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 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 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="top-[10.75rem] right-3"
+        toggleShowInfo={() => setShowInfo(!showInfo)}
+        linkInfo={showInfo}
+        flipDropdown={flipDropdown}
+      />
     </div>
   );
 }