Merge pull request #16 from Pasithea0/main

Added bookmarks to card thingy

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 (

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"
+    />
+  );
+}

src/components/media/MediaCard.tsx

@@ -6,8 +6,10 @@ 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";
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
 
@@ -56,6 +58,8 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const [searchQuery] = useSearchQuery();
+
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -141,6 +145,12 @@ function MediaCardContent({
             </>
           ) : null}
 
+          {canLink && 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"