refactor to use a single Link element in the LeafletListItem

app/(home-pages)/home/LeafletList/LeafletInfo.tsx

···
       className={`leafletInfo w-full min-w-0 flex flex-col ${props.className}`}
     >
       <div className="flex justify-between items-center shrink-0 max-w-full gap-2 leading-tight overflow-hidden">
-        <Link
-          onMouseEnter={() => setPrefetch(true)}
-          onPointerDown={() => setPrefetch(true)}
-          prefetch={prefetch}
-          href={`/${props.token.id}`}
-          className="no-underline sm:hover:no-underline text-primary grow min-w-0"
-        >
-          <h3 className="sm:text-lg text-base truncate w-full min-w-0">
-            {props.title}
-          </h3>
-        </Link>
+        <h3 className="sm:text-lg text-base truncate w-full min-w-0">
+          {props.title}
+        </h3>
         <div className="flex gap-1 shrink-0">
           {props.isTemplate && props.display === "list" ? (
             <TemplateSmall
···
           />
         </div>
       </div>
-      <Link
-        onMouseEnter={() => setPrefetch(true)}
-        onPointerDown={() => setPrefetch(true)}
-        prefetch={prefetch}
-        href={`/${props.token.id}`}
-        className="no-underline sm:hover:no-underline text-primary w-full"
-      >
-        {props.draft || props.published ? (
-          <div
-            className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
-          >
-            {props.published
-              ? `Published ${prettyPublishedAt}`
-              : `Draft ${prettyCreatedAt}`}
-          </div>
-        ) : (
-          <div className="text-xs text-tertiary">{prettyCreatedAt}</div>
-        )}
-        {props.archived && (
-          <div className="text-xs text-tertiary">archived</div>
-        )}
-      </Link>
+      {props.draft || props.published ? (
+        <div
+          className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
+        >
+          {props.published
+            ? `Published ${prettyPublishedAt}`
+            : `Draft ${prettyCreatedAt}`}
+        </div>
+      ) : (
+        <div className="text-xs text-tertiary">{prettyCreatedAt}</div>
+      )}
+      {props.archived && <div className="text-xs text-tertiary">archived</div>}
       {props.isTemplate && props.display === "grid" ? (
         <div className="absolute -top-2 right-1">
           <TemplateSmall

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

···
 import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview";
 import { LeafletInfo } from "./LeafletInfo";
 import { useState, useRef, useEffect } from "react";
+import { SpeedyLink } from "components/SpeedyLink";
 
 export const LeafletListItem = (props: {
   token: PermissionToken;
···
   if (props.display === "list")
     return (
       <>
-        <div
-          ref={previewRef}
-          className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border"}`}
-          style={{
-            backgroundColor: props.cardBorderHidden
-              ? "transparent"
-              : "rgba(var(--bg-page), var(--bg-page-alpha))",
+        <LeafletLink id={props.token.id}>
+          <div
+            ref={previewRef}
+            className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`}
+            style={{
+              backgroundColor: props.cardBorderHidden
+                ? "transparent"
+                : "rgba(var(--bg-page), var(--bg-page-alpha))",
 
-            display: props.isHidden ? "none" : "flex",
-          }}
-        >
-          {props.showPreview && (
-            <LeafletListPreview isVisible={isOnScreen} {...props} />
-          )}
-          <LeafletInfo isTemplate={isTemplate} {...props} />
-        </div>
+              display: props.isHidden ? "none" : "flex",
+            }}
+          >
+            {props.showPreview && (
+              <LeafletListPreview isVisible={isOnScreen} {...props} />
+            )}
+            <LeafletInfo isTemplate={isTemplate} {...props} />
+          </div>
+        </LeafletLink>
         {props.cardBorderHidden && (
           <hr
             className="last:hidden border-border-light"
···
       </>
     );
   return (
-    <div
-      ref={previewRef}
-      className={`leafletGridListItem relative
+    <LeafletLink id={props.token.id}>
+      <div
+        ref={previewRef}
+        className={`leafletGridListItem relative
         flex flex-col gap-1 p-1 h-52
        block-border border-border! hover:outline-border
         `}
-      style={{
-        backgroundColor: props.cardBorderHidden
-          ? "transparent"
-          : "rgba(var(--bg-page), var(--bg-page-alpha))",
+        style={{
+          backgroundColor: props.cardBorderHidden
+            ? "transparent"
+            : "rgba(var(--bg-page), var(--bg-page-alpha))",
+
+          display: props.isHidden ? "none" : "flex",
+        }}
+      >
+        <div className="grow">
+          <LeafletGridPreview {...props} isVisible={isOnScreen} />
+        </div>
+        <LeafletInfo
+          isTemplate={isTemplate}
+          className="px-1 pb-0.5 shrink-0"
+          {...props}
+        />
+      </div>
+    </LeafletLink>
+  );
+};
 
-        display: props.isHidden ? "none" : "flex",
-      }}
+const LeafletLink = (props: { id: string; children: React.ReactNode }) => {
+  return (
+    <SpeedyLink
+      href={`/${props.id}`}
+      className={`no-underline hover:no-underline! text-primary`}
     >
-      <div className="grow">
-        <LeafletGridPreview {...props} isVisible={isOnScreen} />
-      </div>
-      <LeafletInfo
-        isTemplate={isTemplate}
-        className="px-1 pb-0.5 shrink-0"
-        {...props}
-      />
-    </div>
+      {props.children}
+    </SpeedyLink>
   );
 };

app/(home-pages)/home/LeafletList/LeafletOptions.tsx

···
         }}
         trigger={
           <div
-            className="text-secondary shrink-0"
+            className="text-secondary shrink-0 relative"
             onClick={(e) => {
               e.preventDefault;
               e.stopPropagation;

app/(home-pages)/home/LeafletList/LeafletPreview.tsx

···
   useEntity,
   useReferenceToEntity,
 } from "src/replicache";
-import { useTemplateState } from "../Actions/CreateNewButton";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { LeafletContent } from "./LeafletContent";
 import { Tooltip } from "components/Tooltip";
-import { useState } from "react";
-import Link from "next/link";
-import { SpeedyLink } from "components/SpeedyLink";
 
 export const LeafletListPreview = (props: {
   draft?: boolean;
···
             </div>
           </ThemeBackgroundProvider>
         </div>
-        <LeafletPreviewLink id={props.token.id} />
       </div>
     </ThemeProvider>
   );
 };
-
-const LeafletPreviewLink = (props: { id: string }) => {
-  return (
-    <SpeedyLink
-      href={`/${props.id}`}
-      className={`hello no-underline sm:hover:no-underline text-primary absolute inset-0 w-full h-full bg-bg-test`}
-    />
-  );
-};