final polishing

components/LinkViews/LinkCard.tsx

@@ -27,11 +27,7 @@ type Props = {
   editMode?: boolean;
 };
 
-export default function LinkCard({
-  link,
-  flipDropdown,
-  editMode,
-}: Props) {
+export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
 
@@ -96,17 +92,21 @@ export default function LinkCard({
 
   const [showInfo, setShowInfo] = useState(false);
 
-  const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border-primary bg-base-300" : "border-neutral-content";
-  const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
-  const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
 
   return (
     <div
       ref={ref}
-      className={`${selectedStyle} ${hoverStyles} 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`}
       onClick={() => selectable && handleCheckboxClick(link)}
     >
-
       {!editMode ? (
         <>
           <Link
@@ -134,9 +134,7 @@ export default function LinkCard({
               ) : (
                 <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
               )}
-              <div
-                className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
-              >
+              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
                 <LinkIcon link={link} />
               </div>
             </div>
@@ -190,7 +188,9 @@ export default function LinkCard({
               </p>
               {link.tags[0] && (
                 <>
-                  <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+                  <p className="text-neutral text-lg mt-3 font-semibold">
+                    Tags
+                  </p>
 
                   <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
 
@@ -226,9 +226,7 @@ export default function LinkCard({
         </>
       ) : (
         <>
-          <div
-            className="rounded-2xl cursor-pointer"
-          >
+          <div className="rounded-2xl cursor-pointer">
             <div className="relative rounded-t-2xl h-40 overflow-hidden">
               {previewAvailable(link) ? (
                 <Image
@@ -249,9 +247,7 @@ export default function LinkCard({
               ) : (
                 <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
               )}
-              <div
-                className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
-              >
+              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
                 <LinkIcon link={link} />
               </div>
             </div>
@@ -305,7 +301,9 @@ export default function LinkCard({
               </p>
               {link.tags[0] && (
                 <>
-                  <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
+                  <p className="text-neutral text-lg mt-3 font-semibold">
+                    Tags
+                  </p>
 
                   <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
 

components/LinkViews/LinkList.tsx

@@ -76,17 +76,21 @@ export default function LinkCardCompact({
 
   const [showInfo, setShowInfo] = useState(false);
 
-  const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border border-primary bg-base-300" : "border-transparent";
-  const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
-  const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border border-primary bg-base-300"
+    : "border-transparent";
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
 
   return (
     <>
       <div
-        className={`${selectedStyle} ${hoverStyles} border relative items-center flex ${!showInfo && !isPWA()
-          ? "hover:bg-base-300 p-3"
-          : "py-3"
-          } duration-200 rounded-lg`}
+        className={`${selectedStyle} border relative items-center flex ${
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+        } duration-200 rounded-lg`}
         onClick={() => selectable && handleCheckboxClick(link)}
       >
         {/* {showCheckbox &&
@@ -144,13 +148,15 @@ export default function LinkCardCompact({
               collection={collection}
               position="top-3 right-3"
               flipDropdown={flipDropdown}
-            // toggleShowInfo={() => setShowInfo(!showInfo)}
-            // linkInfo={showInfo}
+              // toggleShowInfo={() => setShowInfo(!showInfo)}
+              // linkInfo={showInfo}
             />
             {showInfo && (
               <div>
                 <div className="pb-3 mt-1 px-3">
-                  <p className="text-neutral text-lg font-semibold">Description</p>
+                  <p className="text-neutral text-lg font-semibold">
+                    Description
+                  </p>
 
                   <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
                   <p>
@@ -192,51 +198,50 @@ export default function LinkCardCompact({
               </div>
             )}
           </>
-        ) :
-          (
-            <>
-              <div
-                className="flex items-center cursor-pointer"
-              >
-                <div className="shrink-0">
-                  <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
-                </div>
+        ) : (
+          <>
+            <div className="flex items-center cursor-pointer">
+              <div className="shrink-0">
+                <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
+              </div>
 
-                <div className="w-[calc(100%-56px)] ml-2">
-                  <p className="line-clamp-1 mr-8 text-primary select-none">
-                    {unescapeString(link.name || link.description) || link.url}
-                  </p>
+              <div className="w-[calc(100%-56px)] ml-2">
+                <p className="line-clamp-1 mr-8 text-primary select-none">
+                  {unescapeString(link.name || link.description) || link.url}
+                </p>
 
-                  <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
-                    <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
-                      {collection ? (
-                        <LinkCollection link={link} collection={collection} />
-                      ) : undefined}
-                      {link.url ? (
-                        <div className="flex items-center gap-1 w-fit text-neutral truncate">
-                          <i className="bi-link-45deg text-lg" />
-                          <p className="truncate w-full select-none">{shortendURL}</p>
-                        </div>
-                      ) : (
-                        <div className="badge badge-primary badge-sm my-1 select-none">
-                          {link.type}
-                        </div>
-                      )}
-                      <LinkDate link={link} />
-                    </div>
+                <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+                  <div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
+                    {collection ? (
+                      <LinkCollection link={link} collection={collection} />
+                    ) : undefined}
+                    {link.url ? (
+                      <div className="flex items-center gap-1 w-fit text-neutral truncate">
+                        <i className="bi-link-45deg text-lg" />
+                        <p className="truncate w-full select-none">
+                          {shortendURL}
+                        </p>
+                      </div>
+                    ) : (
+                      <div className="badge badge-primary badge-sm my-1 select-none">
+                        {link.type}
+                      </div>
+                    )}
+                    <LinkDate link={link} />
                   </div>
                 </div>
               </div>
-              <LinkActions
-                link={link}
-                collection={collection}
-                position="top-3 right-3"
-                flipDropdown={flipDropdown}
+            </div>
+            <LinkActions
+              link={link}
+              collection={collection}
+              position="top-3 right-3"
+              flipDropdown={flipDropdown}
               // toggleShowInfo={() => setShowInfo(!showInfo)}
               // linkInfo={showInfo}
-              />
-            </>
-          )}
+            />
+          </>
+        )}
       </div>
       <div className="divider my-0 last:hidden h-[1px]"></div>
     </>

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -23,15 +23,16 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
 
     toast.dismiss(load);
 
-    response.ok &&
+    if (response.ok) {
       toast.success(
         `Deleted ${selectedLinks.length} Link${
           selectedLinks.length > 1 ? "s" : ""
         }`
       );
 
-    setSelectedLinks([]);
-    onClose();
+      setSelectedLinks([]);
+      onClose();
+    } else toast.error(response.data as string);
   };
 
   return (

components/ModalContent/BulkEditLinksModal.tsx

@@ -44,24 +44,25 @@ export default function BulkEditLinksModal({ onClose }: Props) {
 
       if (response.ok) {
         toast.success(`Updated!`);
+        setSelectedLinks([]);
         onClose();
       } else toast.error(response.data as string);
 
-      setSelectedLinks([]);
       setSubmitLoader(false);
-      onClose();
       return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Edit Link</p>
+      <p className="text-xl font-thin">
+        Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+      </p>
       <div className="divider mb-3 mt-1"></div>
       <div className="mt-5">
         <div className="grid sm:grid-cols-2 gap-3">
           <div>
-            <p className="mb-2">Collection</p>
+            <p className="mb-2">Move to Collection</p>
             <CollectionSelection
               showDefaultValue={false}
               onChange={setCollection}
@@ -69,12 +70,12 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           </div>
 
           <div>
-            <p className="mb-2">Tags</p>
+            <p className="mb-2">Add Tags</p>
             <TagSelection onChange={setTags} />
           </div>
         </div>
-        <div className="mt-3">
-          <label className="flex items-center gap-2">
+        <div className="ml-auto w-1/2 p-3">
+          <label className="flex items-center gap-2 ">
             <input
               type="checkbox"
               className="checkbox checkbox-primary"