feat(video-card): show deleting overlay and disable interactions during delete

components/video-card.tsx

@@ -182,7 +182,12 @@ export function VideoCard({ video, projectId, onDeleted }: VideoCardProps) {
 
   return (
     <>
-      <Card className="group overflow-hidden transition-colors hover:bg-accent/50 cursor-pointer">
+      <div className="relative">
+        <Card
+          className={`group overflow-hidden transition-colors hover:bg-accent/50 cursor-pointer ${
+            isDeleting ? 'pointer-events-none opacity-70' : ''
+          }`}
+        >
           <Link href={`/projects/${projectId}/videos/${video.id}`}>
             {/* Thumbnail */}
             <div className="relative aspect-video bg-muted overflow-hidden">
@@ -244,6 +249,7 @@ export function VideoCard({ video, projectId, onDeleted }: VideoCardProps) {
                     size="icon"
                     className="h-8 w-8 shrink-0"
                     onClick={(e) => e.stopPropagation()}
+                    disabled={isDeleting}
                   >
                     <MoreVertical className="h-4 w-4" />
                   </Button>
@@ -276,6 +282,16 @@ export function VideoCard({ video, projectId, onDeleted }: VideoCardProps) {
           </CardContent>
         </Card>
 
+        {isDeleting && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-background/60 backdrop-blur-[1px]">
+            <div className="flex items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-sm font-medium shadow-sm">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Deleting...
+            </div>
+          </div>
+        )}
+      </div>
+
       {/* Edit Dialog */}
       <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
         <DialogContent>