Revert "undo commit"

This reverts commit 9103f67db5.

components/LinkViews/Links.tsx

@@ -3,7 +3,7 @@ import {
   LinkIncludingShortenedCollectionAndTags,
   ViewMode,
 } from "@/types/global";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import LinkMasonry from "@/components/LinkViews/LinkComponents/LinkMasonry";
 import Masonry from "react-masonry-css";
@@ -11,7 +11,6 @@ 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,
@@ -28,68 +27,16 @@ 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={`${gridColClass} grid gap-5 pb-5`}>
+    <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">
       {links?.map((e, i) => {
         return (
           <LinkCard
             key={i}
             link={e}
             count={i}
+            flipDropdown={i === links.length - 1}
             editMode={editMode}
-            columns={columnCount}
           />
         );
       })}
@@ -129,58 +76,6 @@ 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(() => {
@@ -195,19 +90,18 @@ export function MasonryView({
 
   return (
     <Masonry
-      breakpointCols={
-        settings.columns === 0 ? breakpointColumnsObj : columnCount
-      }
+      breakpointCols={breakpointColumnsObj}
       columnClassName="flex flex-col gap-5 !w-full"
-      className={`${gridColClass} grid gap-5 pb-5`}
+      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"
     >
       {links?.map((e, i) => {
         return (
           <LinkMasonry
             key={i}
             link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
             editMode={editMode}
-            columns={columnCount}
           />
         );
       })}
@@ -248,9 +142,17 @@ export function ListView({
   placeHolderRef?: any;
 }) {
   return (
-    <div className="flex flex-col">
+    <div className="flex gap-1 flex-col">
       {links?.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} editMode={editMode} />;
+        return (
+          <LinkList
+            key={i}
+            link={e}
+            count={i}
+            flipDropdown={i === links.length - 1}
+            editMode={editMode}
+          />
+        );
       })}
 
       {(hasNextPage || isLoading) &&
@@ -259,13 +161,13 @@ export function ListView({
             <div
               ref={e === 1 ? placeHolderRef : undefined}
               key={i}
-              className="flex gap-2 py-2 px-1"
+              className="flex gap-4 p-4"
             >
-              <div className="skeleton h-12 w-12"></div>
-              <div className="flex flex-col gap-3 w-full">
-                <div className="skeleton h-2 w-2/3"></div>
-                <div className="skeleton h-2 w-full"></div>
-                <div className="skeleton h-2 w-1/3"></div>
+              <div className="skeleton h-16 w-16"></div>
+              <div className="flex flex-col gap-4 w-full">
+                <div className="skeleton h-3 w-2/3"></div>
+                <div className="skeleton h-3 w-full"></div>
+                <div className="skeleton h-3 w-1/3"></div>
               </div>
             </div>
           );