replaced link outer component with <Link> tag for better accessibility

components/LinkViews/LinkCard.tsx

@@ -80,6 +80,11 @@ export default function LinkGrid({ link, count, className }: Props) {
     <div
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
+    >
+      <Link
+        href={link.url || ""}
+        target="_blank"
+        className="rounded-2xl cursor-pointer"
       >
         <div className="relative rounded-t-2xl h-40 overflow-hidden">
           {previewAvailable(link) ? (
@@ -127,7 +132,7 @@ export default function LinkGrid({ link, count, className }: Props) {
             title={link.url || ""}
             className="w-fit"
           >
-          <div className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-60 duration-100">
+            <div className="flex gap-1 item-center select-none text-neutral mt-1">
               <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
               <p className="text-sm truncate">{shortendURL}</p>
             </div>
@@ -135,6 +140,7 @@ export default function LinkGrid({ link, count, className }: Props) {
         </div>
 
         <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
         <div className="flex justify-between text-xs text-neutral px-3 pb-1">
           <div className="cursor-pointer w-fit">
             {collection ? (
@@ -143,6 +149,7 @@ export default function LinkGrid({ link, count, className }: Props) {
           </div>
           <LinkDate link={link} />
         </div>
+      </Link>
 
       {showInfo ? (
         <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -17,7 +17,7 @@ export default function LinkCollection({
   return (
     <div
       onClick={(e) => {
-        e.stopPropagation();
+        e.preventDefault();
         router.push(`/collections/${link.collection.id}`);
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"

components/LinkViews/LinkList.tsx

@@ -55,8 +55,9 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           !showInfo ? "hover:bg-base-300" : ""
         } duration-200 rounded-lg`}
       >
-        <div
+        <Link
-          onClick={() => link.url && window.open(link.url || "", "_blank")}
+          href={link.url || ""}
+          target="_blank"
           className="flex items-center cursor-pointer py-3 px-3"
         >
           <div className="shrink-0">
@@ -91,7 +92,7 @@ export default function LinkCardCompact({ link, count, className }: Props) {
               <LinkDate link={link} />
             </div>
           </div>
-        </div>
+        </Link>
 
         <LinkActions
           link={link}

components/SettingsSidebar.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.4.5";
+  const LINKWARDEN_VERSION = "v2.4.6";
 
   const { collections } = useCollectionStore();
 

lib/api/controllers/dashboard/getDashboardData.ts

@@ -14,7 +14,7 @@ export default async function getDashboardData(
   else if (query.sort === Sort.DescriptionZA) order = { description: "desc" };
 
   const pinnedLinks = await prisma.link.findMany({
-    take: 6,
+    take: 8,
     where: {
       AND: [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",