From 7e86e364c1b3c3aeb046f50153332b574741f0f4 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 27 Jul 2024 11:10:38 -0600
Subject: [PATCH 1/6] this feels wrong but ok

---
 src/components/media/MediaCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index ebc810eb..f0693c62 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -145,11 +145,11 @@ function MediaCardContent({
             </>
           ) : null}
 
-          {searchQuery.length > 0 ? (
+          {true && (
             <div className="absolute" onClick={(e) => e.preventDefault()}>
               <MediaBookmarkButton media={media} />
             </div>
-          ) : null}
+          )}
 
           <div
             className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${

From 44dddead7cabc2431566012308282b08a19f0d3e Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:25:57 -0600
Subject: [PATCH 2/6] (Always Enabled) Removed unnecessary lines

---
 src/components/media/MediaCard.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index f0693c62..f4463e81 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -6,7 +6,6 @@ import { Link } from "react-router-dom";
 import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
-import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaBookmarkButton } from "./MediaBookmark";
@@ -58,8 +57,6 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
-  const [searchQuery] = useSearchQuery();
-
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -145,11 +142,9 @@ function MediaCardContent({
             </>
           ) : null}
 
-          {true && (
-            <div className="absolute" onClick={(e) => e.preventDefault()}>
-              <MediaBookmarkButton media={media} />
-            </div>
-          )}
+          <div className="absolute" onClick={(e) => e.preventDefault()}>
+            <MediaBookmarkButton media={media} />
+          </div>
 
           <div
             className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${

From 4e52bf65b38c09183a2b56c8ead20d13b4765e9a Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:26:29 -0600
Subject: [PATCH 3/6] (Enabled on hover) Added new css class

---
 src/components/media/MediaCard.tsx | 5 ++++-
 src/components/utils/Flare.css     | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index f4463e81..fb29d5e4 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -142,7 +142,10 @@ function MediaCardContent({
             </>
           ) : null}
 
-          <div className="absolute" onClick={(e) => e.preventDefault()}>
+          <div
+            className="absolute bookmark-button"
+            onClick={(e) => e.preventDefault()}
+          >
             <MediaBookmarkButton media={media} />
           </div>
 
diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index 1c17cda8..b46bdbc6 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -5,3 +5,12 @@
 .hover\:flare-enabled:hover .flare-light {
   opacity: 1 !important;
 }
+
+.bookmark-button {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.group:hover .bookmark-button {
+  opacity: 1;
+}

From 6368e7de6879bbaa76088f9cacd535e2127f7044 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:32:47 -0600
Subject: [PATCH 4/6] Aways visible on mobile?

always show if screen is smaller than 1024px
---
 src/components/utils/Flare.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index b46bdbc6..c4a721da 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -14,3 +14,9 @@
 .group:hover .bookmark-button {
   opacity: 1;
 }
+
+@media (max-width: 1024px) {
+  .bookmark-button {
+    opacity: 1 !important;
+  }
+}

From 3dcdcba088243bbdd36694e473355ab09e227438 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:30:32 -0600
Subject: [PATCH 5/6] incorporate useIsMobile

this does break ipad pro but whatever
---
 src/components/media/MediaCard.tsx | 7 ++++++-
 src/components/utils/Flare.css     | 6 ------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index fb29d5e4..1b151c44 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaBookmarkButton } from "./MediaBookmark";
@@ -57,6 +58,8 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const { isMobile } = useIsMobile();
+
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -143,7 +146,9 @@ function MediaCardContent({
           ) : null}
 
           <div
-            className="absolute bookmark-button"
+            className={classNames("absolute", {
+              "bookmark-button": !isMobile,
+            })}
             onClick={(e) => e.preventDefault()}
           >
             <MediaBookmarkButton media={media} />
diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index c4a721da..b46bdbc6 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -14,9 +14,3 @@
 .group:hover .bookmark-button {
   opacity: 1;
 }
-
-@media (max-width: 1024px) {
-  .bookmark-button {
-    opacity: 1 !important;
-  }
-}

From 8d0ae1b3b9d01ff2049c3d2b5f3e5a5cf15a9d04 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:33:05 -0600
Subject: [PATCH 6/6] always visible when searching, hover to show on homepage

this kind of fixes the ipad problem, because they will see the bookmark when searching, but to edit homepage they will have to use the edit bookmarks button.
---
 src/components/media/MediaCard.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 1b151c44..edf10769 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -7,6 +7,7 @@ import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
 import { useIsMobile } from "@/hooks/useIsMobile";
+import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaBookmarkButton } from "./MediaBookmark";
@@ -58,6 +59,8 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const [searchQuery] = useSearchQuery();
+
   const { isMobile } = useIsMobile();
 
   if (media.year) {
@@ -154,6 +157,12 @@ function MediaCardContent({
             <MediaBookmarkButton media={media} />
           </div>
 
+          {searchQuery.length > 0 ? (
+            <div className="absolute" onClick={(e) => e.preventDefault()}>
+              <MediaBookmarkButton media={media} />
+            </div>
+          ) : null}
+
           <div
             className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
               closable ? "opacity-100" : "pointer-events-none opacity-0"