Made the thumbnail image keeping its real ratio instead of object-cover like Pinterest layout

apps/web/components/dashboard/bookmarks/AssetCard.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 
 import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
 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={false}
+            className="max-h-screen w-full rounded-t-lg object-cover"
+            alt="asset"
           />
         </Link>
       );

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 object-cover max-h-screen 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 && (

apps/web/components/dashboard/bookmarks/FixedRatioImage.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+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);
+
+  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={alt}
+      fill={false}
+      src={src}
+    />
+  );
+}

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,12 @@ 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,
+      alt: "card banner",
+    });
   } else {
     // No image found
     // A dummy white pixel for when there's no image.