From 93b835e1fdc548f4ee6583d54232a43f30c979cf Mon Sep 17 00:00:00 2001
From: Quick <31828688+Quick104@users.noreply.github.com>
Date: Fri, 29 May 2026 14:13:51 -0400
Subject: [PATCH] feat(calendar): dim and check-mark already-watched event
 cards

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/calendar/CalendarEventCard.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/components/calendar/CalendarEventCard.tsx b/web/src/components/calendar/CalendarEventCard.tsx
index 4f670b8d..c08af067 100644
--- a/web/src/components/calendar/CalendarEventCard.tsx
+++ b/web/src/components/calendar/CalendarEventCard.tsx
@@ -12,6 +12,7 @@ import type { CalendarEvent } from "@/hooks/queries/calendar";
 export default function CalendarEventCard({ event }: { event: CalendarEvent }) {
   const [loaded, setLoaded] = useState(false);
   const thumbhashUrl = event.poster_thumbhash ? decodeThumbhash(event.poster_thumbhash) : "";
+  const watched = event.watched === true;
 
   const href =
     event.type === "movie"
@@ -25,7 +26,7 @@ export default function CalendarEventCard({ event }: { event: CalendarEvent }) {
     <div className="media-card group/card">
       <ViewTransitionLink to={href} className="block overflow-hidden rounded-xl">
         <div
-          className="media-card-image relative aspect-[2/3]"
+          className={`media-card-image relative aspect-[2/3] ${watched ? "opacity-60 grayscale" : ""}`}
           style={
             thumbhashUrl
               ? {
@@ -62,10 +63,24 @@ export default function CalendarEventCard({ event }: { event: CalendarEvent }) {
               ))}
             </div>
           )}
+          {watched && (
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+              <span
+                className="bg-background/70 text-foreground flex h-8 w-8 items-center justify-center rounded-full text-base backdrop-blur-sm"
+                aria-label="Watched"
+              >
+                ✓
+              </span>
+            </div>
+          )}
         </div>
       </ViewTransitionLink>
       <ViewTransitionLink to={href} className="block px-1 pt-3">
-        <div className="truncate text-[14px] font-semibold tracking-tight">{event.title}</div>
+        <div
+          className={`truncate text-[14px] font-semibold tracking-tight ${watched ? "text-muted-foreground" : ""}`}
+        >
+          {event.title}
+        </div>
         {subtitle && (
           <div className="text-muted-foreground mt-1 truncate text-[11px] font-medium tracking-[0.14em] uppercase">
             {subtitle}