Display checkbox on card & reset when collection is changed

components/LinkViews/LinkCard.tsx

@@ -24,13 +24,17 @@ type Props = {
   flipDropdown?: boolean;
 };
 
-export default function LinkGrid({
+export default function LinkCard({
   link,
   flipDropdown,
 }: Props) {
   const { collections } = useCollectionStore();
 
-  const { links, getLink } = useLinkStore();
+  const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const handleCheckboxClick = (checkboxId: number) => {
+    setSelectedLinks((selectedLinks.includes(checkboxId) ? selectedLinks.filter((id) => id !== checkboxId) : [...selectedLinks, checkboxId]));
+  };
 
   let shortendURL;
 
@@ -85,6 +89,12 @@ export default function LinkGrid({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
+      <input
+        type="checkbox"
+        className="checkbox checkbox-primary my-auto ml-3 mt-3 fixed z-50 bg-white"
+        checked={selectedLinks.includes(link.id)}
+        onChange={() => handleCheckboxClick(link.id)}
+      />
       <Link
         href={generateLinkHref(link)}
         target="_blank"

pages/collections/[id].tsx

@@ -24,7 +24,6 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
-import Link from "next/link";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 
 export default function Index() {
@@ -81,6 +80,9 @@ export default function Index() {
     };
 
     fetchOwner();
+
+    // When the collection changes, reset the selected links
+    setSelectedLinks([]);
   }, [activeCollection]);
 
   const [editCollectionModal, setEditCollectionModal] = useState(false);
@@ -294,9 +296,11 @@ export default function Index() {
               onChange={() => handleSelectAll()}
               checked={selectedLinks.length === links.length}
             />
-            {selectedLinks.length > 0 &&
+            {selectedLinks.length > 0 && (
-              <span>{selectedLinks.length} link selected</span>
+              <span>
-            }
+                {selectedLinks.length} {selectedLinks.length === 1 ? 'link' : 'links'} selected
+              </span>
+            )}
           </div>
           {selectedLinks.length > 0 && permissions &&
             <div className="flex gap-3">