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

components/LinkViews/Links.tsx

@@ -3,7 +3,7 @@ import {
   LinkIncludingShortenedCollectionAndTags,
   ViewMode,
 } from "@/types/global";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import LinkMasonry from "@/components/LinkViews/LinkComponents/LinkMasonry";
 import Masonry from "react-masonry-css";
@@ -11,6 +11,7 @@ import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "../../tailwind.config.js";
 import { useMemo } from "react";
 import LinkList from "@/components/LinkViews/LinkComponents/LinkList";
+import useLocalSettingsStore from "@/store/localSettings";
 
 export function CardView({
   links,
@@ -27,16 +28,68 @@ export function CardView({
   hasNextPage?: boolean;
   placeHolderRef?: any;
 }) {
+  const settings = useLocalSettingsStore((state) => state.settings);
+
+  const gridMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+  };
+
+  const getColumnCount = () => {
+    const width = window.innerWidth;
+    if (width >= 1901) return 5;
+    if (width >= 1501) return 4;
+    if (width >= 881) return 3;
+    if (width >= 551) return 2;
+    return 1;
+  };
+
+  const [columnCount, setColumnCount] = useState(
+    settings.columns || getColumnCount()
+  );
+
+  const gridColClass = useMemo(
+    () => gridMap[columnCount as keyof typeof gridMap],
+    [columnCount]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (settings.columns === 0) {
+        // Only recalculate if zustandColumns is zero
+        setColumnCount(getColumnCount());
+      }
+    };
+
+    if (settings.columns === 0) {
+      window.addEventListener("resize", handleResize);
+    }
+
+    setColumnCount(settings.columns || getColumnCount());
+
+    return () => {
+      if (settings.columns === 0) {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [settings.columns]);
+
   return (
-    <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
+    <div className={`${gridColClass} grid gap-5 pb-5`}>
       {links?.map((e, i) => {
         return (
           <LinkCard
             key={i}
             link={e}
             count={i}
-            flipDropdown={i === links.length - 1}
             editMode={editMode}
+            columns={columnCount}
           />
         );
       })}
@@ -76,6 +129,58 @@ export function MasonryView({
   hasNextPage?: boolean;
   placeHolderRef?: any;
 }) {
+  const settings = useLocalSettingsStore((state) => state.settings);
+
+  const gridMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+  };
+
+  const getColumnCount = () => {
+    const width = window.innerWidth;
+    if (width >= 1901) return 5;
+    if (width >= 1501) return 4;
+    if (width >= 881) return 3;
+    if (width >= 551) return 2;
+    return 1;
+  };
+
+  const [columnCount, setColumnCount] = useState(
+    settings.columns || getColumnCount()
+  );
+
+  const gridColClass = useMemo(
+    () => gridMap[columnCount as keyof typeof gridMap],
+    [columnCount]
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (settings.columns === 0) {
+        // Only recalculate if zustandColumns is zero
+        setColumnCount(getColumnCount());
+      }
+    };
+
+    if (settings.columns === 0) {
+      window.addEventListener("resize", handleResize);
+    }
+
+    setColumnCount(settings.columns || getColumnCount());
+
+    return () => {
+      if (settings.columns === 0) {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [settings.columns]);
+
   const fullConfig = resolveConfig(tailwindConfig as any);
 
   const breakpointColumnsObj = useMemo(() => {
@@ -90,18 +195,19 @@ export function MasonryView({
 
   return (
     <Masonry
-      breakpointCols={breakpointColumnsObj}
+      breakpointCols={
+        settings.columns === 0 ? breakpointColumnsObj : columnCount
+      }
       columnClassName="flex flex-col gap-5 !w-full"
-      className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5"
+      className={`${gridColClass} grid gap-5 pb-5`}
     >
       {links?.map((e, i) => {
         return (
           <LinkMasonry
             key={i}
             link={e}
-            count={i}
-            flipDropdown={i === links.length - 1}
             editMode={editMode}
+            columns={columnCount}
           />
         );
       })}
@@ -144,15 +250,7 @@ export function ListView({
   return (
     <div className="flex flex-col">
       {links?.map((e, i) => {
-        return (
-          <LinkList
-            key={i}
-            link={e}
-            count={i}
-            flipDropdown={i === links.length - 1}
-            editMode={editMode}
-          />
-        );
+        return <LinkList key={i} link={e} count={i} editMode={editMode} />;
       })}
 
       {(hasNextPage || isLoading) &&