Allow users to choose what clicking links opens

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"
       >

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}

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>