From 155c77cbc4c26db54cc6e15e0504e4220651cfe3 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 13 Feb 2024 05:54:18 -0500
Subject: [PATCH] final polishing

---
 components/LinkViews/LinkCard.tsx             |  40 ++++---
 components/LinkViews/LinkList.tsx             | 101 +++++++++---------
 .../ModalContent/BulkDeleteLinksModal.tsx     |   7 +-
 .../ModalContent/BulkEditLinksModal.tsx       |  15 +--
 pages/collections/[id].tsx                    |  93 ++++++++--------
 pages/links/index.tsx                         |  65 +++++------
 pages/links/pinned.tsx                        |  65 ++++++-----
 pages/tags/[id].tsx                           |  84 +++++++--------
 8 files changed, 239 insertions(+), 231 deletions(-)

diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index d5f6ada..3cbaf25 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/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]" />
 
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index f359a2b..9ea11e5 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/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>
     </>
diff --git a/components/ModalContent/BulkDeleteLinksModal.tsx b/components/ModalContent/BulkDeleteLinksModal.tsx
index 3d76c4e..6de26cd 100644
--- a/components/ModalContent/BulkDeleteLinksModal.tsx
+++ b/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 (
diff --git a/components/ModalContent/BulkEditLinksModal.tsx b/components/ModalContent/BulkEditLinksModal.tsx
index 7192a2b..e552746 100644
--- a/components/ModalContent/BulkEditLinksModal.tsx
+++ b/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"
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index e8c9dc0..284c088 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -121,7 +121,8 @@ export default function Index() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -133,7 +134,8 @@ export default function Index() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -143,8 +145,9 @@ export default function Index() {
       <div
         className="h-[60rem] p-5 flex gap-3 flex-col"
         style={{
-          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
-            } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
+            settings.theme === "dark" ? "#262626" : "#f3f4f6"
+          } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
         }}
       >
         {activeCollection && (
@@ -309,21 +312,25 @@ export default function Index() {
         <div className="flex justify-between items-center gap-5">
           <p>Showing {activeCollection?._count?.links} results</p>
           <div className="flex items-center gap-2">
-            {links.length > 0 && (permissions === true || permissions?.canUpdate || permissions?.canDelete) && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${editMode
-                  ? "bg-primary/20 hover:bg-primary/20"
-                  : "hover:bg-neutral/20"
+            {links.length > 0 &&
+              (permissions === true ||
+                permissions?.canUpdate ||
+                permissions?.canDelete) && (
+                <div
+                  role="button"
+                  onClick={() => {
+                    setEditMode(!editMode);
+                    setSelectedLinks([]);
+                  }}
+                  className={`btn btn-square btn-sm btn-ghost ${
+                    editMode
+                      ? "bg-primary/20 hover:bg-primary/20"
+                      : "hover:bg-neutral/20"
                   }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
+                >
+                  <i className="bi-pencil-fill text-neutral text-xl"></i>
+                </div>
+              )}
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
@@ -352,31 +359,29 @@ export default function Index() {
               </div>
             )}
             <div className="flex gap-3">
-              {(permissions === true ||
-                permissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Edit
-                  </button>
-                )}
-              {(permissions === true ||
-                permissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Delete
-                  </button>
-                )}
+              {(permissions === true || permissions?.canUpdate) && (
+                <button
+                  onClick={() => setBulkEditLinksModal(true)}
+                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Edit
+                </button>
+              )}
+              {(permissions === true || permissions?.canDelete) && (
+                <button
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? bulkDeleteLinks()
+                      : setBulkDeleteLinksModal(true);
+                  }}
+                  className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Delete
+                </button>
+              )}
             </div>
           </div>
         )}
@@ -422,7 +427,6 @@ export default function Index() {
             <BulkDeleteLinksModal
               onClose={() => {
                 setBulkDeleteLinksModal(false);
-                setEditMode(false);
               }}
             />
           )}
@@ -430,7 +434,6 @@ export default function Index() {
             <BulkEditLinksModal
               onClose={() => {
                 setBulkEditLinksModal(false);
-                setEditMode(false);
               }}
             />
           )}
diff --git a/pages/links/index.tsx b/pages/links/index.tsx
index 6ca4b99..3f5aadc 100644
--- a/pages/links/index.tsx
+++ b/pages/links/index.tsx
@@ -28,7 +28,7 @@ export default function Links() {
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const collectivePermissions = useCollectivePermissions(
-    links.map((link) => link.collectionId as number)
+    selectedLinks.map((link) => link.collectionId as number)
   );
 
   useLinks({ sort: sortBy });
@@ -43,7 +43,8 @@ export default function Links() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -55,7 +56,8 @@ export default function Links() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -69,7 +71,7 @@ export default function Links() {
   // @ts-ignore
   const LinkComponent = linkView[viewMode];
 
-  console.log(collectivePermissions)
+  console.log(collectivePermissions);
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
@@ -81,17 +83,18 @@ export default function Links() {
           />
 
           <div className="mt-2 flex items-center justify-end gap-2">
-            {links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
+            {links.length > 0 && (
               <div
                 role="button"
                 onClick={() => {
                   setEditMode(!editMode);
                   setSelectedLinks([]);
                 }}
-                className={`btn btn-square btn-sm btn-ghost ${editMode
-                  ? "bg-primary/20 hover:bg-primary/20"
-                  : "hover:bg-neutral/20"
-                  }`}
+                className={`btn btn-square btn-sm btn-ghost ${
+                  editMode
+                    ? "bg-primary/20 hover:bg-primary/20"
+                    : "hover:bg-neutral/20"
+                }`}
               >
                 <i className="bi-pencil-fill text-neutral text-xl"></i>
               </div>
@@ -126,29 +129,29 @@ export default function Links() {
             <div className="flex gap-3">
               {(collectivePermissions === true ||
                 collectivePermissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Edit
-                  </button>
-                )}
+                <button
+                  onClick={() => setBulkEditLinksModal(true)}
+                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Edit
+                </button>
+              )}
               {(collectivePermissions === true ||
                 collectivePermissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Delete
-                  </button>
-                )}
+                <button
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? bulkDeleteLinks()
+                      : setBulkDeleteLinksModal(true);
+                  }}
+                  className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Delete
+                </button>
+              )}
             </div>
           </div>
         )}
@@ -163,7 +166,6 @@ export default function Links() {
         <BulkDeleteLinksModal
           onClose={() => {
             setBulkDeleteLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}
@@ -171,7 +173,6 @@ export default function Links() {
         <BulkEditLinksModal
           onClose={() => {
             setBulkEditLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}
diff --git a/pages/links/pinned.tsx b/pages/links/pinned.tsx
index 4243e03..c9d285d 100644
--- a/pages/links/pinned.tsx
+++ b/pages/links/pinned.tsx
@@ -29,11 +29,9 @@ export default function PinnedLinks() {
   const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
   const [editMode, setEditMode] = useState(false);
   const collectivePermissions = useCollectivePermissions(
-    links.map((link) => link.collectionId as number)
+    selectedLinks.map((link) => link.collectionId as number)
   );
 
-  useLinks({ sort: sortBy });
-
   const handleSelectAll = () => {
     if (selectedLinks.length === links.length) {
       setSelectedLinks([]);
@@ -44,7 +42,8 @@ export default function PinnedLinks() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -56,7 +55,8 @@ export default function PinnedLinks() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -80,17 +80,18 @@ export default function PinnedLinks() {
             description={"Pinned Links from your Collections"}
           />
           <div className="mt-2 flex items-center justify-end gap-2">
-            {links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
+            {!(links.length === 0) && (
               <div
                 role="button"
                 onClick={() => {
                   setEditMode(!editMode);
                   setSelectedLinks([]);
                 }}
-                className={`btn btn-square btn-sm btn-ghost ${editMode
-                  ? "bg-primary/20 hover:bg-primary/20"
-                  : "hover:bg-neutral/20"
-                  }`}
+                className={`btn btn-square btn-sm btn-ghost ${
+                  editMode
+                    ? "bg-primary/20 hover:bg-primary/20"
+                    : "hover:bg-neutral/20"
+                }`}
               >
                 <i className="bi-pencil-fill text-neutral text-xl"></i>
               </div>
@@ -125,29 +126,29 @@ export default function PinnedLinks() {
             <div className="flex gap-3">
               {(collectivePermissions === true ||
                 collectivePermissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Edit
-                  </button>
-                )}
+                <button
+                  onClick={() => setBulkEditLinksModal(true)}
+                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Edit
+                </button>
+              )}
               {(collectivePermissions === true ||
                 collectivePermissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Delete
-                  </button>
-                )}
+                <button
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? bulkDeleteLinks()
+                      : setBulkDeleteLinksModal(true);
+                  }}
+                  className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Delete
+                </button>
+              )}
             </div>
           </div>
         )}
@@ -174,7 +175,6 @@ export default function PinnedLinks() {
         <BulkDeleteLinksModal
           onClose={() => {
             setBulkDeleteLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}
@@ -182,7 +182,6 @@ export default function PinnedLinks() {
         <BulkEditLinksModal
           onClose={() => {
             setBulkEditLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}
diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx
index 07da802..5e6c7d4 100644
--- a/pages/tags/[id].tsx
+++ b/pages/tags/[id].tsx
@@ -119,7 +119,8 @@ export default function Index() {
 
   const bulkDeleteLinks = async () => {
     const load = toast.loading(
-      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
       }...`
     );
 
@@ -131,7 +132,8 @@ export default function Index() {
 
     response.ok &&
       toast.success(
-        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
         }!`
       );
   };
@@ -190,10 +192,11 @@ export default function Index() {
                   </p>
                   <div className="relative">
                     <div
-                      className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
-                        ? "dropdown-end"
-                        : ""
-                        }`}
+                      className={`dropdown dropdown-bottom font-normal ${
+                        activeTag?.name.length && activeTag?.name.length > 8
+                          ? "dropdown-end"
+                          : ""
+                      }`}
                     >
                       <div
                         tabIndex={0}
@@ -239,21 +242,20 @@ export default function Index() {
           </div>
 
           <div className="flex gap-2 items-center mt-2">
-            {links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
-              <div
-                role="button"
-                onClick={() => {
-                  setEditMode(!editMode);
-                  setSelectedLinks([]);
-                }}
-                className={`btn btn-square btn-sm btn-ghost ${editMode
+            <div
+              role="button"
+              onClick={() => {
+                setEditMode(!editMode);
+                setSelectedLinks([]);
+              }}
+              className={`btn btn-square btn-sm btn-ghost ${
+                editMode
                   ? "bg-primary/20 hover:bg-primary/20"
                   : "hover:bg-neutral/20"
-                  }`}
-              >
-                <i className="bi-pencil-fill text-neutral text-xl"></i>
-              </div>
-            )}
+              }`}
+            >
+              <i className="bi-pencil-fill text-neutral text-xl"></i>
+            </div>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
@@ -283,29 +285,29 @@ export default function Index() {
             <div className="flex gap-3">
               {(collectivePermissions === true ||
                 collectivePermissions?.canUpdate) && (
-                  <button
-                    onClick={() => setBulkEditLinksModal(true)}
-                    className="btn btn-sm btn-accent text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Edit
-                  </button>
-                )}
+                <button
+                  onClick={() => setBulkEditLinksModal(true)}
+                  className="btn btn-sm btn-accent text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Edit
+                </button>
+              )}
               {(collectivePermissions === true ||
                 collectivePermissions?.canDelete) && (
-                  <button
-                    onClick={(e) => {
-                      (document?.activeElement as HTMLElement)?.blur();
-                      e.shiftKey
-                        ? bulkDeleteLinks()
-                        : setBulkDeleteLinksModal(true);
-                    }}
-                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
-                    disabled={selectedLinks.length === 0}
-                  >
-                    Delete
-                  </button>
-                )}
+                <button
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey
+                      ? bulkDeleteLinks()
+                      : setBulkDeleteLinksModal(true);
+                  }}
+                  className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  disabled={selectedLinks.length === 0}
+                >
+                  Delete
+                </button>
+              )}
             </div>
           </div>
         )}
@@ -320,7 +322,6 @@ export default function Index() {
         <BulkDeleteLinksModal
           onClose={() => {
             setBulkDeleteLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}
@@ -328,7 +329,6 @@ export default function Index() {
         <BulkEditLinksModal
           onClose={() => {
             setBulkEditLinksModal(false);
-            setEditMode(false);
           }}
         />
       )}