hide link for small screens

Author: R-Sandor

frontend/components/Bookmark/BookmarkCard.tsx

@@ -27,7 +27,7 @@ interface BookmarkProp {
  */
 async function addTagToBookmark(
   bookmark: Bookmark,
-  tag: string
+  tag: string,
 ): Promise<TagAction> {
   let action: TagAction = {
     type: "add",
@@ -159,7 +159,7 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
 
   const isChanges = (
     beforeEdit: RefObject<Bookmark>,
-    edit: RefObject<Bookmark>
+    edit: RefObject<Bookmark>,
   ) => {
     return JSON.stringify(beforeEdit.current) != JSON.stringify(edit.current);
   };
@@ -201,7 +201,7 @@ export default function BookmarkCard({ bookmark }: Readonly<BookmarkProp>) {
     const tagId = bookmark.tags[idx].id;
     if (currentBookmark.current) {
       currentBookmark.current.tags = currentBookmark.current.tags.filter(
-        (t, i) => i !== idx
+        (_t, i) => i !== idx,
       );
     }
     api.deleteTagById(bookmark.id, tagId);

frontend/components/Bookmark/CardBody.tsx

@@ -4,6 +4,7 @@ import Bookmark from "@type/Bookmarks/Bookmark";
 import EditableField from "./EditableField";
 import { ScrapableBookmarkToggle } from "./ScrapableToggle";
 import style from "./bookmarkCard.module.scss";
+import { ScreenSizeProvider } from "@/contexts/ScreenSizeContext";
 
 interface CardBodyProp {
   bookmark: Readonly<Bookmark>;
@@ -22,9 +23,15 @@ export default function CardBody({
 }: Readonly<CardBodyProp>) {
   const [isScrapable, setIsScrapable] = useState(bookmark.scrapable);
 
+  const handleClick = () => {
+    const isMobile = window.innerWidth < 768;
+    if (isMobile) {
+      window.open(bookmark.url);
+    }
+  };
   return (
     <Card.Body className={``}>
-      <Card.Title className={`${style.cTitle}`}>
+      <Card.Title className={`${style.cTitle}`} onClick={handleClick}>
         {inEditMode ? (
           <EditableField
             fieldValue={bookmark.title}
@@ -62,9 +69,11 @@ export default function CardBody({
           </div>
         </div>
       ) : (
-        <Card.Link target="_blank" href={bookmark.url}>
-          {bookmark.url}
-        </Card.Link>
+        <ScreenSizeProvider>
+          <Card.Link target="_blank" href={bookmark.url}>
+            {bookmark.url}
+          </Card.Link>
+        </ScreenSizeProvider>
       )}
       {highlight ? (
         <div>