packages/client/src/components/gallery/GalleryCard.tsx

@@ -1,7 +1,7 @@
 import type { Document } from "dbtype/api";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
 import TagBadge from "@/components/gallery/TagBadge.tsx";
-import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, useLayoutEffect, useRef, useState } from "react";
 import { LazyImage } from "./LazyImage.tsx";
 import StyledLink from "./StyledLink.tsx";
 
@@ -22,6 +22,7 @@ export function GalleryCard({
 }: { doc: Document; }) {
     const ref = useRef<HTMLUListElement>(null);
     const [clipCharCount, setClipCharCount] = useState(200);
+    const isDeleted = x.deleted_at !== null;
 
     const artists = x.tags.filter(x => x.startsWith("artist:")).map(x => x.replace("artist:", ""));
     const groups = x.tags.filter(x => x.startsWith("group:")).map(x => x.replace("group:", ""));
@@ -44,14 +45,17 @@ export function GalleryCard({
             window.removeEventListener("resize", listener);
         };
     }, []);
-    
+
     return <Card className="flex h-[200px]">
-        <div className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none bg-[#272733] flex items-center justify-center">
+        {isDeleted ? <div className="bg-primary border flex items-center justify-center h-[200px] w-[142px] rounded-xl">
+            <span className="text-primary-foreground text-lg font-bold">Deleted</span>
+        </div> : <div className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none bg-[#272733] flex items-center justify-center">
             <LazyImage src={`/api/doc/${x.id}/comic/thumbnail`}
                 alt={x.title}
                 className="max-h-full max-w-full object-cover object-center"
             />
         </div>
+        }
         <div className="flex-1 flex flex-col">
             <CardHeader className="flex-none">
                 <CardTitle>