tab-seperated modals + eslint fix + much more bug fixed and improvements

components/Dashboard/CollectionItem.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
 
-export default function ({
+export default function CollectionItem({
   collection,
 }: {
   collection: CollectionIncludingMembers;

components/Dashboard/LinkItem.tsx

@@ -19,7 +19,7 @@ type Props = {
   count: number;
 };
 
-export default function ({ link, count }: Props) {
+export default function LinkItem({ link, count }: Props) {
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [editModal, setEditModal] = useState(false);
 
@@ -102,7 +102,12 @@ export default function ({ link, count }: Props) {
           </div>
           <div className="flex gap-2 items-center flex-wrap">
             <p className="text-gray-500">{formattedDate}</p>
-            <a href={link.url} target="_blank" className="group/url">
+            <a
+              href={link.url}
+              target="_blank"
+              rel="noreferrer"
+              className="group/url"
+            >
               <div className="text-gray-500 font-bold flex items-center gap-1">
                 <p>{url.host}</p>
                 <FontAwesomeIcon
@@ -134,6 +139,7 @@ export default function ({ link, count }: Props) {
                   link.screenshotPath
                 )}`}
                 target="_blank"
+                rel="noreferrer"
                 title="Screenshot"
               >
                 <FontAwesomeIcon
@@ -146,6 +152,7 @@ export default function ({ link, count }: Props) {
                   link.pdfPath
                 )}`}
                 target="_blank"
+                rel="noreferrer"
                 title="PDF"
               >
                 <FontAwesomeIcon