Added selectedLinks to store & checkbox on list view

components/LinkViews/LinkList.tsx

@@ -26,7 +26,11 @@ export default function LinkCardCompact({
   flipDropdown,
 }: Props) {
   const { collections } = useCollectionStore();
-  const { links } = useLinkStore();
+  const { links, setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const handleCheckboxClick = (checkboxId: number) => {
+    setSelectedLinks((selectedLinks.includes(checkboxId) ? selectedLinks.filter((id) => id !== checkboxId) : [...selectedLinks, checkboxId]));
+  };
 
   let shortendURL;
 
@@ -56,9 +60,15 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`border-neutral-content relative ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+        className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
           } duration-200 rounded-lg`}
       >
+        <input
+          type="checkbox"
+          className="checkbox checkbox-primary my-auto mr-2"
+          checked={selectedLinks.includes(link.id)}
+          onChange={() => handleCheckboxClick(link.id)}
+        />
         <Link
           href={generateLinkHref(link)}
           target="_blank"

store/links.ts

@@ -10,10 +10,12 @@ type ResponseObject = {
 
 type LinkStore = {
   links: LinkIncludingShortenedCollectionAndTags[];
+  selectedLinks: number[];
   setLinks: (
     data: LinkIncludingShortenedCollectionAndTags[],
     isInitialCall: boolean
   ) => void;
+  setSelectedLinks: (linkIds: number[]) => void;
   addLink: (
     body: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
@@ -27,6 +29,7 @@ type LinkStore = {
 
 const useLinkStore = create<LinkStore>()((set) => ({
   links: [],
+  selectedLinks: [],
   setLinks: async (data, isInitialCall) => {
     isInitialCall &&
       set(() => ({
@@ -45,6 +48,7 @@ const useLinkStore = create<LinkStore>()((set) => ({
       ),
     }));
   },
+  setSelectedLinks: (linkIds) => set({ selectedLinks: linkIds }),
   addLink: async (body) => {
     const response = await fetch("/api/v1/links", {
       body: JSON.stringify(body),

store/localSettings.ts

@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { ViewMode } from "@/types/global";
 
 type LocalSettings = {
   theme?: string;

types/global.ts

@@ -9,7 +9,7 @@ export interface LinkIncludingShortenedCollectionAndTags
     Link,
     "id" | "createdAt" | "collectionId" | "updatedAt" | "lastPreserved"
   > {
-  id?: number;
+  id: number;
   createdAt?: string;
   collectionId?: number;
   tags: Tag[];