From 690ea3480cc92113df300beb8772e651fcf94673 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 28 Apr 2024 22:08:34 -0600
Subject: [PATCH 1/4] Create MediaBookmark.tsx

---
 src/components/media/MediaBookmark.tsx | 44 ++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/media/MediaBookmark.tsx

diff --git a/src/components/media/MediaBookmark.tsx b/src/components/media/MediaBookmark.tsx
new file mode 100644
index 00000000..802fd7f2
--- /dev/null
+++ b/src/components/media/MediaBookmark.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useMemo } from "react";
+
+import { Icons } from "@/components/Icon";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { PlayerMeta } from "@/stores/player/slices/source";
+import { MediaItem } from "@/utils/mediaTypes";
+
+import { IconPatch } from "../buttons/IconPatch";
+
+interface MediaBookmarkProps {
+  media: MediaItem;
+}
+
+export function MediaBookmarkButton({ media }: MediaBookmarkProps) {
+  const addBookmark = useBookmarkStore((s) => s.addBookmark);
+  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const meta: PlayerMeta | undefined = useMemo(() => {
+    return media.year !== undefined
+      ? {
+          type: media.type,
+          title: media.title,
+          tmdbId: media.id,
+          releaseYear: media.year,
+          poster: media.poster,
+        }
+      : undefined;
+  }, [media]);
+  const isBookmarked = !!bookmarks[meta?.tmdbId ?? ""];
+
+  const toggleBookmark = useCallback(() => {
+    if (!meta) return;
+    if (isBookmarked) removeBookmark(meta.tmdbId);
+    else addBookmark(meta);
+  }, [isBookmarked, meta, addBookmark, removeBookmark]);
+
+  return (
+    <IconPatch
+      onClick={toggleBookmark}
+      icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
+      className="p-3 opacity-80 transition-opacity duration-200 hover:opacity-100"
+    />
+  );
+}

From 6a7ea0ea2f547d4456e548f48f2d202d5975b1e6 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 28 Apr 2024 22:09:11 -0600
Subject: [PATCH 2/4] Update MediaCard.tsx

---
 src/components/media/MediaCard.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 47fbf051..24b131a5 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -8,6 +8,7 @@ import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
 import { MediaItem } from "@/utils/mediaTypes";
 
+import { MediaBookmarkButton } from "./MediaBookmark";
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
 
@@ -66,7 +67,7 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
+      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
         canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
       tabIndex={canLink ? 0 : -1}
@@ -81,13 +82,13 @@ function MediaCardContent({
         })}
       />
       <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-[0.5em] transition-transform duration-300 ${
+        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
           canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
+            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
             {
               "group-hover:rounded-lg": canLink,
             },
@@ -141,14 +142,20 @@ function MediaCardContent({
             </>
           ) : null}
 
+          {canLink ? (
+            <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 ${
+            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
               closable ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
           >
             <IconPatch
               clickable
-              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
+              className="text-2xl text-mediaCard-badgeText"
               onClick={() => closable && onClose?.()}
               icon={Icons.X}
             />

From bc4b28fd9ca63ed04ddb96d38157afefd7e1c824 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 28 Apr 2024 22:16:50 -0600
Subject: [PATCH 3/4] revert sudoflix customs

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

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 24b131a5..2152963a 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -67,7 +67,7 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
+      className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
         canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
       tabIndex={canLink ? 0 : -1}
@@ -82,13 +82,13 @@ function MediaCardContent({
         })}
       />
       <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
+        className={`pointer-events-auto relative mb-2 p-[0.5em] transition-transform duration-300 ${
           canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
+            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
             {
               "group-hover:rounded-lg": canLink,
             },
@@ -149,13 +149,13 @@ function MediaCardContent({
           ) : null}
 
           <div
-            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
+            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"
             }`}
           >
             <IconPatch
               clickable
-              className="text-2xl text-mediaCard-badgeText"
+              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
               onClick={() => closable && onClose?.()}
               icon={Icons.X}
             />

From 9a8ecf2e8824ac63459e4e6e9f3c4bff124b5aac Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Tue, 30 Apr 2024 09:53:31 -0600
Subject: [PATCH 4/4] Bookmarks only while browsing

Disabled bookmarks when there is nothing in the search bar.
---
 src/components/form/SearchBar.tsx  | 2 +-
 src/components/media/MediaCard.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx
index 6ac6128f..f3cc15f8 100644
--- a/src/components/form/SearchBar.tsx
+++ b/src/components/form/SearchBar.tsx
@@ -18,7 +18,7 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
     const [focused, setFocused] = useState(false);
 
     function setSearch(value: string) {
-      props.onChange(value, false);
+      props.onChange(value, true);
     }
 
     return (
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index e1da9d71..c25fc0d5 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 { useSearchQuery } from "@/hooks/useSearchQuery";
 import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaBookmarkButton } from "./MediaBookmark";
@@ -57,6 +58,8 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const [searchQuery] = useSearchQuery();
+
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -142,7 +145,7 @@ function MediaCardContent({
             </>
           ) : null}
 
-          {canLink ? (
+          {canLink && searchQuery.length > 0 ? (
             <div className="absolute" onClick={(e) => e.preventDefault()}>
               <MediaBookmarkButton media={media} />
             </div>