fully implemented the custom slider for the number of columns to show

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useLinkStore from "@/store/links";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
@@ -11,7 +11,6 @@ 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";
@@ -24,19 +23,34 @@ import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
 import { useRouter } from "next/router";
 import useLocalSettingsStore from "@/store/localSettings";
-import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   count: number;
+  columns: number;
   className?: string;
-  flipDropdown?: boolean;
   editMode?: boolean;
 };
 
-export default function LinkCard({ link, flipDropdown, editMode }: Props) {
+export default function LinkCard({ link, columns, editMode }: Props) {
   const { t } = useTranslation();
 
+  const heightMap = {
+    1: "h-48",
+    2: "h-44",
+    3: "h-40",
+    4: "h-36",
+    5: "h-32",
+    6: "h-28",
+    7: "h-24",
+    8: "h-20",
+  };
+
+  const imageHeightClass = useMemo(
+    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
+    [columns]
+  );
+
   const { data: collections = [] } = useCollections();
 
   const { data: user = {} } = useUser();
@@ -134,7 +148,7 @@ export default function LinkCard({ link, flipDropdown, 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`}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
       onClick={() =>
         selectable
           ? handleCheckboxClick(link)
@@ -151,14 +165,16 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       >
         {show.image && (
           <div>
-            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+            <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 h-40 w-full shadow opacity-80 scale-105"
+                  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) => {
@@ -167,9 +183,13 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
                   }}
                 />
               ) : link.preview === "unavailable" ? (
-                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+                <div
+                  className={`bg-gray-50 ${imageHeightClass} bg-opacity-80`}
+                ></div>
               ) : (
-                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></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">
@@ -184,7 +204,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
         <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 pr-9 text-primary text-sm">
+              <p className="truncate w-full text-primary text-sm">
                 {unescapeString(link.name)}
               </p>
             )}
@@ -209,11 +229,14 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
         </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}
-        position={clsx(show.image ? "top-[10.75rem]" : "top-3", "right-3")}
-        flipDropdown={flipDropdown}
+        className={
+          "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+        }
       />
     </div>
   );