From af5a7dd2f9fc51eb6a6710e286866633aff5edbd Mon Sep 17 00:00:00 2001
From: saurav <echo.saurav@gmail.com>
Date: Tue, 15 Oct 2024 21:42:44 +0600
Subject: [PATCH 1/4] Make the thumbnail image keeping its ratio like pinterest
 layout for masonry

---
 .../bookmarks/BookmarkLayoutAdaptingCard.tsx  |  7 ++--
 .../dashboard/bookmarks/FixedRatioImage.tsx   | 36 +++++++++++++++++++
 .../dashboard/bookmarks/LinkCard.tsx          |  7 +++-
 3 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index 1df0c197..10adc148 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -155,18 +155,19 @@ function GridView({
   layout,
   fitHeight = false,
 }: Props & { layout: BookmarksLayoutTypes }) {
-  const img = image("grid", "h-56 min-h-56 w-full object-cover rounded-t-lg");
+  const img = image("grid", "w-full rounded-t-lg");
 
   return (
     <div
       className={cn(
         "relative flex flex-col overflow-hidden rounded-lg shadow-md",
         className,
-        fitHeight && layout != "grid" ? "max-h-96" : "h-96",
+        !fitHeight && layout == "grid" && "h-96",
       )}
     >
       <MultiBookmarkSelector bookmark={bookmark} />
-      {img && <div className="h-56 w-full shrink-0 overflow-hidden">{img}</div>}
+      {/* {img && <div className="h-56 w-full shrink-0 overflow-hidden">{img}</div>} */}
+      {img && <div className="w-full shrink-0">{img}</div>}
       <div className="flex h-full flex-col justify-between gap-2 overflow-hidden p-2">
         <div className="grow-1 flex flex-col gap-2 overflow-hidden">
           {title && (
diff --git a/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx b/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx
new file mode 100644
index 00000000..e9ea6169
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Image from "next/image";
+
+export default function FixedRatioImage({
+  src,
+  unoptimized,
+  className,
+}: {
+  src: string;
+  unoptimized: boolean;
+  className: string | undefined;
+}) {
+  const [height, setHeight] = useState<number>(0);
+  const [width, setWidth] = useState<number>(0);
+
+  if (height === null) return <div></div>;
+
+  const onImgLoad = ({ target }: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = target as HTMLImageElement;
+    setHeight(img.offsetHeight);
+    setWidth(img.offsetWidth);
+  };
+
+  return (
+    <Image
+      onLoad={onImgLoad}
+      width={width}
+      height={height}
+      unoptimized={unoptimized}
+      className={className}
+      alt="card banner"
+      // fill={true}
+      src={src}
+    />
+  );
+}
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index 86eed9e7..d3321178 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -11,6 +11,7 @@ import {
 } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+import FixedRatioImage from "./FixedRatioImage";
 import FooterLinkURL from "./FooterLinkURL";
 
 function LinkTitle({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
@@ -48,7 +49,11 @@ function LinkImage({
   if (isBookmarkStillCrawling(bookmark)) {
     img = imgComponent("/blur.avif", false);
   } else if (imageDetails) {
-    img = imgComponent(imageDetails.url, !imageDetails.localAsset);
+    img = FixedRatioImage({
+      src: imageDetails.url,
+      unoptimized: !imageDetails.localAsset,
+      className: className,
+    });
   } else {
     // No image found
     // A dummy white pixel for when there's no image.

From f93395003a9be3fb294a8e45dab3246a717eeb10 Mon Sep 17 00:00:00 2001
From: saurav <echo.saurav@gmail.com>
Date: Sat, 19 Oct 2024 21:25:15 +0600
Subject: [PATCH 2/4] added max-h-screen for a max image height

---
 .../dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index 10adc148..b701ffd9 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -155,7 +155,7 @@ function GridView({
   layout,
   fitHeight = false,
 }: Props & { layout: BookmarksLayoutTypes }) {
-  const img = image("grid", "w-full rounded-t-lg");
+  const img = image("grid", "w-full object-cover max-h-screen rounded-t-lg");
 
   return (
     <div

From 7a76e1aa0eecc6347da4e2ba6bfc5bef56507a9a Mon Sep 17 00:00:00 2001
From: saurav <echo.saurav@gmail.com>
Date: Sun, 20 Oct 2024 03:49:23 +0600
Subject: [PATCH 3/4] added max-h-screen for a max image height for both
 linkcard and asset image

---
 apps/web/components/dashboard/bookmarks/AssetCard.tsx  | 10 +++++-----
 .../components/dashboard/bookmarks/FixedRatioImage.tsx |  8 ++++++--
 apps/web/components/dashboard/bookmarks/LinkCard.tsx   |  1 +
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index 61b3bc8d..dda67ac3 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 
 import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
@@ -8,6 +7,7 @@ import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
 import { getSourceUrl } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+import FixedRatioImage from "./FixedRatioImage";
 import FooterLinkURL from "./FooterLinkURL";
 
 function AssetImage({
@@ -22,11 +22,11 @@ function AssetImage({
     case "image": {
       return (
         <Link href={`/dashboard/preview/${bookmark.id}`}>
-          <Image
-            alt="asset"
+          <FixedRatioImage
             src={getAssetUrl(bookmarkedAsset.assetId)}
-            fill={true}
-            className={className}
+            unoptimized={true}
+            className="max-h-screen w-full rounded-t-lg object-cover"
+            alt="asset"
           />
         </Link>
       );
diff --git a/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx b/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx
index e9ea6169..b888f9ac 100644
--- a/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx
+++ b/apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import Image from "next/image";
 
@@ -5,10 +7,12 @@ export default function FixedRatioImage({
   src,
   unoptimized,
   className,
+  alt,
 }: {
   src: string;
   unoptimized: boolean;
   className: string | undefined;
+  alt: string;
 }) {
   const [height, setHeight] = useState<number>(0);
   const [width, setWidth] = useState<number>(0);
@@ -28,8 +32,8 @@ export default function FixedRatioImage({
       height={height}
       unoptimized={unoptimized}
       className={className}
-      alt="card banner"
-      // fill={true}
+      alt={alt}
+      fill={false}
       src={src}
     />
   );
diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
index d3321178..5512eae9 100644
--- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx
@@ -53,6 +53,7 @@ function LinkImage({
       src: imageDetails.url,
       unoptimized: !imageDetails.localAsset,
       className: className,
+      alt: "card banner",
     });
   } else {
     // No image found

From 3878c818697dcd03cd10711f420ea8f0f7605c1d Mon Sep 17 00:00:00 2001
From: saurav <echo.saurav@gmail.com>
Date: Sun, 20 Oct 2024 04:03:01 +0600
Subject: [PATCH 4/4] set asset image as optimized

---
 apps/web/components/dashboard/bookmarks/AssetCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index dda67ac3..5e6788b5 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -24,7 +24,7 @@ function AssetImage({
         <Link href={`/dashboard/preview/${bookmark.id}`}>
           <FixedRatioImage
             src={getAssetUrl(bookmarkedAsset.assetId)}
-            unoptimized={true}
+            unoptimized={false}
             className="max-h-screen w-full rounded-t-lg object-cover"
             alt="asset"
           />