really shitty popup setup

src/components/media/MediaCard.tsx

@@ -201,15 +201,12 @@ export function MediaCard(props: MediaCardProps) {
 
   if (!canLink) return <span>{content}</span>;
   return (
-    <Link
+    <div
-      to={link}
       tabIndex={-1}
-      className={classNames(
+      className={classNames("tabbable", props.closable ? "hover:cursor-default" : "")}
-        "tabbable",
+      onClick={props.onClick}
-        props.closable ? "hover:cursor-default" : "",
-      )}
     >
       {content}
-    </Link>
+    </div>
   );
 }

src/components/media/PopupModal.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface PopupModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+
+export function PopupModal({ isVisible, onClose }: PopupModalProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="popup-overlay">
+      <button onClick={onClose}>Close</button>
+    </div>
+  );
+}

src/components/media/WatchedMediaCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { usePlayerStore } from "@/stores/player/store";
 import { useProgressStore } from "@/stores/progress";
@@ -7,6 +7,7 @@ import {
   shouldShowProgress,
 } from "@/stores/progress/utils";
 import { MediaItem } from "@/utils/mediaTypes";
+import { PopupModal } from "./PopupModal";
 
 import { MediaCard } from "./MediaCard";
 
@@ -38,11 +39,12 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
   const percentage = itemToDisplay?.show
     ? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100
     : undefined;
-
   const setPlayingTitle = usePlayerStore((state) => state.setPlayingTitle);
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
 
   const handleClick = useCallback(() => {
     setPlayingTitle(props.media.id, props.media.title, props.media.type);
+    setIsPopupVisible(!isPopupVisible);
     console.log(
       usePlayerStore.getState().playingTitle.title,
       usePlayerStore.getState().playingTitle.id,
@@ -50,15 +52,19 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
     );
   }, [setPlayingTitle, props.media.id, props.media.title, props.media.type]);
 
+
   return (
-    <MediaCard
+    <>
-      media={props.media}
+      <MediaCard
-      series={formatSeries(itemToDisplay)}
+        media={props.media}
-      linkable
+        series={formatSeries(itemToDisplay)}
-      percentage={percentage}
+        linkable
-      onClose={props.onClose}
+        percentage={percentage}
-      closable={props.closable}
+        onClose={props.onClose}
-      onClick={handleClick}
+        closable={props.closable}
-    />
+        onClick={handleClick}
+      />
+      <PopupModal isVisible={isPopupVisible} onClose={() => setIsPopupVisible(false)} />
+    </>
   );
 }