From cc915c8a64ba39a8c3909701749a82e1dbc1b929 Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Thu, 8 Feb 2024 00:42:58 -0600
Subject: [PATCH 1/4] Allow users to choose what clicking links opens

---
 components/LinkViews/LinkCard.tsx             |  6 +--
 components/LinkViews/LinkGrid.tsx             |  4 +-
 components/LinkViews/LinkList.tsx             | 16 +++---
 .../users/userId/updateUserById.ts            | 23 +++++----
 .../generateHrefBasedOnUserPreference .ts     | 20 ++++++++
 pages/settings/preference.tsx                 | 51 ++++++++++++++-----
 6 files changed, 82 insertions(+), 38 deletions(-)
 create mode 100644 lib/client/generateHrefBasedOnUserPreference .ts

diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index f61756e9..c60174c5 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -14,8 +14,8 @@ import Image from "next/image";
 import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 import Link from "next/link";
 import LinkIcon from "./LinkComponents/LinkIcon";
-import LinkGroupedIconURL from "./LinkComponents/LinkGroupedIconURL";
 import useOnScreen from "@/hooks/useOnScreen";
+import { generateHrefBasedOnUserPreference } from "@/lib/client/generateHrefBasedOnUserPreference ";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -26,8 +26,6 @@ type Props = {
 
 export default function LinkGrid({
   link,
-  count,
-  className,
   flipDropdown,
 }: Props) {
   const { collections } = useCollectionStore();
@@ -88,7 +86,7 @@ export default function LinkGrid({
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
       <Link
-        href={link.url || ""}
+        href={generateHrefBasedOnUserPreference(link)}
         target="_blank"
         className="rounded-2xl cursor-pointer"
       >
diff --git a/components/LinkViews/LinkGrid.tsx b/components/LinkViews/LinkGrid.tsx
index a9c43442..505b7fd1 100644
--- a/components/LinkViews/LinkGrid.tsx
+++ b/components/LinkViews/LinkGrid.tsx
@@ -18,7 +18,7 @@ type Props = {
   className?: string;
 };
 
-export default function LinkGrid({ link, count, className }: Props) {
+export default function LinkGrid({ link }: Props) {
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -101,7 +101,7 @@ export default function LinkGrid({ link, count, className }: Props) {
       </div>
 
       <LinkActions
-        toggleShowInfo={() => {}}
+        toggleShowInfo={() => { }}
         linkInfo={false}
         link={link}
         collection={collection}
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index ee982336..92115ce1 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -1,4 +1,5 @@
 import {
+  ArchivedFormat,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
@@ -12,6 +13,7 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
 import { isPWA } from "@/lib/client/utils";
+import { generateLinkHrefBasedOnUserPreference } from "@/lib/client/generateHrefBasedOnUserPreference ";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -22,12 +24,9 @@ type Props = {
 
 export default function LinkCardCompact({
   link,
-  count,
-  className,
   flipDropdown,
 }: Props) {
   const { collections } = useCollectionStore();
-
   const { links } = useLinkStore();
 
   let shortendURL;
@@ -58,12 +57,11 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`border-neutral-content relative ${
-          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        className={`border-neutral-content relative ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+          } duration-200 rounded-lg`}
       >
         <Link
-          href={link.url || ""}
+          href={generateLinkHrefBasedOnUserPreference(link)}
           target="_blank"
           className="flex items-start cursor-pointer"
         >
@@ -102,8 +100,8 @@ 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>
diff --git a/lib/api/controllers/users/userId/updateUserById.ts b/lib/api/controllers/users/userId/updateUserById.ts
index 285e44e5..162f2460 100644
--- a/lib/api/controllers/users/userId/updateUserById.ts
+++ b/lib/api/controllers/users/userId/updateUserById.ts
@@ -97,18 +97,18 @@ export default async function updateUserById(
         id: { not: userId },
         OR: emailEnabled
           ? [
-              {
-                username: data.username.toLowerCase(),
-              },
-              {
-                email: data.email?.toLowerCase(),
-              },
-            ]
+            {
+              username: data.username.toLowerCase(),
+            },
+            {
+              email: data.email?.toLowerCase(),
+            },
+          ]
           : [
-              {
-                username: data.username.toLowerCase(),
-              },
-            ],
+            {
+              username: data.username.toLowerCase(),
+            },
+          ],
       },
     });
 
@@ -186,6 +186,7 @@ export default async function updateUserById(
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
+      linksRouteTo: data.linksRouteTo,
       password:
         data.newPassword && data.newPassword !== ""
           ? newHashedPassword
diff --git a/lib/client/generateHrefBasedOnUserPreference .ts b/lib/client/generateHrefBasedOnUserPreference .ts
new file mode 100644
index 00000000..10ef13bd
--- /dev/null
+++ b/lib/client/generateHrefBasedOnUserPreference .ts	
@@ -0,0 +1,20 @@
+import useAccountStore from "@/store/account";
+import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { LinksRouteTo } from "@prisma/client";
+
+export const generateLinkHrefBasedOnUserPreference = (link: LinkIncludingShortenedCollectionAndTags): string => {
+	const { account } = useAccountStore();
+
+	switch (account.linksRouteTo) {
+		case LinksRouteTo.ORIGINAL:
+			return link.url || '';
+		case LinksRouteTo.PDF:
+			return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
+		case LinksRouteTo.READABLE:
+			return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
+		case LinksRouteTo.SCREENSHOT:
+			return `/preserved/${link?.id}?format=${link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg}`;
+		default:
+			return link.url || '';
+	}
+};
\ No newline at end of file
diff --git a/pages/settings/preference.tsx b/pages/settings/preference.tsx
index ed6cc02c..a92f6aed 100644
--- a/pages/settings/preference.tsx
+++ b/pages/settings/preference.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import useLocalSettingsStore from "@/store/localSettings";
 import Checkbox from "@/components/Checkbox";
 import SubmitButton from "@/components/SubmitButton";
+import { LinksRouteTo } from "@prisma/client";
 
 export default function Appearance() {
   const { updateSettings } = useLocalSettingsStore();
@@ -20,6 +21,7 @@ export default function Appearance() {
   const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
   const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
     useState<boolean>(false);
+  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(user.linksRouteTo);
 
   useEffect(() => {
     setUser({
@@ -27,8 +29,9 @@ export default function Appearance() {
       archiveAsScreenshot,
       archiveAsPDF,
       archiveAsWaybackMachine,
+      linksRouteTo
     });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
+  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine, linksRouteTo]);
 
   function objectIsEmpty(obj: object) {
     return Object.keys(obj).length === 0;
@@ -39,6 +42,7 @@ export default function Appearance() {
       setArchiveAsScreenshot(account.archiveAsScreenshot);
       setArchiveAsPDF(account.archiveAsPDF);
       setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+      setLinksRouteTo(account.linksRouteTo);
     }
   }, [account]);
 
@@ -70,11 +74,10 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
-                localStorage.getItem("theme") === "dark"
-                  ? "dark:outline-primary text-primary"
-                  : "text-white"
-              }`}
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${localStorage.getItem("theme") === "dark"
+                ? "dark:outline-primary text-primary"
+                : "text-white"
+                }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
               <i className="bi-moon-fill text-6xl"></i>
@@ -83,11 +86,10 @@ export default function Appearance() {
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
-                localStorage.getItem("theme") === "light"
-                  ? "outline-primary text-primary"
-                  : "text-black"
-              }`}
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${localStorage.getItem("theme") === "light"
+                ? "outline-primary text-primary"
+                : "text-black"
+                }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
               <i className="bi-sun-fill text-6xl"></i>
@@ -133,7 +135,32 @@ export default function Appearance() {
 
           <div className="divider my-3"></div>
 
-          <p>Clicking on Links should:</p>
+          <p>Clicking on Links should open:</p>
+          <div className="p-3">
+            <Checkbox
+              label="Original"
+              state={linksRouteTo === LinksRouteTo.ORIGINAL}
+              onClick={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
+            />
+
+            <Checkbox
+              label="PDF"
+              state={linksRouteTo === LinksRouteTo.PDF}
+              onClick={() => setLinksRouteTo(LinksRouteTo.PDF)}
+            />
+
+            <Checkbox
+              label="Readable"
+              state={linksRouteTo === LinksRouteTo.READABLE}
+              onClick={() => setLinksRouteTo(LinksRouteTo.READABLE)}
+            />
+
+            <Checkbox
+              label="Screenshot"
+              state={linksRouteTo === LinksRouteTo.SCREENSHOT}
+              onClick={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
+            />
+          </div>
         </div>
 
         <SubmitButton

From 39261de45ea67fd04006ed71c418f848c567dd7c Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Thu, 8 Feb 2024 00:44:41 -0600
Subject: [PATCH 2/4] rename function

---
 components/LinkViews/LinkCard.tsx                            | 4 ++--
 components/LinkViews/LinkList.tsx                            | 5 ++---
 ...rateHrefBasedOnUserPreference .ts => generateLinkHref.ts} | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)
 rename lib/client/{generateHrefBasedOnUserPreference .ts => generateLinkHref.ts} (85%)

diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index c60174c5..20694b34 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -15,7 +15,7 @@ import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 import Link from "next/link";
 import LinkIcon from "./LinkComponents/LinkIcon";
 import useOnScreen from "@/hooks/useOnScreen";
-import { generateHrefBasedOnUserPreference } from "@/lib/client/generateHrefBasedOnUserPreference ";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -86,7 +86,7 @@ export default function LinkGrid({
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
       <Link
-        href={generateHrefBasedOnUserPreference(link)}
+        href={generateLinkHref(link)}
         target="_blank"
         className="rounded-2xl cursor-pointer"
       >
diff --git a/components/LinkViews/LinkList.tsx b/components/LinkViews/LinkList.tsx
index 92115ce1..0ab489af 100644
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@@ -1,5 +1,4 @@
 import {
-  ArchivedFormat,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
@@ -13,7 +12,7 @@ import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection
 import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
 import { isPWA } from "@/lib/client/utils";
-import { generateLinkHrefBasedOnUserPreference } from "@/lib/client/generateHrefBasedOnUserPreference ";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -61,7 +60,7 @@ export default function LinkCardCompact({
           } duration-200 rounded-lg`}
       >
         <Link
-          href={generateLinkHrefBasedOnUserPreference(link)}
+          href={generateLinkHref(link)}
           target="_blank"
           className="flex items-start cursor-pointer"
         >
diff --git a/lib/client/generateHrefBasedOnUserPreference .ts b/lib/client/generateLinkHref.ts
similarity index 85%
rename from lib/client/generateHrefBasedOnUserPreference .ts
rename to lib/client/generateLinkHref.ts
index 10ef13bd..acb89c4a 100644
--- a/lib/client/generateHrefBasedOnUserPreference .ts	
+++ b/lib/client/generateLinkHref.ts
@@ -2,7 +2,7 @@ import useAccountStore from "@/store/account";
 import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { LinksRouteTo } from "@prisma/client";
 
-export const generateLinkHrefBasedOnUserPreference = (link: LinkIncludingShortenedCollectionAndTags): string => {
+export const generateLinkHref = (link: LinkIncludingShortenedCollectionAndTags): string => {
 	const { account } = useAccountStore();
 
 	switch (account.linksRouteTo) {

From ef08edf1fb257867fc506db243d0c78043ce8126 Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Thu, 8 Feb 2024 00:59:17 -0600
Subject: [PATCH 3/4] Verify the preference is available

---
 lib/client/generateLinkHref.ts   | 9 +++++++++
 lib/shared/getArchiveValidity.ts | 8 +++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/lib/client/generateLinkHref.ts b/lib/client/generateLinkHref.ts
index acb89c4a..d122383c 100644
--- a/lib/client/generateLinkHref.ts
+++ b/lib/client/generateLinkHref.ts
@@ -1,18 +1,27 @@
 import useAccountStore from "@/store/account";
 import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { LinksRouteTo } from "@prisma/client";
+import { pdfAvailable, readabilityAvailable, screenshotAvailable } from "../shared/getArchiveValidity";
 
 export const generateLinkHref = (link: LinkIncludingShortenedCollectionAndTags): string => {
 	const { account } = useAccountStore();
 
+	// Return the links href based on the account's preference
+	// If the user's preference is not available, return the original link
 	switch (account.linksRouteTo) {
 		case LinksRouteTo.ORIGINAL:
 			return link.url || '';
 		case LinksRouteTo.PDF:
+			if (!pdfAvailable(link)) return link.url || '';
+
 			return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
 		case LinksRouteTo.READABLE:
+			if (!readabilityAvailable(link)) return link.url || '';
+
 			return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
 		case LinksRouteTo.SCREENSHOT:
+			if (!screenshotAvailable(link)) return link.url || '';
+
 			return `/preserved/${link?.id}?format=${link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg}`;
 		default:
 			return link.url || '';
diff --git a/lib/shared/getArchiveValidity.ts b/lib/shared/getArchiveValidity.ts
index 395de00c..ec74b22a 100644
--- a/lib/shared/getArchiveValidity.ts
+++ b/lib/shared/getArchiveValidity.ts
@@ -1,4 +1,6 @@
-export function screenshotAvailable(link: any) {
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+
+export function screenshotAvailable(link: LinkIncludingShortenedCollectionAndTags) {
   return (
     link &&
     link.image &&
@@ -7,13 +9,13 @@ export function screenshotAvailable(link: any) {
   );
 }
 
-export function pdfAvailable(link: any) {
+export function pdfAvailable(link: LinkIncludingShortenedCollectionAndTags) {
   return (
     link && link.pdf && link.pdf !== "pending" && link.pdf !== "unavailable"
   );
 }
 
-export function readabilityAvailable(link: any) {
+export function readabilityAvailable(link: LinkIncludingShortenedCollectionAndTags) {
   return (
     link &&
     link.readable &&

From efddd558419d15e64fc756a2d9487d20f8a1459b Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 8 Feb 2024 08:45:14 -0500
Subject: [PATCH 4/4] change the checkboxes to radio button

---
 pages/settings/preference.tsx | 114 ++++++++++++++++++++++++----------
 1 file changed, 82 insertions(+), 32 deletions(-)

diff --git a/pages/settings/preference.tsx b/pages/settings/preference.tsx
index a92f6aed..a831b921 100644
--- a/pages/settings/preference.tsx
+++ b/pages/settings/preference.tsx
@@ -21,7 +21,9 @@ export default function Appearance() {
   const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
   const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
     useState<boolean>(false);
-  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(user.linksRouteTo);
+  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
+    user.linksRouteTo
+  );
 
   useEffect(() => {
     setUser({
@@ -29,9 +31,15 @@ export default function Appearance() {
       archiveAsScreenshot,
       archiveAsPDF,
       archiveAsWaybackMachine,
-      linksRouteTo
+      linksRouteTo,
     });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine, linksRouteTo]);
+  }, [
+    account,
+    archiveAsScreenshot,
+    archiveAsPDF,
+    archiveAsWaybackMachine,
+    linksRouteTo,
+  ]);
 
   function objectIsEmpty(obj: object) {
     return Object.keys(obj).length === 0;
@@ -74,10 +82,11 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${localStorage.getItem("theme") === "dark"
-                ? "dark:outline-primary text-primary"
-                : "text-white"
-                }`}
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+                localStorage.getItem("theme") === "dark"
+                  ? "dark:outline-primary text-primary"
+                  : "text-white"
+              }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
               <i className="bi-moon-fill text-6xl"></i>
@@ -86,10 +95,11 @@ export default function Appearance() {
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${localStorage.getItem("theme") === "light"
-                ? "outline-primary text-primary"
-                : "text-black"
-                }`}
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+                localStorage.getItem("theme") === "light"
+                  ? "outline-primary text-primary"
+                  : "text-black"
+              }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
               <i className="bi-sun-fill text-6xl"></i>
@@ -135,31 +145,71 @@ export default function Appearance() {
 
           <div className="divider my-3"></div>
 
-          <p>Clicking on Links should open:</p>
+          <p>Clicking on Links should:</p>
           <div className="p-3">
-            <Checkbox
-              label="Original"
-              state={linksRouteTo === LinksRouteTo.ORIGINAL}
-              onClick={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
-            />
+            <label
+              className="label cursor-pointer flex gap-2 justify-start"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Original"
+                checked={linksRouteTo === LinksRouteTo.ORIGINAL}
+                onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
+              />
+              <span className="label-text">Open the original content</span>
+            </label>
 
-            <Checkbox
-              label="PDF"
-              state={linksRouteTo === LinksRouteTo.PDF}
-              onClick={() => setLinksRouteTo(LinksRouteTo.PDF)}
-            />
+            <label
+              className="label cursor-pointer flex gap-2 justify-start"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="PDF"
+                checked={linksRouteTo === LinksRouteTo.PDF}
+                onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
+              />
+              <span className="label-text">Open PDF, if available</span>
+            </label>
 
-            <Checkbox
-              label="Readable"
-              state={linksRouteTo === LinksRouteTo.READABLE}
-              onClick={() => setLinksRouteTo(LinksRouteTo.READABLE)}
-            />
+            <label
+              className="label cursor-pointer flex gap-2 justify-start"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Readable"
+                checked={linksRouteTo === LinksRouteTo.READABLE}
+                onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
+              />
+              <span className="label-text">Open Readable, if available</span>
+            </label>
 
-            <Checkbox
-              label="Screenshot"
-              state={linksRouteTo === LinksRouteTo.SCREENSHOT}
-              onClick={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
-            />
+            <label
+              className="label cursor-pointer flex gap-2 justify-start"
+              tabIndex={0}
+              role="button"
+            >
+              <input
+                type="radio"
+                name="link-preference-radio"
+                className="radio checked:bg-primary"
+                value="Screenshot"
+                checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
+                onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
+              />
+              <span className="label-text">Open Screenshot, if available</span>
+            </label>
           </div>
         </div>