finalized link card

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -15,9 +15,16 @@ type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   position?: string;
+  toggleShowInfo: () => void;
+  linkInfo: boolean;
 };
 
-export default function LinkActions({ link, collection, position }: Props) {
+export default function LinkActions({
+  link,
+  toggleShowInfo,
+  position,
+  linkInfo,
+}: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -85,6 +92,18 @@ export default function LinkActions({ link, collection, position }: Props) {
               </div>
             </li>
           ) : undefined}
+          <li>
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                (document?.activeElement as HTMLElement)?.blur();
+                toggleShowInfo();
+              }}
+            >
+              {!linkInfo ? "Show" : "Hide"} Link Info
+            </div>
+          </li>
           {permissions === true || permissions?.canUpdate ? (
             <li>
               <div
@@ -106,7 +125,6 @@ export default function LinkActions({ link, collection, position }: Props) {
               onClick={() => {
                 (document?.activeElement as HTMLElement)?.blur();
                 setPreservedFormatsModal(true);
-                // updateArchive();
               }}
             >
               Preserved Formats

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -21,6 +21,7 @@ export default function LinkCollection({
         router.push(`/collections/${link.collection.id}`);
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+      title={collection?.name}
     >
       <i
         className="bi-folder-fill text-lg drop-shadow"

components/LinkViews/LinkComponents/LinkGroupedIconURL.tsx

@@ -0,0 +1,53 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Image from "next/image";
+import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
+import Link from "next/link";
+
+export default function LinkGroupedIconURL({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const url =
+    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
+
+  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  return (
+    <Link href={link.url || ""} target="_blank">
+      <div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
+        {link.url && url && showFavicon ? (
+          <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="w-5 h-5 rounded"
+            draggable="false"
+            onError={() => {
+              setShowFavicon(false);
+            }}
+          />
+        ) : showFavicon === false ? (
+          <i className="bi-link-45deg text-xl leading-none text-black"></i>
+        ) : link.type === "pdf" ? (
+          <i className={`bi-file-earmark-pdf`}></i>
+        ) : link.type === "image" ? (
+          <i className={`bi-file-earmark-image`}></i>
+        ) : undefined}
+        <p className="truncate bg-white text-black mr-1">
+          <p className="text-sm">{shortendURL}</p>
+        </p>
+      </div>
+    </Link>
+  );
+}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -14,35 +14,31 @@ export default function LinkIcon({
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
   const iconClasses: string =
-    "bg-white text-primary shadow rounded-md border-[2px] border-white select-none z-10" +
+    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" +
     " " +
     (width || "w-12");
 
   const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
-  return (
-    <div>
-      {link.url && url && showFavicon ? (
-        <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={() => {
-            setShowFavicon(false);
-          }}
-        />
-      ) : showFavicon === false ? (
-        <div className="flex items-center justify-center h-12 w-12 bg-base-200 rounded-md shadow">
-          <i className="bi-link-45deg text-4xl text-primary"></i>
-        </div>
-      ) : link.type === "pdf" ? (
-        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
-      ) : link.type === "image" ? (
-        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
-      ) : undefined}
+  return link.url && url && showFavicon ? (
+    <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={() => {
+        setShowFavicon(false);
+      }}
+    />
+  ) : showFavicon === false ? (
+    <div className={iconClasses}>
+      <i className="bi-link-45deg text-4xl text-black"></i>
     </div>
-  );
+  ) : link.type === "pdf" ? (
+    <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
+  ) : link.type === "image" ? (
+    <i className={`bi-file-earmark-image ${iconClasses}`}></i>
+  ) : undefined;
 }